/* Character artwork complements the interface; all copy remains live HTML. */
body.helis-shell .helis-art-banner {
  position: relative; isolation: isolate; display: flex; align-items: center;
  padding: 0; min-height: 290px; overflow: hidden; background: #141721;
}
body.helis-shell .helis-art-banner::before,
body.helis-shell .helis-art-banner::after { display: none; }
.helis-art-media { position: absolute; inset: 0; display: block; pointer-events: none; }
.helis-art-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 76% center; }
.helis-art-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #10121ce6, #10121c9c 45%, transparent 72%);
}
body.helis-shell .helis-art-banner .helis-art-copy {
  position: relative; z-index: 1; width: 59%; max-width: 680px; padding: 30px 32px;
}
body.helis-shell .helis-art-copy :is(p, .subtitle) { color: #c7c7d5; }
body.helis-shell .helis-art-copy h1 { font-size: clamp(26px, 2.7vw, 36px); }
body.helis-shell .helis-art-banner--crew .helis-art-copy { width: 45%; }

/* The canonical portrait is visible, separate from the sign-in controls. */
.registration-page .registration-main { align-items: center; padding-top: 36px; padding-bottom: 36px; }
.registration-mascot { position: relative; height: 290px; margin-top: 24px; overflow: hidden; pointer-events: none; }
.registration-mascot::before {
  content: ''; position: absolute; inset: 5% 0 0;
  background: radial-gradient(ellipse at 50% 70%, #8370ed20, transparent 65%);
}
.registration-mascot img {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 260px; height: 390px; object-fit: contain;
  -webkit-mask-image: linear-gradient(#000 62%, transparent 83%);
  mask-image: linear-gradient(#000 62%, transparent 83%);
}
.registration-page .registration-caption { margin-top: 14px; }

@media (min-width: 1280px) {
  .registration-page .registration-intro { position: relative; min-height: 530px; padding-top: 32px; }
  .registration-page .registration-intro h1 { max-width: 430px; }
  .registration-page .registration-mascot { position: absolute; top: 95px; right: -40px; width: 330px; height: 450px; margin: 0; }
  .registration-page .registration-mascot img {
    width: 330px; height: 495px;
    -webkit-mask-image: linear-gradient(#000 70%, transparent 96%);
    mask-image: linear-gradient(#000 70%, transparent 96%);
  }
  .registration-page .registration-caption { margin-top: 46px; }
}

@media (min-width: 1600px) {
  body.helis-shell .helis-art-banner { min-height: 340px; }
}
@media (max-width: 760px) {
  body.helis-shell .helis-art-banner { display: flex; flex-direction: column; align-items: stretch; }
  .helis-art-media { position: relative; inset: auto; width: 100%; height: 220px; flex-shrink: 0; }
  .helis-art-media img { object-position: 80% 30%; }
  .helis-art-media::after { background: linear-gradient(0deg, #141721, transparent 35%); }
  body.helis-shell .helis-art-banner .helis-art-copy { width: 100%; max-width: none; padding: 10px 24px 26px; }
  .registration-mascot { height: 260px; }
  .registration-mascot img { width: 240px; height: 360px; }
}
@media (max-width: 400px) {
  .helis-art-media { height: 195px; }
  body.helis-shell .helis-art-banner .helis-art-copy { padding: 8px 20px 24px; }
}