/* =========================================================
   MM Build 7 — Mutant Profile Master
   ========================================================= */

.mm-mutant-profile {
  --profile-accent: var(--mm-founder-yellow);
  background: #030506;
}

.mm-mutant-profile.is-blaze { --profile-accent: var(--mm-blaze); }
.mm-mutant-profile.is-aero { --profile-accent: var(--mm-aero); }
.mm-mutant-profile.is-terra { --profile-accent: var(--mm-terra); }
.mm-mutant-profile.is-volt { --profile-accent: var(--mm-volt); }
.mm-mutant-profile.is-aqua { --profile-accent: var(--mm-aqua); }
.mm-mutant-profile.is-bio { --profile-accent: var(--mm-bio); }
.mm-mutant-profile.is-mech { --profile-accent: var(--mm-mech); }

.mm-mutant-profile__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  min-height: 58px;
  color: #68737a;
  font-size: .52rem;
  font-weight: 950;
  letter-spacing: .11em;
}

.mm-mutant-profile__breadcrumb a {
  color: #afb6ba;
}

.mm-mutant-profile__breadcrumb strong {
  color: var(--profile-accent);
}

/* HERO */

.mm-mutant-profile__hero {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.055);
  border-bottom: 1px solid var(--mm-line);
  background:
    radial-gradient(circle at 83% 38%, color-mix(in srgb, var(--profile-accent) 10%, transparent), transparent 0 28%),
    linear-gradient(120deg, #050708 0 48%, #080d10 100%);
}

.mm-mutant-profile__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 159px, rgba(255,255,255,.014) 159px 160px),
    linear-gradient(115deg, transparent 0 52%, color-mix(in srgb, var(--profile-accent) 5%, transparent) 52% 52.4%, transparent 52.4%);
}

.mm-mutant-profile__hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  min-height: min(780px, calc(100vh - 120px));
}

.mm-mutant-profile__hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 7vw, 7rem) clamp(2rem, 5vw, 5.5rem) clamp(4rem, 7vw, 7rem) 0;
}

.mm-mutant-profile__hero-meta {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: 1.3rem;
}

.mm-mutant-profile__hero-meta span,
.mm-mutant-profile__hero-meta strong {
  padding: .4rem .56rem;
  border: 1px solid rgba(255,255,255,.11);
  font-size: .49rem;
  font-weight: 1000;
  letter-spacing: .13em;
}

.mm-mutant-profile__hero-meta strong {
  border-color: color-mix(in srgb, var(--profile-accent) 42%, transparent);
  color: var(--profile-accent);
}

.mm-mutant-profile__hero-copy h1 {
  max-width: 800px;
  margin: .16em 0 .15em;
  font-size: clamp(4rem, 8vw, 9rem);
  line-height: .78;
  letter-spacing: -.055em;
}

.mm-mutant-profile__fusion {
  margin: .5rem 0 0;
  color: #d8dddf;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 750;
}

.mm-mutant-profile__lede {
  max-width: 620px;
  margin: 1.4rem 0 0;
  color: #a6afb4;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.65;
}

.mm-mutant-profile__hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}

.mm-mutant-profile__hero-tags span {
  padding: .48rem .62rem;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.025);
  color: #8f999e;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mm-mutant-profile__founder-connection {
  display: grid;
  max-width: 480px;
  gap: .2rem;
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--profile-accent);
  background: rgba(255,255,255,.025);
}

.mm-mutant-profile__founder-connection span {
  color: #717c81;
  font-size: .48rem;
  font-weight: 1000;
  letter-spacing: .13em;
}

.mm-mutant-profile__founder-connection strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.mm-mutant-profile__founder-connection small {
  color: #818c92;
  line-height: 1.45;
}

.mm-mutant-profile__hero-visual {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,.07);
  background: #080c0f;
}

.mm-mutant-profile__hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,5,6,.6), transparent 25%),
    linear-gradient(180deg, transparent 55%, rgba(2,4,5,.72));
}

.mm-mutant-profile__hero-visual > img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}

.mm-mutant-profile__hero-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 57% 40%, color-mix(in srgb, var(--profile-accent) 17%, transparent), transparent 0 25%),
    linear-gradient(145deg, #11191d, #050709 62%, #101518);
}

.mm-mutant-profile__technical-grid {
  position: absolute;
  inset: 0;
  opacity: .45;
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,.025) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.018) 47px 48px);
}

.mm-mutant-profile__hero-placeholder::after {
  content: "";
  position: absolute;
  width: min(48vw, 520px);
  aspect-ratio: 1;
  top: 13%;
  right: 8%;
  border: 1px solid color-mix(in srgb, var(--profile-accent) 25%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 45px color-mix(in srgb, var(--profile-accent) 3%, transparent),
    0 0 0 92px rgba(255,255,255,.012);
}

.mm-mutant-profile__hero-code {
  position: absolute;
  top: 25px;
  right: 28px;
  color: rgba(255,255,255,.35);
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .15em;
}

.mm-mutant-profile__hero-placeholder > div {
  position: relative;
  z-index: 1;
}

.mm-mutant-profile__hero-placeholder small,
.mm-mutant-profile__hero-placeholder span {
  display: block;
}

.mm-mutant-profile__hero-placeholder small {
  margin-bottom: .6rem;
  color: var(--profile-accent);
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .15em;
}

.mm-mutant-profile__hero-placeholder strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 7rem);
  line-height: .8;
}

.mm-mutant-profile__hero-placeholder span {
  margin-top: .8rem;
  color: #89949a;
}

.mm-mutant-profile__visual-frame {
  position: absolute;
  inset: 20px;
  z-index: 3;
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,.2);
  border-right: 1px solid rgba(255,255,255,.1);
}

.mm-mutant-profile__visual-frame::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  width: 110px;
  height: 4px;
  background: var(--profile-accent);
}

.mm-mutant-profile__visual-label {
  position: absolute;
  left: 28px;
  bottom: 25px;
  z-index: 4;
  display: flex;
  gap: .7rem;
  align-items: center;
  color: rgba(255,255,255,.68);
  font-size: .5rem;
  font-weight: 1000;
  letter-spacing: .12em;
}

.mm-mutant-profile__visual-label i {
  color: var(--profile-accent);
  font-style: normal;
}

.mm-mutant-profile__hero-rail {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #647077;
  font-size: .49rem;
  font-weight: 1000;
  letter-spacing: .12em;
}

.mm-mutant-profile__hero-rail strong {
  color: var(--profile-accent);
}

/* COMMON SECTIONS */

.mm-mutant-profile__section,
.mm-mutant-profile__performance > .shell,
.mm-mutant-profile__abilities > .shell,
.mm-mutant-profile__gallery > .shell {
  padding-top: clamp(5rem, 8vw, 8rem);
  padding-bottom: clamp(5rem, 8vw, 8rem);
}

.mm-mutant-profile__section-heading {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-end;
  margin-bottom: clamp(2rem, 4vw, 3.4rem);
}

