.servers-page {
  --frame-steel: #b9a9c9;
  --frame-violet: #a86cff;
  --frame-glow: rgba(168, 108, 255, .45);
}

.servers-page .banner-copy h1 span { color: var(--purple-bright); }

/* The stage holds the badge and the frame, centred on the page. */
.featured-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 9vw, 7rem);
  text-align: center;
}

.featured-badge {
  width: min(100%, 46rem);
  height: auto;
  margin-bottom: clamp(-2.5rem, -4vw, -1.5rem);
  filter: drop-shadow(0 10px 26px rgba(90, 40, 150, .35));
}

/* Frame: steel edge, violet inner rule, diamond corners, a haze behind it. */
.featured-frame {
  position: relative;
  width: min(100%, 44rem);
  border: 1px solid color-mix(in srgb, var(--frame-steel), transparent 55%);
  background:
    radial-gradient(circle at 50% 0, rgba(120, 62, 190, .22), transparent 60%),
    linear-gradient(180deg, rgba(32, 23, 46, .97), rgba(12, 9, 18, .99));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 42px var(--frame-glow),
    0 34px 90px rgba(0, 0, 0, .55);
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.1rem, 4vw, 2.6rem) clamp(1.8rem, 4vw, 2.6rem);
}

/* Inner violet rule, inset from the steel edge. */
.featured-frame::before {
  content: "";
  position: absolute;
  inset: .5rem;
  border: 1px solid color-mix(in srgb, var(--frame-violet), transparent 62%);
  pointer-events: none;
}

/* A steel diamond at each corner, echoing the badge. */
.frame-gem {
  position: absolute;
  width: .62rem;
  height: .62rem;
  background: linear-gradient(145deg, #e6dcf0, var(--frame-steel));
  box-shadow: 0 0 10px var(--frame-violet);
  transform: rotate(45deg);
  pointer-events: none;
}
.gem-tl { left: -.34rem; top: -.34rem; }
.gem-tr { right: -.34rem; top: -.34rem; }
.gem-bl { left: -.34rem; bottom: -.34rem; }
.gem-br { right: -.34rem; bottom: -.34rem; }

.featured-flyer { margin: 0 0 1.5rem; }
.featured-flyer a { display: inline-block; max-width: 100%; border-radius: .2rem; line-height: 0; }
.featured-flyer a:focus-visible { outline: 2px solid #ecf6ff; outline-offset: 4px; }
.featured-flyer img {
  width: 100%;
  max-width: 22rem;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--frame-steel), transparent 70%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
/* A wide banner instead of a tall flyer: let it fill the frame. */
.featured-frame:not(.portrait) .featured-flyer img { max-width: 100%; }

.featured-name {
  margin: 0 0 .7rem;
  color: #fff8ef;
  font: 700 clamp(2.1rem, 5vw, 3rem)/1.05 Georgia, serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.featured-desc {
  max-width: 34rem;
  margin: 0 auto 1.7rem;
  color: var(--ink-muted);
}

.featured-join { display: inline-block; max-width: 100%; border-radius: .35rem; line-height: 0; }
.featured-join img {
  width: 24rem;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5));
  transition: transform .2s, filter .2s;
}
.featured-join:hover img,
.featured-join:focus-visible img {
  transform: translateY(-3px) scale(1.02);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5)) drop-shadow(0 0 16px var(--frame-glow));
}
.featured-join:focus-visible { outline: 2px solid #ecf6ff; outline-offset: 5px; }

@media (max-width: 620px) {
  .featured-badge { margin-bottom: -1rem; }
  .featured-frame::before { inset: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-join img { transition: none; }
}