/* Recovered streaming layout. Shared tokens and navigation come from styles.css.
   This file owns only the local preview's layout and can be restyled independently. */
.vault-stream-page {
  --vault-red: var(--accent-red-strong, #c1121f);
  --vault-red-hot: #ff5260;
  --vault-ink: #f6f1e7;
  --vault-muted: rgba(246, 241, 231, 0.68);
  --vault-faint: rgba(246, 241, 231, 0.54);
  --vault-line: rgba(246, 241, 231, 0.16);
  --vault-line-strong: rgba(246, 241, 231, 0.3);
  --vault-info-box-radius: 12px;
  background: var(--bg-primary, #050505);
  color: var(--vault-ink);
  min-height: 100vh;
}

.vault-stream-page::before {
  display: none;
}

.vault-stream-page > .site-header {
  z-index: 20000;
}

.vault-stream-page.nav-drawer-open > .site-header {
  z-index: 60000;
}

.vault-stream-page.filter-sheet-open > .site-header {
  z-index: 60000;
}

@media (max-width: 768px) {
  /* Keep the document as the scroll owner so the header can remain sticky. */
  html[data-theme] body.vault-stream-page:not(:is(.detail-modal-open, .filter-sheet-open, .nav-drawer-open, .vault-lightbox-open)) {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}

html:has(body.vault-stream-page):not(.nav-drawer-open) {
  scrollbar-gutter: stable;
}

.vault-archive {
  scrollbar-gutter: stable;
}

.vault-logo-wrap {
  align-items: center;
  display: inline-flex;
  min-width: 0;
}

.vault-stream-main {
  overflow: hidden;
}

.vault-hero {
  --ds-modal-card-radius: 24px;
  --ds-modal-card-stroke: var(--modal-shadowbox-stroke, rgba(128, 128, 128, 0.52));
  --ds-modal-card-surface:
    linear-gradient(180deg, rgba(var(--text-primary-rgb), 0.035), rgba(var(--text-primary-rgb), 0.015)),
    var(--modal-shadowbox-surface, rgba(var(--bg-panel-rgb), 0.94));
  --detail-modal-inline-pad: clamp(0.85rem, 3vw, 1.25rem);
  --detail-modal-block-start: calc(0.85rem + env(safe-area-inset-top, 0px));
  --detail-modal-block-end: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  --detail-modal-shell-width: 44rem;
  --detail-modal-max-width: min(var(--detail-modal-shell-width), 100%);
  --detail-modal-panel-min-height: calc(100dvh - var(--detail-modal-block-start) - var(--detail-modal-block-end));
  --detail-modal-stroke: var(--ds-modal-card-stroke);
  --ds-modal-card-shadow:
    0 26px 82px rgba(0, 0, 0, 0.56),
    0 0 0 1px var(--ds-modal-card-stroke);
  --detail-modal-shadow: var(--modal-shadowbox-shadow, var(--ds-modal-card-shadow));
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.78);
  display: none;
  inset: 0;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.6rem);
  position: fixed;
  z-index: 50000;
}

.vault-hero.is-open {
  display: grid;
  height: 100vh;
  min-height: 100vh;
  place-items: center;
}

.vault-lightbox-open {
  overflow: hidden;
}

html:has(body.vault-lightbox-open) {
  overflow: hidden;
}

.vault-lightbox-open .vault-stream-main {
  z-index: 50000;
}

@keyframes vaultDetailCardExpand {
  0% {
    clip-path: inset(0 round 0.65rem);
    opacity: 0.78;
    transform:
      translate3d(var(--detail-enter-x, 0px), var(--detail-enter-y, 0px), 0)
      scale(var(--detail-enter-scale-x, 0.88), var(--detail-enter-scale-y, 0.88));
  }

  64% {
    clip-path: inset(0 round 0.28rem);
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.012);
  }

  100% {
    clip-path: inset(0 round 0);
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes vaultDetailCardCollapse {
  0% {
    clip-path: inset(0 round 0);
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    clip-path: inset(0 round 0.65rem);
    opacity: 0.72;
    transform:
      translate3d(var(--detail-enter-x, 0px), var(--detail-enter-y, 0px), 0)
      scale(var(--detail-enter-scale-x, 0.88), var(--detail-enter-scale-y, 0.88));
  }
}

@keyframes vaultDetailContentSettle {
  0%,
  34% {
    opacity: 0;
    transform: translateY(0.8rem) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes vaultDetailContentFade {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(0.35rem) scale(0.985);
  }
}

@keyframes vaultModalStrokeSweep {
  0% {
    background-position: 0% 50%;
    opacity: 0.42;
  }

  45% {
    opacity: 0.9;
  }

  100% {
    background-position: 200% 50%;
    opacity: 0.42;
  }
}

.vault-hero__poster {
  background-color: #060606;
  background-clip: padding-box;
  border: 1px solid var(--vault-line);
  border-color: rgba(246, 241, 231, 0.18);
  box-shadow:
    inset 0 4px 0 rgba(0, 0, 0, 0.92),
    inset 0 -10px 0 rgba(0, 0, 0, 0.94),
    0 34px 90px rgba(0, 0, 0, 0.58);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  isolation: isolate;
  max-width: 1830px;
  min-height: min(780px, calc(100vh - 2rem));
  overflow: hidden;
  position: relative;
  width: min(100%, 1830px);
}

.vault-hero__poster.ds-modal-card {
  border: 0;
  border-radius: var(--ds-modal-card-radius);
}

.vault-hero__scroll {
  display: contents;
}

.vault-hero__drag-handle,
.vault-hero__photo {
  display: none;
}

.vault-stream-page .vault-hero .vault-hero__poster > .wrestler-detail-panel__share {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  z-index: 50010;
}

.vault-stream-page .vault-hero .wrestler-share-toast.is-visible {
  display: block;
  position: absolute;
  top: 64px;
  left: 12px;
  right: auto;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #9ae6b4;
  border-radius: 0;
  font: 700 12px/16px var(--body);
  background: #276749;
  color: #f7fff9;
  z-index: 50010;
}

body.vault-stream-page > .wrestler-share-toast {
  z-index: 60010;
}

.vault-stream-page .vault-hero .vault-hero__poster > .wrestler-detail-panel__share.is-confirmed {
  background: #276749;
  border-color: #9ae6b4;
  color: #f7fff9;
}

.vault-hero__poster::before,
.vault-hero__poster::after {
  pointer-events: none;
}

.vault-hero__poster::before {
  background: var(--hero-image);
  background-position: var(--hero-image-position, center);
  background-repeat: no-repeat;
  background-size: var(--hero-image-size, cover);
  content: "";
  inset: 0 clamp(260px, 18vw, 340px) 0 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.vault-hero__poster::after {
  background:
    linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.48) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.48) 36%, rgba(0, 0, 0, 0.04) 68%, rgba(0, 0, 0, 0.06) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.04) 42%, rgba(0, 0, 0, 0.16) 100%),
    radial-gradient(ellipse at 4% 96%, rgba(195, 18, 31, 0.2), rgba(195, 18, 31, 0.08) 22%, transparent 46%),
    radial-gradient(circle at 62% 30%, rgba(255, 255, 255, 0.08), transparent 20rem);
  content: "";
  inset: 0 clamp(260px, 18vw, 340px) 0 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.vault-hero__poster .vault-hero__stroke {
  border-radius: inherit;
  content: "";
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

.vault-hero__poster .vault-hero__stroke::before {
  animation: vaultModalStrokeSweep 3.6s linear infinite;
  background:
    linear-gradient(
      90deg,
      rgba(227, 27, 35, 0.2),
      rgba(255, 62, 72, 0.92),
      rgba(185, 154, 75, 0.52),
      rgba(227, 27, 35, 0.2)
  );
  background-size: 200% 100%;
  border-radius: inherit;
  content: "";
  inset: 0;
  padding: 2px;
  position: absolute;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.vault-hero__poster .vault-hero__stroke::after {
  border: 1px solid rgba(227, 27, 35, 0.3);
  border-radius: inherit;
  box-shadow:
    inset 0 0 18px rgba(227, 27, 35, 0.12),
    0 0 20px rgba(227, 27, 35, 0.1);
  content: "";
  inset: 0;
  position: absolute;
}

.vault-hero__content {
  align-self: end;
  display: grid;
  max-width: 900px;
  padding: clamp(2rem, 5vw, 5rem);
  position: relative;
  z-index: 2;
}

.vault-hero__close {
  align-items: center;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(246, 241, 231, 0.22);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 2.65rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 1rem;
  top: 1rem;
  transition:
    background var(--motion-hover),
    border-color var(--motion-hover),
    box-shadow var(--motion-focus),
    color var(--motion-hover);
  width: 2.65rem;
  z-index: 50010;
}

.vault-hero__close:hover,
.vault-hero__close:focus-visible {
  background: var(--vault-red);
  border-color: var(--vault-red-hot);
  box-shadow: var(--focus-ring-strong);
  color: #fff;
  outline: none;
}

.vault-hero__close .material-symbols-outlined {
  font-size: 1.3rem;
}

.vault-hero__back-to-styles {
  align-items: center;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(246, 241, 231, 0.22);
  color: #fff;
  display: inline-flex;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 900;
  gap: 0.42rem;
  left: 1rem;
  letter-spacing: 0.04em;
  min-height: 2.65rem;
  padding: 0 0.92rem;
  position: absolute;
  text-decoration: none;
  text-transform: uppercase;
  top: 1rem;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
  z-index: 50010;
}

.vault-hero__back-to-styles[hidden] {
  display: none;
}

.vault-hero__back-to-styles:hover,
.vault-hero__back-to-styles:focus-visible {
  background: var(--vault-red);
  border-color: var(--vault-red-hot);
  color: #fff;
  outline: none;
}

.vault-hero__back-to-styles .material-symbols-outlined {
  font-size: 1.12rem;
}

.vault-eyebrow,
.vault-meta,
.vault-info-rail dt,
.vault-archive__title,
.vault-archive__group-title,
.vault-card__meta {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vault-eyebrow {
  color: var(--vault-red-hot);
  font-size: clamp(0.78rem, 1.1vw, 0.95rem);
  margin: 0 0 0.85rem;
}

.vault-title {
  color: #fff;
  font-family: var(--display);
  font-size: clamp(3.4rem, 5.85vw, 7.25rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.74;
  margin: 0;
  max-width: none;
  text-transform: uppercase;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.72);
}

.vault-title span {
  display: block;
  white-space: nowrap;
}

.vault-title__vs {
  color: var(--vault-red-hot);
  font-size: 0.48em;
  line-height: 0.92;
}

.vault-title--dense {
  font-size: clamp(2.85rem, 4.55vw, 5.85rem);
  line-height: 0.78;
}

.vault-meta {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  margin: clamp(1.1rem, 2vw, 1.45rem) 0 0;
}

.vault-hero__actions {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.3rem, 2.2vw, 1.9rem);
}

.vault-hero__reception {
  min-width: 12rem;
}

.vault-hero__reception[hidden] {
  display: none;
}

.vault-hero__reception dl {
  margin: 0;
}

.vault-hero__reception dt {
  color: var(--vault-faint);
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.vault-hero__reception dd {
  margin: 0;
}

@media (max-width: 560px) {
  .vault-hero__actions:has(.vault-hero__reception:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .vault-hero__actions .vault-button--primary {
    padding-inline: 0.6rem;
    letter-spacing: 0;
  }

  .vault-hero__reception {
    min-width: 0;
  }
}

.vault-button {
  align-items: center;
  border: 1px solid var(--vault-line-strong);
  color: #fff;
  display: inline-flex;
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 900;
  gap: 0.45rem;
  justify-content: center;
  letter-spacing: 0.04em;
  min-height: 2.95rem;
  padding: 0 1.05rem;
  text-transform: uppercase;
  transition:
    background var(--motion-hover),
    border-color var(--motion-hover),
    box-shadow var(--motion-focus),
    color var(--motion-hover),
    transform var(--motion-hover);
}

.vault-button:hover,
.vault-button:focus-visible {
  border-color: var(--vault-red-hot);
  box-shadow: var(--focus-ring-strong);
  outline: none;
  transform: translateY(var(--hover-lift-md));
}

.vault-button--primary {
  background: var(--vault-red);
  border-color: var(--vault-red);
}

.vault-button--primary:hover,
.vault-button--primary:focus-visible {
  background: #f0202a;
  color: #fff;
}

.vault-button--report {
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.78);
}

.vault-button--report:hover,
.vault-button--report:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.vault-button .material-symbols-outlined {
  font-size: var(--icon-size-control);
}

.vault-info-rail {
  align-self: stretch;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.92)),
    rgba(0, 0, 0, 0.58);
  border-left: 1px solid rgba(246, 241, 231, 0.18);
  display: grid;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  position: relative;
  z-index: 2;
}

.vault-info-rail__inner {
  align-self: start;
  display: grid;
  gap: clamp(1.35rem, 2.1vw, 1.8rem);
}

.vault-info-rail__section {
  display: grid;
  gap: 0.95rem;
}

.vault-info-rail__title {
  color: var(--vault-red-hot);
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0 0 1.35rem;
  position: relative;
  text-transform: uppercase;
}

.vault-info-rail__title::after {
  background: var(--vault-red-hot);
  bottom: -0.58rem;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 2.45rem;
}

.vault-info-rail dl {
  display: grid;
  gap: 0.48rem;
  margin: 0;
}

.vault-info-rail__ratings-list {
  grid-template-columns: 1fr;
}

.vault-info-rail__item {
  border-radius: var(--vault-info-box-radius);
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(6, 6, 6, 0.46);
  border: 1px solid rgba(246, 241, 231, 0.035);
  display: grid;
  gap: 0.68rem;
  grid-template-columns: var(--icon-size-xl) minmax(0, 1fr);
  min-height: 3.75rem;
  padding: 0.68rem 0.78rem;
  transition: background 180ms ease;
}

.vault-info-rail__item--no-icon {
  grid-template-columns: minmax(0, 1fr);
}

.vault-info-rail__item:hover {
  background:
    linear-gradient(135deg, rgba(227, 27, 35, 0.1), rgba(255, 255, 255, 0.018)),
    rgba(8, 8, 8, 0.66);
}

.vault-info-rail__item .vault-info-rail__item-icon {
  align-items: center;
  color: rgba(246, 241, 231, 0.58);
  display: inline-flex;
  font-size: var(--icon-size-card);
  height: var(--icon-size-xl);
  justify-content: center;
  width: var(--icon-size-xl);
}

.vault-info-rail__item--rating .vault-info-rail__item-icon {
  color: #b99a4b;
}

.vault-info-rail__item-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.vault-info-rail dt {
  color: var(--vault-faint);
  font-size: 0.62rem;
}

.vault-info-rail dd {
  color: #fff;
  font-family: var(--display);
  font-size: clamp(0.86rem, 1.05vw, 1rem);
  font-weight: 700;
  line-height: 1.12;
  margin: 0;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.vault-info-rail__item--rating {
  gap: 0.38rem;
  min-height: 4rem;
  position: relative;
}

/* Keep the recovered modal aligned with the current archive controls. */
.vault-stream-page .vault-hero {
  --ds-modal-card-stroke: #333333;
  --ds-modal-card-surface: #141414;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.vault-stream-page .vault-hero .vault-hero__poster.ds-modal-card {
  border: 0;
  outline: 1px solid var(--ds-modal-card-stroke);
  outline-offset: 0;
  box-shadow: 0 26px 82px rgba(0, 0, 0, 0.8);
}

.vault-stream-page .vault-hero__close {
  --vault-modal-close-size: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vault-modal-close-size);
  min-width: var(--vault-modal-close-size);
  max-width: var(--vault-modal-close-size);
  height: var(--vault-modal-close-size);
  min-height: var(--vault-modal-close-size);
  max-height: var(--vault-modal-close-size);
  padding: 0;
  border-radius: 8px;
  background: var(--modal-icon-button-bg);
  border-color: var(--modal-icon-button-border);
  color: var(--modal-icon-button-color);
}

.vault-stream-page .vault-hero__close:is(:hover, :focus-visible) {
  background: var(--modal-icon-button-hover-bg);
  border-color: var(--modal-icon-button-hover-border);
  color: var(--modal-icon-button-hover-color);
}

.vault-stream-page .filter-sheet-overlay {
  background: rgba(0, 0, 0, 0.78);
}

.vault-filter-sheet .filter-sheet__body {
  display: grid;
  align-content: start;
  gap: 1.5rem;
}

.vault-filter-sheet .vault-promotion-dropdown .archive-filter-dropdown__trigger {
  display: flex !important;
  min-height: 44px;
}

.vault-filter-sheet .vault-promotion-dropdown .archive-filter-dropdown__panel {
  display: none;
  position: static;
  background: #222222;
  border: 1px solid var(--border-subtle);
  max-height: min(38dvh, 21rem);
  overflow: auto;
  padding: 0.45rem;
}

.vault-filter-sheet .vault-promotion-dropdown.is-open .archive-filter-dropdown__panel {
  display: grid;
  gap: 0.35rem;
}

.vault-filter-sheet .vault-promotion-dropdown .archive-filter-option {
  display: flex;
  justify-content: flex-start;
  gap: 0.75rem;
  min-height: 44px;
  width: 100%;
  border-radius: 6px;
}

.vault-filter-sheet .vault-promotion-dropdown input {
  position: static;
  opacity: 1;
  height: 18px;
  width: 18px;
  margin: 0;
  flex: 0 0 18px;
  accent-color: var(--accent-red);
}

.vault-era-filter h3 {
  font-family: var(--display);
  font-size: 1rem;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}

.vault-era-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.vault-era-options button {
  min-height: 44px;
  border-radius: 6px;
}

.vault-match-rating {
  align-items: center;
  color: #b99a4b;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.12rem;
  line-height: 1;
}

.vault-match-rating .material-symbols-outlined {
  color: #b99a4b;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1;
}

.vault-match-rating__number,
.vault-match-rating__text {
  color: #c5aa62;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.vault-match-rating__number {
  border-left: 1px solid rgba(197, 170, 98, 0.34);
  margin-left: 0.32rem;
  padding-left: 0.44rem;
}

.vault-match-rating__suffix {
  color: #c5aa62;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
}

.vault-rating-info {
  align-items: center;
  background: transparent;
  border: 0;
  color: rgba(246, 241, 231, 0.62);
  cursor: help;
  display: inline-flex;
  height: 1.65rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0.68rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.65rem;
}

.vault-rating-info .material-symbols-outlined {
  font-size: 1.25rem;
  line-height: 1;
}

.vault-rating-info::after {
  background: rgba(8, 8, 8, 0.96);
  border: 1px solid rgba(246, 241, 231, 0.16);
  bottom: calc(100% + 0.48rem);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36);
  color: rgba(246, 241, 231, 0.82);
  content: attr(data-tooltip);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
  opacity: 0;
  padding: 0.62rem 0.72rem;
  pointer-events: none;
  position: absolute;
  right: -0.3rem;
  text-align: left;
  text-transform: none;
  transform: translateY(0.25rem);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  visibility: hidden;
  width: min(17rem, 74vw);
  z-index: 5;
}

.vault-rating-info:hover,
.vault-rating-info:focus-visible {
  box-shadow: var(--focus-ring-strong);
  color: #d0b56c;
  outline: none;
}

.vault-rating-info:hover::after,
.vault-rating-info:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.vault-info-rail__significance {
  color: rgba(246, 241, 231, 0.72);
  font-size: 0.84rem;
  line-height: 1.55;
  margin: 0;
}

.vault-info-rail__significance {
  border-top: 1px solid rgba(246, 241, 231, 0.1);
  padding-top: 0.85rem;
}

[data-theme="showa-light"] .vault-info-rail,
[data-theme="modern-showa"] .vault-info-rail {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    linear-gradient(180deg, rgba(var(--highlight-rgb), 0.38), rgba(var(--text-primary-rgb), 0.015)),
    var(--bg-panel);
  border-left-color: rgba(var(--text-primary-rgb), 0.16);
}

[data-theme="showa-light"] .vault-info-rail__title,
[data-theme="modern-showa"] .vault-info-rail__title {
  color: var(--accent-red);
}

[data-theme="showa-light"] .vault-info-rail__title::after,
[data-theme="modern-showa"] .vault-info-rail__title::after {
  background: var(--accent-red);
}

[data-theme="showa-light"] .vault-info-rail__item,
[data-theme="modern-showa"] .vault-info-rail__item {
  background: #ffffff;
  border-color: rgba(var(--text-primary-rgb), 0.16);
  border-left-color: rgba(var(--accent-red-rgb), 0.5);
}

[data-theme="showa-light"] .vault-info-rail__item:hover,
[data-theme="modern-showa"] .vault-info-rail__item:hover {
  background: rgba(var(--accent-red-rgb), 0.045);
}

[data-theme="showa-light"] .vault-info-rail__item-icon,
[data-theme="modern-showa"] .vault-info-rail__item-icon {
  border-color: rgba(var(--text-primary-rgb), 0.18);
  color: rgba(var(--text-primary-rgb), 0.58);
}

[data-theme="showa-light"] .vault-info-rail dt,
[data-theme="modern-showa"] .vault-info-rail dt {
  color: rgba(var(--text-primary-rgb), 0.54);
}

[data-theme="showa-light"] .vault-info-rail dd,
[data-theme="modern-showa"] .vault-info-rail dd {
  color: var(--text-primary);
}

[data-theme="showa-light"] .vault-info-rail__item--rating,
[data-theme="modern-showa"] .vault-info-rail__item--rating {
  border-left-color: rgba(185, 154, 75, 0.72);
}

[data-theme="showa-light"] .vault-info-rail__significance,
[data-theme="modern-showa"] .vault-info-rail__significance {
  color: rgba(var(--text-primary-rgb), 0.78);
}

[data-theme="showa-light"] .vault-rating-info,
[data-theme="modern-showa"] .vault-rating-info {
  color: rgba(var(--text-primary-rgb), 0.5);
}

[data-theme="showa-light"] .vault-rating-info:hover,
[data-theme="showa-light"] .vault-rating-info:focus-visible,
[data-theme="modern-showa"] .vault-rating-info:hover,
[data-theme="modern-showa"] .vault-rating-info:focus-visible {
  color: #a98a39;
}

[data-theme="showa-light"] .vault-rating-info::after,
[data-theme="modern-showa"] .vault-rating-info::after {
  background: #ffffff;
  border-color: rgba(var(--text-primary-rgb), 0.16);
  box-shadow: 0 18px 34px rgba(var(--text-primary-rgb), 0.14);
  color: rgba(var(--text-primary-rgb), 0.78);
}

[data-theme="archival-dark"] .vault-button--report,
[data-theme="dark"] .vault-button--report,
body.vault-stream-page[data-theme="archival-dark"] .vault-button--report,
body.vault-stream-page[data-theme="dark"] .vault-button--report {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.82);
}

