/* Homepage portrait: angular backing echoes the site's offset nameplate and CTA. */
.header { min-height: 88px; }
.hero { padding-top: 30px; padding-bottom: 96px; }
.hero + .approach-scroll { padding-top: 28px; }

@media (max-width: 750px) {
  .header { padding-top: 10px; padding-bottom: 6px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px 8px; }
  .header .brand { grid-column: 1; grid-row: 1; font-size: clamp(14px, 4.1vw, 18px); padding: 7px 6px; }
  .header nav { display: contents; }
  .header .header-socials { grid-column: 2; grid-row: 1; gap: 5px; margin: 0; }
  .header .theme-toggle { grid-column: 3; grid-row: 1; width: 64px; margin: 0; }
  .header .nav-strip { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .hero { padding-top: 24px; padding-bottom: 72px; }
  .hero + .approach-scroll { padding-top: 20px; }
}

.portrait--angular {
  width: calc(100% + 24px);
  margin-left: -24px;
}

.portrait--angular .portrait-art {
  --portrait-offset-x: 14px;
  --portrait-offset-y: 13px;
  position: relative;
  isolation: isolate;
  overflow: visible;
  height: 540px;
  transform: none;
}

.portrait--angular .portrait-art::before,
.portrait--angular .portrait-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  opacity: 1;
  clip-path: inset(21% 0 0);
  transform-origin: 50% 85%;
}

.portrait--angular .portrait-art::before {
  z-index: -1;
  background-color: var(--portrait-panel);
  background-image:
    linear-gradient(var(--portrait-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--portrait-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: rotate(3deg);
}

.portrait--angular .portrait-art::after {
  z-index: -2;
  background: var(--mint);
  transform: translate(var(--portrait-offset-x), var(--portrait-offset-y)) rotate(-1.5deg);
}

.portrait--angular img {
  position: relative;
  z-index: 0;
  transform: rotate(3deg);
  transform-origin: 50% 85%;
  object-fit: cover;
  object-position: center top;
  clip-path: inset(0);
}

@media (max-width: 1100px) and (min-width: 751px) {
  .portrait--angular .portrait-art { height: 460px; }
}

@media (max-width: 750px) {
  .portrait--angular {
    width: 100%;
    margin-left: 0;
  }
  .portrait--angular .portrait-art {
    --portrait-offset-x: 7px;
    --portrait-offset-y: 8px;
    height: 230px;
  }
  .portrait--angular .portrait-art::before {
    background-size: 28px 28px;
  }
  .portrait--angular img { object-position: 34% top; }

}

@media (max-width: 380px) {
  .portrait--angular .portrait-art { height: 205px; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .portrait--angular img,
  .portrait--angular .portrait-art::before,
  .portrait--angular .portrait-art::after {
    transform-origin: 50% 85%;
    transition: transform .4s cubic-bezier(.2, .65, .3, 1);
  }

  .portrait--angular:hover img {
    transform: rotate(0deg);
  }

  .portrait--angular:hover .portrait-art::before {
    transform: rotate(0deg);
  }

  .portrait--angular:hover .portrait-art::after {
    transform: translate(var(--portrait-offset-x), var(--portrait-offset-y)) rotate(0deg);
  }
}