.mm-mutant-profile__section-heading h2 {
  margin: .2rem 0 0;
  font-size: clamp(2.8rem, 5vw, 5.3rem);
  line-height: .88;
  letter-spacing: -.04em;
}

.mm-mutant-profile__section-code {
  color: #5f6a70;
  font-size: .53rem;
  font-weight: 1000;
  letter-spacing: .13em;
  white-space: nowrap;
}

/* IDENTITY */

.mm-mutant-profile__identity-grid {
  display: grid;
  grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}

.mm-mutant-profile__identity-panel {
  border-top: 4px solid var(--profile-accent);
  background: rgba(255,255,255,.025);
}

.mm-mutant-profile__identity-panel dl {
  margin: 0;
}

.mm-mutant-profile__identity-panel dl > div {
  display: grid;
  grid-template-columns: minmax(100px, .72fr) 1.28fr;
  gap: 1rem;
  padding: .95rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.065);
}

.mm-mutant-profile__identity-panel dt {
  color: #667177;
  font-size: .51rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mm-mutant-profile__identity-panel dd {
  margin: 0;
  color: #d8dddf;
  font-size: .85rem;
  font-weight: 700;
}

.mm-mutant-profile__story {
  display: grid;
  align-content: start;
  gap: 2rem;
}

.mm-mutant-profile__story-block {
  max-width: 850px;
}

.mm-mutant-profile__story-block > span {
  display: block;
  margin-bottom: .6rem;
  color: var(--profile-accent);
  font-size: .52rem;
  font-weight: 1000;
  letter-spacing: .13em;
}

.mm-mutant-profile__story-block p {
  margin: 0;
  color: #a8b1b6;
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.8;
}

/* PERFORMANCE */

.mm-mutant-profile__performance {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--profile-accent) 7%, transparent), transparent 0 28%),
    #070a0c;
}

.mm-mutant-profile__axes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
}

.mm-mutant-profile__axis {
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.018);
}

.mm-mutant-profile__axis-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: .8rem;
  align-items: baseline;
  margin-bottom: .7rem;
}

.mm-mutant-profile__axis-head > span {
  color: var(--profile-accent);
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.mm-mutant-profile__axis-head small {
  color: #68747a;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.mm-mutant-profile__axis-head strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.mm-mutant-profile__axis-track {
  height: 5px;
  overflow: hidden;
  background: rgba(255,255,255,.07);
}

.mm-mutant-profile__axis-track i {
  display: block;
  width: var(--axis-value);
  height: 100%;
  background: linear-gradient(90deg, var(--profile-accent), color-mix(in srgb, var(--profile-accent) 42%, white));
}

.mm-mutant-profile__axis-note {
  max-width: 720px;
  margin: 1.3rem 0 0;
  color: #687279;
  font-size: .7rem;
  line-height: 1.55;
}

/* MOVEMENT */

.mm-mutant-profile__movement-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.mm-mutant-profile__movement-grid article {
  min-height: 240px;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,.085);
  border-top: 3px solid var(--profile-accent);
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
}

.mm-mutant-profile__movement-grid article > span {
  color: #657076;
  font-size: .48rem;
  font-weight: 1000;
  letter-spacing: .13em;
}

.mm-mutant-profile__movement-grid h3 {
  margin: .7rem 0 .8rem;
  font-size: 1.5rem;
  line-height: .95;
}

.mm-mutant-profile__movement-grid p {
  margin: 0;
  color: #96a0a6;
  font-size: .85rem;
  line-height: 1.55;
}

.mm-mutant-profile__movement-grid .is-weakness {
  border-top-color: #8f969a;
}

/* ABILITIES */

.mm-mutant-profile__abilities {
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: #070a0c;
}

.mm-mutant-profile__ability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.mm-mutant-profile__ability {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid rgba(255,255,255,.09);
  border-top: 4px solid var(--profile-accent);
  background:
    radial-gradient(circle at 86% 17%, color-mix(in srgb, var(--profile-accent) 8%, transparent), transparent 0 24%),
    #0a0e10;
}

.mm-mutant-profile__ability.is-ignition {
  border-top-color: var(--mm-founder-yellow);
}

.mm-mutant-profile__ability-mark {
  position: absolute;
  right: 2rem;
  top: 1rem;
  color: rgba(255,255,255,.045);
  font-family: var(--font-display);
  font-size: 10rem;
  line-height: 1;
}

.mm-mutant-profile__ability .eyebrow,
.mm-mutant-profile__ability h3,
.mm-mutant-profile__ability p,
.mm-mutant-profile__ability footer,
.mm-mutant-profile__tradeoff {
  position: relative;
  z-index: 2;
}

.mm-mutant-profile__ability h3 {
  max-width: 700px;
  margin: .7rem 0 1.2rem;
  font-size: clamp(2.4rem, 4vw, 4.4rem);
  line-height: .86;
}

.mm-mutant-profile__ability p {
  max-width: 700px;
  color: #a1abb0;
  font-size: 1rem;
  line-height: 1.65;
}

.mm-mutant-profile__ability footer {
  position: absolute;
  left: clamp(2rem, 4vw, 3.5rem);
  bottom: 2rem;
  color: #626d73;
  font-size: .51rem;
  font-weight: 1000;
  letter-spacing: .12em;
}

.mm-mutant-profile__ignition-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .19;
  filter: saturate(.7);
}

.mm-mutant-profile__ability.is-ignition::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,10,12,.96), rgba(7,10,12,.74) 66%, rgba(7,10,12,.45));
}

.mm-mutant-profile__tradeoff {
  max-width: 700px;
  margin-top: 1.6rem;
  padding: 1rem;
  border-left: 3px solid var(--mm-founder-yellow);
  background: rgba(244,237,0,.035);
}

.mm-mutant-profile__tradeoff span,
.mm-mutant-profile__tradeoff strong {
  display: block;
}

.mm-mutant-profile__tradeoff span {
  color: #787f82;
  font-size: .48rem;
  font-weight: 1000;
  letter-spacing: .12em;
}

.mm-mutant-profile__tradeoff strong {
  margin-top: .4rem;
  color: #d6dadd;
  font-size: .8rem;
  line-height: 1.5;
}

/* NOTES */

.mm-mutant-profile__notes-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.mm-mutant-profile__note {
  grid-column: span 4;
  min-height: 300px;
  padding: 1.7rem;
  border: 1px solid rgba(255,255,255,.085);
  background: rgba(255,255,255,.018);
}

.mm-mutant-profile__note > span {
  display: block;
  color: var(--profile-accent);
  font-size: .5rem;
  font-weight: 1000;
  letter-spacing: .13em;
}

.mm-mutant-profile__note blockquote {
  margin: 1rem 0;
  color: #d7dcde;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.45;
}

.mm-mutant-profile__note footer {
  color: #707b81;
  font-size: .7rem;
}

.mm-mutant-profile__note h3 {
  margin: .8rem 0;
  font-size: 1.8rem;
  line-height: .95;
}

