.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

:root {
  --deadcat-purple: #803080;
  --deadcat-yellow: #f2d14c;
  --deadcat-gold: #e1b928;
  --deadcat-amber: #ffde66;
  --deadcat-ice: #f0f0f0;
  --deadcat-bg-dark: #221629;
  --deadcat-bg-mid: #2f2139;
  --deadcat-bg-soft: #3a2b47;
}

.site-brand__logo {
  display: block;
  width: auto;
  height: 1.6rem;
}

.site-brand__name {
  line-height: 1;
}

#header.alt h1 {
  opacity: 1;
  visibility: visible;
}

#banner:not(.banner-carousel) {
  background-image: linear-gradient(135deg, rgba(128, 48, 128, 0.88), rgba(242, 209, 76, 0.72)), var(--page-banner-image, url("../assets/images/branding/ten(trans-back).png"));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover, min(30rem, 65vw);
}

#banner.banner-carousel {
  position: relative;
  overflow: hidden;
  background-image: none;
}

#banner.banner-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(135deg, rgba(128, 48, 128, 0.88), rgba(242, 209, 76, 0.72));
}

#banner.banner-carousel .banner-carousel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

#banner.banner-carousel .banner-carousel__track {
  display: flex;
  height: 100%;
  width: calc(var(--slide-count, 1) * 100%);
  transition: transform 0.55s ease;
  transform: translateX(calc(-100% * var(--slide-index, 0) / var(--slide-count, 1)));
}

#banner.banner-carousel .banner-carousel__slide {
  flex: 0 0 calc(100% / var(--slide-count, 1));
  height: 100%;
  background-image: var(--slide-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#banner.banner-carousel .inner {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 1280px) {
  #banner.banner-carousel {
    background-color: transparent;
    background-image: none;
  }
}

body,
#page-wrapper {
  background-color: var(--deadcat-bg-dark);
}

#header {
  background-color: rgba(34, 22, 41, 0.95);
}

#menu {
  background-color: rgba(28, 19, 34, 0.98);
}

#menu .inner {
  background-color: var(--deadcat-bg-mid);
}

#menu .links li {
  border-top-color: rgba(242, 209, 76, 0.22);
}

.wrapper {
  background-color: var(--deadcat-bg-mid);
}

.wrapper:before,
.wrapper:after {
  background-image: linear-gradient(to right, rgba(128, 48, 128, 0.36), rgba(242, 209, 76, 0.3));
}

.wrapper.alt {
  background-color: var(--deadcat-bg-dark);
}

.wrapper.style1 {
  background-color: var(--deadcat-bg-mid);
}

.wrapper.style2 {
  background-color: #352742;
}

.wrapper.style3 {
  background-color: var(--deadcat-bg-soft);
}

.wrapper.spotlight,
.wrapper.spotlight.style1,
.wrapper.spotlight.style2,
.wrapper.spotlight.style3,
.wrapper.spotlight.style4,
.wrapper.spotlight.style5,
.wrapper.spotlight.style6 {
  background-color: var(--deadcat-bg-mid) !important;
}

.wrapper.spotlight.style2 {
  background-color: #3a2a46 !important;
}

.wrapper.spotlight.style3 {
  background-color: var(--deadcat-bg-soft) !important;
}

.wrapper.spotlight:before,
.wrapper.spotlight:after,
.wrapper.spotlight.style1:before,
.wrapper.spotlight.style1:after,
.wrapper.spotlight.style2:before,
.wrapper.spotlight.style2:after,
.wrapper.spotlight.style3:before,
.wrapper.spotlight.style3:after,
.wrapper.alt.style1:before,
.wrapper.alt.style1:after {
  background-image: linear-gradient(to right, rgba(242, 209, 76, 0.38), rgba(128, 48, 128, 0.34)) !important;
  box-shadow: inset 0 -1px 0 0 rgba(242, 209, 76, 0.18), 0 1px 0 0 rgba(128, 48, 128, 0.18) !important;
}

.spotlight .mascot-feature {
  background-color: rgba(240, 240, 240, 0.08);
  border: 1px solid rgba(255, 222, 102, 0.42);
  border-radius: 0.35rem;
}

.spotlight .mascot-feature img {
  background: radial-gradient(circle, rgba(240, 240, 240, 0.25) 0%, rgba(0, 0, 0, 0) 70%);
  object-fit: contain;
  padding: 0.75rem;
}

.page-revive .wrapper.spotlight .image.revive-mockup {
  border-radius: 0.75rem !important;
  box-shadow: 0 0.75rem 2rem rgba(128, 48, 128, 0.35), 0 0 0 2px rgba(242, 209, 76, 0.35);
}

.page-revive .wrapper.spotlight .image.revive-mockup img {
  border-radius: 0.75rem !important;
  object-fit: cover;
}

.page-revive #page-wrapper {
  background: linear-gradient(180deg, #ffde66 0%, #f2d14c 45%, #2a1c33 100%);
}

.page-revive .wrapper,
.page-revive .wrapper.spotlight,
.page-revive .wrapper.spotlight.style1 {
  background-color: #f2d14c !important;
  color: #2a1631;
}

.page-revive .wrapper.alt.style1 {
  background-color: #ffde66 !important;
  color: #2a1631;
}

.page-revive .wrapper h2,
.page-revive .wrapper .major,
.page-revive .wrapper p,
.page-revive .wrapper li {
  color: #2a1631 !important;
}

.page-revive .wrapper.spotlight:before,
.page-revive .wrapper.spotlight:after,
.page-revive .wrapper.alt.style1:before,
.page-revive .wrapper.alt.style1:after {
  background-image: linear-gradient(to right, rgba(255, 222, 102, 0.95), rgba(128, 48, 128, 0.42)) !important;
  box-shadow: inset 0 -1px 0 0 rgba(128, 48, 128, 0.25), 0 1px 0 0 rgba(255, 222, 102, 0.25) !important;
}

.page-revive a.special {
  background-color: rgba(128, 48, 128, 0.92);
  box-shadow: inset 0 0 0 2px #2a1631;
  color: #ffde66 !important;
}

.page-revive a.special:hover {
  background-color: #6e2870;
  box-shadow: inset 0 0 0 2px #2a1631;
}

a.special {
  box-shadow: inset 0 0 0 2px var(--deadcat-yellow);
  color: var(--deadcat-ice) !important;
}

a.special:hover {
  background-color: rgba(242, 209, 76, 0.2);
  box-shadow: inset 0 0 0 2px var(--deadcat-gold);
}

#header nav a,
#menu .links a:hover {
  color: var(--deadcat-amber) !important;
}