/* Hero composition and its mobile counterpart. The rest of the site uses site.css. */
.hero {
  min-height: 0;
  padding-top: .8rem;
  padding-bottom: 1.4rem;
}

.hero-topline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .38rem;
  line-height: 1.3;
}

.hero-topline > span:first-child {
  font-size: clamp(.88rem, 1.15vw, 1.08rem);
  line-height: 1.3;
  letter-spacing: .11em;
}

.hero-topline .hero-index {
  max-width: 28rem;
  font-size: clamp(.74rem, .85vw, .86rem);
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  letter-spacing: .09em;
}

.hero-stage {
  flex: none;
  height: clamp(29rem, calc(100svh - 15.5rem), 42rem);
  min-height: 0;
  margin: .3rem auto 0;
}

.hero-note-left {
  top: 11%;
}

.hero-title {
  z-index: 2;
  top: 27%;
  left: 0;
  width: 56%;
  font-size: clamp(5.2rem, 9.6vw, 9.5rem);
  line-height: .83;
  letter-spacing: -.095em;
  clip-path: none;
}

.title-hamza { padding-left: 0; }
.title-raza { padding-left: 7%; padding-right: 0; text-align: left; mix-blend-mode: normal; }

.portrait-wrap {
  z-index: 1;
  right: 7%;
  width: clamp(19rem, 35vw, 32rem);
  height: 100%;
}

.portrait-wrap img {
  object-position: center 22  %;
  transform: scale(1.09);
}

.hero-stage:hover .portrait-wrap img { transform: scale(1.11); }

.hero-orbit {
  right: 0;
  width: min(46vw, 34rem);
}

.hero-stamp { z-index: 3; }
.hero-bottom { margin-top: .25rem; }

@media (min-width: 769px) and (max-width: 1100px) {
  .hero-stage { height: clamp(28rem, calc(100svh - 17rem), 39rem); }
}

@media (max-width: 768px) {
  .hero { padding-top: .65rem; padding-bottom: 1.3rem; }
  .hero-topline { gap: .35rem; }
  .hero-topline > span:first-child {
    font-size: clamp(.8rem, 2vw, .95rem);
    letter-spacing: .07em;
  }
  .hero-topline .hero-index {
    display: block;
    font-size: clamp(.72rem, 1.7vw, .83rem);
    max-width: 28rem;
  }
  .hero-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    justify-items: stretch;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 1.1rem;
    overflow: visible;
  }
  .hero-note-left {
    grid-row: 1;
    position: relative;
    top: auto;
    left: auto;
    margin: 0 0 .65rem;
    font-size: .69rem;
  }
  .hero-title {
    grid-row: 2;
    position: relative;
    top: auto;
    left: auto;
    z-index: 2;
    width: 100%;
    font-size: clamp(3.4rem, 14vw, 6.8rem);
    line-height: .81;
    letter-spacing: -.085em;
    margin: 0;
  }
  .title-hamza { padding-left: 0; }
  .title-raza { padding-left: clamp(1.3rem, 8vw, 4rem); text-align: left; }
  .portrait-wrap {
    grid-row: 3;
    position: relative;
    inset: auto;
    transform: none;
    justify-self: end;
    width: min(80vw, 29rem);
    height: auto;
    aspect-ratio: .76;
    margin: -.35rem 3% 0 0;
    clip-path: inset(0 round 46% 46% 0 0);
  }
  .hero-orbit {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    transform: none;
    width: min(78vw, 29rem);
  }
  .hero-stamp { top: auto; bottom: 31%; right: 0; }
  .hero-note-right { display: none; }
  .hero-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: .6rem;
  }
  .hero-bottom > p { max-width: 34rem; }
  .hero-links { gap: .6rem 1.1rem; }
  .hero-scroll { display: none; }

  .desktop-nav { display: none; }
  .menu-toggle {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }
  .menu-toggle span {
    width: 1.25rem;
    height: 1px;
    background: var(--ink);
    transition: transform .25s;
  }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .mobile-menu {
    position: fixed;
    z-index: 35;
    inset: 0;
    padding: 7rem var(--page-pad) 2rem;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    flex-direction: column;
    justify-content: center;
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .5s var(--ease), visibility .5s;
  }
  .mobile-menu.open { clip-path: inset(0); visibility: visible; }
  .mobile-menu > a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font: 700 clamp(2.5rem, 8vw, 3.8rem)/1.2 var(--display);
    letter-spacing: -.07em;
    border-bottom: 1px solid #ffffff35;
    padding: .45rem 0;
  }
  .mobile-menu > a span {
    font: 600 .65rem var(--body);
    letter-spacing: .1em;
    color: var(--accent);
  }
}

@media (max-width: 430px) {
  .hero-stage { margin-top: .85rem; }
  .hero-title { font-size: clamp(3.4rem, 14vw, 4.2rem); }
  .portrait-wrap { width: 84vw; height: auto; aspect-ratio: .76; margin-top: -.2rem; }
  .hero-orbit { width: 90vw; }
  .hero-stamp { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .menu-toggle span { transition-duration: .01ms; }
}