[data-theme="archival-dark"] .vault-button--report:hover,
[data-theme="archival-dark"] .vault-button--report:focus-visible,
[data-theme="dark"] .vault-button--report:hover,
[data-theme="dark"] .vault-button--report:focus-visible,
body.vault-stream-page[data-theme="archival-dark"] .vault-button--report:hover,
body.vault-stream-page[data-theme="archival-dark"] .vault-button--report:focus-visible,
body.vault-stream-page[data-theme="dark"] .vault-button--report:hover,
body.vault-stream-page[data-theme="dark"] .vault-button--report:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--vault-red-hot);
  color: #ffffff;
}

[data-theme="showa-light"] .vault-info-rail__significance,
[data-theme="modern-showa"] .vault-info-rail__significance {
  border-top-color: rgba(var(--text-primary-rgb), 0.14);
}

.vault-sections {
  display: grid;
  gap: clamp(1.45rem, 3vw, 2.3rem);
  margin-inline: auto;
  max-width: 1680px;
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) clamp(2.6rem, 5vw, 4.8rem);
}

.vault-archive {
  align-content: start;
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  grid-template-rows: auto auto;
  min-width: 0;
}

@media (min-width: 1121px) {
  .vault-stream-main {
    height: var(--archive-workspace-height);
    overflow: hidden;
  }

  .vault-sections {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-block: 1rem;
  }

  .vault-archive {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.35rem;
    scroll-padding-top: calc(var(--lens-preview-height, 108px) + 1rem);
    scrollbar-color: var(--vault-red) transparent;
    scrollbar-width: thin;
  }

}

