:root {
  --gold: #ffbf00;
  --black: #0a0a0a;
  --white: #ffffff;
  --bar: 56px;
  --gut: clamp(14px, 2vw, 32px);
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--black);
  font: 500 17px/1.4 var(--body);
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; }

h1, h2, h3, p, ol, figure, blockquote { margin: 0; padding: 0; }

ol { list-style: none; }

:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; box-shadow: 0 0 0 6px var(--black); }

.fit-box { display: block; width: 100%; }

.fit {
  display: inline-block;
  font: 400 var(--v, 20vw)/0.98 var(--display);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 30px;
  font: 400 22px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.2, 1.4, 0.4, 1), background-color 0.18s, color 0.18s;
}

.btn:hover { transform: scale(1.05) rotate(-1.5deg); }
.btn-gold { background: var(--gold); color: var(--black); }
.btn-gold:hover { background: var(--white); }
.btn-black { background: var(--black); color: var(--gold); }
.btn-black:hover { background: var(--white); color: var(--black); }

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 var(--gut);
  background: var(--black);
  color: var(--white);
}

.bar-name {
  margin-right: auto;
  font: 400 24px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--gold);
}

.bar-tel { font-weight: 700; font-size: 15px; text-decoration: none; }
.bar-tel:hover { color: var(--gold); }

.bar-cta {
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-right: calc(var(--gut) * -1);
  padding: 0 var(--gut);
  background: var(--gold);
  color: var(--black);
  font: 400 19px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
}
.bar-cta:hover { background: var(--white); }

.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--bar) + 10px) var(--gut) 0;
  background: var(--gold);
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  column-gap: 2vw;
  isolation: isolate;
}

.hero-kicker {
  grid-column: 1 / -1;
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--black);
}

.hero-title { display: contents; font-weight: 400; }
.hero-you { grid-column: 1; grid-row: 2; align-self: end; width: 32vw; position: relative; z-index: 3; padding-top: 6px; }
.hero-rooms { grid-column: 1 / -1; grid-row: 3; position: relative; z-index: 3; }

.hero-team {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 1;
  margin-right: calc(var(--gut) * -1);
  overflow: hidden;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 100%);
}
.hero-team img {
  position: absolute;
  top: 0;
  left: -26%;
  width: 132%;
  max-width: none;
  height: auto;
  margin-top: -15%;
  filter: grayscale(1) brightness(2) contrast(1.4);
}

.hero-print {
  position: absolute;
  z-index: 4;
  right: 3vw;
  top: calc(var(--bar) + 5vh);
  width: 17vw;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  transform: rotate(6deg);
  border: 6px solid var(--white);
}
.hero-print img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; filter: saturate(1.5) contrast(1.05); }

.hero-offer {
  grid-column: 1 / -1;
  grid-row: 4;
  position: relative;
  z-index: 5;
  margin: 0 calc(var(--gut) * -1);
  padding: 8px var(--gut);
  display: grid;
  grid-template-columns: auto minmax(0, 1.6fr) auto auto;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  background: var(--black);
  color: var(--white);
}

.hero-price { font: 400 clamp(56px, 5.8vw, 88px)/1 var(--display); color: var(--gold); }
.hero-terms { font-size: 16px; max-width: 44ch; }
.hero-terms strong { display: block; font-size: 18px; color: var(--gold); }
.hero-score { font-size: 14px; font-weight: 700; max-width: 12ch; line-height: 1.2; }
.hero-score strong { display: block; font: 400 40px/1 var(--display); color: var(--gold); }

.tape {
  position: relative;
  z-index: 6;
  background: var(--white);
  overflow: hidden;
  border-block: 4px solid var(--black);
}

.tape-track { display: flex; width: max-content; }
.tape-track span {
  padding: 10px 26px;
  font: 400 clamp(22px, 2.6vw, 38px)/1.1 var(--display);
  text-transform: uppercase;
  white-space: nowrap;
}
.tape-track span:nth-child(odd) { background: var(--gold); }

.card { background: var(--black); color: var(--white); scroll-margin-top: var(--bar); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px var(--gut);
}

