#about {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  min-height: auto;
  padding: 0 var(--pad) clamp(54px,8vw,110px);
  gap: clamp(24px,4vw,60px);
}
#about > .revealitem, #about > div:not(.about-art):not(.about-island-stage) { grid-column: auto; }
#about > .about-island-stage {
  --fs: min(15vh, 10.8vw);
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  align-content: center;
  justify-items: stretch;
  width: calc(100% + 2 * var(--pad));
  max-width: none;
  margin-inline: calc(-1 * var(--pad));
  padding: 55px var(--pad) 26px;
  min-height: 68svh;
  overflow: hidden;
  isolation: isolate;
  color: #f2e5ff;
  background: radial-gradient(ellipse at center, #39264d, #22172f 74%);
}
.island-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .085em;
  font-size: var(--fs);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.055em;
}
.island-pill {
  position: relative;
  flex: none;
  width: 3.62em;
  height: 1.81em;
  border-radius: 999px;
  overflow: hidden;
  background: #b9a8cb;
}
.island-pill video {
  position: absolute;
  inset: 0;
  left: 50%;
  translate: -50% 0;
  width: 4.2em;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.island-pill i { position:absolute; inset:0; opacity:0; background:#b9a8cb; }
.island-footer { display:flex; align-items:center; gap:20px; margin-top:clamp(24px,5vw,72px); }
.island-footer > span { flex:1; height:1px; background:currentColor; opacity:.35; }
html[data-theme=light] #about > .about-island-stage {
  color:#382648;
  background:radial-gradient(ellipse at center,#f5ebfc,#e8ddf0 75%);
}
@media (max-width:720px) {
  #about { grid-template-columns:1fr; }
  #about > .about-island-stage {
    --fs:min(28vw,13vh);
    --pill-height:calc((100vw - 2 * var(--pad)) / 1.85);
    min-height:0;
    padding-top:52px;
  }
  .island-row { flex-direction:column; gap:.1em; }
  .island-pill { width:100%; height:var(--pill-height); }
  .island-pill video { inset:0; translate:none; width:100%; height:var(--pill-height); }
}

/* Keep the visual beside the biography instead of adding a second hero. */
#about {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: start;
  padding: clamp(64px, 9vw, 135px) var(--pad);
  gap: 20px clamp(28px, 6vw, 96px);
}
#about > div:not(.about-island-stage) { grid-column: 1; }
#about > .about-island-stage {
  container-type: inline-size;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}
html[data-theme=light] #about > .about-island-stage { background: transparent; }
.island-row { font-size: 27.624cqw; }
.island-pill { border-radius: 32px; }
.island-pill video { width: 3.62em; object-position: center; }
.island-footer { margin-top: 18px; }
#about > div:not(.about-island-stage) > p:first-child { margin-top: 0; }
@media (max-width: 720px) {
  #about { grid-template-columns: 1fr; gap: 24px; }
  #about > .about-island-stage {
    grid-column: 1;
    grid-row: 2;
    --pill-height: calc(100cqw / 1.85);
  }
  .island-pill { border-radius: 24px; }
  .island-pill video { width: 100%; }
}

/* Fit the split name and its expanding video into the About media column. */
.island-row { font-size: 13.4cqw; white-space: nowrap; }
.island-pill { border-radius: 999px; }
@media (max-width: 720px) {
  .island-row { font-size: 21cqw; }
}

#about {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px clamp(36px, 6vw, 100px);
  padding-block: clamp(54px, 7vw, 100px);
}
#about > div.about-heading:not(.about-art) { grid-area: 1 / 1; }
#about > .about-island-stage { grid-area: 2 / 1; }
#about > .about-contact { grid-area: 3 / 1; justify-self: start; }
#about > div.about-bio:not(.about-art) { grid-area: 1 / 2 / 4 / 3; align-self: center; }
#about .about-heading h2 { font-size: clamp(30px, 3.1vw, 52px); }
#about > .about-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: -2;
}
#about::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, #21152cbd, #1b1425e8 68%), linear-gradient(0deg, #18111f, transparent 35%);
}
html[data-theme=light] #about::after {
  background: linear-gradient(100deg, #e8ddf0b8, #eee5f4ef 68%);
}
@media (max-width: 720px) {
  #about { grid-template-columns: minmax(0, 1fr); }
  #about > div.about-bio:not(.about-art) { grid-area: 3 / 1; }
  #about > .about-contact { grid-area: 4 / 1; }
}