.team-variant {
  padding: 90px var(--gutter);
}
.team-variant h2 {
  font-size: clamp(46px, 5vw, 76px);
}
.team-variant p {
  font-size: 18px;
  line-height: 1.6;
}
.team-variant img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-focus {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 8vw;
  align-items: center;
}
.team-tabs {
  display: grid;
  margin: 42px 0;
}
.team-tabs button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  background: none;
  border-bottom: 1px solid #f1e7d233;
  color: #a6a09a;
  text-align: left;
  font:
    clamp(36px, 4.2vw, 60px)/1.2 Sukajan,
    Arial,
    sans-serif;
}
.team-tabs button span {
  font:
    28px Arial,
    sans-serif;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    transform 0.25s,
    opacity 0.25s;
}
.team-tabs button[aria-selected="true"] {
  color: #f1e7d2;
  border-color: #ef443b;
}
.team-tabs button[aria-selected="true"] span {
  color: #ef443b;
  opacity: 1;
  transform: none;
}
.team-focus-copy > p {
  max-width: 100%;
}
.team-focus-portraits {
  background: #64201c;
}
.team-focus-portraits [role="tabpanel"] {
  position: relative;
  height: 650px;
  overflow: hidden;
}
.team-focus-portraits img {
  object-position: center 30%;
  filter: grayscale(0.8);
  animation: portrait-in 0.45s ease both;
}
.team-photo-name {
  position: absolute;
  bottom: 26px;
  right: 26px;
  color: #f1e7d2;
  font:
    clamp(60px, 7vw, 100px)/1 Sukajan,
    Arial,
    sans-serif;
  text-shadow: 0 3px 20px #0008;
}
@keyframes portrait-in {
  from {
    opacity: 0.5;
    transform: scale(1.025);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (max-width: 1000px) {
  .team-focus {
    gap: 5vw;
  }
}
@media (max-width: 760px) {
  .team-variant {
    padding: 58px 22px;
  }
  .team-variant h2 {
    font-size: 46px;
  }
  .team-variant p {
    font-size: 16px;
  }
  .team-focus {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .team-focus-copy,
  .team-focus-portraits {
    width: 100%;
  }
  .team-tabs {
    display: flex;
    gap: 22px;
    margin: 26px 0;
  }
  .team-tabs button {
    flex: 1;
    font-size: 34px;
    justify-content: center;
  }
  .team-tabs button span {
    display: none;
  }
  .team-focus-portraits [role="tabpanel"] {
    height: 470px;
  }
  .team-photo-name {
    font-size: 72px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .team-focus-portraits img {
    animation: none;
  }
}
.team-kanji-backdrop {
  position: absolute;
  pointer-events: none;
  user-select: none;
  color: #b4a897;
  opacity: 0.075;
  z-index: -1;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(280px, 45vw, 720px);
  line-height: 1;
  letter-spacing: -0.08em;
  white-space: nowrap;
}
.team-focus {
  display: block;
  padding: 0;
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: #171615;
}
.team-focus-frame {
  position: sticky;
  top: 0;
  height: calc(var(--page-vh, 1svh) * 100);
  min-height: 650px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: min(5vw, 80px);
  align-items: center;
  padding: 44px var(--gutter);
  isolation: isolate;
  overflow: clip;
}
.team-focus-frame > .team-kanji-backdrop {
  left: -4%;
  top: 4%;
  font-size: clamp(250px, 29vw, 470px);
  writing-mode: vertical-rl;
  letter-spacing: -0.13em;
  opacity: 0.065;
}
.team-focus-copy {
  position: relative;
  z-index: 2;
}
.team-focus-portraits {
  position: relative;
  height: 100%;
  min-height: 0;
  width: 100%;
  max-height: 900px;
  background: transparent;
  isolation: isolate;
}
.team-focus-portraits::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #c3b7a0;
  opacity: 0.8;
  mask: url("impact-mask-v6-solid.png") center / 100% 100% no-repeat;
  -webkit-mask: url("impact-mask-v6-solid.png") center / 100% 100% no-repeat;
  transform: scale(1.018, 1.012);
}
.team-focus-portraits [role="tabpanel"] {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: visible;
}
.team-focus-portraits img {
  mask: url("impact-mask-v6-solid.png") center / 100% 100% no-repeat;
  -webkit-mask: url("impact-mask-v6-solid.png") center / 100% 100% no-repeat;
  object-position: center 25%;
  filter: none;
  animation: aperture-arrive 0.42s ease both;
}
.team-focus-portraits .team-photo-name {
  right: 16%;
  bottom: 12%;
  z-index: 2;
}
.team-focus.is-static {
  height: auto;
}
.team-focus.is-static .team-focus-frame {
  position: relative;
}
@keyframes aperture-arrive {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 760px) {
  .team-focus-frame {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    padding: 28px 22px 18px;
    min-height: 680px;
  }
  .team-focus-frame > .team-kanji-backdrop {
    left: -8%;
    top: 17%;
    font-size: 70vw;
  }
  .team-focus-frame h2 {
    font-size: 40px;
  }
  .team-focus-frame .team-tabs {
    margin: 18px 0;
  }
  .team-focus-frame .team-tabs button {
    font-size: 30px;
    padding-block: 8px;
  }
  .team-focus-copy > p {
    font-size: 16px;
    line-height: 1.45;
  }
  .team-focus-portraits {
    min-height: 0;
  }
  .team-focus-portraits [role="tabpanel"] {
    height: 100%;
  }
  .team-focus-portraits .team-photo-name {
    font-size: 56px;
    bottom: 9%;
    right: 15%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .team-focus-portraits img {
    animation: none;
  }
}

.team-focus-portraits::before,
.team-focus-portraits img {
  mask-mode: luminance;
}

/* Overlapping dry-brush sweeps keep the portrait continuous between strokes. */
@property --paint-1 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --paint-2 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --paint-3 { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
.team-focus-portraits::before { content: none; }
.team-focus-portraits .team-photo-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Alpha is baked into the SVG using the unchanged original brush artwork. */
  -webkit-mask-image: url("brush-vertical-alpha.svg"), url("brush-vertical-alpha.svg"), url("brush-vertical-alpha.svg");
  mask-image: url("brush-vertical-alpha.svg"), url("brush-vertical-alpha.svg"), url("brush-vertical-alpha.svg");
  mask-mode: alpha;
  -webkit-mask-composite: source-over;
  mask-composite: add;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left top, center bottom, right top;
  mask-position: left top, center bottom, right top;
  -webkit-mask-size: 60% var(--paint-1), 60% var(--paint-2), 60% var(--paint-3);
  mask-size: 60% var(--paint-1), 60% var(--paint-2), 60% var(--paint-3);
  animation: paint-portrait 0.54s linear both;
}
.team-focus-portraits .team-photo-frame img {
  -webkit-mask: none;
  mask: none;
  animation: none;
}
/* A gentle crop of the original photo keeps Yumi and both drums in view. */
.team-photo-frame[data-person="Yumi"] img {
  object-position: center 60%;
  transform: scale(1.16);
  transform-origin: center 60%;
}
@keyframes paint-portrait {
  0% { --paint-1: 0%; --paint-2: 0%; --paint-3: 0%; }
  33% { --paint-1: 100%; --paint-2: 0%; --paint-3: 0%; }
  66% { --paint-1: 100%; --paint-2: 100%; --paint-3: 0%; }
  100% { --paint-1: 100%; --paint-2: 100%; --paint-3: 100%; }
}
.team-focus-portraits .team-photo-name { bottom: 7%; right: 9%; }
@media (prefers-reduced-motion: reduce) {
  .team-focus-portraits .team-photo-frame { animation: none; }
}

/* Desktop: the pinned frame always fits the window, so the portrait is never cut off at the top and the
   section stands still from the first scroll. Title, names and spacing shrink on short windows
   (small laptops, browser zoom) instead of the frame growing taller than the screen. */
@media (min-width: 761px) {
  .team-focus-frame {
    padding-block: clamp(20px, calc(var(--page-vh, 1svh) * 5), 44px);
  }
  .team-focus-frame h2 {
    font-size: clamp(38px, min(5vw, calc(var(--page-vh, 1svh) * 8)), 76px);
  }
  .team-focus-frame .team-tabs {
    margin-block: clamp(14px, calc(var(--page-vh, 1svh) * 4.5), 42px);
  }
  .team-focus-frame .team-tabs button {
    padding-block: clamp(5px, calc(var(--page-vh, 1svh) * 1.4), 13px);
    font-size: clamp(30px, min(4.2vw, calc(var(--page-vh, 1svh) * 6.4)), 60px);
  }
  .team-focus-frame .team-focus-copy > p {
    font-size: clamp(16px, calc(var(--page-vh, 1svh) * 2.4), 18px);
    line-height: 1.55;
  }
}