.card-title { font: 400 clamp(22px, 2.6vw, 38px)/1.05 var(--display); text-transform: uppercase; color: var(--gold); }

.card-controls { display: flex; gap: 4px; flex-wrap: nowrap; }

.bout, .bout-pause {
  position: relative;
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: #222;
  color: var(--white);
  font: 700 14px/1 var(--body);
  cursor: pointer;
  overflow: hidden;
}
.bout i { font: 400 18px/1 var(--display); color: var(--gold); }
.bout b { font-weight: 700; }
.bout::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: var(--gold);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}
.bout.is-on { background: var(--gold); color: var(--black); }
.bout.is-on i { color: var(--black); }
.bout.is-on::after { background: var(--black); }
.bout-pause { background: var(--white); color: var(--black); }

.stage { position: relative; }
.stage.is-stack {
  height: calc(100svh - var(--bar) - 68px);
  min-height: 560px;
  overflow: hidden;
  background: var(--gold);
}

.poster {
  position: relative;
  height: calc(100svh - var(--bar));
  min-height: 620px;
  overflow: hidden;
  padding: 0 var(--gut);
}
.is-stack .poster {
  position: absolute;
  inset: 1.5% 1%;
  height: auto;
  min-height: 0;
  will-change: transform;
}
.is-stack .poster:nth-child(odd) { transform: rotate(-0.8deg); }
.is-stack .poster:nth-child(even) { transform: rotate(0.7deg); }

.p-gold { background: var(--gold); color: var(--black); }
.p-black { background: var(--black); color: var(--white); }
.p-white { background: var(--white); color: var(--black); }

.poster .name { position: absolute; left: var(--gut); right: var(--gut); width: auto; z-index: 3; }
.poster .ph { position: absolute; overflow: hidden; z-index: 2; }
.poster .ph img { width: 100%; height: 100%; object-fit: cover; }

.vs {
  position: absolute;
  z-index: 4;
  font: 400 clamp(30px, 4.4vw, 68px)/1.04 var(--display);
  text-transform: uppercase;
}
.vs span { display: inline-block; }
.vs span:first-child { padding: 0.04em 0.2em; margin-right: 0.06em; }
.p-gold .vs span:first-child { background: var(--black); color: var(--gold); }
.p-black .vs span:first-child { background: var(--gold); color: var(--black); }
.p-white .vs span:first-child { background: var(--gold); color: var(--black); }

.say {
  position: absolute;
  z-index: 4;
  font-weight: 700;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.28;
}
.say strong { font-weight: 800; }

