:root {
  background: #050712;
  color: #fff6cc;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 36, 97, 0.42), transparent 20rem),
    radial-gradient(circle at 88% 20%, rgba(55, 225, 255, 0.28), transparent 22rem),
    #050712;
}

main {
  min-height: 100vh;
  padding: clamp(18px, 4vw, 56px);
}

nav,
article {
  max-width: 900px;
  margin: 0 auto;
}

nav,
article p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

article {
  margin-top: clamp(32px, 8vw, 88px);
}

h1 {
  margin: 0 0 1rem;
  color: #ffef6a;
  font-size: clamp(2.3rem, 8vw, 5.8rem);
  line-height: 0.9;
  text-transform: uppercase;
}

h2 {
  color: #ff4f91;
}

p,
li {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
}

figure {
  margin: 1.4rem 0 2rem;
  overflow: hidden;
  border: 2px solid rgba(85, 232, 255, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 79, 145, 0.22), rgba(85, 232, 255, 0.12)),
    #080b18;
}

.media-label {
  display: inline-block;
  margin: 0.85rem 1rem 0;
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(255, 239, 106, 0.48);
  border-radius: 6px;
  background: rgba(5, 7, 18, 0.74);
  color: #ffef6a;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

figure img,
figure video {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}

figcaption {
  padding: 0.8rem 1rem;
  background: rgba(5, 7, 18, 0.74);
  line-height: 1.4;
}

figcaption strong,
figcaption span {
  display: block;
}

a {
  color: #55e8ff;
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.15rem;
  border: 2px solid rgba(255, 239, 106, 0.76);
  border-radius: 8px;
  background: #12162c;
  text-transform: uppercase;
}