.mm-mutant-profile__note p {
  margin: 0;
  color: #98a2a7;
  font-size: .9rem;
  line-height: 1.6;
}

.mm-mutant-profile__note.is-founder {
  border-top: 3px solid var(--mm-founder-yellow);
}

/* GALLERY */

.mm-mutant-profile__gallery {
  border-top: 1px solid rgba(255,255,255,.07);
  background: #06090a;
}

.mm-mutant-profile__gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 12px;
}

.mm-mutant-profile__gallery figure {
  grid-column: span 4;
  position: relative;
  min-height: 340px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: #0a0d0f;
}

.mm-mutant-profile__gallery figure.is-large {
  grid-column: span 8;
  min-height: 520px;
}

.mm-mutant-profile__gallery img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  transition: transform .45s ease;
}

.mm-mutant-profile__gallery figure:hover img {
  transform: scale(1.025);
}

.mm-mutant-profile__gallery figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: .45rem .58rem;
  background: rgba(2,4,5,.78);
  color: #d8dcde;
  font-size: .49rem;
  font-weight: 1000;
  letter-spacing: .11em;
  backdrop-filter: blur(8px);
}

/* FOUNDER CTA */

.mm-mutant-profile__founder-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 8rem) 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 86% 40%, rgba(244,237,0,.08), transparent 0 25%),
    #050708;
}

.mm-mutant-profile__founder-cta::before {
  content: "Y0";
  position: absolute;
  right: 3vw;
  bottom: -4vw;
  color: rgba(255,255,255,.025);
  font-family: var(--font-display);
  font-size: min(28vw, 24rem);
  line-height: .8;
}

.mm-mutant-profile__founder-cta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: end;
}

.mm-mutant-profile__founder-cta h2 {
  max-width: 900px;
  margin: .25rem 0 .9rem;
  font-size: clamp(3rem, 5.6vw, 6rem);
  line-height: .86;
}

.mm-mutant-profile__founder-cta p {
  max-width: 650px;
  color: #9aa4a9;
  font-size: 1rem;
  line-height: 1.6;
}

.mm-mutant-profile__founder-cta-action {
  display: grid;
  gap: .35rem;
}

.mm-mutant-profile__founder-cta-action > span {
  color: #69747a;
  font-size: .49rem;
  font-weight: 1000;
  letter-spacing: .12em;
}

.mm-mutant-profile__founder-cta-action > strong {
  margin-bottom: 1rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.4rem;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .mm-mutant-profile__hero-grid {
    grid-template-columns: 1fr;
  }

  .mm-mutant-profile__hero-copy {
    padding-right: 0;
  }

  .mm-mutant-profile__hero-visual {
    min-height: 620px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.07);
  }

  .mm-mutant-profile__identity-grid {
    grid-template-columns: 1fr;
  }

  .mm-mutant-profile__movement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mm-mutant-profile__note {
    grid-column: span 6;
  }

  .mm-mutant-profile__note:last-child:nth-child(odd) {
    grid-column: 4 / span 6;
  }

  .mm-mutant-profile__gallery figure,
  .mm-mutant-profile__gallery figure.is-large {
    grid-column: span 6;
  }

  .mm-mutant-profile__founder-cta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .mm-mutant-profile__breadcrumb {
    min-height: 50px;
  }

  .mm-mutant-profile__hero-grid {
    min-height: 0;
  }

  .mm-mutant-profile__hero-copy {
    padding-top: 3.5rem;
    padding-bottom: 3rem;
  }

  .mm-mutant-profile__hero-copy h1 {
    font-size: clamp(3.7rem, 18vw, 6.6rem);
  }

  .mm-mutant-profile__hero-visual {
    min-height: 500px;
  }

  .mm-mutant-profile__hero-rail {
    justify-content: flex-start;
  }

  .mm-mutant-profile__section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .mm-mutant-profile__section-code {
    order: -1;
  }

  .mm-mutant-profile__axes,
  .mm-mutant-profile__ability-grid,
  .mm-mutant-profile__movement-grid {
    grid-template-columns: 1fr;
  }

  .mm-mutant-profile__ability {
    min-height: 420px;
  }

  .mm-mutant-profile__note,
  .mm-mutant-profile__note:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .mm-mutant-profile__gallery figure,
  .mm-mutant-profile__gallery figure.is-large {
    grid-column: 1 / -1;
    min-height: 400px;
  }

  .mm-mutant-profile__founder-cta-action .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-mutant-profile__gallery img {
    transition: none;
  }

  .mm-mutant-profile__gallery figure:hover img {
    transform: none;
  }
}

/* =========================================================
   Build 26.0.6 — Mutant Profile Responsive Identity +
   Long-Name Containment
   Shared fix for every /mutants/{slug}/ profile.
   ========================================================= */

/*
 * CSS Grid children default to min-width:auto, which lets large
 * unbroken display text exceed its grid track. Explicit zero minima
 * force both hero columns to honor the defined grid.
 */
.mm-mutant-profile__hero-copy,
.mm-mutant-profile__hero-visual {
  min-width: 0;
}

.mm-mutant-profile__hero-copy {
  overflow: visible;
}

/*
 * The name belongs to the identity column. It may scale or, for an
 * exceptionally long future name, break — but it may never paint
 * underneath the artwork.
 */
.mm-mutant-profile__hero-copy h1 {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-right: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}

/* Current Hero-scale names such as NitroKong and SkyPiercer. */
.mm-mutant-profile__hero-copy h1.is-name-standard {
  font-size: clamp(4rem, 6.35vw, 7.15rem);
}

/* 11–14 characters: GrumbleTank and similar future identities. */
.mm-mutant-profile__hero-copy h1.is-name-long {
  font-size: clamp(3.45rem, 5.15vw, 5.9rem);
  letter-spacing: -.05em;
}

/*
 * 15+ characters: preserve display character but permit a controlled
 * wrap if the available column becomes narrower than the word.
 */