.corner {
  position: absolute;
  z-index: 4;
  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 17px);
}
.corner b {
  display: block;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.p-reformer .ph-a { left: 18%; top: -6%; width: 63%; height: 82%; transform: rotate(3deg); }
.p-reformer .ph-a img { object-position: 60% 30%; }
.p-reformer .vs { left: var(--gut); top: 3.5%; max-width: 20%; }
.p-reformer .say { right: var(--gut); top: 4%; width: 15%; }
.p-reformer .corner { right: var(--gut); top: 34%; width: 15%; }
.p-reformer .name { bottom: -0.6%; }

.p-gati .name { top: 1%; color: var(--gold); }
.p-gati .ph-a img { object-position: 60% 60%; filter: brightness(1.4) contrast(1.05); }
.p-gati .ph-b img { filter: brightness(1.35); }
.p-gati .ph-a { right: 4%; bottom: -14%; width: 34%; height: 78%; transform: rotate(-4deg); }
.p-gati .ph-b { left: 35%; bottom: 7%; width: min(25%, 460px); aspect-ratio: 536 / 470; transform: rotate(5deg); border: 6px solid var(--gold); }
.p-gati .vs { left: var(--gut); top: 58%; max-width: 32%; }
.p-gati .say { left: var(--gut); bottom: 13%; width: 28%; }
.p-gati .corner { left: var(--gut); bottom: 3%; }
.p-gati .corner b { color: var(--gold); }

.p-heat .name { top: 0; }
.p-heat .ph { z-index: 4; }
.p-heat .ph-a { left: 5%; bottom: 13%; width: min(30%, 470px); aspect-ratio: 536 / 470; transform: rotate(-6deg); }
.p-heat .ph-b { right: 5%; bottom: 17%; width: min(28%, 440px); aspect-ratio: 536 / 470; transform: rotate(5deg); }
.p-heat .vs { left: 0; right: 0; bottom: 0; padding: 12px var(--gut); background: var(--black); color: var(--white); z-index: 5; }
.p-heat .say { left: 36%; bottom: 21%; width: 21%; padding: 12px 14px; background: var(--gold); transform: rotate(-3deg); z-index: 5; }
.p-heat .corner { right: 3%; bottom: 20px; color: var(--gold); z-index: 6; text-align: right; }

.p-mat .name { top: 1%; }
.p-mat .ph-a { left: 5%; top: 28%; width: 37%; height: 100%; transform: rotate(-4deg); }
.p-mat .ph-a img { object-position: 60% 22%; }
.p-mat .ph-b { right: 6%; top: 36%; width: 20%; height: 66%; transform: rotate(5deg); }
.p-mat .vs { left: 44%; top: 44%; width: 26%; }
.p-mat .say { left: 44%; top: 71%; width: 25%; }
.p-mat .corner { left: 44%; bottom: 4%; }

.p-yoga .name { top: 0; }
.p-yoga .ph { z-index: 4; }
.p-yoga .ph-a { left: 23%; top: 44%; width: 56%; aspect-ratio: 2000 / 1566; transform: rotate(-3deg); border: 8px solid var(--white); }
.p-yoga .ph-a img { object-position: 60% 30%; }
.p-yoga .vs { left: var(--gut); bottom: 3%; width: 21%; color: var(--white); z-index: 6; }
.p-yoga .vs span:last-child { padding: 0.04em 0.2em; background: var(--black); }
.p-yoga .say { right: var(--gut); bottom: 22%; width: 20%; padding: 12px 14px; background: var(--gold); color: var(--black); transform: rotate(3deg); z-index: 5; }
.p-yoga .corner { right: var(--gut); bottom: 4%; z-index: 5; }

.rooms { background: var(--white); color: var(--black); padding: clamp(40px, 6vw, 88px) var(--gut) clamp(30px, 4vw, 60px); overflow: hidden; }

.rooms-title {
  font: 400 clamp(44px, 8.2vw, 136px)/0.98 var(--display);
  text-transform: uppercase;
  max-width: 11em;
  padding-bottom: clamp(24px, 3vw, 48px);
}

.room {
  position: relative;
  border-top: 5px solid var(--black);
  isolation: isolate;
}
.room:last-child { border-bottom: 5px solid var(--black); }
.room::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--gut) * -1);
  z-index: -1;
  background: var(--gold);
  transform: scaleX(var(--sweep, 0));
  transform-origin: left;
  transition: transform 0.38s cubic-bezier(0.7, 0, 0.2, 1);
}
.room:hover { --sweep: 1; }

.room-link {
  display: grid;
  grid-template-columns: 4vw auto minmax(0, 1fr) 24vw;
  grid-template-areas: 'num name copy .' 'num name classes .';
  column-gap: 24px;
  align-items: center;
  padding: clamp(8px, 1vw, 16px) 0;
  text-decoration: none;
}

