.creator-link { display: flex; align-items: center; gap: .6rem; width: fit-content; max-width: 100%; min-height: 44px; margin-top: .7rem; color: #b2eaf1; font-size: .8rem; line-height: 1.5; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.creator-link:hover { color: #fff; }
.creator-link--home { margin: 1rem auto 0; text-align: center; }
.creator-page { background: #07101d; }
.creator-shell { min-height: 100svh; background: linear-gradient(90deg, #040b14ef, #061220c9), url('../images/optimized/monster-math-battlefield-960.webp') center / cover; }
.creator-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem clamp(1rem, 4vw, 4rem); border-bottom: 1px solid #a4d8f021; }
.creator-header .brand-button { text-decoration: none; }
.creator-back { color: #c1e7ed; min-height: 44px; display: flex; align-items: center; text-underline-offset: .25em; font-size: .85rem; }
.creator-story { max-width: 1140px; margin: auto; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(200px, 1fr); align-items: center; gap: 2rem; }
.creator-copy h1 { margin: 1.2rem 0 1.7rem; font: 800 clamp(2.7rem, 5vw, 4.2rem)/1.06 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.creator-copy h1 em { color: #a4edf2; font-style: normal; }
.creator-copy p { max-width: 39rem; margin: 0 0 1.3rem; color: #cfdee7; font-size: 1rem; line-height: 1.8; }
.creator-copy .creator-intro { color: #f0f8fc; font-size: 1.15rem; }
.creator-copy .primary-button { margin-top: .8rem; width: fit-content; max-width: 100%; text-decoration: none; }
.creator-monster { position: relative; display: grid; justify-items: center; isolation: isolate; }
.creator-monster img { display: block; width: 100%; max-width: 340px; height: auto; filter: drop-shadow(0 15px 30px #0009); }
.creator-glow { position: absolute; inset: 10% -5%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, #65dfea22, transparent 65%); }
.creator-monster > span { margin-top: .5rem; color: #a5cdd5; font: 700 .8rem 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-align: center; }
@media (max-width: 650px) {
  .creator-header { padding: .8rem 1rem; }
  .creator-header .brand-button { font-size: .8rem; gap: .5rem; }
  .creator-back { font-size: .75rem; }
  .creator-story { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.5rem; }
  .creator-copy .eyebrow { font-size: .66rem; letter-spacing: .11em; }
  .creator-monster img { max-width: 200px; }
  .creator-copy .primary-button { width: 100%; }
}