:root {
  --text: #737373;
  --accent: #ff7e79;
  --accent-dim: #d66865;
  --black: #000000;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: futura-pt, sans-serif;
}

.profile {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.profile-copy {
  flex: 1 1 0;
  width: auto;
  container-type: inline-size;
  padding: 0 clamp(.75rem, 1.5vw, 2rem) 0 clamp(1.25rem, 5.5vw, 7rem);
}

.profile-copy__inner {
  min-width: 0;
  max-width: 100%;
  font-size: clamp(
    1.7rem,
    min(calc(1rem + 3.15vw), 7.1cqw),
    5.4rem
  );
}

.profile-name {
  margin: 0 0 .16em;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.02;
  color: var(--black);
  white-space: nowrap;
}

.profile-name span,
.profile-detail {
  white-space: nowrap;
}

.profile-detail {
  font-size: .618em;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.profile-name + .profile-detail {
  margin-bottom: .08em;
}

a {
  --link-color: currentColor;
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus {
  color: color-mix(in srgb, var(--link-color) 83.6%, black);
}

a.profile-detail {
  display: block;
  width: fit-content;
}

.text-accent {
  --link-color: var(--accent);
  color: var(--link-color);
}

.underline {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}

.underline:hover,
.underline:focus {
  text-decoration-line: none;
}

.underline-on-hover {
  text-decoration: none;
}

.underline-on-hover:hover,
.underline-on-hover:focus {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}

.profile-detail--spaced {
  margin-top: .6em;
}

.profile-photo {
  --photo-width: min(58.333vh, 39.583vw);
  --photo-width: min(58.333dvh, 39.583vw);
  --photo-right: clamp(2rem, 5vw, 7rem);
  --photo-gap: clamp(1rem, 2vw, 2rem);

  flex: 0 0 calc(var(--photo-width) + var(--photo-right) + var(--photo-gap));
  width: calc(var(--photo-width) + var(--photo-right) + var(--photo-gap));
}

.profile-photo__frame {
  position: absolute;
  right: var(--photo-right);
  bottom: 0;
  height: min(84vh, 57vw);
  height: min(84dvh, 57vw);
  aspect-ratio: 1 / 1.44;
}

.profile-photo__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (max-aspect-ratio: 5 / 6) {
  .profile > .row {
    flex-direction: column;
  }

  .profile-copy {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
    padding: clamp(5rem, 17vh, 10rem) 1rem clamp(1.5rem, 4vh, 3rem);
    padding-top: clamp(5rem, 17dvh, 10rem);
    padding-bottom: clamp(1.5rem, 4dvh, 3rem);
    text-align: center;
  }

  .profile-copy__inner {
    font-size: clamp(2rem, 8.75vw, 4.5rem);
  }

  .profile-name {
    white-space: normal;
  }

  a.profile-detail {
    margin-inline: auto;
  }

  .profile-photo {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
  }

  .profile-photo__frame {
    --photo-height: min(78vh, 133.333%, 126.72vw);
    --photo-height: min(78dvh, 133.333%, 126.72vw);
    top: max(0px, calc(100% - var(--photo-height)));
    right: auto;
    bottom: auto;
    left: 50%;
    height: var(--photo-height);
    transform: translateX(-50%);
  }
}

/* Fix mobile Safari cropping behind controls */
@supports (-webkit-touch-callout: none) {
  @media (max-aspect-ratio: 5 / 6) {
    html,
    body {
      height: auto;
      overflow: visible;
      touch-action: pinch-zoom;
    }

    .profile {
      height: 100lvh;
      overflow: visible;
    }
  }
}