/* The first two screens share one character on larger displays. */
.intro-story {
  position: relative;
}
.about-portrait {
  display: none;
}
.story-active {
  height: 250svh;
  --scene-progress: 0;
  --intro-opacity: 1;
  --about-opacity: 0;
}
.story-active .hero {
  position: sticky;
  top: 0;
  height: 100svh;
  max-height: none;
  min-height: 720px;
  padding-top: 92px;
}
.story-active .hero-intro,
.story-active .hero-role {
  opacity: var(--intro-opacity);
  transform: translateY(calc(var(--scene-progress) * -55px));
}
.story-active .hero-character {
  transform: translateX(calc(var(--scene-progress) * -24vw))
    translate3d(var(--portrait-x, 0px), var(--portrait-y, 0px), 0)
    rotate(var(--portrait-tilt, 0deg))
    scale(calc(1 - var(--scene-progress) * 0.08));
  transition: none;
}
.story-active .hero-glow {
  transform: translateX(calc(var(--scene-progress) * -24vw));
}
.story-active .about {
  position: absolute;
  top: 50%;
  left: 51%;
  width: 49%;
  margin: 0;
  padding: 0 0 20px;
  border: 0;
  display: block;
  opacity: var(--about-opacity);
  transform: translateY(calc(-50% + (1 - var(--about-opacity)) * 45px));
  z-index: 3;
}
.story-active .about[aria-hidden='true'] {
  visibility: hidden;
}
.story-active .about h2 {
  font-size: clamp(28px, 2.6vw, 42px);
  margin: 16px 0 20px;
}
.story-active .about-content > p {
  font-size: clamp(14px, 1.05vw, 17px);
  margin-bottom: 14px;
  line-height: 1.65;
}
.story-active .education {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 22px 0 18px;
}
.story-active .education > div {
  padding: 12px 0 0;
}
.story-active .education h3 {
  font-size: 15px;
}
.story-active .education p {
  font-size: 13px;
}
.story-active .toolbox {
  margin-bottom: 15px;
}
.story-active .toolbox h3 {
  margin-bottom: 7px;
}
.story-active .toolbox p {
  font-size: 13px;
}
@media (min-width: 1000px) and (min-height: 720px) {
  body:has(.story-active) .navigation {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: #09080ee8;
    backdrop-filter: blur(12px);
  }
}
/* Normal document flow is the fallback for small screens and reduced motion. */
@media (max-width: 999px),
  (max-height: 719px),
  (prefers-reduced-motion: reduce) {
  .intro-story .about {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 24px 35px;
    align-items: start;
  }
  .about-portrait {
    display: block;
    grid-row: span 2;
    position: sticky;
    top: 30px;
    overflow: hidden;
  }
  .about-portrait img {
    width: 100%;
    height: auto;
    display: block;
    mask-image: linear-gradient(#000 80%, transparent);
  }
  .about-heading h2 {
    margin-top: 14px;
  }
  .about-content {
    grid-column: 2;
  }
}
@media (max-width: 600px) {
  .intro-story .about {
    display: block;
    padding: 55px 0 65px;
  }
  .about-portrait {
    position: relative;
    top: auto;
    width: min(280px, 80%);
    margin: 0 auto 25px;
    max-height: 280px;
  }
  .about-heading h2 {
    margin-bottom: 25px;
  }
}