.room-num {
  grid-area: num;
  align-self: start;
  justify-self: start;
  margin-top: 0.3em;
  padding: 0.1em 0.34em;
  background: var(--gold);
  font: 400 clamp(24px, 2.6vw, 40px)/1 var(--display);
}
.room:hover .room-num { background: var(--black); color: var(--gold); }
.room-name { grid-area: name; font: 400 clamp(46px, 7.6vw, 124px)/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.room-copy { grid-area: copy; align-self: end; font-size: clamp(15px, 1.2vw, 18px); font-weight: 700; line-height: 1.3; }
.room-classes { grid-area: classes; align-self: start; font-size: 13px; font-weight: 700; line-height: 1.35; margin-top: 6px; }

.room-print {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 2;
  width: min(22vw, 340px);
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  box-shadow: 0 0 0 5px var(--white);
  transform: translateY(-50%) rotate(var(--tilt, 3deg));
  transition: transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.room:nth-child(even) .room-print { --tilt: -5deg; right: 3vw; }
.room:hover .room-print { transform: translateY(-50%) rotate(0deg) scale(1.16); }

.bell {
  position: relative;
  background: var(--gold);
  padding: clamp(36px, 5vw, 72px) var(--gut);
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}

.bell-film {
  position: absolute;
  z-index: 1;
  left: 24%;
  top: 7%;
  width: 72%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  transform: rotate(-3deg);
  background: var(--black);
}
.bell-film video { width: 100%; height: 100%; object-fit: cover; }

.bell-title { position: relative; z-index: 2; font-weight: 400; margin-top: 16vw; }

.bell-rules {
  position: relative;
  z-index: 3;
  margin-top: clamp(16px, 2vw, 28px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(16px, 3vw, 44px);
  border-top: 4px solid var(--black);
  padding-top: 14px;
}
.bell-label { font: 400 clamp(28px, 3vw, 44px)/1 var(--display); text-transform: uppercase; }
.bell-rules ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); font-size: 15px; font-weight: 700; line-height: 1.3; }
.bell-rules b { display: block; font: 400 22px/1.1 var(--display); text-transform: uppercase; margin-bottom: 4px; }

.judges { position: relative; background: var(--black); color: var(--white); padding: clamp(36px, 5vw, 72px) var(--gut) clamp(40px, 6vw, 90px); overflow: hidden; }

.judges-top { position: relative; min-height: 31vw; }

.judges-five {
  position: absolute;
  left: -0.6vw;
  top: -2vw;
  font: 400 31vw/0.98 var(--display);
  color: var(--gold);
  z-index: 1;
}

.judges-title {
  position: relative;
  z-index: 3;
  margin-left: 35vw;
  padding-top: 7vw;
  width: 31vw;
  font: 400 clamp(44px, 6.6vw, 110px)/1 var(--display);
  text-transform: uppercase;
}
.judges-title span { display: block; }
.judges-title span:last-child { font-size: 0.56em; margin-top: 0.12em; line-height: 1.04; max-width: 8em; }

.judges-photo {
  position: absolute;
  z-index: 2;
  right: -3vw;
  top: -1vw;
  width: 37vw;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  transform: rotate(4deg);
}
.judges-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }

.scores {
  position: relative;
  z-index: 4;
  margin-top: 1vw;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  align-items: start;
}

.score { padding: clamp(18px, 2vw, 30px); font-size: 15px; font-weight: 500; line-height: 1.42; }
.score footer { margin-top: 14px; font-weight: 800; font-size: 14px; }
.score-hit { font: 400 clamp(32px, 3.5vw, 56px)/1.02 var(--display); text-transform: uppercase; margin-bottom: 12px; }
.score-gold { background: var(--gold); color: var(--black); }
.score-white { background: var(--white); color: var(--black); }

.scores > :nth-child(1) { grid-column: 1 / span 5; transform: rotate(-1.4deg); }
.scores > :nth-child(2) { grid-column: 6 / span 4; transform: rotate(1.2deg); margin-top: 28px; }
.scores > :nth-child(3) { grid-column: 10 / span 3; grid-row: 1 / span 2; margin: 0 calc(var(--gut) * -1) 0 0; transform: rotate(2.4deg); overflow: hidden; }
.scores > :nth-child(3) img { width: 100%; height: 100%; aspect-ratio: 3 / 5; object-fit: cover; object-position: 75% 30%; }
.scores > :nth-child(4) { grid-column: 1 / span 5; transform: rotate(0.9deg); }
.scores > :nth-child(5) { grid-column: 6 / span 4; transform: rotate(-1.2deg); }

.ticket {
  position: relative;
  background: var(--gold);
  padding: clamp(30px, 4vw, 60px) var(--gut) 0;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  column-gap: 1vw;
}