.mm-mutant-profile__hero-copy h1.is-name-very-long {
  font-size: clamp(2.9rem, 4.35vw, 5rem);
  line-height: .82;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

/* Fusion is a secondary identity line with an intentional measure. */
.mm-mutant-profile__fusion {
  max-width: 34ch;
  min-width: 0;
  line-height: 1.42;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Founder connection cannot force the copy track wider. */
.mm-mutant-profile__founder-connection,
.mm-mutant-profile__lede,
.mm-mutant-profile__hero-tags {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 1101px) and (max-width: 1360px) {
  .mm-mutant-profile__hero-grid {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  }

  .mm-mutant-profile__hero-copy h1.is-name-standard {
    font-size: clamp(3.75rem, 5.9vw, 6.4rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-long {
    font-size: clamp(3.25rem, 4.75vw, 5.15rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-very-long {
    font-size: clamp(2.75rem, 4vw, 4.4rem);
  }
}

@media (max-width: 1100px) {
  /*
   * Once the hero stacks, the identity gets the full shell width again.
   * Restore more display scale while retaining containment.
   */
  .mm-mutant-profile__hero-copy h1.is-name-standard {
    font-size: clamp(4rem, 11vw, 7.25rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-long {
    font-size: clamp(3.65rem, 10vw, 6.45rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-very-long {
    font-size: clamp(3.1rem, 8.6vw, 5.6rem);
  }

  .mm-mutant-profile__fusion {
    max-width: 40ch;
  }
}

@media (max-width: 720px) {
  .mm-mutant-profile__hero-copy h1.is-name-standard {
    font-size: clamp(3.55rem, 17vw, 6.2rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-long {
    font-size: clamp(3.2rem, 15vw, 5.5rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-very-long {
    font-size: clamp(2.8rem, 12.5vw, 4.75rem);
    overflow-wrap: anywhere;
  }

  .mm-mutant-profile__fusion {
    max-width: 31ch;
    font-size: clamp(.98rem, 4.8vw, 1.25rem);
    line-height: 1.45;
  }
}

@media (max-width: 430px) {
  .mm-mutant-profile__hero-copy h1.is-name-standard {
    font-size: clamp(3.2rem, 16vw, 5rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-long {
    font-size: clamp(2.9rem, 14vw, 4.5rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-very-long {
    font-size: clamp(2.55rem, 12vw, 4rem);
  }
}

/* =========================================================
   Build 26.0.6.1 — Deterministic Mutant Name Fit Hotfix
   Full name visibility takes precedence over maximum headline size.
   ========================================================= */

/*
 * Desktop profile identity column.
 * These tiers are intentionally conservative and deterministic.
 */
.mm-mutant-profile__hero-copy h1.is-name-08 {
  font-size: clamp(4.15rem, 6.3vw, 7.15rem);
}

.mm-mutant-profile__hero-copy h1.is-name-09 {
  font-size: clamp(4rem, 6vw, 6.8rem);
}

.mm-mutant-profile__hero-copy h1.is-name-10 {
  font-size: clamp(3.8rem, 5.65vw, 6.2rem);
}

.mm-mutant-profile__hero-copy h1.is-name-11 {
  font-size: clamp(3.35rem, 4.55vw, 4.85rem);
  letter-spacing: -.045em;
}

.mm-mutant-profile__hero-copy h1.is-name-12 {
  font-size: clamp(3.1rem, 4.15vw, 4.45rem);
  letter-spacing: -.045em;
}

.mm-mutant-profile__hero-copy h1.is-name-13-14 {
  font-size: clamp(2.85rem, 3.8vw, 4.05rem);
  line-height: .84;
  letter-spacing: -.04em;
}

.mm-mutant-profile__hero-copy h1.is-name-15-plus {
  font-size: clamp(2.55rem, 3.35vw, 3.7rem);
  line-height: .84;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

/* The divider is a hard visual boundary. */
.mm-mutant-profile__hero-copy {
  padding-right: clamp(1.25rem, 2vw, 2.25rem);
}

.mm-mutant-profile__hero-copy h1 {
  max-inline-size: 100%;
  overflow: hidden;
}

/*
 * Mid-size desktop/laptop widths need an extra reduction because the
 * left column becomes narrow before the stack breakpoint.
 */
@media (min-width: 1101px) and (max-width: 1360px) {
  .mm-mutant-profile__hero-copy h1.is-name-08 {
    font-size: clamp(3.8rem, 5.7vw, 6rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-09 {
    font-size: clamp(3.65rem, 5.3vw, 5.65rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-10 {
    font-size: clamp(3.45rem, 4.95vw, 5.2rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-11 {
    font-size: clamp(3.05rem, 4.1vw, 4.35rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-12 {
    font-size: clamp(2.85rem, 3.75vw, 4rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-13-14 {
    font-size: clamp(2.6rem, 3.4vw, 3.65rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-15-plus {
    font-size: clamp(2.35rem, 3vw, 3.3rem);
  }
}

/*
 * Once stacked, restore a more expressive scale because the identity
 * owns the full shell width.
 */
@media (max-width: 1100px) {
  .mm-mutant-profile__hero-copy {
    padding-right: 0;
  }

  .mm-mutant-profile__hero-copy h1 {
    overflow: visible;
  }

  .mm-mutant-profile__hero-copy h1.is-name-08 {
    font-size: clamp(4rem, 11vw, 7rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-09 {
    font-size: clamp(3.9rem, 10.6vw, 6.7rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-10 {
    font-size: clamp(3.7rem, 10vw, 6.25rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-11 {
    font-size: clamp(3.45rem, 9.25vw, 5.7rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-12 {
    font-size: clamp(3.25rem, 8.8vw, 5.35rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-13-14 {
    font-size: clamp(3rem, 8vw, 4.9rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-15-plus {
    font-size: clamp(2.75rem, 7.2vw, 4.45rem);
  }
}

@media (max-width: 720px) {
  .mm-mutant-profile__hero-copy h1.is-name-08 {
    font-size: clamp(3.55rem, 17vw, 6rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-09 {
    font-size: clamp(3.4rem, 16vw, 5.65rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-10 {
    font-size: clamp(3.25rem, 15vw, 5.25rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-11 {
    font-size: clamp(3rem, 13.8vw, 4.85rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-12 {
    font-size: clamp(2.85rem, 13vw, 4.55rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-13-14 {
    font-size: clamp(2.65rem, 12vw, 4.15rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-15-plus {
    font-size: clamp(2.45rem, 10.8vw, 3.8rem);
  }
}

@media (max-width: 430px) {
  .mm-mutant-profile__hero-copy h1.is-name-08 {
    font-size: clamp(3.15rem, 16vw, 4.9rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-09 {
    font-size: clamp(3rem, 15vw, 4.6rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-10 {
    font-size: clamp(2.9rem, 14vw, 4.35rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-11 {
    font-size: clamp(2.7rem, 12.8vw, 4rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-12 {
    font-size: clamp(2.55rem, 12vw, 3.75rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-13-14 {
    font-size: clamp(2.4rem, 11vw, 3.45rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-15-plus {
    font-size: clamp(2.2rem, 10vw, 3.15rem);
  }
}

/* =========================================================
   Build 26.0.6.2 — Desktop Hero Proportion + Identity Scale Rebalance
   Layout-first correction for every /mutants/{slug}/ profile.
   ========================================================= */

/*
 * The previous hotfix successfully contained long names, but the desktop
 * composition still gave too much horizontal territory to the artwork.
 *
 * New desktop thesis:
 * identity ~46–48%
 * artwork  ~52–54%
 *
 * The art remains cinematic; the identity no longer has to become small
 * simply to survive inside the left grid track.
 */
@media (min-width: 1101px) {
  .mm-mutant-profile__hero-grid {
    grid-template-columns:
      minmax(0, 47%)
      minmax(0, 53%);
  }

  .mm-mutant-profile__hero-copy {
    padding-right: clamp(1.5rem, 2.35vw, 2.75rem);
  }

  .mm-mutant-profile__hero-visual {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  /*
   * Restore more expressive display scale now that the identity column
   * has enough physical room.
   */
  .mm-mutant-profile__hero-copy h1.is-name-08 {
    font-size: clamp(4.6rem, 6.4vw, 7.6rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-09 {
    font-size: clamp(4.45rem, 6.1vw, 7.15rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-10 {
    font-size: clamp(4.2rem, 5.75vw, 6.65rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-11 {
    font-size: clamp(3.8rem, 5vw, 5.55rem);
    letter-spacing: -.045em;
  }

  .mm-mutant-profile__hero-copy h1.is-name-12 {
    font-size: clamp(3.5rem, 4.55vw, 5.05rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-13-14 {
    font-size: clamp(3.15rem, 4.05vw, 4.55rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-15-plus {
    font-size: clamp(2.8rem, 3.55vw, 4rem);
  }

  /*
   * The fusion line gains measure alongside the wider identity column.
   */
  .mm-mutant-profile__fusion {
    max-width: 38ch;
  }

  .mm-mutant-profile__lede {
    max-width: 43ch;
  }

  .mm-mutant-profile__founder-connection {
    max-width: min(100%, 37rem);
  }
}

/*
 * Large laptops / compact desktop:
 * use a slightly more conservative split but still materially wider
 * than the original .82fr / 1.18fr composition.
 */
@media (min-width: 1101px) and (max-width: 1360px) {
  .mm-mutant-profile__hero-grid {
    grid-template-columns:
      minmax(0, 46%)
      minmax(0, 54%);
  }

  .mm-mutant-profile__hero-copy h1.is-name-08 {
    font-size: clamp(4.1rem, 5.75vw, 6.4rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-09 {
    font-size: clamp(3.95rem, 5.45vw, 6rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-10 {
    font-size: clamp(3.75rem, 5.05vw, 5.55rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-11 {
    font-size: clamp(3.45rem, 4.45vw, 4.85rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-12 {
    font-size: clamp(3.2rem, 4.05vw, 4.45rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-13-14 {
    font-size: clamp(2.95rem, 3.65vw, 4rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-15-plus {
    font-size: clamp(2.65rem, 3.25vw, 3.55rem);
  }
}

/*
 * Ultra-wide screens:
 * don't let the artwork keep expanding indefinitely and visually erase
 * the dossier identity. The hero still fills its grid cell, but the
 * overall copy/art relationship remains balanced.
 */
@media (min-width: 1600px) {
  .mm-mutant-profile__hero-grid {
    grid-template-columns:
      minmax(0, 48%)
      minmax(0, 52%);
  }

  .mm-mutant-profile__hero-copy {
    padding-left: clamp(2rem, 2.2vw, 3rem);
    padding-right: clamp(2rem, 2.4vw, 3.25rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-09 {
    font-size: clamp(5rem, 5.65vw, 7.8rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-10 {
    font-size: clamp(4.65rem, 5.25vw, 7.15rem);
  }

  .mm-mutant-profile__hero-copy h1.is-name-11 {
    font-size: clamp(4.15rem, 4.6vw, 6rem);
  }
}

/*
 * Tablet/mobile stack behavior from 26.0.6.1 remains authoritative.
 * Explicitly return the image to full width once stacked.
 */
@media (max-width: 1100px) {
  .mm-mutant-profile__hero-visual {
    width: 100%;
    max-width: none;
  }
}

/* =========================================================
   Build 27.0.0 — Mutant Dossier Character Intelligence System
   ========================================================= */

.mm-mutant-profile__identity-callout {
  max-width: 27ch;
  margin-top: 1.15rem;
  padding-left: 1rem;
  border-left: 3px solid var(--profile-accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.05rem,1.45vw,1.35rem);
  font-weight: 900;
  line-height: 1.18;
  text-transform: uppercase;
}

.mm-mutant-profile__dossier-block,
.mm-mutant-profile__dual-intelligence,
.mm-mutant-profile__race-intelligence,
.mm-mutant-profile__faction-expression,
.mm-mutant-profile__resonance-intelligence,
.mm-mutant-profile__field-records,
.mm-mutant-profile__game-record {
  border-top: 1px solid rgba(255,255,255,.075);
}

.mm-mutant-profile__dossier-block,
.mm-mutant-profile__field-records {
  padding-top: clamp(4.5rem,7vw,7rem);
  padding-bottom: clamp(4.5rem,7vw,7rem);
}

.mm-mutant-profile__fusion-intel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.65fr);
  gap: clamp(2rem,6vw,6rem);
  align-items: start;
}

.mm-mutant-profile__intel-copy p,
.mm-mutant-profile__behavior-observation p,
.mm-mutant-profile__resonance-copy p,
.mm-mutant-profile__faction-expression-grid > p {
  margin: 0;
  color: #aab3b8;
  font-size: clamp(1rem,1.3vw,1.18rem);
  line-height: 1.85;
}

.mm-mutant-profile__intel-rule {
  padding: 1.35rem;
  border: 1px solid rgba(244,237,0,.16);
  background: #090d10;
}

.mm-mutant-profile__intel-rule span,
.mm-mutant-profile__intel-card-copy > span,
.mm-mutant-profile__field-note-grid article > span,
.mm-mutant-profile__game-abilities article > span {
  display: block;
  color: var(--profile-accent);
  font-size: .55rem;
  font-weight: 950;
  letter-spacing: .1em;
}

.mm-mutant-profile__intel-rule strong {
  display: block;
  margin-top: .6rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.4;
}

.mm-mutant-profile__dual-intelligence {
  padding: clamp(4.7rem,7.5vw,7.5rem) 0;
  background:
    radial-gradient(circle at 12% 20%,rgba(244,237,0,.035),transparent 0 24%),
    #06090a;
}

.mm-mutant-profile__dual-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}

.mm-mutant-profile__intel-card {
  border: 1px solid rgba(255,255,255,.09);
  background: #080c0f;
  overflow: hidden;
}

.mm-mutant-profile__intel-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.mm-mutant-profile__intel-card-copy {
  padding: clamp(1.35rem,2.2vw,2rem);
}

.mm-mutant-profile__intel-card-copy h3 {
  margin: .55rem 0 .8rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2rem,3.7vw,3.7rem);
  line-height: .9;
}

.mm-mutant-profile__intel-card-copy p {
  margin: 0;
  color: #a5aeb3;
  line-height: 1.75;
}

.mm-mutant-profile__intel-strip {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  margin: 1.4rem 0 0;
  background: rgba(255,255,255,.08);
}

.mm-mutant-profile__intel-strip div {
  padding: .85rem;
  background: #080c0f;
}

.mm-mutant-profile__intel-strip dt {
  color: #68737a;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .09em;
}

.mm-mutant-profile__intel-strip dd {
  margin: .25rem 0 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: .88rem;
}

.mm-mutant-profile__architecture-list {
  display: grid;
  gap: .6rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.mm-mutant-profile__architecture-list li {
  padding: .7rem .8rem;
  border-left: 2px solid var(--profile-accent);
  background: rgba(255,255,255,.025);
  color: #d4dade;
  font-size: .9rem;
}

.mm-mutant-profile__race-intelligence {
  padding: clamp(4.8rem,7.5vw,7.6rem) 0;
  background: #030506;
}

.mm-mutant-profile__race-stage {
  position: relative;
  min-height: 320px;
  display: grid;
  align-items: end;
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  background: #090d10;
}

.mm-mutant-profile__race-stage-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .58;
}

.mm-mutant-profile__race-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(3,5,6,.96),rgba(3,5,6,.68) 52%,rgba(3,5,6,.2));
}

.mm-mutant-profile__race-copy {
  position: relative;
  z-index: 1;
  width: min(720px,75%);
  padding: clamp(1.5rem,3.5vw,3rem);
}

.mm-mutant-profile__race-copy p {
  margin: 0;
  color: #f3f5f6;
  font-size: clamp(1rem,1.5vw,1.25rem);
  line-height: 1.8;
}

.mm-mutant-profile__behavior-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}

.mm-mutant-profile__behavior-grid article {
  min-height: 145px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.08);
  background: #080c0f;
}

.mm-mutant-profile__behavior-grid span {
  color: var(--profile-accent);
  font-size: .55rem;
  font-weight: 950;
  letter-spacing: .1em;
}

.mm-mutant-profile__behavior-grid p {
  margin: .55rem 0 0;
  color: #aab2b7;
  line-height: 1.55;
}

.mm-mutant-profile__faction-expression {
  padding: clamp(4.8rem,7.5vw,7.5rem) 0;
  background:
    radial-gradient(circle at 80% 22%,color-mix(in srgb,var(--profile-accent) 7%,transparent),transparent 0 28%),
    #070a0c;
}

.mm-mutant-profile__faction-expression-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(320px,.72fr);
  gap: clamp(2rem,6vw,6rem);
}

.mm-mutant-profile__faction-expression-grid dl {
  margin: 0;
  border-top: 2px solid color-mix(in srgb,var(--profile-accent) 50%,transparent);
}

.mm-mutant-profile__faction-expression-grid dl div {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid rgba(255,255,255,.075);
}

.mm-mutant-profile__faction-expression-grid dt {
  color: #69747a;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .09em;
}

.mm-mutant-profile__faction-expression-grid dd {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: .9rem;
}

.mm-mutant-profile__statement {
  margin-top: 2.2rem;
  max-width: 22ch;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,4rem);
  font-weight: 900;
  line-height: .9;
  text-transform: uppercase;
}

.mm-mutant-profile__behavior-observation {
  max-width: 850px;
  padding-left: clamp(1.2rem,2.5vw,2rem);
  border-left: 3px solid var(--profile-accent);
}

.mm-mutant-profile__resonance-intelligence {
  padding: clamp(4.8rem,7.5vw,7.5rem) 0;
  border-top: 1px solid rgba(255,255,255,.075);
  background: #06090a;
}

.mm-mutant-profile__resonance-copy {
  max-width: 870px;
}

.mm-mutant-profile__resonance-copy strong {
  display: block;
  margin-top: 1.6rem;
  color: var(--profile-accent);
  font-family: var(--font-display);
  font-size: clamp(1.5rem,3vw,2.9rem);
  line-height: 1;
}

.mm-mutant-profile__ignition-profile {
  position: relative;
  min-height: 620px;
  display: grid;
  align-items: end;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
  background: #080b0d;
}

.mm-mutant-profile__ignition-profile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mm-mutant-profile__ignition-profile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(3,5,6,.97),rgba(3,5,6,.76) 45%,rgba(3,5,6,.16));
}

.mm-mutant-profile__ignition-profile-copy {
  position: relative;
  z-index: 1;
  padding-top: 6rem;
  padding-bottom: 5rem;
}

.mm-mutant-profile__ignition-profile-copy h2 {
  max-width: 9ch;
  margin: .45rem 0 1rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(4rem,8vw,8.5rem);
  line-height: .82;
}

.mm-mutant-profile__ignition-profile-copy p {
  max-width: 690px;
  margin: 0;
  color: #d3d8db;
  font-size: 1.05rem;
  line-height: 1.75;
}

.mm-mutant-profile__ignition-profile-copy strong {
  display: block;
  margin-top: 1.4rem;
  color: var(--profile-accent);
  font-family: var(--font-display);
  font-size: clamp(1.6rem,3vw,3.2rem);
}

.mm-mutant-profile__field-records {
  background: #030506;
}

.mm-mutant-profile__field-note-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}

.mm-mutant-profile__field-note-grid article {
  min-height: 190px;
  padding: 1.2rem;
  border: 1px solid rgba(255,255,255,.08);
  background: #080c0f;
}

.mm-mutant-profile__field-note-grid p {
  margin: .7rem 0 0;
  color: #d0d5d8;
  line-height: 1.7;
}

.mm-mutant-profile__field-note-grid small {
  display: block;
  margin-top: .85rem;
  color: #717c82;
}

.mm-mutant-profile__game-record {
  padding: clamp(5rem,7.5vw,7.7rem) 0;
  background:
    radial-gradient(circle at 82% 18%,rgba(244,237,0,.045),transparent 0 25%),
    #06090a;
}

.mm-mutant-profile__game-grid {
  display: grid;
  grid-template-columns: minmax(260px,.62fr) minmax(0,1.25fr);
  gap: clamp(2rem,6vw,6rem);
  align-items: start;
}

.mm-mutant-profile__game-card img {
  width: 100%;
  max-height: 670px;
  object-fit: contain;
}

.mm-mutant-profile__game-card-placeholder {
  aspect-ratio: 5/7;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem;
  border: 1px solid rgba(244,237,0,.22);
  background: linear-gradient(145deg,#0e1316,#050708);
}

.mm-mutant-profile__game-card-placeholder span,
.mm-mutant-profile__game-card-placeholder small {
  color: var(--profile-accent);
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.mm-mutant-profile__game-card-placeholder strong {
  margin: .5rem 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 2rem;
}

.mm-mutant-profile__game-intel > p {
  margin: 0 0 1.4rem;
  color: #aab3b8;
  line-height: 1.7;
}

.mm-mutant-profile__front-values {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 2px solid rgba(244,237,0,.25);
  border-bottom: 2px solid rgba(244,237,0,.25);
}

.mm-mutant-profile__front-values div {
  padding: 1rem;
  border-right: 1px solid rgba(255,255,255,.08);
}

.mm-mutant-profile__front-values div:last-child {
  border-right: 0;
}

.mm-mutant-profile__front-values span {
  display: block;
  color: #717c82;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .09em;
}

.mm-mutant-profile__front-values strong {
  display: block;
  margin-top: .35rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 2.4rem;
}

.mm-mutant-profile__game-abilities {
  display: grid;
  gap: 9px;
  margin-top: 1.3rem;
}

.mm-mutant-profile__game-abilities article {
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.08);
  background: #080c0f;
}

.mm-mutant-profile__game-abilities strong {
  display: block;
  margin-top: .35rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
}

.mm-mutant-profile__game-abilities p {
  margin: .4rem 0 0;
  color: #949da2;
  line-height: 1.55;
}

.mm-mutant-profile__game-abilities .is-risk {
  border-color: rgba(244,237,0,.16);
}

.mm-mutant-profile__founder-icons {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.2rem;
}

.mm-mutant-profile__founder-icons span {
  padding: .55rem .65rem;
  border: 1px solid rgba(255,255,255,.09);
  color: #c7cdd0;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .07em;
}

@media (max-width: 900px) {
  .mm-mutant-profile__fusion-intel,
  .mm-mutant-profile__faction-expression-grid,
  .mm-mutant-profile__game-grid {
    grid-template-columns: 1fr;
  }

  .mm-mutant-profile__dual-grid,
  .mm-mutant-profile__field-note-grid {
    grid-template-columns: 1fr;
  }

  .mm-mutant-profile__behavior-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mm-mutant-profile__race-copy {
    width: 88%;
  }
}

@media (max-width: 700px) {
  .mm-mutant-profile__dossier-block,
  .mm-mutant-profile__dual-intelligence,
  .mm-mutant-profile__race-intelligence,
  .mm-mutant-profile__faction-expression,
  .mm-mutant-profile__resonance-intelligence,
  .mm-mutant-profile__field-records,
  .mm-mutant-profile__game-record {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .mm-mutant-profile__behavior-grid,
  .mm-mutant-profile__intel-strip,
  .mm-mutant-profile__front-values {
    grid-template-columns: 1fr;
  }

  .mm-mutant-profile__race-stage {
    min-height: 430px;
  }

  .mm-mutant-profile__race-stage::after {
    background: linear-gradient(180deg,rgba(3,5,6,.16),rgba(3,5,6,.94) 58%);
  }

  .mm-mutant-profile__race-copy {
    width: 100%;
  }

  .mm-mutant-profile__ignition-profile {
    min-height: 620px;
  }

  .mm-mutant-profile__ignition-profile::after {
    background: linear-gradient(180deg,rgba(3,5,6,.18),rgba(3,5,6,.96) 56%);
  }

  .mm-mutant-profile__front-values div {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
}

/* =========================================================
   Build 27.0.1 — Dossier Rendering Corrections
   Active-media enforcement / adaptive game record / clean gallery
   ========================================================= */

/*
 * Character Intelligence cards must remain complete editorial blocks
 * even when no visual asset has been activated yet.
 */
.mm-mutant-profile__intel-card:not(:has(img)) .mm-mutant-profile__intel-card-copy {
  min-height: 100%;
}

.mm-mutant-profile__intel-card:not(:has(img)) {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}

.mm-mutant-profile__intel-card:not(:has(img)) .mm-mutant-profile__intel-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
}

/* Full game record retains the original editorial split. */
.mm-mutant-profile__game-record.is-full-record .mm-mutant-profile__game-grid {
  grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr);
}

/*
 * Card-only state: make the physical game artifact the visual center and
 * keep supporting copy close instead of leaving a giant empty column.
 */
.mm-mutant-profile__game-record.is-card-only .mm-mutant-profile__game-grid {
  grid-template-columns: minmax(340px,520px) minmax(300px,520px);
  justify-content: start;
  gap: clamp(2rem,5vw,5rem);
  align-items: center;
}

.mm-mutant-profile__game-record.is-card-only .mm-mutant-profile__game-card img {
  width: min(100%, 520px);
  max-height: 760px;
}

.mm-mutant-profile__game-record.is-card-only .mm-mutant-profile__game-intel {
  max-width: 520px;
}

.mm-mutant-profile__game-status {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--profile-accent);
  background: rgba(255,255,255,.025);
}

.mm-mutant-profile__game-status > span {
  display: block;
  color: var(--profile-accent);
  font-size: .54rem;
  font-weight: 950;
  letter-spacing: .1em;
}

.mm-mutant-profile__game-status > strong {
  display: block;
  margin-top: .4rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.mm-mutant-profile__game-status > p {
  margin: .55rem 0 0;
  color: #8f9ba1;
  font-size: .86rem;
  line-height: 1.6;
}

/* Details-only state does not reserve a phantom card column. */
.mm-mutant-profile__game-record.is-details-only .mm-mutant-profile__game-grid {
  grid-template-columns: minmax(0,760px);
}

.mm-mutant-profile__game-record.is-details-only .mm-mutant-profile__game-intel {
  max-width: 760px;
}

/* Gallery contains only actual visual-record media. */
.mm-mutant-profile__gallery-grid:empty {
  display: none;
}

@media (max-width: 900px) {
  .mm-mutant-profile__game-record.is-card-only .mm-mutant-profile__game-grid,
  .mm-mutant-profile__game-record.is-full-record .mm-mutant-profile__game-grid,
  .mm-mutant-profile__game-record.is-details-only .mm-mutant-profile__game-grid {
    grid-template-columns: 1fr;
  }

  .mm-mutant-profile__game-record.is-card-only .mm-mutant-profile__game-card img {
    width: min(100%, 440px);
  }
}

/* =========================================================
   Build 27.0.1.1 — Intelligence Card Height + Media Flow Hotfix
   Shared fix for all Mutant dossier Creature/Machine intelligence cards.
   ========================================================= */

/*
 * Intelligence cards are editorial content blocks. Their height must be
 * determined by media + copy, never by the surrounding section/grid.
 */
.mm-mutant-profile__dual-grid {
  align-items: start !important;
  grid-auto-rows: auto !important;
}

.mm-mutant-profile__intel-card {
  position: relative;
  display: block !important;
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden;
}

/*
 * An activated visual is normal document-flow media at the top of the
 * card. It must never be absolutely positioned or inherit a section
 * height.
 */
.mm-mutant-profile__intel-card > img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  margin: 0;
}

/*
 * Copy follows the image immediately. No flex-growth or 100% minimum
 * heights that can turn a short card into a page-height container.
 */
.mm-mutant-profile__intel-card-copy {
  position: static !important;
  display: block !important;
  flex: none !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/*
 * Override the Build 27.0.1 no-image safety treatment. A text-only
 * intelligence card should be compact and content-sized as well.
 */
.mm-mutant-profile__intel-card:not(:has(img)) {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}

.mm-mutant-profile__intel-card:not(:has(img)) .mm-mutant-profile__intel-card-copy {
  display: block !important;
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
}

/*
 * The Intelligence section itself should never reserve arbitrary
 * viewport height.
 */
.mm-mutant-profile__dual-intelligence,
.mm-mutant-profile__dual-intelligence > .shell {
  min-height: 0 !important;
  height: auto !important;
}

/*
 * At narrow widths cards remain naturally stacked and content-sized.
 */
@media (max-width: 900px) {
  .mm-mutant-profile__dual-grid {
    align-items: start !important;
  }

  .mm-mutant-profile__intel-card {
    width: 100%;
  }

  .mm-mutant-profile__intel-card > img {
    aspect-ratio: 16 / 9;
  }
}

/* =========================================================
   Build 27.0.1.2 — Intelligence Section Flow Reset
   Hard reset of the entire Intelligence section flow.
   ========================================================= */

/*
 * The section must be ordinary document flow:
 * heading -> grid -> cards.
 * No viewport-height, distributed flex/grid space, absolute positioning,
 * transforms, or auto margins may separate the heading from the grid.
 */
.mm-mutant-profile__dual-intelligence {
  position: static !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding-top: clamp(4rem, 6vw, 6rem) !important;
  padding-bottom: clamp(4rem, 6vw, 6rem) !important;
  overflow: visible !important;
  transform: none !important;
}

.mm-mutant-profile__dual-intelligence > .shell {
  position: static !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: none !important;
}

/* Heading remains content-sized and directly precedes the card grid. */
.mm-mutant-profile__dual-intelligence .mm-mutant-profile__section-heading {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem) !important;
  padding: 0 !important;
  transform: none !important;
}

/*
 * Critical correction: do not permit the grid to occupy or align within
 * a tall inherited track. It starts exactly where it appears in markup.
 */
.mm-mutant-profile__dual-intelligence .mm-mutant-profile__dual-grid {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  align-content: start !important;
  justify-content: stretch !important;
  place-content: start stretch !important;
  place-items: start stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 12px !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* Cards themselves must never use auto margins to sink within a track. */
.mm-mutant-profile__dual-intelligence .mm-mutant-profile__intel-card {
  position: static !important;
  display: block !important;
  align-self: start !important;
  justify-self: stretch !important;
  place-self: start stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Active media starts at pixel zero of the card. */
.mm-mutant-profile__dual-intelligence .mm-mutant-profile__intel-card > img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  object-fit: cover !important;
}

/* Copy follows the media with no intermediate spacer. */
.mm-mutant-profile__dual-intelligence .mm-mutant-profile__intel-card-copy {
  position: static !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 900px) {
  .mm-mutant-profile__dual-intelligence .mm-mutant-profile__dual-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Build 27.0.1.3 — Intelligence Media Viewport + Crop Control
   ========================================================= */

/*
 * Intelligence artwork may be delivered on a larger production canvas.
 * Public dossier rendering therefore uses a fixed viewport instead of
 * preserving the source image's intrinsic canvas height.
 */
.mm-mutant-profile__intel-media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #050809;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mm-mutant-profile__intel-media > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: var(--intel-focal-x, 50%) var(--intel-focal-y, 50%) !important;
  transform: none !important;
}

/*
 * Direct image rules from earlier hotfixes no longer control activated
 * Intelligence media because the image now lives inside this viewport.
 */
.mm-mutant-profile__intel-card > .mm-mutant-profile__intel-media + .mm-mutant-profile__intel-card-copy {
  margin-top: 0 !important;
}

/* Text-only cards remain compact when no active media exists. */
.mm-mutant-profile__intel-card:not(:has(.mm-mutant-profile__intel-media)) {
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 900px) {
  .mm-mutant-profile__intel-media {
    aspect-ratio: 16 / 9 !important;
  }
}

/* =========================================================
   Build 27.0.1.5 — Intelligence Grid-Area Class Collision Correction
   ========================================================= */

/*
 * CRITICAL:
 * Generic `.is-instinct` is used by the /mutants/ Codex anatomy system
 * as a named CSS Grid area. Individual dossier cards must never inherit
 * page-family grid-area assignments.
 */
.mm-mutant-profile__dual-grid > .mm-mutant-profile__intel-card {
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Dossier-specific modifiers intentionally carry no positioning semantics. */
.mm-mutant-profile__intel-card.is-creature-intelligence,
.mm-mutant-profile__intel-card.is-machine-intelligence {
  grid-area: auto !important;
  align-self: start !important;
  justify-self: stretch !important;
  margin: 0 !important;
}

/*
 * Explicit source-order placement for the two-card desktop dossier.
 * This prevents any global utility/modifier class from generating
 * implicit tracks or placing a card into a named grid area.
 */
@media (min-width: 901px) {
  .mm-mutant-profile__dual-grid > .is-creature-intelligence {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .mm-mutant-profile__dual-grid > .is-machine-intelligence {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}

@media (max-width: 900px) {
  .mm-mutant-profile__dual-grid > .is-creature-intelligence,
  .mm-mutant-profile__dual-grid > .is-machine-intelligence {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* =========================================================
   Build 27.0.2 — Mutation Moment Reconstruction
   ========================================================= */

.mm-mutant-profile__mutation-reconstruction {
  padding: clamp(4.8rem,7.5vw,7.5rem) 0;
  border-top: 1px solid rgba(255,255,255,.075);
  background:
    radial-gradient(circle at 76% 20%, color-mix(in srgb,var(--profile-accent) 6%,transparent), transparent 0 28%),
    #050809;
}

.mm-mutant-profile__mutation-grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr);
  gap: clamp(2rem,5vw,5rem);
  align-items: start;
}

.mm-mutant-profile__mutation-grid:not(.has-visual) {
  grid-template-columns: minmax(0,860px);
}

.mm-mutant-profile__mutation-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background: #080c0f;
}

.mm-mutant-profile__mutation-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--intel-focal-x,50%) var(--intel-focal-y,50%);
}

.mm-mutant-profile__mutation-copy > p {
  margin: 1.2rem 0 0;
  color: #aab3b8;
  font-size: clamp(1rem,1.3vw,1.18rem);
  line-height: 1.8;
}

.mm-mutant-profile__mutation-status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.mm-mutant-profile__mutation-status span,
.mm-mutant-profile__mutation-uncertainty span {
  color: #69757b;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.mm-mutant-profile__mutation-status strong {
  color: var(--profile-accent);
  font-family: var(--font-display);
  font-size: .85rem;
}

.mm-mutant-profile__mutation-evidence {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1px;
  margin: 1.5rem 0 0;
  background: rgba(255,255,255,.08);
}

.mm-mutant-profile__mutation-evidence div {
  padding: .85rem;
  background: #080c0f;
}

.mm-mutant-profile__mutation-evidence dt {
  color: #68737a;
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .09em;
}

.mm-mutant-profile__mutation-evidence dd {
  margin: .25rem 0 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: .88rem;
}

.mm-mutant-profile__mutation-uncertainty {
  margin-top: 1.3rem;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--profile-accent);
  background: rgba(255,255,255,.025);
}

.mm-mutant-profile__mutation-uncertainty strong {
  display: block;
  margin-top: .4rem;
  color: #d9dfe2;
  font-size: .9rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .mm-mutant-profile__mutation-grid,
  .mm-mutant-profile__mutation-grid:not(.has-visual) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .mm-mutant-profile__mutation-evidence {
    grid-template-columns: 1fr;
  }
}