/* The DOM supplies the same poster anchors to WebGL and its static fallback. */
.hero {
  height: calc(100svh - 32px);
  min-height: 560px;
  max-height: 1100px;
}

.hero-poster-layout {
  position: absolute;
  top: 52%;
  left: 50%;
  width: min(1320px, calc(100% - 112px), calc((100svh - 148px) * 1.45));
  aspect-ratio: 1.45;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  container-type: inline-size;
}

.hero-poster-layout .poster-greeting {
  position: absolute;
  inset: 0;
  width: 100%;
  transform: none;
  font-size: 76px;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
}

.hero-poster-layout .greeting-line {
  position: absolute;
  top: 17%;
  left: 3%;
  width: 35%;
  height: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(1em, 6.2cqw);
}

.hero-poster-layout .greeting-line + .greeting-line {
  top: 23%;
  left: auto;
  right: 7%;
  width: 25%;
  margin: 0;
}

.hero-poster-layout .hero-inner {
  top: 29%;
  left: 6%;
  width: 88%;
  height: 68%;
  padding: 0;
  transform: none;
}

.hero-poster-layout .hero-copy {
  height: 100%;
  padding: 0;
  transform: none;
}

.hero-poster-layout #hero-title {
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  min-height: 0;
  font-size: 164px;
  line-height: 1;
  letter-spacing: 0;
}

.hero-poster-layout .hero-name,
.hero-poster-layout .hero-portfolio {
  height: 100%;
  width: 100%;
  margin: 0;
  font-size: inherit;
  line-height: 1;
}

.hero-poster-layout .poster-signature {
  inset: auto 0 2%;
  width: 100%;
  transform: none;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.hero .poster-side { display: none; }
.hero .no-webgl ~ .hero-poster-layout .title-letter,
.hero .title-fallback ~ .hero-poster-layout .title-letter { opacity: 1 !important; font-size: .8em; }

@media (max-width: 1100px) {
  .hero-poster-layout .poster-greeting { font-size: 58px; }
  .hero-poster-layout #hero-title { font-size: 120px; }
}

@media (max-width: 800px) {
  .hero-poster-layout { width: calc(100% - 48px); top: 52%; }
  .hero-poster-layout .poster-greeting { font-size: 42px; }
  .hero-poster-layout #hero-title { font-size: 92px; }
  .hero-poster-layout .poster-signature { font-size: 9px; }
}

@media (max-width: 600px) {
  .hero { height: calc(100svh - 36px); min-height: 0; max-height: 880px; }
  .hero-poster-layout { width: calc(100% - 28px); top: 49%; aspect-ratio: .88; }
  .hero-poster-layout .greeting-line { top: 19%; left: 0; width: 39%; height: 10%; }
  .hero-poster-layout .greeting-line { font-size: min(1em, 7cqw); }
  .hero-poster-layout .greeting-line + .greeting-line { top: 26%; right: 3%; width: 29%; }
  .hero-poster-layout .poster-greeting { font-size: 27px; }
  .hero-poster-layout .hero-inner { top: 34%; left: 3%; width: 94%; height: 60%; }
  .hero-poster-layout #hero-title { font-size: 64px; }
  .hero-poster-layout .poster-signature { font-size: 7px; bottom: 0; }
}

@media (max-width: 360px) {
  .hero-poster-layout .poster-greeting { font-size: 23px; }
  .hero-poster-layout #hero-title { font-size: 55px; }
}