:root {
  color-scheme: dark;
  --ink: #10070c;
  --wine: #6d0b22;
  --red: #a61131;
  --red-dark: #3b0713;
  --gold: #f0c66b;
  --paper: #f4e7ca;
  --blue: #18b7d6;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% -10%, #492139 0, transparent 38rem),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    #09080b;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

button, a { font: inherit; }
button { color: inherit; }

.page-shell {
  width: min(1420px, 100%);
  margin: 0 auto;
  padding: 14px 14px 54px;
}

.theatre {
  position: relative;
  overflow: hidden;
  min-height: max(680px, calc(100svh - 80px));
  border: 10px solid #211619;
  outline: 1px solid rgba(240,198,107,.5);
  background: #08080b;
  box-shadow: 0 28px 80px #000, inset 0 0 0 2px #6b4a22;
  isolation: isolate;
}

.proscenium {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  height: 46px;
  border-bottom: 4px double #b8863d;
  background: linear-gradient(#281820, #0f090c);
  transition: transform 1.35s .38s cubic-bezier(.45,0,.3,1), opacity .8s .65s;
}

.theatre.is-open .proscenium {
  opacity: 0;
  transform: translateY(-115%);
}

.proscenium__ornament {
  width: 72px;
  margin: 7px auto 0;
  color: var(--gold);
  text-align: center;
  font-size: 1.4rem;
  background: #160d11;
  border: 1px solid #8b642e;
}

.stage {
  position: absolute;
  inset: 46px 0 132px;
  overflow: hidden;
  background: #170c08;
  transition:
    top 1.8s .25s cubic-bezier(.3,.05,.16,1),
    right 1.8s .25s cubic-bezier(.3,.05,.16,1),
    bottom 1.8s .25s cubic-bezier(.3,.05,.16,1),
    left 1.8s .25s cubic-bezier(.3,.05,.16,1);
}

.stage-scenery {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20,9,5,.86), transparent 18%, transparent 82%, rgba(20,9,5,.86)),
    radial-gradient(ellipse at 22% 28%, transparent 0 10%, rgba(20,8,3,.28) 10.5% 11.3%, transparent 12% 24%) 0 0 / 270px 94px,
    radial-gradient(ellipse at 72% 63%, transparent 0 12%, rgba(20,8,3,.24) 12.5% 13.4%, transparent 14% 26%) 40px 18px / 310px 112px,
    repeating-linear-gradient(0deg, rgba(255,215,152,.025) 0 1px, transparent 1px 7px),
    linear-gradient(#4f2c1b 0 68%, #2c180f 68% 70%, #170c08 70%);
}

.theatre.is-open .stage {
  top: -18px;
  right: -3.5%;
  bottom: -22px;
  left: -3.5%;
}

.stage-scenery::after {
  content: "";
  position: absolute;
  inset: auto -10% 0;
  z-index: 1;
  height: 32%;
  background:
    repeating-linear-gradient(90deg, transparent 0 9.4%, rgba(9,4,2,.6) 9.4% 10%),
    repeating-linear-gradient(3deg, rgba(255,208,134,.045) 0 2px, transparent 2px 8px),
    linear-gradient(90deg, #2b160d, #684027 18%, #3a2014 36%, #72472b 54%, #321a10 72%, #5b351f);
  transform: perspective(420px) rotateX(62deg);
  transform-origin: bottom;
}

.stage-camera {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform: scale(1);
  transform-origin: 50% 42%;
  transition: transform 1.8s .25s cubic-bezier(.3,.05,.16,1);
}

.theatre.is-open .stage-camera {
  transform: scale(1.12) translateY(-2%);
}

.focus-camera {
  position: absolute;
  inset: 0;
  transform: scale(1);
  transform-origin: var(--focus-x, 50%) var(--focus-y, 58%);
  transition: transform .95s cubic-bezier(.2,.72,.18,1), transform-origin .75s cubic-bezier(.2,.72,.18,1);
}

.theatre.is-profile .focus-camera { transform: scale(1.24); }

.character-backdrop {
  position: absolute;
  z-index: 1;
  inset: -2%;
  opacity: 0;
  background-image:
    linear-gradient(rgba(8,7,9,.2), rgba(8,7,9,.48)),
    var(--character-bg);
  background-position: center;
  background-size: cover;
  clip-path: circle(0 at 50% 50%);
  filter: grayscale(1) contrast(1.08) brightness(.72);
  transform: scale(1.02);
}

.character-backdrop.is-revealing {
  animation: backdrop-reveal 1.05s .08s cubic-bezier(.2,.72,.18,1) both;
}

@keyframes backdrop-reveal {
  0% { opacity: 0; clip-path: circle(0 at 50% 50%); }
  12% { opacity: 1; }
  100% { opacity: 1; clip-path: circle(76% at 50% 50%); }
}

.stage-light {
  position: absolute;
  z-index: 2;
  inset: -20% 13% 4%;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 76%, rgba(246,227,171,.45), rgba(240,198,107,.1) 38%, transparent 68%);
  clip-path: polygon(38% 0, 62% 0, 92% 100%, 8% 100%);
  transition: opacity 1.2s .55s ease;
}

.theatre.is-open .stage-light { opacity: 1; }

.curtain {
  position: absolute;
  z-index: 12;
  top: 0;
  bottom: 0;
  width: 54%;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent 16%),
    repeating-linear-gradient(90deg, #430714 0 8%, #8e1230 8% 16%, #2d050d 16% 23%);
  transition: transform 1.25s cubic-bezier(.76,0,.24,1);
  box-shadow: 0 0 35px #000;
}

.curtain--left { left: 0; border-right: 5px solid #29040b; }
.curtain--right { right: 0; border-left: 5px solid #29040b; transform: scaleX(-1); }
.theatre.is-open .curtain--left { transform: translateX(-104%); }
.theatre.is-open .curtain--right { transform: translateX(104%) scaleX(-1); }

.curtain-valance {
  position: absolute;
  z-index: 15;
  inset: 0 -2% auto;
  height: 80px;
  background: repeating-radial-gradient(ellipse at 50% -30%, #9b1735 0 24px, #490916 26px 46px);
  border-bottom: 6px solid #2a050c;
  filter: drop-shadow(0 8px 12px #000);
  transition: transform .7s .6s ease;
}

.theatre.is-open .curtain-valance { transform: translateY(-110%); }

.opening-panel {
  position: absolute;
  z-index: 18;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  background: radial-gradient(circle, transparent, rgba(0,0,0,.18));
  transition: opacity .4s, visibility .4s;
}

.theatre.is-open .opening-panel { opacity: 0; visibility: hidden; }

.open-button {
  width: 138px;
  aspect-ratio: 1;
  border: 1px solid #efc472;
  border-radius: 50%;
  color: var(--paper);
  background: radial-gradient(circle at 40% 30%, #b61a3b, #5b091b 60%, #1d040a);
  box-shadow: 0 0 0 8px rgba(0,0,0,.25), 0 0 0 9px #7e5828, 0 15px 35px #000;
  cursor: pointer;
  transition: transform .2s, filter .2s;
}

.open-button:hover { transform: scale(1.04); filter: brightness(1.18); }
.open-button:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #26d4f3; outline-offset: 4px; }
.open-button span { display: block; font-size: 1.75rem; letter-spacing: .25em; text-indent: .25em; }

.cast {
  position: absolute;
  z-index: 5;
  inset: 24px 10% 7%;
  display: flex;
  justify-content: center;
  align-items: end;
  gap: clamp(20px, 9vw, 130px);
}

.cast-member {
  position: relative;
  height: 88%;
  width: min(34%, 290px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity .65s, transform 1.8s cubic-bezier(.16,.76,.22,1), filter .2s;
}

.cast-member--left { transform: translateX(-70vw); }
.cast-member--right { transform: translateX(70vw); }
.theatre.is-open .cast-member { opacity: 1; transform: translateX(0); }
.theatre.is-open .cast-member--right { transition-delay: 2.15s; }

.theatre.is-open .cast-member--tenmen {
  animation: tenmen-enter 2.35s cubic-bezier(.18,.72,.2,1) 2s both;
}

@keyframes tenmen-enter {
  0% { opacity: 0; transform: translate(-70vw, 18px); }
  14% { opacity: 1; transform: translate(-53vw, 0); }
  38% { transform: translate(-25vw, -140px); }
  56% { transform: translate(-15vw, 0); }
  70% { transform: translate(-9vw, -34px); }
  82% { transform: translate(-5vw, 0); }
  92% { transform: translate(-2vw, -13px); }
  100% { opacity: 1; transform: translate(0, 0); }
}

.cast-member img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: brightness(0) drop-shadow(0 8px 1px rgba(0,0,0,.8));
  transition: filter .25s, transform .25s;
}

.figure-motion {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}

.figure-motion img {
  display: block;
}

.theatre.is-open .cast-member--right .figure-motion {
  animation: yamamoto-idle 3.8s ease-in-out 4.15s infinite;
}

.theatre.is-open .cast-member--tenmen .figure-motion {
  animation: tenmen-idle 3.1s ease-in-out 4.4s infinite;
}

@keyframes yamamoto-idle {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-7px) scaleY(1.008); }
}

@keyframes tenmen-idle {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-8px) scaleY(1.006); }
}

.theatre .cast-member .figure-motion.motion-tenmen-hop {
  animation: character-hop 1s cubic-bezier(.28,.7,.32,1) infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-hop-fast {
  animation: character-hop .5s cubic-bezier(.28,.7,.32,1) infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-spin {
  transform-origin: 50% 63%;
  animation: character-spin 2.5s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-spin-fast {
  transform-origin: 50% 63%;
  animation: character-spin 1.25s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-step {
  animation: character-step 1.25s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-step-fast {
  animation: character-step .625s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-flip {
  transform-origin: 50% 50%;
  animation: character-flip 2.5s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-tenmen-flip-fast {
  transform-origin: 50% 50%;
  animation: character-flip 1.25s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-yamamoto-stretch {
  animation: character-stretch 2.5s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

.theatre .cast-member .figure-motion.motion-yamamoto-breathe {
  animation: character-breathe 2.5s ease-in-out infinite both !important;
  animation-play-state: running !important;
}

@keyframes character-hop {
  0%, 100% { transform: translateY(0); }
  18% { transform: translateY(-16px); }
  34% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  64% { transform: translateY(0); }
  76% { transform: translateY(-3px); }
  86% { transform: translateY(0); }
}

@keyframes character-spin {
  0% { transform: rotate(0deg); }
  68%, 100% { transform: rotate(360deg); }
}

@keyframes character-step {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(0); }
  60% { transform: translateX(10px); }
  80% { transform: translateX(0); }
  90% { transform: translateX(-4px); }
}

@keyframes character-flip {
  0% { transform: perspective(600px) rotateY(0deg); }
  65%, 100% { transform: perspective(600px) rotateY(360deg); }
}

@keyframes character-stretch {
  0%, 100% { transform: scale(1); }
  22% { transform: scaleY(1.09) scaleX(.95); }
  43% { transform: scaleY(.96) scaleX(1.03); }
  64% { transform: scaleY(1.045) scaleX(.98); }
  82% { transform: scaleY(.99) scaleX(1.01); }
}

@keyframes character-breathe {
  0%, 100% { transform: scale(1); }
  42% { transform: scaleY(1.025) scaleX(.99); }
  76% { transform: scaleY(.992) scaleX(1.006); }
}

.cast-member:hover img, .cast-member:focus-visible img { filter: brightness(0) drop-shadow(0 0 16px rgba(240,198,107,.65)); transform: translateY(-8px); }

.theatre.is-profile .cast-member {
  pointer-events: none;
  transition-delay: 0s;
  transition-duration: .45s;
}

.theatre.is-profile-closing .cast-member { transition-delay: 0s; }

.theatre.is-profile .cast-member:not(.is-selected) {
  opacity: 0;
  filter: blur(5px);
}

.theatre.is-profile .cast-member.is-selected { z-index: 8; }
.theatre.is-profile .cast-member.is-selected .figure-motion { animation-play-state: paused; }
.theatre.is-profile .cast-member.is-selected img {
  filter: brightness(1) drop-shadow(0 12px 18px rgba(38,14,12,.24));
  transform: none;
  transition: filter .42s .48s ease, transform .25s ease;
}

.footlights {
  position: absolute;
  z-index: 22;
  left: 4%;
  right: 4%;
  bottom: 112px;
  display: flex;
  justify-content: space-around;
  height: 35px;
  border-top: 7px solid #3a2722;
  background: #0b0909;
  transition: transform 1.15s .2s cubic-bezier(.5,0,.8,.4), opacity .75s .3s;
}

.theatre.is-open .footlights {
  opacity: 0;
  transform: translateY(190px);
}

.footlights i {
  width: 18px;
  height: 18px;
  margin-top: -13px;
  border-radius: 50%;
  background: #d7a754;
  box-shadow: 0 -5px 16px #ffd684;
}

.audience {
  position: absolute;
  z-index: 21;
  inset: auto 0 0;
  display: flex;
  justify-content: space-around;
  align-items: end;
  height: 125px;
  padding: 0 4%;
  background:
    linear-gradient(transparent, rgba(3,3,4,.92) 32%),
    repeating-linear-gradient(90deg, transparent 0 12%, rgba(119,67,41,.08) 12% 13%);
  transition: transform 1.35s .1s cubic-bezier(.5,0,.75,.35), opacity .85s .32s;
}

.theatre.is-open .audience {
  opacity: 0;
  transform: translateY(125%);
}

.audience span {
  position: relative;
  width: 11.5%;
  height: 76%;
  border: 3px solid #120b0a;
  border-bottom-width: 8px;
  border-radius: 18px 18px 5px 5px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 24% 76%, rgba(0,0,0,.35)),
    linear-gradient(#3b1d1a, #160c0b 70%);
  box-shadow:
    inset 0 0 0 3px #090606,
    inset 0 0 22px rgba(0,0,0,.75),
    0 10px 0 #060505,
    0 16px 18px #000;
}

.audience span::before {
  content: "";
  position: absolute;
  left: -9%;
  right: -9%;
  bottom: 8%;
  height: 25%;
  border: 3px solid #0b0706;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(#51251f, #180d0b);
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.65);
}

.audience span::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: 7%;
  height: 37%;
  border-radius: 6px;
  background: linear-gradient(90deg, #100a09 0 10%, transparent 10% 90%, #100a09 90%);
}

.audience span:nth-child(2n) { height: 68%; }
.audience span:nth-child(3n) { height: 84%; }

.profile[hidden] { display: none; }
.profile {
  position: absolute;
  z-index: 10;
  inset: 20px clamp(22px, 6vw, 90px) 16px;
  display: grid;
  grid-template-columns: minmax(220px, .9fr) 1.1fr;
  align-items: center;
  gap: clamp(22px, 5vw, 72px);
  padding: 28px clamp(28px, 5vw, 64px);
  color: #170c10;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.profile.is-arriving,
.profile.is-visible {
  opacity: 1;
  visibility: visible;
}

.profile.is-arriving { transition: opacity .2s ease; }
.profile.is-visible { pointer-events: auto; transition: opacity .25s ease; }
.profile.is-closing { opacity: 0; visibility: visible; transition: opacity .25s ease; }

.profile__portrait,
.profile__copy,
.profile__close,
.profile__arrow {
  opacity: 0;
}

.profile__copy { transform: translateY(18px); }

.profile.is-visible .profile__copy,
.profile.is-visible .profile__close,
.profile.is-visible .profile__arrow {
  opacity: 1;
  transition: opacity .42s ease;
}

.profile.is-visible .profile__copy {
  transform: translateY(0);
  transition: opacity .42s .1s ease, transform .52s .1s cubic-bezier(.22,1,.36,1);
}
.profile.is-visible .profile__arrow { transform: translateY(-50%); }
.profile--yamamoto .profile__portrait-wrap { grid-column: 2; grid-row: 1; }
.profile--yamamoto .profile__copy { grid-column: 1; grid-row: 1; }

.profile__portrait-wrap { position: relative; align-self: stretch; min-height: 0; border: 0; pointer-events: none; }
.profile__portrait { visibility: hidden; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.profile__copy {
  position: relative;
  z-index: 2;
  container-type: inline-size;
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 52px);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  background:
    linear-gradient(135deg, rgba(166,17,49,.09) 25%, transparent 25%) 0 0/16px 16px,
    rgba(241,230,206,.96);
  border: 1px solid #c38d38;
  box-shadow: 0 25px 80px rgba(0,0,0,.72);
}
.profile--tenmen .profile__copy {
  background:
    linear-gradient(rgba(255,255,255,.64), rgba(255,255,255,.64)),
    url("assets/tenmen-profile-pattern.png") center / cover no-repeat;
}
.profile--yamamoto .profile__copy {
  background:
    linear-gradient(rgba(255,255,255,.58), rgba(255,255,255,.58)),
    url("assets/yamamoto-profile-pattern.png") center / cover no-repeat;
}
.profile__role { display: inline-block; margin: 0 0 10px; padding: 5px 9px; color: var(--paper); background: var(--red); font-size: .8rem; letter-spacing: .12em; }
.profile h2 { margin: 0; font-weight: 900; line-height: 1.06; letter-spacing: .015em; white-space: nowrap; }
.profile--yamamoto h2,
.profile--tenmen h2 { font-size: clamp(1.65rem, 10.6cqw, 3.25rem); }
.profile--yamamoto h2 { letter-spacing: -.025em; }
.profile__kana { margin: 12px 0 28px; color: var(--red); font: 700 .7rem/1 Arial, sans-serif; letter-spacing: .22em; }
.profile__lead { font-size: clamp(1rem, 1.6vw, 1.22rem); line-height: 1.9; }
.profile__voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 4px; }
.voice-button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(23,12,16,.35);
  color: #170c10;
  background: rgba(255,255,255,.42);
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s, transform .18s;
}
.voice-button:hover { border-color: var(--red); transform: translateY(-2px); }
.voice-button.is-playing { color: #fff; background: var(--red); border-color: var(--red); }
.voice-button__icon { font-size: .8rem; }
.voice-button__label { font: 800 .72rem/1 Arial, sans-serif; letter-spacing: .1em; }
.voice-button__state { grid-column: 2; color: currentColor; font-size: .68rem; line-height: 1; opacity: .72; }
.profile__facts { margin: 26px 0 0; border-top: 1px solid rgba(23,12,16,.3); }
.profile__facts div { display: grid; grid-template-columns: 5em 1fr; padding: 9px 0; border-bottom: 1px solid rgba(23,12,16,.18); }
.profile__facts dt { color: var(--red); font-weight: 700; }
.profile__facts dd { margin: 0; }
.ability { margin-top: 22px; }
.ability h3 { margin: 0 0 6px; color: var(--red); font-size: 1rem; letter-spacing: .16em; }
.ability__chart { width: min(100%, 320px); margin: 0 auto; }
.ability__chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ability__circle { fill: rgba(255,255,255,.16); stroke: rgba(23,12,16,.42); stroke-width: 1.5; }
.ability__grid polygon,
.ability__grid line { fill: none; stroke: rgba(23,12,16,.22); stroke-width: 1; }
.ability__value { fill: rgba(166,17,49,.34); stroke: var(--red); stroke-width: 2.5; stroke-linejoin: round; }
.ability__labels { fill: #170c10; font-size: 11px; font-weight: 800; text-anchor: middle; }
.ability__grade { fill: var(--red); font: 900 12px/1 Arial, sans-serif; }
.profile__close, .profile__arrow { position: absolute; z-index: 4; border: 0; cursor: pointer; }
.profile__close { top: 12px; right: 12px; width: 42px; height: 42px; color: #fff; background: #170c10; font: 300 1.5rem/1 Arial, sans-serif; }
.profile__arrow { top: 50%; width: 46px; height: 70px; color: var(--gold); background: #170c10; font: 300 3rem/1 Arial, sans-serif; transform: translateY(-50%); }
.profile__arrow--prev { left: -23px; }
.profile__arrow--next { right: -23px; }

.lower-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  color: rgba(244,231,202,.62);
  font-size: .85rem;
}
.lower-nav button, .lower-nav a { color: var(--gold); border: 0; background: transparent; text-decoration: none; cursor: pointer; }
.lower-nav a { justify-self: end; }

@media (max-width: 720px) {
  .page-shell { padding: 6px 6px 42px; }
  .theatre { min-height: max(680px, calc(100svh - 48px)); border-width: 6px; }
  .stage { bottom: 105px; }
  .theatre.is-open .stage { top: -10px; right: -8%; bottom: -14px; left: -8%; }
  .theatre.is-open .stage-camera { transform: scale(1.06) translateY(-1%); }
  .theatre.is-profile .focus-camera { transform: scale(1.18); }
  .cast { inset: 30px 3% 6%; gap: 0; }
  .cast-member { width: 48%; height: 84%; }
  .profile { inset: 12px 18px 8px; grid-template-columns: 1fr; grid-template-rows: 42% 1fr; gap: 12px; padding: 20px 24px 18px; overflow-y: auto; }
  .profile--yamamoto .profile__portrait-wrap { grid-column: 1; grid-row: 1; }
  .profile--yamamoto .profile__copy { grid-column: 1; grid-row: 2; }
  .profile__portrait-wrap { min-height: 220px; }
  .profile__copy { padding: 22px 20px; }
  .profile--yamamoto h2,
  .profile--tenmen h2 { font-size: clamp(1.55rem, 10.2cqw, 2rem); }
  .profile__kana { margin: 8px 0 12px; }
  .profile__lead { margin: 8px 0; line-height: 1.65; }
  .profile__voices { gap: 5px; margin-top: 12px; }
  .voice-button { gap: 5px; min-height: 40px; padding: 6px; }
  .voice-button__label { font-size: .65rem; letter-spacing: .04em; }
  .voice-button__state { font-size: .62rem; }
  .profile__facts { margin-top: 12px; }
  .ability { margin-top: 16px; }
  .ability__chart { width: min(100%, 280px); }
  .profile__arrow { width: 38px; height: 60px; }
  .profile__arrow--prev { left: -17px; }
  .profile__arrow--next { right: -17px; }
  .footlights { bottom: 88px; }
  .audience { height: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
}