.vault-archive__masthead {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-width: 0;
}

.vault-archive__title,
.vault-archive__group-title {
  align-items: center;
  color: #fff;
  display: inline-flex;
  gap: 0.72rem;
  margin: 0;
}

.vault-archive__title {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.vault-archive__group-title {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vault-archive__title::before,
.vault-archive__group-title::before {
  background: var(--vault-red-hot);
  content: "";
  height: 1.55rem;
  width: 0.22rem;
}

.vault-archive__count {
  color: var(--vault-faint);
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vault-filter-bar {
  align-items: center;
  border: 1px solid var(--vault-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--chip-gap);
  padding: 0.8rem;
}

.vault-archive__mobile-toolbar {
  align-items: center;
  background: #0a0a0a;
  border: 1px solid rgba(245, 245, 240, 0.16);
  box-shadow: none;
  box-sizing: border-box;
  display: grid;
  gap: 0.5rem clamp(0.9rem, 1.4vw, 1.25rem);
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) auto;
  height: var(--lens-preview-height, 108px);
  isolation: isolate;
  min-width: 0;
  padding: clamp(0.6rem, 1vw, 0.85rem) clamp(1rem, 1.65vw, 1.45rem);
  position: sticky;
  top: var(--site-header-height, 84px);
  z-index: 19000;
}

.vault-archive__mobile-toolbar::before {
  background: #050505;
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

@media (min-width: 1121px) {
  .vault-archive {
    --lens-preview-height: 11rem;
  }

  .vault-archive__mobile-toolbar {
    top: 0;
    grid-template-rows: minmax(0, 1fr) 3.5rem;
    row-gap: 1.5rem;
  }

  .vault-archive__mobile-toolbar .vault-era-filter {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-width: 0;
  }

  .vault-archive__mobile-toolbar .vault-era-filter h3 {
    margin: 0;
    font-size: 0.8rem;
  }

  .vault-archive__mobile-toolbar .vault-era-options {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .vault-archive__mobile-toolbar .vault-era-options button {
    flex: 1 0 4.5rem;
    padding-inline: 0.35rem;
    min-width: 0;
  }

  .vault-archive__mobile-toolbar .vault-era-options :is([data-vault-era="all"], [data-vault-era="featured"]) {
    flex-basis: 6.25rem;
  }
}

.vault-archive__mobile-title-wrap {
  box-sizing: border-box;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  min-width: 0;
  place-items: center start;
}

.vault-archive__mobile-title {
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.86;
  margin: 0;
  min-width: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.vault-archive__mobile-toolbar .vault-archive__search {
  grid-column: 2;
  grid-row: 1;
}

.vault-archive__mobile-toolbar .filter-sheet-trigger {
  grid-column: 3;
  grid-row: 1;
}

.vault-archive__mobile-filter-note {
  color: var(--vault-faint);
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1.35;
  margin-top: 0.35rem;
  max-width: min(100%, 46rem);
  text-transform: uppercase;
}

.vault-archive__search {
  align-items: center;
  align-self: center;
  justify-self: end;
  width: clamp(220px, 22vw, 280px);
}

.vault-archive .filter-sheet-trigger {
  align-items: center;
  align-self: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(232, 227, 217, 0.18);
  border-radius: 0.32rem;
  color: rgba(232, 227, 217, 0.7);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 900;
  gap: 0.55rem;
  height: var(--lens-preview-control-height, 2.35rem);
  justify-self: end;
  letter-spacing: 0.08em;
  min-height: var(--lens-preview-control-height, 2.35rem);
  padding: 0.55rem 0.75rem;
  position: relative;
  text-transform: uppercase;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.vault-archive .filter-sheet-trigger:hover,
.vault-archive .filter-sheet-trigger:focus-visible,
.vault-archive .filter-sheet-trigger[aria-expanded="true"] {
  border-color: rgba(var(--accent-red-rgb), 0.68);
  color: var(--text-primary);
  outline: none;
}

.vault-archive .filter-sheet-trigger .material-symbols-outlined {
  color: rgba(var(--text-primary-rgb), 0.76);
  font-size: 1.15rem;
  line-height: 1;
}

.vault-archive .filter-sheet-trigger__badge {
  align-items: center;
  background: var(--accent-red);
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: 0.75rem;
  font-weight: 700;
  height: 1.2rem;
  justify-content: center;
  line-height: 1;
  min-width: 1.2rem;
  padding-inline: 0.24rem;
  position: absolute;
  right: -0.48rem;
  top: -0.48rem;
  transform: none;
}

.vault-archive .filter-sheet-trigger__badge[hidden] {
  display: none;
}

.vault-stream-page.filter-sheet-open {
  overflow: hidden;
}

.vault-filter-sheet {
  background: #191919;
  border-left: 1px solid rgba(232, 227, 217, 0.2);
  bottom: 0;
  box-shadow: var(--modal-shadowbox-shadow, -1rem 0 2rem rgba(0, 0, 0, 0.34));
  box-sizing: border-box;
  contain: layout paint style;
  display: block;
  max-width: 88vw;
  overflow-y: auto;
  padding: 1rem;
  position: fixed;
  right: 0;
  top: var(--site-header-height, 84px);
  transform: translateX(104%);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  width: min(22rem, 88vw);
  z-index: 50020;
}

.vault-filter-sheet.is-open {
  transform: translateX(0);
}

.vault-filter-sheet[hidden],
.vault-stream-page .filter-sheet-overlay[hidden] {
  display: none;
}

.vault-filter-sheet .filter-sheet__handle {
  display: none;
}

.vault-filter-sheet .filter-sheet__head {
  align-items: center;
  border-bottom: 1px solid rgba(232, 227, 217, 0.14);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
}

.vault-filter-sheet .filter-sheet__close {
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(232, 227, 217, 0.18);
  border-radius: 0;
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--display);
  font-size: 1.45rem;
  height: auto;
  justify-content: center;
  line-height: 1;
  min-height: 2.15rem;
  min-width: 2.15rem;
  padding: 0;
  width: auto;
}

.vault-filter-sheet .filter-sheet__body {
  display: block;
  min-height: 0;
  overflow: visible;
  padding: 0;
}

.vault-filter-sheet .filter-sheet__footer {
  border-top: 1px solid rgba(232, 227, 217, 0.14);
  display: block;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
}

.vault-filter-sheet .filter-sheet__btn {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(232, 227, 217, 0.16);
  border-radius: 0.32rem;
  color: rgba(232, 227, 217, 0.74);
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  min-height: 0;
  padding: 0.62rem 0.9rem;
  text-align: center;
  text-transform: uppercase;
  transition:
    background var(--motion-hover),
    border-color var(--motion-hover),
    box-shadow var(--motion-focus),
    color var(--motion-hover);
  width: 100%;
}

.vault-filter-sheet .filter-sheet__btn:hover,
.vault-filter-sheet .filter-sheet__btn:focus-visible {
  border-color: rgba(var(--accent-red-rgb), 0.62);
  box-shadow: var(--focus-ring-strong);
  color: var(--text-primary);
  outline: none;
}

.vault-filter-sheet .filter-sheet__btn--clear {
  display: block;
}

.vault-filter-sheet .filter-sheet__btn--apply {
  display: none;
}

.vault-filter-sheet .vault-filter-bar {
  border: 0;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1fr;
  padding: 0;
}

.vault-filter-sheet .vault-filter-chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(232, 227, 217, 0.16);
  border-radius: 0.32rem;
  color: rgba(232, 227, 217, 0.74);
  display: flex;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 900;
  justify-content: space-between;
  line-height: 1;
  min-height: 0;
  padding: 0.62rem 0.9rem;
  text-align: left;
  width: 100%;
}

.vault-filter-sheet .vault-filter-chip::after {
  background-color: currentColor;
  color: currentColor;
  content: "";
  flex: 0 0 1.2rem;
  height: 1.2rem;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%20fill%3D'currentColor'%20aria-hidden%3D'true'%20focusable%3D'false'%3E%3Cpath%20d%3D'M382-240%20154-468l57-57%20171%20171%20367-367%2057%2057-424%20424Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%20fill%3D'currentColor'%20aria-hidden%3D'true'%20focusable%3D'false'%3E%3Cpath%20d%3D'M382-240%20154-468l57-57%20171%20171%20367-367%2057%2057-424%20424Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  opacity: 0;
  text-align: center;
  text-transform: none;
  width: 1.2rem;
}

.vault-filter-sheet .vault-filter-chip.is-active {
  background: rgba(var(--accent-red-rgb), 0.18);
  border-color: rgba(var(--accent-red-rgb), 0.72);
  color: var(--text-primary);
}

.vault-filter-sheet .vault-filter-chip.is-active::after {
  opacity: 1;
}

.vault-stream-page .filter-sheet-overlay {
  background: rgba(0, 0, 0, 0.48);
  bottom: 0;
  display: block;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: var(--site-header-height, 84px);
  transition: opacity 220ms ease;
  will-change: opacity;
  z-index: 50010;
}

.vault-stream-page .filter-sheet-overlay.is-open {
  opacity: 1;
}

.vault-filter-sheet__title {
  color: var(--text-primary);
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;
}

.vault-filter-chip {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(246, 241, 231, 0.14);
  border-radius: var(--chip-radius);
  box-sizing: border-box;
  color: var(--vault-muted);
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  min-height: var(--control-height-sm);
  padding: 0 var(--control-padding-x-lg);
  text-transform: uppercase;
  transition:
    background var(--motion-hover),
    border-color var(--motion-hover),
    box-shadow var(--motion-focus),
    color var(--motion-hover);
}

.vault-filter-chip:hover,
.vault-filter-chip:focus-visible {
  border-color: rgba(227, 27, 35, 0.7);
  box-shadow: var(--focus-ring-strong);
  color: #fff;
  outline: none;
}

.vault-filter-chip.is-active {
  background: var(--chip-bg-active);
  border-color: var(--chip-border-color-active);
  color: var(--chip-text-active);
}

.vault-archive__groups {
  align-content: start;
  display: grid;
  gap: clamp(2.2rem, 4vw, 3.4rem);
}

.vault-archive__group {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.vault-archive__grid {
  align-content: start;
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  grid-auto-rows: 1fr;
}

@keyframes vaultArchiveResultsFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .vault-archive__grid,
  .vault-archive__empty {
    transition: opacity 120ms ease;
  }

  [data-vault-rows].is-era-changing :is(.vault-archive__grid, .vault-archive__empty) {
    opacity: 0;
  }

  .vault-archive__groups.is-era-entering > :is(.vault-archive__grid, .vault-archive__empty) {
    animation: vaultArchiveResultsFade 180ms ease-out both;
  }
}

.vault-archive__empty {
  --empty-state-border: 1px solid var(--vault-line);
  --empty-state-padding: 1.35rem;
  border: var(--empty-state-border);
  color: var(--vault-muted);
  display: grid;
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 900;
  justify-items: center;
  letter-spacing: 0.05em;
  margin: 0;
  padding: var(--empty-state-padding);
  text-align: center;
  text-transform: uppercase;
}

[data-theme="showa-light"] .vault-hero,
[data-theme="modern-showa"] .vault-hero {
  background: rgba(0, 0, 0, 0.82);
}

[data-theme="showa-light"] .vault-hero__poster,
[data-theme="modern-showa"] .vault-hero__poster {
  background-color: var(--modal-shadowbox-surface);
}

[data-theme="showa-light"] .vault-hero__close,
[data-theme="modern-showa"] .vault-hero__close,
[data-theme="showa-light"] .vault-hero__back-to-styles,
[data-theme="modern-showa"] .vault-hero__back-to-styles {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(var(--text-primary-rgb), 0.16);
  color: var(--text-primary);
}

[data-theme="showa-light"] .vault-hero__close:hover,
[data-theme="showa-light"] .vault-hero__close:focus-visible,
[data-theme="modern-showa"] .vault-hero__close:hover,
[data-theme="modern-showa"] .vault-hero__close:focus-visible,
[data-theme="showa-light"] .vault-hero__back-to-styles:hover,
[data-theme="showa-light"] .vault-hero__back-to-styles:focus-visible,
[data-theme="modern-showa"] .vault-hero__back-to-styles:hover,
[data-theme="modern-showa"] .vault-hero__back-to-styles:focus-visible {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: var(--on-accent);
}

[data-theme="showa-light"] .vault-stream-page,
[data-theme="modern-showa"] .vault-stream-page,
body.vault-stream-page[data-theme="showa-light"],
body.vault-stream-page[data-theme="modern-showa"] {
  background: #f6f6f6;
  color: var(--text-primary);
}

	      [data-theme="showa-light"] .vault-stream-page .site-header,
	      [data-theme="modern-showa"] .vault-stream-page .site-header,
	      body.vault-stream-page[data-theme="showa-light"] .site-header,
	      body.vault-stream-page[data-theme="modern-showa"] .site-header {
	        background: #050505;
	        border-bottom: 1px solid rgba(232, 227, 217, 0.22);
	        color: #ffffff;
	      }

	      [data-theme="showa-light"] .vault-stream-page .site-nav a,
	      [data-theme="modern-showa"] .vault-stream-page .site-nav a,
	      body.vault-stream-page[data-theme="showa-light"] .site-nav a,
	      body.vault-stream-page[data-theme="modern-showa"] .site-nav a {
	        color: rgba(255, 255, 255, 0.76);
	      }

[data-theme="showa-light"] .vault-stream-page .site-nav a:hover,
[data-theme="showa-light"] .vault-stream-page .site-nav a:focus-visible,
[data-theme="showa-light"] .vault-stream-page .site-nav a[aria-current="page"],
[data-theme="modern-showa"] .vault-stream-page .site-nav a:hover,
[data-theme="modern-showa"] .vault-stream-page .site-nav a:focus-visible,
[data-theme="modern-showa"] .vault-stream-page .site-nav a[aria-current="page"],
body.vault-stream-page[data-theme="showa-light"] .site-nav a:hover,
body.vault-stream-page[data-theme="showa-light"] .site-nav a:focus-visible,
body.vault-stream-page[data-theme="showa-light"] .site-nav a[aria-current="page"],
body.vault-stream-page[data-theme="modern-showa"] .site-nav a:hover,
body.vault-stream-page[data-theme="modern-showa"] .site-nav a:focus-visible,
body.vault-stream-page[data-theme="modern-showa"] .site-nav a[aria-current="page"] {
  color: var(--accent-red);
}

	      [data-theme="showa-light"] .vault-stream-page .preferences-menu__button,
	      [data-theme="modern-showa"] .vault-stream-page .preferences-menu__button,
	      body.vault-stream-page[data-theme="showa-light"] .preferences-menu__button,
	      body.vault-stream-page[data-theme="modern-showa"] .preferences-menu__button {
	        background: rgba(255, 255, 255, 0.07);
	        border-color: rgba(255, 255, 255, 0.28);
	        color: rgba(255, 255, 255, 0.9);
	      }

@media (max-width: 1120px) {
	        [data-theme="showa-light"] .vault-stream-page .site-nav.is-open,
	        [data-theme="modern-showa"] .vault-stream-page .site-nav.is-open,
	        body.vault-stream-page[data-theme="showa-light"] .site-nav.is-open,
	        body.vault-stream-page[data-theme="modern-showa"] .site-nav.is-open {
	          background: #050505;
	          border-bottom-color: rgba(232, 227, 217, 0.22);
	          box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
	        }

	        [data-theme="showa-light"] .vault-stream-page .site-nav.is-open a,
	        [data-theme="modern-showa"] .vault-stream-page .site-nav.is-open a,
	        body.vault-stream-page[data-theme="showa-light"] .site-nav.is-open a,
	        body.vault-stream-page[data-theme="modern-showa"] .site-nav.is-open a {
	          border-bottom-color: rgba(232, 227, 217, 0.16);
	          color: rgba(255, 255, 255, 0.82);
	        }

  [data-theme="showa-light"] .vault-stream-page .site-nav.is-open a::after,
  [data-theme="modern-showa"] .vault-stream-page .site-nav.is-open a::after,
  body.vault-stream-page[data-theme="showa-light"] .site-nav.is-open a::after,
  body.vault-stream-page[data-theme="modern-showa"] .site-nav.is-open a::after {
    background: var(--accent-red);
  }

  [data-theme="showa-light"] .vault-stream-page .site-nav.is-open a:hover,
  [data-theme="showa-light"] .vault-stream-page .site-nav.is-open a:focus-visible,
  [data-theme="modern-showa"] .vault-stream-page .site-nav.is-open a:hover,
  [data-theme="modern-showa"] .vault-stream-page .site-nav.is-open a:focus-visible,
  body.vault-stream-page[data-theme="showa-light"] .site-nav.is-open a:hover,
	        body.vault-stream-page[data-theme="showa-light"] .site-nav.is-open a:focus-visible,
	        body.vault-stream-page[data-theme="modern-showa"] .site-nav.is-open a:hover,
	        body.vault-stream-page[data-theme="modern-showa"] .site-nav.is-open a:focus-visible {
	          background: rgba(255, 255, 255, 0.08);
	          color: #ffffff;
	        }

  [data-theme="showa-light"] .vault-stream-page .site-nav.is-open a[aria-current="page"],
  [data-theme="showa-light"] .vault-stream-page .site-nav.is-open a[aria-current="page"]:hover,
  [data-theme="showa-light"] .vault-stream-page .site-nav.is-open a[aria-current="page"]:focus-visible,
  [data-theme="modern-showa"] .vault-stream-page .site-nav.is-open a[aria-current="page"],
  [data-theme="modern-showa"] .vault-stream-page .site-nav.is-open a[aria-current="page"]:hover,
  [data-theme="modern-showa"] .vault-stream-page .site-nav.is-open a[aria-current="page"]:focus-visible,
  body.vault-stream-page[data-theme="showa-light"] .site-nav.is-open a[aria-current="page"],
  body.vault-stream-page[data-theme="showa-light"] .site-nav.is-open a[aria-current="page"]:hover,
  body.vault-stream-page[data-theme="showa-light"] .site-nav.is-open a[aria-current="page"]:focus-visible,
  body.vault-stream-page[data-theme="modern-showa"] .site-nav.is-open a[aria-current="page"],
  body.vault-stream-page[data-theme="modern-showa"] .site-nav.is-open a[aria-current="page"]:hover,
  body.vault-stream-page[data-theme="modern-showa"] .site-nav.is-open a[aria-current="page"]:focus-visible {
    color: var(--accent-red);
  }
}

[data-theme="showa-light"] .vault-stream-page::before,
[data-theme="modern-showa"] .vault-stream-page::before,
body.vault-stream-page[data-theme="showa-light"]::before,
body.vault-stream-page[data-theme="modern-showa"]::before {
  display: none;
}

[data-theme="showa-light"] .vault-sections,
[data-theme="modern-showa"] .vault-sections,
body.vault-stream-page[data-theme="showa-light"] .vault-sections,
body.vault-stream-page[data-theme="modern-showa"] .vault-sections {
  background: #f6f6f6;
}

[data-theme="showa-light"] .vault-archive__title,
[data-theme="showa-light"] .vault-archive__group-title,
[data-theme="modern-showa"] .vault-archive__title,
[data-theme="modern-showa"] .vault-archive__group-title {
  color: var(--text-primary);
}

[data-theme="showa-light"] .vault-archive__count,
[data-theme="modern-showa"] .vault-archive__count {
  color: var(--text-secondary);
}

[data-theme="showa-light"] .vault-filter-bar,
[data-theme="modern-showa"] .vault-filter-bar {
  background: #ffffff;
  border-color: var(--border-subtle);
}

[data-theme="showa-light"] .vault-archive__mobile-title,
[data-theme="modern-showa"] .vault-archive__mobile-title {
  color: var(--text-primary);
}

[data-theme="showa-light"] .vault-archive__mobile-title-wrap,
[data-theme="modern-showa"] .vault-archive__mobile-title-wrap {
  background: transparent;
}

[data-theme="showa-light"] .vault-archive__mobile-toolbar,
[data-theme="modern-showa"] .vault-archive__mobile-toolbar {
  background: #ffffff;
  border-color: var(--border-subtle);
}

[data-theme="showa-light"] .vault-archive__mobile-toolbar,
[data-theme="modern-showa"] .vault-archive__mobile-toolbar {
  box-shadow: none;
}

[data-theme="showa-light"] .vault-archive__mobile-toolbar::before,
[data-theme="modern-showa"] .vault-archive__mobile-toolbar::before,
body.vault-stream-page[data-theme="showa-light"] .vault-archive__mobile-toolbar::before,
body.vault-stream-page[data-theme="modern-showa"] .vault-archive__mobile-toolbar::before {
  background: #f6f6f6;
  opacity: 0;
}

[data-theme="showa-light"] .vault-filter-sheet,
[data-theme="modern-showa"] .vault-filter-sheet {
  background: var(--modal-shadowbox-surface);
  border-left-color: var(--modal-shadowbox-stroke);
  box-shadow: var(--modal-shadowbox-shadow);
}

[data-theme="showa-light"] .vault-filter-sheet .filter-sheet__head,
[data-theme="modern-showa"] .vault-filter-sheet .filter-sheet__head,
[data-theme="showa-light"] .vault-filter-sheet .filter-sheet__footer,
[data-theme="modern-showa"] .vault-filter-sheet .filter-sheet__footer {
  background: var(--modal-shadowbox-surface);
  border-color: var(--border-subtle);
}

[data-theme="showa-light"] .vault-filter-sheet .filter-sheet__close,
[data-theme="modern-showa"] .vault-filter-sheet .filter-sheet__close,
[data-theme="showa-light"] .vault-filter-sheet .filter-sheet__btn--clear,
[data-theme="modern-showa"] .vault-filter-sheet .filter-sheet__btn--clear {
  background: rgba(23, 19, 15, 0.04);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

[data-theme="showa-light"] .vault-filter-sheet .filter-sheet__btn--clear:hover,
[data-theme="showa-light"] .vault-filter-sheet .filter-sheet__btn--clear:focus-visible,
[data-theme="modern-showa"] .vault-filter-sheet .filter-sheet__btn--clear:hover,
[data-theme="modern-showa"] .vault-filter-sheet .filter-sheet__btn--clear:focus-visible {
  background: rgba(var(--accent-red-rgb), 0.08);
  border-color: rgba(var(--accent-red-rgb), 0.42);
  color: var(--text-primary);
}

[data-theme="showa-light"] .vault-archive .filter-sheet-trigger,
[data-theme="modern-showa"] .vault-archive .filter-sheet-trigger {
  background: #ffffff;
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

[data-theme="showa-light"] .vault-archive .filter-sheet-trigger .material-symbols-outlined,
[data-theme="modern-showa"] .vault-archive .filter-sheet-trigger .material-symbols-outlined {
  color: var(--text-primary);
}

[data-theme="showa-light"] .vault-archive .filter-sheet-trigger:hover,
[data-theme="showa-light"] .vault-archive .filter-sheet-trigger:focus-visible,
[data-theme="showa-light"] .vault-archive .filter-sheet-trigger[aria-expanded="true"],
[data-theme="modern-showa"] .vault-archive .filter-sheet-trigger:hover,
[data-theme="modern-showa"] .vault-archive .filter-sheet-trigger:focus-visible,
[data-theme="modern-showa"] .vault-archive .filter-sheet-trigger[aria-expanded="true"] {
  background: #f6f6f6;
  border-color: rgba(var(--accent-red-rgb), 0.62);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(var(--accent-red-rgb), 0.08);
}

[data-theme="showa-light"] .vault-archive__mobile-filter-note,
[data-theme="modern-showa"] .vault-archive__mobile-filter-note {
  color: var(--text-secondary);
}

[data-theme="showa-light"] .vault-filter-chip,
[data-theme="modern-showa"] .vault-filter-chip {
  background: rgba(23, 19, 15, 0.04);
  border-color: rgba(23, 19, 15, 0.18);
  color: var(--text-secondary);
}

[data-theme="showa-light"] .vault-filter-chip:hover,
[data-theme="showa-light"] .vault-filter-chip:focus-visible,
[data-theme="modern-showa"] .vault-filter-chip:hover,
[data-theme="modern-showa"] .vault-filter-chip:focus-visible {
  background: rgba(var(--accent-red-rgb), 0.08);
  border-color: rgba(var(--accent-red-rgb), 0.42);
  color: var(--text-primary);
}

[data-theme="showa-light"] .vault-filter-chip.is-active,
[data-theme="modern-showa"] .vault-filter-chip.is-active {
  background: var(--chip-bg-active);
  border-color: var(--chip-border-color-active);
  color: var(--chip-text-active);
}

[data-theme="showa-light"] .vault-filter-chip.is-active:hover,
[data-theme="showa-light"] .vault-filter-chip.is-active:focus-visible,
[data-theme="modern-showa"] .vault-filter-chip.is-active:hover,
[data-theme="modern-showa"] .vault-filter-chip.is-active:focus-visible {
  background: var(--accent-red-dark);
  border-color: var(--accent-red-dark);
  color: var(--chip-text-active);
}

[data-theme="showa-light"] .vault-archive__empty,
[data-theme="modern-showa"] .vault-archive__empty {
  --empty-state-border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  border: var(--empty-state-border);
  color: var(--text-secondary);
}

.vault-card {
  --vault-card-radius: 24px;
  --vault-card-stroke: var(--vault-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
    #0e0e0e;
  border: 1px solid var(--vault-card-stroke);
  border-radius: var(--vault-card-radius);
  color: #fff;
  cursor: pointer;
  display: grid;
  grid-template-rows: 14rem auto;
  height: auto;
  align-self: stretch;
  overflow: hidden;
  scroll-snap-align: start;
  transition:
    border-color var(--card-transition),
    box-shadow var(--card-transition),
    transform var(--card-transition);
}

.vault-card:hover,
.vault-card:focus-within,
.vault-card:focus-visible {
  --vault-card-stroke: var(--accent-red);
  box-shadow:
    0 16px 38px rgba(var(--shadow-rgb), 0.46),
    0 0 0 1px rgba(var(--accent-red-rgb), 0.12);
  outline: none;
  transform: var(--card-hover-transform);
}

.vault-card:active {
  transform: var(--card-active-transform);
}

.vault-stream-page .vault-card:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 3px;
}

@media (hover: none), (pointer: coarse) {
  .vault-card:hover,
  .vault-card:focus-within,
  .vault-card:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vault-card {
    transition: none;
  }
}

.vault-card__thumb {
  border-radius: 0 0 var(--vault-card-radius) var(--vault-card-radius);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 14rem;
  min-height: 14rem;
  overflow: hidden;
  position: relative;
}

.vault-card__thumb::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.78));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.vault-card__thumb::after {
  background:
    linear-gradient(180deg, transparent 0 7%, rgba(246, 241, 231, 0.58) 8%, transparent 12% 31%, rgba(246, 241, 231, 0.28) 32%, transparent 38% 63%, rgba(25, 25, 23, 0.34) 64%, transparent 70% 100%),
    linear-gradient(90deg, rgba(246, 241, 231, 0.18), transparent 27%, rgba(246, 241, 231, 0.1) 51%, transparent 66%, rgba(25, 25, 23, 0.28)),
    repeating-linear-gradient(180deg, rgba(246, 241, 231, 0.28) 0 1px, transparent 1px 3px, rgba(0, 0, 0, 0.22) 3px 5px);
  content: "";
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(-8%);
  z-index: 4;
}

.vault-card.is-video-tracking .vault-card__thumb::after {
  animation: vaultPreviewTracking 1450ms steps(8, end) both;
}

.vault-card.is-video-tracking .vault-card__thumb {
  animation: vaultPreviewJolt 1450ms steps(2, end) both;
}

.vault-card__portrait {
  align-self: end;
  filter: grayscale(0.18) saturate(0.78) contrast(1.08);
  height: 100%;
  justify-self: center;
  max-width: 126%;
  min-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  position: relative;
  transition: transform 780ms cubic-bezier(0.2, 0.72, 0.18, 1);
  width: 100%;
  z-index: 1;
}

.vault-card__thumb:not(.has-image) .vault-card__portrait {
  display: none;
}

.vault-card__thumb.has-portrait-fallback .vault-card__portrait {
  display: block;
}

.vault-card__thumb.has-image {
  display: block;
}

.vault-card__thumb.has-image .vault-card__portrait {
  display: block;
  height: 100%;
  max-width: none;
  min-width: 0;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  transform-origin: center top;
  width: 100%;
}

.vault-card__thumb.has-image .vault-card__portrait--b {
  display: none;
}

.vault-card__video-preview {
  display: block;
  filter: grayscale(0.14) saturate(0.84) contrast(1.08);
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(1.035);
  transition:
    opacity 180ms ease,
    transform 680ms cubic-bezier(0.2, 0.72, 0.18, 1);
  width: 100%;
  z-index: 3;
}

.vault-card.has-video-preview.is-video-vhs .vault-card__video-preview {
  opacity: 1;
  transform: scale(1.01);
}

.vault-card.has-video-preview.is-video-tracking-in .vault-card__video-preview {
  opacity: 0;
}

.vault-card__portrait--a {
  grid-column: 1;
}

.vault-card__portrait--b {
  grid-column: 2;
  transform: scaleX(-1);
}

.vault-card.is-video-warming .vault-card__portrait--a {
  transform: scale(1.07);
}

.vault-card.is-video-warming .vault-card__thumb.has-image .vault-card__portrait--a {
  transform: scale(1.12);
}

.vault-card.is-video-warming .vault-card__portrait--b {
  transform: scaleX(-1) scale(1.07);
}

@keyframes vaultPreviewTracking {
  0% {
    opacity: 0;
    transform: translateY(-12%) skewX(0deg) scaleY(1);
  }

  9% {
    opacity: 0.95;
    transform: translateY(11%) skewX(-3deg) scaleY(1.08);
  }

  22% {
    opacity: 0.38;
    transform: translateY(-6%) skewX(2.2deg) scaleY(0.94);
  }

  38% {
    opacity: 0.88;
    transform: translateY(24%) skewX(-2.4deg) scaleY(1.14);
  }

  55% {
    opacity: 0.52;
    transform: translateY(-1%) skewX(2deg) scaleY(0.9);
  }

  76% {
    opacity: 0.76;
    transform: translateY(17%) skewX(-1.8deg) scaleY(1.06);
  }

  100% {
    opacity: 0;
    transform: translateY(34%) skewX(0deg) scaleY(1);
  }
}

@keyframes vaultPreviewJolt {
  0% {
    filter: grayscale(0.06) saturate(0.96) contrast(1);
    transform: none;
  }

  16% {
    filter: grayscale(0.12) saturate(0.9) contrast(1.12);
    transform: none;
  }

  34% {
    filter: grayscale(0.18) saturate(0.82) contrast(1.22);
    transform: none;
  }

  58% {
    filter: grayscale(0.1) saturate(0.88) contrast(1.12);
    transform: none;
  }

  100% {
    filter: grayscale(0.06) saturate(0.96) contrast(1);
    transform: none;
  }
}

.vault-stream-page .org-njpw { color: var(--org-njpw); }
.vault-stream-page .org-ajpw { color: var(--org-ajpw); }
.vault-stream-page .org-noah { color: var(--org-noah); }
.vault-stream-page .org-fmw { color: var(--org-fmw); }
.vault-stream-page .org-ajw { color: var(--org-ajw); }
.vault-stream-page .org-dragon-gate { color: var(--org-dragon-gate); }
.vault-stream-page .org-michinoku-pro { color: var(--org-michinoku-pro); }
.vault-stream-page .org-jwa { color: var(--org-jwa); }
.vault-stream-page .org-jwp { color: var(--org-jwp); }
.vault-stream-page .org-stardom { color: var(--org-stardom); }
.vault-stream-page .org-ice-ribbon { color: var(--org-ice-ribbon); }
.vault-stream-page .org-marigold { color: var(--org-marigold); }
.vault-stream-page .org-gaea { color: var(--org-gaea); }
.vault-stream-page .org-sendai-girls { color: var(--org-sendai-girls); }
.vault-stream-page .org-ddt { color: var(--org-ddt); }
.vault-stream-page .org-wwe { color: var(--org-wwe); }
.vault-stream-page .org-nxt { color: var(--org-nxt); }
.vault-stream-page .org-ecw { color: var(--org-ecw); }
.vault-stream-page .org-wcw { color: var(--org-wcw); }
.vault-stream-page .org-aew { color: var(--org-aew); }
.vault-stream-page .org-nwa { color: var(--org-nwa); }
.vault-stream-page .org-awa { color: var(--org-awa); }
.vault-stream-page .org-uwf-shoot-style-influence { color: var(--org-uwf-shoot-style-influence); }
.vault-stream-page .org-pancrase { color: var(--org-pancrase); }
.vault-stream-page .org-toryumon { color: var(--org-toryumon); }
.vault-stream-page .org-la-dojo { color: var(--org-la-dojo); }
.vault-stream-page .org-bjw { color: var(--org-bjw); }
.vault-stream-page .org-njpw-adjacent { color: var(--org-njpw-adjacent); }
.vault-stream-page .org-freelance { color: var(--org-freelance); }
.vault-stream-page .org-independent { color: var(--org-default); }

.vault-card__body {
  container-type: inline-size;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.56rem;
  padding: 1rem;
}

.vault-card__title {
  font-family: var(--display);
  font-size: clamp(1.25rem, 8cqi, 1.7rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  margin: 0;
  min-width: 0;
  text-transform: uppercase;
}

.vault-card__title span {
  display: block;
}

.vault-card__title-side {
  display: grid;
  gap: 0.04rem;
}

.vault-card__title-line {
  white-space: normal;
  overflow-wrap: anywhere;
}

.vault-card__title-line--compact {
  white-space: normal;
}

.vault-card__title--team {
  font-size: clamp(1rem, 6.5cqi, 1.3rem);
  line-height: 1.05;
}

.vault-card__title .vs {
  color: var(--vault-red-hot);
  font-size: 0.7em;
  line-height: 1;
  margin-block: 0.06rem;
}

.vault-card__meta {
  color: var(--vault-muted);
  font-size: 0.75rem;
  margin: auto 0 0;
}

.vault-card__ratings {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.vault-card__rating {
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    rgba(6, 6, 6, 0.58);
  border: 0;
  display: grid;
  gap: 0.28rem;
  min-height: 3.05rem;
  padding: 0.48rem 0.54rem 0.5rem;
}

.vault-card__rating-label {
  color: var(--vault-faint);
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.vault-card__rating-value {
  align-items: center;
  color: #c5aa62;
  display: flex;
  flex-wrap: wrap;
  gap: 0.08rem;
  min-width: 0;
}

.vault-card__rating-value .material-symbols-outlined {
  color: #b99a4b;
  font-size: 0.86rem;
  line-height: 1;
}

.vault-card__rating-value .vault-match-rating__suffix,
.vault-card__rating-value .vault-match-rating__text {
  color: #c5aa62;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

.vault-card__rating-value--length {
  color: #fff;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.vault-card__database-rating {
  color: #fff;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.08;
  text-transform: uppercase;
}

[data-theme="showa-light"] .vault-card,
[data-theme="modern-showa"] .vault-card {
  --vault-card-stroke: rgba(23, 19, 15, 0.16);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(23, 19, 15, 0.08);
  color: var(--text-primary);
}

[data-theme="showa-light"] .vault-card:hover,
[data-theme="showa-light"] .vault-card:focus-within,
[data-theme="showa-light"] .vault-card:focus-visible {
  --vault-card-stroke: rgba(179, 18, 29, 0.56);
  box-shadow:
    0 1px 0 rgba(23, 19, 15, 0.08),
    0 10px 22px rgba(23, 19, 15, 0.10);
}

[data-theme="modern-showa"] .vault-card:hover,
[data-theme="modern-showa"] .vault-card:focus-within,
[data-theme="modern-showa"] .vault-card:focus-visible {
  --vault-card-stroke: var(--accent-red);
  box-shadow: none;
}

[data-theme="archival-dark"] .vault-card,
[data-theme="dark"] .vault-card {
  --vault-card-stroke: #151515;
  background: #222222;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

[data-theme="archival-dark"] .vault-card:hover,
[data-theme="archival-dark"] .vault-card:focus-within,
[data-theme="archival-dark"] .vault-card:focus-visible,
[data-theme="dark"] .vault-card:hover,
[data-theme="dark"] .vault-card:focus-within,
[data-theme="dark"] .vault-card:focus-visible {
  --vault-card-stroke: var(--accent-red);
  box-shadow: none;
}

[data-theme="showa-light"] .vault-card__thumb::before,
[data-theme="modern-showa"] .vault-card__thumb::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(23, 19, 15, 0.16));
}

[data-theme="showa-light"] .vault-card__portrait,
[data-theme="modern-showa"] .vault-card__portrait {
  filter: grayscale(0.08) saturate(0.9) contrast(1.04);
}

[data-theme="showa-light"] .vault-card__title,
[data-theme="modern-showa"] .vault-card__title {
  color: var(--text-primary);
}

[data-theme="showa-light"] .vault-card__title .vs,
[data-theme="modern-showa"] .vault-card__title .vs {
  color: var(--accent-red);
}

[data-theme="showa-light"] .vault-card__meta,
[data-theme="modern-showa"] .vault-card__meta {
  color: var(--text-secondary);
}

[data-theme="showa-light"] .vault-card__rating,
[data-theme="modern-showa"] .vault-card__rating {
  background: rgba(23, 19, 15, 0.035);
  border-color: rgba(23, 19, 15, 0.1);
  border-top-color: rgba(23, 19, 15, 0.06);
}

[data-theme="showa-light"] .vault-card__rating-label,
[data-theme="modern-showa"] .vault-card__rating-label {
  color: rgba(var(--text-primary-rgb), 0.52);
}

[data-theme="showa-light"] .vault-card__database-rating,
[data-theme="modern-showa"] .vault-card__database-rating {
  color: var(--text-primary);
}

[data-theme="showa-light"] .vault-card__rating-value--length,
[data-theme="modern-showa"] .vault-card__rating-value--length {
  color: var(--text-primary);
}

@media (min-width: 1180px) {
  .vault-archive__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .vault-hero {
    min-height: auto;
  }

  .vault-hero__poster {
    grid-template-columns: 1fr;
    min-height: min(760px, calc(100dvh - 1.4rem));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .vault-hero__poster::before,
  .vault-hero__poster::after {
    right: 0;
  }

  .vault-info-rail {
    align-self: end;
    border-left: 0;
    border-top: 1px solid var(--vault-line);
  }

  .vault-info-rail__inner {
    align-self: start;
  }

  .vault-info-rail dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 1120px) {
  .vault-archive {
    --lens-preview-control-height: clamp(2.75rem, 4.8vw, 3.05rem);
    gap: 1rem;
  }

  .vault-archive__mobile-toolbar {
    align-items: stretch;
    gap: clamp(1.05rem, 2.4vw, 1.45rem) clamp(0.75rem, 1.8vw, 1rem);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: clamp(1.35rem, 3.2vw, 2rem);
    position: relative;
    top: auto;
    z-index: 10;
  }

  .vault-archive__mobile-title-wrap {
    grid-column: 1 / -1;
    grid-row: 1;
    place-items: center start;
  }

  .vault-archive__mobile-title {
    align-self: center;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 0.92;
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .vault-archive__mobile-toolbar .vault-archive__search {
    grid-column: 1;
    grid-row: 2;
  }

  .vault-archive__search {
    height: var(--lens-preview-control-height);
    justify-self: stretch;
    max-width: none;
    min-height: var(--lens-preview-control-height);
    min-width: 0;
    width: 100%;
  }

  .vault-archive__mobile-toolbar .filter-sheet-trigger {
    box-sizing: border-box;
    grid-column: 2;
    grid-row: 2;
    height: var(--lens-preview-control-height);
    justify-content: center;
    justify-self: end;
    min-height: var(--lens-preview-control-height);
    min-width: 0;
    padding-inline: clamp(0.85rem, 2.2vw, 1.1rem);
    width: auto;
  }

  .vault-hero {
    background:
      radial-gradient(circle at 50% 0%, rgba(227, 27, 35, 0.16), transparent 20rem),
      #030303;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    padding: var(--detail-modal-block-start) var(--detail-modal-inline-pad) var(--detail-modal-block-end);
  }

  .vault-hero.is-open {
    min-height: 0;
  }

  .vault-hero.is-open .vault-hero__poster {
    background: var(--ds-modal-card-surface);
    border: 1px solid var(--ds-modal-card-stroke);
    border-radius: var(--ds-modal-card-radius);
    box-shadow: var(--detail-modal-shadow);
    margin: 0 auto;
    max-height: var(--detail-modal-panel-min-height);
    max-width: var(--detail-modal-max-width);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--vault-red) transparent;
    scrollbar-width: thin;
    width: 100%;
  }

  .vault-hero__close {
    background: rgba(5, 5, 5, 0.9);
    border-color: rgba(245, 245, 240, 0.32);
    border-radius: 999px;
    height: 2.75rem;
    position: fixed;
    right: max(
      calc(var(--detail-modal-inline-pad) + env(safe-area-inset-right, 0px)),
      calc((100vw - var(--detail-modal-shell-width)) / 2 + 0.45rem + env(safe-area-inset-right, 0px))
    );
    top: calc(0.45rem + env(safe-area-inset-top, 0px));
    width: 2.75rem;
    z-index: 50010;
  }

  .vault-filter-sheet {
    background: var(--filter-sheet-surface) !important;
    border-left: none !important;
    border-radius: 1rem 1rem 0 0 !important;
    border-right: none !important;
    border-top: 1px solid var(--border-subtle) !important;
    bottom: 0 !important;
    box-shadow: var(--modal-shadowbox-shadow) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem;
    height: min(88dvh, 52rem) !important;
    left: 0 !important;
    max-height: calc(100dvh - 0.75rem) !important;
    max-width: none !important;
    min-height: min(34rem, 78dvh) !important;
    overflow: hidden !important;
    padding: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: translateY(calc(100% + 2px)) !important;
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1) !important;
    width: 100vw !important;
    z-index: 50020 !important;
  }

  body.vault-stream-page .vault-filter-sheet {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px))) !important;
  }

  body.vault-stream-page.filter-sheet-open .vault-filter-sheet .filter-sheet__body {
    flex: 0 1 auto !important;
  }

  .vault-filter-sheet.is-open {
    transform: translateY(0) !important;
  }

  body.vault-stream-page.filter-sheet-open .vault-filter-sheet {
    transform: translateY(calc(100% + 2px)) !important;
    will-change: transform !important;
  }

  body.vault-stream-page.filter-sheet-open .vault-filter-sheet.is-open {
    transform: translateY(0) !important;
  }

  .vault-filter-sheet .filter-sheet__handle {
    display: block;
  }

  .vault-filter-sheet .filter-sheet__head {
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    margin-bottom: 0;
    min-height: 3.75rem;
    padding: 0.75rem 3.75rem 0.625rem;
    position: relative;
  }

  .vault-filter-sheet__title {
    font-size: 1.32rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 800;
  }

  .vault-filter-sheet .filter-sheet__close {
    background: transparent;
    border-color: var(--filter-sheet-section-border);
    color: var(--text-secondary);
    font-family: var(--body);
    font-weight: 400;
    text-transform: none;
    border-radius: 50%;
    height: 2rem;
    min-height: 44px;
    min-width: 44px;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
  }

  .vault-filter-sheet .filter-sheet__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    overflow-y: auto;
    padding: 0.9rem 1rem 1.1rem;
  }

  .vault-filter-sheet .vault-promotion-dropdown .archive-filter-dropdown__trigger {
    min-height: 60px;
  }

  .vault-filter-sheet .filter-sheet__footer {
    background: var(--modal-shadowbox-surface);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-shrink: 0;
    gap: 0.75rem;
    margin-top: 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .vault-filter-sheet .filter-sheet__btn {
    border-radius: 0.375rem;
    flex: 1;
    height: 2.625rem;
    min-height: 2.625rem;
    padding: 0 0.9rem;
    font-family: var(--body);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: none;
  }

  .vault-filter-sheet .filter-sheet__btn--clear {
    background: transparent;
    border-color: var(--filter-sheet-section-border);
    color: var(--text-primary);
  }

  .vault-stream-page .archive-filter-modal-layer {
    width: 100vw;
  }

  .vault-filter-sheet .filter-sheet__btn--apply {
    background: var(--accent-red);
    border: none;
    color: #fff;
    display: block;
    flex: 2;
    font-weight: 600;
  }

  .vault-stream-page .filter-sheet-overlay {
    top: 0 !important;
  }
}

@media (max-width: 760px) {
  .vault-archive {
    --lens-preview-control-height: 2.65rem;
    gap: 1rem;
  }

  .vault-archive__mobile-toolbar {
    align-items: stretch;
    gap: clamp(1.05rem, 2.4vw, 1.45rem) clamp(0.85rem, 2vw, 1.35rem);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: clamp(1.35rem, 3.2vw, 2rem);
    position: relative;
    top: auto;
    z-index: 10;
  }

  .vault-archive__mobile-title-wrap {
    grid-column: 1 / -1;
    grid-row: 1;
    place-items: center start;
  }

  .vault-archive__mobile-title {
    align-self: center;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 0.92;
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .vault-archive__mobile-toolbar .filter-sheet-trigger {
    align-self: center;
    box-sizing: border-box;
    grid-column: 2;
    grid-row: 2;
    height: var(--lens-preview-control-height);
    justify-content: center;
    justify-self: end;
    min-height: var(--lens-preview-control-height);
    min-width: 0;
    padding-inline: clamp(0.85rem, 2.2vw, 1.1rem);
    width: auto;
  }

  .vault-archive__search {
    grid-column: 1;
    grid-row: 2;
    height: var(--lens-preview-control-height);
    justify-self: stretch;
    max-width: none;
    min-height: var(--lens-preview-control-height);
    min-width: 0;
    width: 100%;
  }

  .vault-archive [data-filter-sheet] .filter-sheet__head {
    border-bottom-color: var(--border-subtle);
  }

  .vault-archive [data-filter-sheet] .filter-sheet__body {
    padding: 0.9rem 1rem 1.1rem;
  }

  .vault-archive [data-filter-sheet] .vault-filter-bar {
    border: 0;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: 1fr;
    padding: 0;
  }

  .vault-archive [data-filter-sheet] .vault-filter-chip {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: var(--control-height-md);
    padding: 0 var(--control-padding-x-lg);
    text-align: left;
    width: 100%;
  }

  .vault-archive [data-filter-sheet] .vault-filter-chip::after {
    background-color: currentColor;
    color: currentColor;
    content: "";
    flex: 0 0 1.2rem;
    height: 1.2rem;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%20fill%3D'currentColor'%20aria-hidden%3D'true'%20focusable%3D'false'%3E%3Cpath%20d%3D'M382-240%20154-468l57-57%20171%20171%20367-367%2057%2057-424%20424Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%20-960%20960%20960'%20fill%3D'currentColor'%20aria-hidden%3D'true'%20focusable%3D'false'%3E%3Cpath%20d%3D'M382-240%20154-468l57-57%20171%20171%20367-367%2057%2057-424%20424Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    opacity: 0;
    text-align: center;
    text-transform: none;
    width: 1.2rem;
  }

  .vault-archive [data-filter-sheet] .vault-filter-chip.is-active::after {
    opacity: 1;
  }

  .vault-lightbox-open {
    overflow: hidden;
  }

  .vault-hero {
    background:
      radial-gradient(circle at 50% 0%, rgba(227, 27, 35, 0.16), transparent 20rem),
      #030303;
    bottom: 0;
    box-sizing: border-box;
    height: 100dvh;
    inset: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    padding: var(--detail-modal-block-start) var(--detail-modal-inline-pad) var(--detail-modal-block-end);
    pointer-events: none;
    right: 0;
    scrollbar-color: var(--vault-red) transparent;
    scrollbar-width: thin;
    top: 0;
    transform: translateY(0.75rem);
    transition:
      opacity 180ms ease,
      transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    visibility: hidden;
    width: 100%;
    z-index: 50000;
  }

  .vault-hero.is-open {
    display: block;
    min-height: 0;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .vault-hero.is-open.is-modal-entering {
    animation: vaultDetailCardExpand 340ms cubic-bezier(0.2, 0.86, 0.18, 1) both;
    transform-origin: center center;
    will-change: opacity, transform, clip-path;
  }

  .vault-hero.is-open.is-modal-closing {
    animation: vaultDetailCardCollapse 260ms cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
    pointer-events: none;
    transform-origin: center center;
    will-change: opacity, transform, clip-path;
  }

  .vault-hero.is-open .vault-hero__poster {
    background: var(--ds-modal-card-surface);
    border: 1px solid var(--ds-modal-card-stroke);
    border-radius: var(--ds-modal-card-radius);
    box-shadow: var(--detail-modal-shadow);
    display: block;
    margin: 0 auto;
    max-height: var(--detail-modal-panel-min-height, calc(100dvh - var(--detail-modal-block-start) - var(--detail-modal-block-end)));
    max-width: var(--detail-modal-max-width);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--vault-red) transparent;
    scrollbar-width: thin;
    width: 100%;
  }

  .vault-hero.is-open .vault-hero__stroke {
    display: none;
  }

  .vault-hero.is-open .vault-hero__stroke::before {
    animation: none;
  }

  .vault-hero.is-open.is-modal-entering .vault-hero__poster {
    animation: vaultDetailContentSettle 430ms cubic-bezier(0.2, 0.86, 0.18, 1) both;
  }

  .vault-hero.is-open.is-modal-closing .vault-hero__poster {
    animation: vaultDetailContentFade 190ms ease both;
  }

  .vault-hero__poster::before,
  .vault-hero__poster::after {
    bottom: auto;
    height: clamp(18rem, 54vw, 25rem);
    inset: 0;
    right: 0;
  }

  .vault-hero__content {
    background: var(--bg-panel, #f6f6f6);
    margin-top: clamp(18rem, 54vw, 25rem);
    padding: clamp(1.1rem, 4vw, 1.45rem);
  }

  .vault-title {
    color: var(--text-primary, #0d0d0d);
    font-size: clamp(2.45rem, 9vw, 3.85rem);
    max-width: none;
    text-shadow: none;
  }

  .vault-title--dense {
    font-size: clamp(2.08rem, 7.4vw, 3.15rem);
    line-height: 0.82;
  }

  .vault-info-rail {
    border-left: 0;
    border-top: 1px solid var(--vault-line);
    padding: clamp(1rem, 3vw, 1.35rem);
    position: relative;
    z-index: 3;
  }

  .vault-info-rail dl {
    grid-template-columns: 1fr;
  }

  .vault-hero__close {
    background: rgba(5, 5, 5, 0.9);
    border-color: rgba(245, 245, 240, 0.32);
    border-radius: 999px;
    height: 2.75rem;
    position: fixed;
    right: max(
      calc(var(--detail-modal-inline-pad) + env(safe-area-inset-right, 0px)),
      calc((100vw - var(--detail-modal-shell-width)) / 2 + 0.45rem + env(safe-area-inset-right, 0px))
    );
    top: calc(0.45rem + env(safe-area-inset-top, 0px));
    width: 2.75rem;
    z-index: 50010;
  }

  [data-theme="showa-light"] .vault-hero,
  [data-theme="modern-showa"] .vault-hero {
    --ds-modal-card-stroke: var(--modal-shadowbox-stroke, rgba(74, 74, 74, 0.62));
    --detail-modal-stroke: var(--ds-modal-card-stroke);
    --ds-modal-card-shadow: var(--modal-shadowbox-shadow);
    --detail-modal-shadow: var(--modal-shadowbox-shadow);
    background: var(--modal-shadowbox-backdrop);
  }

  [data-theme="showa-light"] .vault-hero.is-open .vault-hero__poster,
  [data-theme="modern-showa"] .vault-hero.is-open .vault-hero__poster {
    background: var(--ds-modal-card-surface);
    border-color: var(--ds-modal-card-stroke);
    box-shadow: var(--detail-modal-shadow);
  }

  [data-theme="showa-light"] .vault-hero.is-open .vault-button--report,
  [data-theme="modern-showa"] .vault-hero.is-open .vault-button--report {
    background: rgba(var(--text-primary-rgb), 0.035);
    border-color: rgba(var(--text-primary-rgb), 0.26);
    color: rgba(var(--text-primary-rgb), 0.76);
  }

  [data-theme="showa-light"] .vault-hero.is-open .vault-button--report:hover,
  [data-theme="showa-light"] .vault-hero.is-open .vault-button--report:focus-visible,
  [data-theme="modern-showa"] .vault-hero.is-open .vault-button--report:hover,
  [data-theme="modern-showa"] .vault-hero.is-open .vault-button--report:focus-visible {
    background: rgba(var(--accent-red-rgb), 0.08);
    border-color: rgba(var(--accent-red-rgb), 0.62);
    color: var(--accent-red);
  }

  @media (prefers-reduced-motion: reduce) {
    .vault-hero,
    .vault-hero.is-open.is-modal-entering,
    .vault-hero.is-open.is-modal-closing,
    .vault-hero.is-open.is-modal-entering .vault-hero__poster,
    .vault-hero.is-open.is-modal-closing .vault-hero__poster,
    .vault-hero__poster .vault-hero__stroke::before {
      animation: none;
      transition: none;
    }
  }
}

@media (max-width: 700px) {
  .vault-hero {
    padding: var(--detail-modal-block-start) var(--detail-modal-inline-pad) var(--detail-modal-block-end);
  }

  .vault-hero__poster {
    grid-template-columns: 1fr;
    max-height: var(--detail-modal-panel-min-height);
    min-height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .vault-hero__poster::before {
    bottom: auto;
    height: 40vh;
    inset: 0;
    background-position: 58% center;
  }

  .vault-hero__poster::after {
    bottom: auto;
    height: 40vh;
    inset: 0;
  }

  .vault-hero__content {
    background: var(--bg-panel, #f6f6f6);
    margin-top: 40vh;
    padding: clamp(1.1rem, 7vw, 1.6rem);
  }

  .vault-title {
    color: var(--text-primary, #0d0d0d);
    font-size: clamp(3rem, 14.4vw, 3.8rem);
    max-width: none;
    text-shadow: none;
  }

  .vault-title--dense {
    font-size: clamp(2.1rem, 11vw, 3.05rem);
    line-height: 0.84;
  }

  .vault-title span {
    white-space: normal;
  }

  .vault-info-rail {
    padding: 1.05rem;
  }

  .vault-info-rail dl {
    grid-template-columns: 1fr;
  }

  .vault-info-rail__item:nth-last-child(2) {
    border-bottom: 0;
  }

  .vault-archive__masthead {
    align-items: flex-start;
    flex-direction: column;
  }

  .vault-archive__grid {
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  }

  .vault-card {
    height: auto;
    min-height: 0;
    grid-template-rows: 12rem auto;
  }

  .vault-card__thumb {
    height: 12rem;
    min-height: 12rem;
  }

  .vault-card__body {
    gap: 0.5rem;
    padding: 0.9rem;
  }

  .vault-card__title {
    font-size: clamp(1.5rem, 8.5cqi, 1.9rem);
  }

  .vault-card__title--team {
    font-size: clamp(1.3rem, 7cqi, 1.6rem);
  }

  .vault-archive__mobile-title-wrap {
    min-height: 0;
  }

}

.vault-archive .vault-filter-sheet.is-open {
  transform: translateX(0) !important;
}

.vault-filter-sheet[hidden] {
  display: none !important;
}

@media (max-width: 1120px) {
  html:has(body.vault-stream-page.filter-sheet-open) {
    scrollbar-gutter: auto;
  }
}

@media (max-width: 1120px) {
  .vault-archive__groups,
  .vault-archive__groups .vault-era-filter {
    min-width: 0;
  }

  .vault-archive__groups .vault-era-filter h3 {
    display: none;
  }

  .vault-archive__groups .vault-era-options {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 0;
  }

  .vault-archive__groups .vault-era-options::-webkit-scrollbar {
    display: none;
  }

  .vault-archive__groups .vault-era-options button {
    background: #151515;
    border: 1px solid #333;
    border-radius: var(--button-radius, 8px);
    color: #c8c4bd;
    flex: 0 0 auto;
    min-width: 4.5rem;
    min-height: 3.5rem;
    padding: 0.65rem 1rem;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .vault-archive__groups .vault-era-options button[aria-pressed="true"] {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: var(--paper);
  }

  .vault-archive__groups .vault-era-options button:focus-visible {
    outline: 2px solid var(--accent-red);
    outline-offset: -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vault-stream-page .vault-card,
  .vault-stream-page .vault-card *,
  .vault-stream-page .vault-card *::before,
  .vault-stream-page .vault-card *::after,
  .vault-stream-page .vault-hero,
  .vault-stream-page .vault-hero *,
  .vault-stream-page .vault-hero *::before,
  .vault-stream-page .vault-hero *::after,
  .vault-stream-page .vault-filter-sheet {
    animation: none !important;
    transition: none !important;
  }
}

/* Match timeline/timeline-layout.css decade navigation without importing its page layout. */
.vault-stream-page .vault-era-options {
  gap: 0.65rem;
}

.vault-stream-page .vault-era-options .vault-era-button {
  align-content: center;
  background: #151515;
  border: 1px solid #333333;
  border-radius: var(--button-radius, 8px);
  color: #c8c4bd;
  height: 3.5rem;
  min-height: 3.5rem;
  padding: 0.65rem 1rem;
  font-size: 1.15rem;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.vault-stream-page .vault-era-options .vault-era-button:not([aria-pressed="true"]):hover {
  background: rgba(var(--text-primary-rgb), 0.06);
  border-color: rgba(var(--text-primary-rgb), 0.45);
  color: var(--text-primary);
}

.vault-stream-page .vault-era-options .vault-era-button[aria-pressed="true"] {
  background: rgba(var(--accent-red-rgb), 0.18);
  border-color: var(--accent-red);
  color: var(--text-primary);
}

.vault-stream-page .vault-era-options .vault-era-button:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: -5px;
}

@media (min-width: 1121px) {
  .vault-stream-page .vault-era-options .vault-era-button {
    padding-inline: 0.35rem;
  }

  .vault-stream-page .vault-hero {
    --ds-modal-card-stroke: #242424;
    padding: 1.5rem;
  }

  .vault-stream-page .vault-hero .vault-hero__poster {
    width: min(1260px, 100%);
    max-width: 1260px;
    height: min(744px, calc(100dvh - 3rem));
    min-height: 0;
    max-height: calc(100dvh - 3rem);
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .vault-stream-page .vault-hero__poster::before,
  .vault-stream-page .vault-hero__poster::after {
    right: 280px;
  }

  .vault-stream-page .vault-hero__content {
    padding: 2rem;
    min-width: 0;
  }

  .vault-stream-page .vault-title {
    font-size: clamp(2.4rem, 4.2vw, 3.4rem);
    line-height: 0.92;
    max-width: 100%;
  }

  .vault-stream-page .vault-title--dense {
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  }

  .vault-stream-page .vault-info-rail {
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
  }

  .vault-stream-page .vault-info-rail__inner {
    gap: 1.1rem;
  }

  .vault-stream-page .vault-info-rail__title {
    font-size: 1rem;
    margin-bottom: 0.8rem;
  }

  .vault-stream-page .vault-info-rail__item {
    min-height: 3.15rem;
    padding: 0.5rem 0.65rem;
  }
}

@keyframes vaultModalBackdropFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vaultModalPanelFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .vault-stream-page .vault-hero.is-open:not(.is-modal-closing) {
    animation: vaultModalBackdropFade 240ms ease-out both;
  }

  .vault-stream-page .vault-hero.is-open:not(.is-modal-closing) .vault-hero__poster {
    animation: vaultModalPanelFade 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

/* Match the Wrestlers phone sheet's edge alignment and separate scroll surface. */
@media (max-width: 768px) {
  html:has(body.vault-stream-page.vault-lightbox-open) {
    scrollbar-gutter: auto;
  }

  .vault-stream-page .vault-hero {
    --vault-phone-top-gap: max(10px, env(safe-area-inset-top, 0px));
    padding: var(--vault-phone-top-gap) 15px 0;
    width: 100vw;
    height: 100dvh;
    min-height: 0;
  }

  .vault-stream-page .vault-hero .vault-hero__poster.ds-modal-card {
    width: 100%;
    max-width: none;
    height: calc(100dvh - var(--vault-phone-top-gap));
    min-height: calc(100dvh - var(--vault-phone-top-gap));
    max-height: calc(100dvh - var(--vault-phone-top-gap));
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    background: #222;
    border: 0;
    outline: 0;
  }

  .vault-stream-page .vault-hero__poster::before,
  .vault-stream-page .vault-hero__poster::after {
    display: none;
  }

  .vault-stream-page .vault-hero__scroll {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    scrollbar-width: none;
    overflow-anchor: none;
  }

  .vault-hero__scroll::-webkit-scrollbar {
    display: none;
  }

  .vault-stream-page .vault-hero__photo {
    position: relative;
    display: block;
    height: 40dvh;
    border-radius: 24px;
    overflow: hidden;
    background-image: var(--hero-image);
    background-size: var(--hero-image-size, cover);
    background-position: var(--hero-image-position, center);
    background-repeat: no-repeat;
  }

  .vault-stream-page .vault-hero .vault-hero__photo .wrestler-share-toast.is-visible {
    top: auto;
    bottom: 12px;
    left: auto;
    right: 12px;
    width: max-content;
    max-width: calc(100% - 24px);
    text-align: center;
    transform: none;
  }

  .vault-stream-page .vault-hero__content {
    margin-top: 0;
    background: #222;
  }

  .vault-stream-page .vault-hero__close {
    display: none;
  }

  .vault-stream-page .vault-hero .vault-hero__poster > .wrestler-detail-panel__share {
    left: auto;
    right: 12px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: rgb(20 20 19 / 90%);
    border-color: rgb(244 241 233 / 35%);
  }

  .vault-stream-page .vault-hero.is-phone-sheet-visible .vault-hero__poster {
    transform: translate3d(0, var(--vault-sheet-drag-y, 0px), 0);
  }

  .vault-stream-page .vault-hero__drag-handle {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 50011;
    transform: translateX(-50%);
    width: 80px;
    min-height: 48px;
    padding: env(safe-area-inset-top, 0px) 0 0;
    border: 0;
    background: transparent;
    cursor: ns-resize;
    touch-action: none;
  }

  .vault-hero__drag-handle::after {
    content: "";
    position: absolute;
    top: calc(6px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 3px;
    background: #000;
    box-shadow: 0 0 0 1px rgb(244 241 233 / 40%);
  }

  .vault-hero__drag-handle:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: -4px;
    border-radius: 12px;
  }
}



.vault-stream-page .vault-hero .vault-info-rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vault-stream-page .vault-hero .vault-info-rail__inner {
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;
}

.vault-stream-page .vault-hero .vault-button--report {
  align-self: center;
  flex: 0 0 auto;
  margin-top: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 36px;
  padding: 0.4rem 0;
  transform: none;
}

.vault-stream-page .vault-hero .vault-button--report:is(:hover, :focus-visible) {
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.vault-stream-page .vault-hero .vault-button--report:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 3px;
}

.vault-stream-page .vault-hero .vault-button--report .material-symbols-outlined {
  font-size: var(--icon-size-sm);
}

/* The shared phone drawer renders outside the desktop .vault-hero host. */
@media (max-width: 768px) {
  html[data-theme] body .streaming-profile-sheet .stream-match-view,
  html[data-theme] body .streaming-profile-sheet .stream-match-view .vault-hero__content,
  html[data-theme] body .streaming-profile-sheet .stream-match-view .vault-info-rail {
    background: var(--sheet-surface, #222222);
    border: 0;
    outline: 0;
    box-shadow: none;
  }

  html[data-theme] body .streaming-profile-sheet .vault-info-rail__item {
    border: 0;
  }

  html[data-theme] body .streaming-profile-sheet .vault-button--report {
    align-self: center;
    flex: 0 0 auto;
    width: auto;
    margin: 1.5rem 0 0;
    min-height: 44px;
    padding: 0.5rem 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #a6a6a6;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
    transform: none;
  }

  html[data-theme] body .streaming-profile-sheet .vault-button--report:is(:hover, :focus-visible) {
    background: transparent;
    color: var(--sheet-paper, #f4f1e9);
    box-shadow: none;
    transform: none;
  }

  html[data-theme] body .streaming-profile-sheet .vault-button--report:focus-visible {
    outline: 2px solid var(--sheet-paper, #f4f1e9);
    outline-offset: 3px;
  }

  html[data-theme] body .streaming-profile-sheet .vault-button--report .material-symbols-outlined {
    font-size: 16px;
  }
}

/* Changing filter scope must not resize the toolbar or move the results. */
.vault-stream-page .vault-archive__mobile-title-wrap {
  grid-template-rows: auto auto;
  align-content: center;
}

.vault-stream-page .vault-archive__mobile-title,
.vault-stream-page .vault-archive__mobile-filter-note {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vault-stream-page .vault-archive__mobile-filter-note {
  font-variant-numeric: tabular-nums;
}

.vault-stream-page .filter-sheet-trigger__badge[hidden] {
  display: inline-flex !important;
  visibility: hidden;
}

/* Keep the photo's rounded edge free of a full-height rail divider. */
.vault-stream-page .vault-hero {
  /* Original rail paint, composited over the original #141414 card surface. */
  --vault-modal-pane-surface:
    linear-gradient(180deg, rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.92)),
    linear-gradient(rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.58)),
    #141414;
  --ds-modal-card-surface: var(--vault-modal-pane-surface);
}

.vault-stream-page .vault-hero .vault-hero__poster {
  background: var(--vault-modal-pane-surface);
}

.vault-stream-page .vault-hero .vault-info-rail {
  border-left: 0;
  background: var(--vault-modal-pane-surface);
}

@media (min-width: 769px) {
  .vault-stream-page .vault-hero .vault-hero__poster::after {
    border-radius: 24px;
  }

  .vault-stream-page .vault-hero .vault-hero__close {
    position: absolute;
    inset: 12px 12px auto auto;
    z-index: 8;
  }

  .vault-stream-page .vault-hero .vault-hero__content {
    min-width: 0;
    container-type: inline-size;
  }

  .vault-stream-page .vault-hero .vault-title > span {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Tablet portrait uses one continuous, scrollable card, with a real photo row.
   Wide landscape retains the cinematic split without borrowing phone offsets. */
@media (min-width: 769px) and (max-width: 1120px) {
  html[data-theme] body.vault-stream-page .vault-hero.is-open {
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
  }

  html[data-theme] body.vault-stream-page .vault-hero .vault-hero__poster {
    display: block;
    width: min(900px, 100%);
    max-width: 900px;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: 0;
    overflow: hidden auto;
    background: var(--vault-modal-pane-surface);
    scrollbar-width: none;
  }

  html[data-theme] body.vault-stream-page .vault-hero .vault-hero__poster::-webkit-scrollbar {
    display: none;
  }

  html[data-theme] body.vault-stream-page .vault-hero .vault-hero__photo.archive-drawer__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(260px, 34dvh, 380px);
  }

  .vault-stream-page .vault-hero .vault-hero__poster::after {
    display: none;
  }

  .vault-stream-page .vault-hero .vault-hero__content {
    margin: 0;
    padding: 24px;
    background: var(--vault-modal-pane-surface);
  }

  .vault-stream-page .vault-hero .vault-title {
    font-size: clamp(2rem, 7cqi, 3.5rem);
    line-height: 0.95;
  }

  .vault-stream-page .vault-hero .vault-info-rail {
    padding: 24px;
    border: 0;
    background: var(--vault-modal-pane-surface);
    scrollbar-width: none;
  }

  .vault-stream-page .vault-hero .vault-info-rail::-webkit-scrollbar {
    display: none;
  }

  .vault-stream-page .vault-hero .vault-info-rail__inner {
    gap: 1.25rem;
  }

  .vault-stream-page .vault-hero .vault-info-rail__title {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }

  .vault-stream-page .vault-hero .vault-info-rail__item {
    min-height: 3.15rem;
    padding: 0.5rem 0.65rem;
  }

  .vault-stream-page .vault-hero .vault-info-rail__detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vault-stream-page .vault-hero .vault-button--report {
    margin-top: 24px;
  }
}

@media (min-width: 1000px) and (max-width: 1120px) and (orientation: landscape) {
  html[data-theme] body.vault-stream-page .vault-hero .vault-hero__poster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    width: 100%;
    max-width: none;
    height: min(744px, calc(100dvh - 48px));
    overflow: hidden;
  }

  html[data-theme] body.vault-stream-page .vault-hero .vault-hero__photo.archive-drawer__media {
    position: absolute;
    inset: 0 280px 0 0;
    width: auto;
    height: 100%;
  }

  .vault-stream-page .vault-hero .vault-hero__poster::after {
    display: block;
    inset: 0 280px 0 0;
    height: auto;
  }

  .vault-stream-page .vault-hero .vault-hero__content {
    grid-column: 1;
    grid-row: 1;
    background: transparent;
  }

  .vault-stream-page .vault-hero .vault-info-rail {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
    padding-top: 60px;
  }

  .vault-stream-page .vault-hero .vault-info-rail__detail-list {
    grid-template-columns: minmax(0, 1fr);
  }
}