.ticket-main { position: relative; z-index: 2; padding-bottom: 28px; }
.ticket-title { font-weight: 400; }
.ticket-copy { margin: 14px 0 18px; font-size: clamp(17px, 1.5vw, 22px); font-weight: 800; max-width: 46ch; line-height: 1.25; }
.ticket-main .btn { min-height: 72px; padding: 0 42px; font-size: 30px; }

.ticket-team {
  position: relative;
  z-index: 1;
  margin-right: calc(var(--gut) * -1);
  overflow: hidden;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 100%);
}
.ticket-team img {
  position: absolute;
  top: 0;
  left: -33%;
  width: 180%;
  max-width: none;
  height: auto;
  margin-top: -20%;
  filter: grayscale(1) brightness(2) contrast(1.4);
}

.ticket-where {
  grid-column: 1 / -1;
  position: relative;
  z-index: 3;
  margin: 0 calc(var(--gut) * -1);
  padding: 20px var(--gut) 28px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
}
.ticket-where b { display: block; font: 400 15px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.ticket-where a:hover { color: var(--gold); }

.stick { display: none; }

@media (max-width: 760px) {
  :root { --bar: 50px; }

  body { font-size: 16px; padding-bottom: 60px; }

  .bar { gap: 12px; }
  .bar-name { font-size: 20px; }
  .bar-tel { font-size: 14px; }
  .bar-cta { display: none; }

  .stick {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 0 0 var(--gut);
    background: var(--black);
    color: var(--white);
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    border-top: 3px solid var(--gold);
  }
  .stick b {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 26px;
    background: var(--gold);
    color: var(--black);
    font: 400 22px/1 var(--display);
    text-transform: uppercase;
  }

  .hero { min-height: calc(100svh - 60px); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(52vw, 1fr) auto auto auto; }
  .hero-kicker span:nth-child(2) { display: none; }
  .hero-kicker { font-size: 11px; }
  .hero-team { grid-column: 1; grid-row: 2; margin: 0 calc(var(--gut) * -1); -webkit-mask-image: none; mask-image: none; }
  .hero-team img { left: -26%; width: 170%; margin-top: -17%; }
  .hero-you { grid-column: 1; grid-row: 3; width: 100%; padding-top: 0; }
  .hero-you br { display: none; }
  .hero-rooms { grid-row: 4; }
  .hero-print { left: var(--gut); right: auto; top: calc(var(--bar) + 66vw); width: 24vw; border-width: 4px; transform: rotate(-6deg); }
  .hero-offer {
    grid-row: 5;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'price terms' 'score cta';
    gap: 8px 14px;
    padding-block: 12px 14px;
  }
  .hero-price { grid-area: price; font-size: 58px; }
  .hero-terms { grid-area: terms; font-size: 13px; line-height: 1.28; }
  .hero-terms strong { font-size: 15px; }
  .hero-score { grid-area: score; max-width: none; font-size: 11px; }
  .hero-score strong { font-size: 26px; }
  .hero-offer .btn { grid-area: cta; min-height: 50px; padding: 0 12px; font-size: 20px; }

  .card-head { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px var(--gut) 8px; }
  .card-controls { gap: 3px; }
  .bout { flex: 1; justify-content: center; padding: 0 4px; }
  .bout b { display: none; }
  .bout-pause { padding: 0 12px; }

  .stage.is-stack { height: calc(100svh - 60px - var(--bar) - 96px); min-height: 500px; }
  .poster { min-height: 600px; height: calc(100svh - 60px); }

  .vs { font-size: 30px; }
  .say { font-size: 14px; line-height: 1.26; }
  .corner { font-size: 13px; }
  .corner b { font-size: 10px; }

  .p-reformer .ph-a { left: 2%; top: 9%; width: 96%; height: 62%; }
  .p-reformer .ph-a img { object-position: 72% 30%; }
  .p-reformer .vs { left: var(--gut); top: 2%; max-width: none; }
  .p-reformer .say { left: var(--gut); right: auto; top: auto; bottom: 16%; width: 58%; }
  .p-reformer .corner { right: var(--gut); top: auto; bottom: 16%; width: 32%; }

  .p-gati .name { top: 1%; }
  .p-gati .ph-a { right: 3%; top: 15%; bottom: auto; width: 56%; height: 50%; }
  .p-gati .ph-b { left: 3%; top: 41%; bottom: auto; width: 52%; }
  .p-gati .vs { left: var(--gut); top: 16%; max-width: 40%; }
  .p-gati .say { left: var(--gut); top: auto; bottom: 13%; width: auto; right: var(--gut); }
  .p-gati .corner { bottom: 3%; }

  .p-heat .ph-a { left: 4%; top: 27%; bottom: auto; width: 62%; }
  .p-heat .ph-b { right: 3%; top: 49%; bottom: auto; width: 52%; }
  .p-heat .vs { font-size: 26px; }
  .p-heat .say { left: 3%; top: 65%; bottom: auto; width: 40%; font-size: 13px; }
  .p-heat .corner { right: var(--gut); bottom: 84px; color: var(--black); }

  .p-mat .ph-a { left: 3%; top: 10%; width: 66%; height: 56%; }
  .p-mat .ph-b { right: 2%; top: 42%; width: 40%; height: 28%; }
  .p-mat .vs { left: auto; right: var(--gut); top: 13%; width: 30%; font-size: 26px; }
  .p-mat .say { left: var(--gut); right: var(--gut); top: auto; bottom: 11%; width: auto; }
  .p-mat .corner { left: var(--gut); bottom: 2%; }

  .p-yoga .ph-a { left: 3%; top: 30%; width: 94%; }
  .p-yoga .vs { left: var(--gut); bottom: 9%; width: auto; font-size: 28px; }
  .p-yoga .say { right: auto; left: var(--gut); bottom: 19%; width: 58%; }
  .p-yoga .corner { left: var(--gut); right: auto; bottom: 2%; }

  .room-link {
    grid-template-columns: 30px minmax(0, 1fr) 34vw;
    grid-template-areas: 'num name name' 'num copy .' 'num classes .';
    column-gap: 10px;
    padding: 10px 0 14px;
  }
  .room-name { font-size: 11.6vw; }
  .room-num { margin-top: 0.2em; font-size: 22px; }
  .room-copy { font-size: 14px; margin-top: 2px; }
  .room-print { width: 31vw; top: auto; bottom: 10px; transform: rotate(var(--tilt, 3deg)); box-shadow: 0 0 0 3px var(--white); }
  .room:nth-child(even) .room-print { right: 0; }
  .room:hover .room-print { transform: rotate(var(--tilt, 3deg)); }

  .bell { min-height: 0; padding-top: 18px; }
  .bell-film { position: relative; left: -6%; top: 0; width: 112%; }
  .bell-title { margin-top: -12vw; }
  .bell-rules { grid-template-columns: 1fr; }
  .bell-rules ol { grid-template-columns: 1fr 1fr; }

  .judges-top { min-height: 0; }
  .judges-five { font-size: 46vw; top: 0; left: -1vw; }
  .judges-title { margin-left: 0; padding-top: 42vw; width: auto; font-size: 15vw; }
  .judges-title span:last-child { max-width: none; }
  .judges-photo { top: 4vw; right: -6vw; width: 50vw; }
  .scores { display: flex; flex-direction: column; margin-top: 18px; }
  .scores > * { width: 100%; margin: 0 !important; }
  .scores > :nth-child(3) { width: 74%; align-self: flex-end; margin: -6px -8px -6px 0 !important; }
  .scores > :nth-child(3) img { aspect-ratio: 4 / 4.4; }

  .ticket { grid-template-columns: minmax(0, 1fr); }
  .ticket-main { order: 2; padding-top: 4px; }
  .ticket-team { order: 1; height: 84vw; margin: -30px calc(var(--gut) * -1) 0; -webkit-mask-image: none; mask-image: none; }
  .ticket-team img { left: -32%; width: 170%; margin-top: -17%; }
  .ticket-where { order: 3; }
  .ticket-main .btn { width: 100%; min-height: 64px; font-size: 26px; }
  .ticket-where { grid-template-columns: 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .room::before, .room-print, .room-link { transition: none; }
}