:root {
  --profile-ink: #171716;
  --profile-paper: #e8e0d5;
  --profile-muted: #55514c;
}

* { box-sizing: border-box; }

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

body {
  color: var(--profile-ink);
  background: var(--profile-paper);
  caret-color: transparent;
  font-family: "Roboto", Arial, sans-serif;
}

.individual-team-profile {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--profile-paper);
}

.individual-team-profile::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 22%, rgba(255,255,255,.62), transparent 34%),
    linear-gradient(90deg, #e8e0d5 0%, #e8e0d5 33%, rgba(232,224,213,.94) 43%, rgba(232,224,213,.18) 68%, rgba(232,224,213,0) 100%);
}

.individual-team-profile::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  border: 1px solid rgba(23,23,22,.18);
  content: "";
  pointer-events: none;
}

.individual-team-profile figure {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 64vw;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--profile-edge, #d4ccc1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.18) 10%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.18) 10%, #000 34%);
}

.individual-team-profile figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--profile-position, center top);
  filter: saturate(.78) contrast(1.03) brightness(.94) sepia(.06);
  transform: scale(var(--profile-scale, 1.015));
  transform-origin: right center;
}

.individual-team-profile figure::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15,14,13,.04), transparent 34%, rgba(15,14,13,.12)),
    linear-gradient(90deg, rgba(232,224,213,.26), transparent 40%);
}

.individual-team-profile article {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: min(50vw, 900px);
  min-width: 0;
  height: 100%;
  padding: clamp(3.5rem, 8vh, 6.5rem) 0 clamp(3rem, 7vh, 5.5rem) max(5vw, 54px);
}

.individual-team-profile article > p:first-child { display: none; }

.individual-team-profile h1 {
  max-width: 100%;
  margin: 0;
  font-family: "Marcellus", Georgia, serif;
  font-size: clamp(3rem, 4.5vw, 6.1rem);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-transform: uppercase;
}

.individual-team-profile h2 {
  position: relative;
  max-width: 100%;
  margin: clamp(1.1rem, 2.3vh, 1.65rem) 0 clamp(2.2rem, 4.2vh, 3.6rem);
  padding-bottom: 1rem;
  color: var(--profile-muted);
  font-size: clamp(.7rem, .72vw, .9rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .2em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.individual-team-profile h2::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(12rem, 100%);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--profile-ink), transparent);
}

.individual-team-profile article > div {
  width: min(100%, 62ch);
  min-width: 0;
  color: #45413d;
}

.individual-team-profile article > div p {
  margin: 0;
  font-size: clamp(1rem, 1vw, 1.25rem);
  font-weight: 300;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.individual-team-profile article > div p:first-child {
  color: #282624;
  font-family: "Marcellus", Georgia, serif;
  max-width: 56ch;
  font-size: clamp(1.18rem, 1.3vw, 1.6rem);
  line-height: 1.48;
}

.individual-team-profile article > div p + p { margin-top: clamp(1.4rem, 2.5vh, 2rem); }

.individual-profile-close {
  position: absolute;
  z-index: 7;
  top: clamp(1.25rem, 3vw, 2.5rem);
  right: clamp(1.25rem, 3vw, 2.5rem);
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  color: transparent;
  background: rgba(15,14,13,.28);
  box-shadow: 0 .55rem 1.5rem rgba(0,0,0,.16);
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.individual-profile-close::before,
.individual-profile-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1px;
  content: "";
  background: #fff;
}

.individual-profile-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.individual-profile-close::after { transform: translate(-50%,-50%) rotate(-45deg); }

@media (max-height: 760px) and (min-width: 651px) {
  .individual-team-profile article { padding-top: 2.2rem; padding-bottom: 2.2rem; }
  .individual-team-profile h1 { font-size: clamp(2.7rem, 4vw, 5rem); }
  .individual-team-profile h2 {
    margin-top: .85rem;
    margin-bottom: 1.45rem;
    padding-bottom: .75rem;
    font-size: clamp(.66rem, .7vw, .82rem);
  }
  .individual-team-profile article > div p {
    font-size: clamp(.95rem, 1vw, 1.1rem);
    line-height: 1.5;
  }
  .individual-team-profile article > div p:first-child {
    font-size: clamp(1.08rem, 1.2vw, 1.35rem);
    line-height: 1.42;
  }
  .individual-team-profile article > div p + p { margin-top: 1.1rem; }
}

@media (max-width: 650px) {
  .individual-team-profile::before {
    background:
      radial-gradient(circle at 18% 70%, rgba(255,255,255,.58), transparent 35%),
      linear-gradient(0deg, #e8e0d5 0%, #e8e0d5 46%, rgba(232,224,213,.72) 61%, rgba(232,224,213,0) 84%);
  }

  .individual-team-profile figure {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 44%;
    -webkit-mask-image: linear-gradient(0deg, transparent 0, rgba(0,0,0,.55) 22%, #000 43%);
    mask-image: linear-gradient(0deg, transparent 0, rgba(0,0,0,.55) 22%, #000 43%);
  }

  .individual-team-profile figure img {
    object-position: var(--profile-mobile-position, var(--profile-position, center top));
    transform-origin: center top;
  }

  .individual-team-profile article {
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 38svh 1.25rem 1.25rem;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .individual-team-profile article::-webkit-scrollbar { display: none; }

  .individual-team-profile h1 {
    max-width: calc(100vw - 2.3rem);
    font-size: clamp(2.15rem, 9.2vw, 3rem);
    line-height: .94;
    letter-spacing: -.04em;
  }

  .individual-team-profile h2 {
    margin: .7rem 0 1rem;
    padding-bottom: .62rem;
    font-size: clamp(.62rem, 2.5vw, .76rem);
    letter-spacing: .16em;
  }

  .individual-team-profile article > div { width: 100%; }
  .individual-team-profile article > div p { font-size: clamp(.82rem, 3.45vw, .96rem); line-height: 1.55; }
  .individual-team-profile article > div p:first-child { font-size: clamp(.96rem, 3.9vw, 1.08rem); line-height: 1.48; }
  .individual-team-profile article > div p + p { margin-top: .9rem; }

  .individual-profile-close { top: .85rem; right: .85rem; width: 2.35rem; height: 2.35rem; }
}

@media (max-width: 650px) and (max-height: 700px) {
  .individual-team-profile figure { height: 41%; }
  .individual-team-profile article { padding-top: 35svh; padding-bottom: .9rem; }
  .individual-team-profile h1 { font-size: clamp(1.8rem, 8.5vw, 2.65rem); }
  .individual-team-profile h2 { margin-top: .45rem; margin-bottom: .7rem; }
  .individual-team-profile article > div p { font-size: clamp(.76rem, 3.25vw, .88rem); line-height: 1.48; }
  .individual-team-profile article > div p:first-child { font-size: clamp(.88rem, 3.7vw, 1rem); line-height: 1.43; }
  .individual-team-profile article > div p + p { margin-top: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}