@font-face{font-family:'Asta Sans';font-style:normal;font-weight:300 600;font-display:swap;src:url('/brand/asta-sans-latin.woff2') format('woff2')}

@layer tokens, base, atoms, layout, sections, scenes;


@layer tokens {
:root {
  --color-1: #0D1452;
  --color-2: #2430E6;
  --color-3: #FFFFFF;
  --color-4: #080C32;
  --color-5: #A7B0FF;
  --color-6: #6775FF;
  --font-1: "Asta Sans", "Asta Sans Fallback", Arial, sans-serif;
  --space-1: clamp(8px, 1vw, 14px);
  --space-2: clamp(20px, 4vw, 64px);
  --radius-1: 999px;
}
}


@layer base {
/* font fallbacks */
@font-face { font-family: "Asta Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 550 799; size-adjust: 92%; ascent-override: 103.2%; descent-override: 26.1%; line-gap-override: 0%; }
@font-face { font-family: "Asta Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 100 549; size-adjust: 100.5%; ascent-override: 94.5%; descent-override: 23.9%; line-gap-override: 0%; }
/* end font fallbacks */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-1); color: var(--color-3); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body { margin: 0; background: var(--color-1); overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-3); outline-offset: 3px; }
.slide--light :focus-visible { outline-color: var(--color-4); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px; background: var(--color-3); color: var(--color-4); }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}


@layer atoms {
.m-text { font-family: var(--font-1); font-size: clamp(15px, 1.05vw, 17px); font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; font-style: normal; }

.m-text-2 {
  font-family: var(--font-1); font-weight: 600; line-height: .84; letter-spacing: -.055em; text-transform: uppercase; font-style: normal;
  --heat: 1;
  color: var(--color-3);
  background-image: linear-gradient(100deg, color-mix(in srgb, var(--color-3) 30%, transparent) 0 22%, var(--color-3) 44% 84%, color-mix(in srgb, var(--color-5) 60%, var(--color-3)) 97% 100%);
  background-size: 300% 100%; background-position: calc(var(--heat) * 100%) 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.m-text-3 {
  font-family: var(--font-1); font-size: clamp(40px, 6.2vw, 96px); font-weight: 500; line-height: .9; letter-spacing: -.045em; text-transform: uppercase; font-style: normal;
  --heat: 1;
  color: var(--color-3);
  background-image: linear-gradient(100deg, color-mix(in srgb, var(--color-3) 30%, transparent) 0 22%, var(--color-3) 44% 84%, color-mix(in srgb, var(--color-5) 60%, var(--color-3)) 97% 100%);
  background-size: 300% 100%; background-position: calc(var(--heat) * 100%) 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.m-text-4 { font-family: var(--font-1); font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; text-transform: none; font-style: normal; }

.m-text-5 { font-family: var(--font-1); font-size: clamp(17px, 1.45vw, 21px); font-weight: 400; line-height: 1.35; letter-spacing: -.005em; text-transform: none; font-style: normal; }

.m-text-6 { font-family: var(--font-1); font-size: clamp(21px, 2vw, 28px); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; text-transform: none; font-style: normal; }

.m-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--radius-1); cursor: pointer; text-decoration: none;
  font-family: var(--font-1); font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: .005em;
  color: var(--color-1);
  background-color: var(--color-3);
}
.m-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  background-image: linear-gradient(100deg, var(--color-3) 0 40%, color-mix(in srgb, var(--color-5) 40%, var(--color-3)) 70%, var(--color-3) 100%);
  background-size: 250% 100%; background-position: 0 0;
  transition: background-position .6s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.m-btn::after { content: ""; position: absolute; inset: -9px; border: 1px solid currentColor; border-radius: inherit; opacity: 0; transition: inset .45s cubic-bezier(.2,.7,.2,1), opacity .3s; pointer-events: none; }
.m-btn > .m-btn__label { position: relative; }
@media (hover: hover) {
  .m-btn:hover::before { opacity: 1; background-position: 100% 0; }
  .m-btn:hover::after { inset: -4px; opacity: .55; }
}
.m-btn::after { color: var(--color-3); }

.m-btn-2 {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border: 1px solid currentColor; border-radius: var(--radius-1); cursor: pointer; text-decoration: none;
  font-family: var(--font-1); font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: .005em;
  color: var(--color-3); background-color: transparent;
}
.m-btn-2::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  background-image: linear-gradient(100deg, transparent 0 40%, color-mix(in srgb, var(--color-3) 22%, transparent) 70%, color-mix(in srgb, var(--color-3) 14%, transparent) 100%);
  background-size: 250% 100%; background-position: 0 0;
  transition: background-position .6s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.m-btn-2::after { content: ""; position: absolute; inset: -9px; border: 1px solid currentColor; border-radius: inherit; opacity: 0; transition: inset .45s cubic-bezier(.2,.7,.2,1), opacity .3s; pointer-events: none; }
.m-btn-2 > .m-btn-2__label { position: relative; }
@media (hover: hover) {
  .m-btn-2:hover::before { opacity: 1; background-position: 100% 0; }
  .m-btn-2:hover::after { inset: -4px; opacity: .55; }
}

.m-link {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(90deg, currentColor 0 50%, var(--color-5) 70%, currentColor 90%);
  background-size: 300% 1px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-position .7s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) { .m-link:hover { background-position: 100% 100%; } }

.m-iconbtn {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid currentColor; border-radius: 50%; background: transparent; color: var(--color-3); cursor: pointer;
}
.m-iconbtn::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: currentColor; opacity: .18; scale: 0; transition: scale .4s cubic-bezier(.2,.7,.2,1); }
.m-iconbtn svg { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (hover: hover) { .m-iconbtn:hover::before { scale: 1; } }

.m-ring {
  display: grid; place-content: center; gap: 4px; aspect-ratio: 1; border-radius: 50%; text-align: center;
  border: 1px solid color-mix(in srgb, var(--color-3) 65%, transparent);
  color: var(--color-3);
}
.m-ring > .m-ring__time { font-family: var(--font-1); font-size: clamp(16px, 1.45vw, 21px); font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.m-ring > .m-ring__label { font-family: var(--font-1); font-size: clamp(11px, .95vw, 13px); font-weight: 400; line-height: 1.2; letter-spacing: 0; padding-inline: 10px; }

.m-surface {
  position: relative; color: var(--color-3);
  background: color-mix(in srgb, var(--color-4) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-3) 24%, transparent);
}
.m-surface::before, .m-surface::after { content: ""; position: absolute; background: color-mix(in srgb, var(--color-3) 80%, transparent); pointer-events: none; }
.m-surface::before { top: 18px; right: 4px; width: 30px; height: 1px; }
.m-surface::after { top: 4px; right: 18px; width: 1px; height: 30px; }

.m-badge {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border: 1px solid currentColor; border-radius: var(--radius-1);
  font-family: var(--font-1); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .02em; text-transform: none; font-style: normal; white-space: nowrap;
}
}


@layer layout {
.slide { position: relative; margin: 0 var(--space-1) var(--space-1); }
.slide--light { background: var(--color-3); color: var(--color-4); }
.wrap { padding-inline: var(--space-2); }
}


@layer sections {
#navigation {
  position: fixed; inset: 0 0 auto; z-index: 20; height: 60px; display: flex; align-items: center; gap: 28px;
  padding: 0 calc(var(--space-1) + var(--space-2) - 8px);
  background: var(--color-1); color: var(--color-3);
  transition: translate .45s cubic-bezier(.2,.7,.2,1);
}
#navigation.is-hidden { translate: 0 -100%; }
#navigation .nav__logo { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; font-weight: 600; font-size: 21px; letter-spacing: -.04em; }
#navigation .nav__logo span:last-child { font-weight: 400; font-size: 17px; letter-spacing: 0; opacity: .8; }
#navigation .nav__links { display: flex; gap: 26px; margin-left: auto; }
#navigation .nav__links a { font-size: 14px; }
#navigation .nav__cta { min-height: 40px; padding: 0 18px; font-size: 14px; }
#navigation .nav__menu { display: none; }
@media (max-width: 860px) {
  #navigation { height: 56px; gap: 12px; padding: 0 calc(var(--space-1) + 12px); }
  #navigation .nav__links { display: none; }
  #navigation .nav__cta { margin-left: auto; }
  #navigation .nav__menu { display: inline-grid; }
}
#navigation .menu { position: fixed; inset: 0; z-index: 40; background: var(--color-1); color: var(--color-3); padding: 14px calc(var(--space-1) + 12px) 32px; display: flex; flex-direction: column; }
#navigation .menu[hidden] { display: none; }
#navigation .menu .menu__close { align-self: flex-end; }
#navigation .menu ul { margin-top: 6vh; display: grid; gap: 4px; }
#navigation .menu ul a { font-size: clamp(34px, 11vw, 56px); font-weight: 500; letter-spacing: -.045em; text-transform: uppercase; text-decoration: none; line-height: 1.05; }
#navigation .menu .menu__meta { margin-top: auto; }
}


@layer sections {
#opening { margin-top: 0; overflow: clip; background: var(--color-4); }
#opening .op-stage { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; overflow: hidden; }
#opening .op-intro, #opening .op-drift, #opening .op-zoom { position: absolute; inset: 0; }
#opening .op-zoom { transform-origin: 50% 45%; }
#opening .op-drift { inset: -5%; }
#opening .op-photo { width: 100%; height: 100%; object-fit: cover; object-position: 52% 30%; }
#opening .op-shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--color-4) 50%, transparent) 0%, transparent 34%, transparent 58%, color-mix(in srgb, var(--color-4) 62%, transparent) 100%); }
#opening .op-one { position: relative; height: 100svh; min-height: 560px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto auto; column-gap: 20px; padding: calc(60px + 5svh) var(--space-2) 5svh; }
#opening .op-upper { grid-column: 8 / -1; grid-row: 1; display: grid; gap: 22px; }
#opening .op-meta { display: flex; gap: 40px; }
#opening .op-meta dd { font-size: 15px; font-weight: 500; }
#opening .op-meta dt { opacity: .78; }
#opening .op-title { grid-column: 1 / -1; grid-row: 3; font-size: min(17vw, calc((100vw - 2 * var(--space-1) - 2 * var(--space-2)) / (var(--len) * .52))); margin-left: -.04em; white-space: nowrap;
  background-image: linear-gradient(95deg, color-mix(in srgb, var(--color-6) 88%, transparent) 0%, color-mix(in srgb, var(--color-3) 94%, transparent) 26%, var(--color-3) 46%, color-mix(in srgb, var(--color-5) 92%, transparent) 70%, color-mix(in srgb, var(--color-2) 90%, transparent) 100%);
  background-size: 180% 100%; background-position: 20% 0; }
#opening .op-word { display: inline-block; }
#opening .op-lower { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: subgrid; align-items: end; margin-top: 18px; }
#opening .op-tag { grid-column: 8 / -1; grid-row: 1; max-width: 32ch; }
#opening .op-actions { grid-column: 1 / 7; grid-row: 1; display: flex; flex-wrap: wrap; gap: 14px; }
#opening .op-two { position: relative; height: 100svh; min-height: 560px; --d: min(12.4vw, 25svh); }
#opening .op-veil { position: absolute; left: 0; top: -100%; width: 100%; height: 200%; pointer-events: none; --grow: 0; }
#opening .op-veil__fill { fill: var(--color-1); }
#opening .op-veil__base { color: var(--color-3); }
#opening .op-veil__hole, #opening .op-veil__lid { color: var(--color-4); }
#opening .op-veil__hole { cx: calc(6% + var(--i) * 11%); cy: calc(50% + 63% / 2); r: calc(var(--d) / 2 - 1px + var(--grow) * 180vmax); }
#opening .op-two__head { position: relative; padding: calc(60px + 7svh) var(--space-2) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; }
#opening .op-two__head h2 { grid-column: 1 / 7; }
#opening .op-two__note { grid-column: 8 / -1; max-width: 38ch; display: grid; gap: 14px; justify-items: start; }
#opening .op-rings { position: absolute; inset: 0; }
#opening .op-rings .m-ring { position: absolute; left: calc(6% + var(--i) * 11%); top: 63%; width: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); background: radial-gradient(circle, color-mix(in srgb, var(--color-4) 34%, transparent) 0 40%, transparent 70%); }
#opening .op-two__foot { position: absolute; left: var(--space-2); right: var(--space-2); bottom: 6svh; display: flex; justify-content: space-between; gap: 20px; }
@media (max-width: 860px) {
  #opening .op-one { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; padding: calc(56px + 3svh) var(--space-2) 4svh; }
  #opening .op-upper, #opening .op-title, #opening .op-lower, #opening .op-tag, #opening .op-actions { grid-column: 1; }
  #opening .op-upper { gap: 14px; }
  #opening .op-meta { gap: 28px; }
  #opening .op-title { white-space: normal; font-size: min(26vw, calc((100vw - 2 * var(--space-1) - 2 * var(--space-2)) / (var(--len) * .52) * 1.85)); line-height: .82; }
  #opening .op-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #opening .op-tag { grid-row: 1; }
  #opening .op-actions { grid-row: 2; }
  #opening .op-two { --d: 30vw; }
  #opening .op-two__head { grid-template-columns: minmax(0, 1fr); padding-top: calc(56px + 4svh); row-gap: 16px; }
  #opening .op-two__head h2, #opening .op-two__note { grid-column: 1; }
  #opening .op-veil__hole { cx: calc(18% + var(--col) * 32%); cy: calc(50% + (53% + var(--row) * 15.5%) / 2); }
  #opening .op-rings .m-ring { left: calc(18% + var(--col) * 32%); top: calc(53% + var(--row) * 15.5%); }
  #opening .op-two__foot { bottom: 3svh; }
  #opening .op-two__foot p:last-child { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  #opening .op-intro { animation: op-photo-in 1.1s cubic-bezier(.2,.7,.2,1) backwards; }
  #opening .op-drift { animation: op-drift 6s ease-in-out infinite alternate; }
  #opening .op-title { animation: op-title-in .9s .1s cubic-bezier(.2,.7,.2,1) backwards, op-heat-flow 7s ease-in-out 1s infinite alternate; }
  #opening .op-meta, #opening .op-upper > p, #opening .op-tag, #opening .op-actions { animation: op-rise .8s cubic-bezier(.2,.7,.2,1) backwards; }
  #opening .op-meta { animation-delay: .25s; }
  #opening .op-upper > p { animation-delay: .35s; }
  #opening .op-tag { animation-delay: .45s; }
  #opening .op-actions { animation-delay: .3s; }
  #opening.is-offscreen .op-drift, #opening.is-offscreen .op-title { animation-play-state: paused; }
}
@keyframes op-photo-in { from { transform: scale(1.12); } }
@keyframes op-drift { from { transform: translate(-2.2%, 1.6%) scale(1.02); } to { transform: translate(2.2%, -1.6%) scale(1.07); } }
@keyframes op-title-in { from { clip-path: inset(0 0 100% 0); transform: translateY(14%); } }
@keyframes op-heat-flow { from { background-position: 20% 0; } to { background-position: 80% 0; } }
@keyframes op-rise { from { transform: translateY(18px); opacity: 0; } }
}


@layer sections {
#lineup { background: var(--color-4); padding: clamp(80px, 13svh, 150px) 0 clamp(60px, 9svh, 110px); overflow: clip; }
#lineup .lu-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; margin-bottom: clamp(40px, 7svh, 80px); }
#lineup .lu-head h2 { grid-column: 1 / 8; }
#lineup .lu-lead { grid-column: 8 / -1; max-width: 40ch; }
#lineup .lu-list { border-top: 1px solid color-mix(in srgb, var(--color-3) 22%, transparent); }
#lineup .lu-row { display: grid; grid-template-columns: clamp(110px, 12vw, 180px) minmax(0, 1fr) 200px; align-items: center; column-gap: clamp(16px, 2.4vw, 36px); padding: clamp(14px, 2svh, 22px) var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-3) 22%, transparent); }
#lineup .lu-face { aspect-ratio: 1; border-radius: 50%; overflow: hidden; padding: 6px; border: 1px solid color-mix(in srgb, var(--color-3) 60%, transparent); }
#lineup .lu-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; border-radius: 50%; }
#lineup .lu-name-box { container-type: inline-size; min-width: 0; }
#lineup .lu-name { font-size: min(160px, calc(100cqw / (var(--len) * .6))); white-space: nowrap; }
#lineup .lu-when { display: grid; gap: 4px; justify-items: end; text-align: right; }
#lineup .lu-when span:first-child { opacity: .78; }
#lineup .lu-more { margin-top: 28px; }
@media (max-width: 860px) {
  #lineup .lu-head { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  #lineup .lu-head h2, #lineup .lu-lead { grid-column: 1; }
  #lineup .lu-row { grid-template-columns: 76px minmax(0, 1fr); row-gap: 10px; }
  #lineup .lu-face { grid-row: 1; padding: 4px; }
  #lineup .lu-when { grid-row: 1; grid-column: 2; justify-items: start; text-align: left; }
  #lineup .lu-name-box { grid-column: 1 / -1; grid-row: 2; }
}
}


@layer sections {
#battle { background: var(--color-4); }
#battle .bt-stage { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; --split: 50%; }
#battle .bt-side { position: absolute; top: 0; bottom: 0; width: 76%; margin: 0; overflow: hidden; }
#battle .bt-side img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); }
#battle .bt-side::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; }
#battle .bt-side--a { left: 0; clip-path: inset(0 calc(100% - var(--split) / .76) 0 0); }
#battle .bt-side--a::after { background: var(--color-2); }
#battle .bt-side--a img { object-position: 62% 40%; }
#battle .bt-side--b { right: 0; clip-path: inset(0 0 0 calc((var(--split) - 24%) / .76)); }
#battle .bt-side--b::after { background: var(--color-5); }
#battle .bt-side--b img { object-position: 45% 50%; }
#battle .bt-shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--color-4) 72%, transparent) 0%, transparent 38%, transparent 60%, color-mix(in srgb, var(--color-4) 70%, transparent) 100%); }
#battle .bt-line { position: absolute; inset: 0; translate: calc(var(--split) - 50%) 0; pointer-events: none; }
#battle .bt-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--color-3); }
#battle .bt-vs { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-3); background: var(--color-4); font-size: 18px; font-weight: 600; letter-spacing: .04em; }
#battle .bt-copy { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: 20px; padding: calc(60px + 5svh) var(--space-2) 5svh; }
#battle .bt-intro { grid-column: 1 / 6; display: grid; gap: 16px; align-content: start; justify-items: start; }
#battle .bt-intro p { max-width: 34ch; }
#battle .bt-rounds { grid-column: 8 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: start; border-top: 1px solid color-mix(in srgb, var(--color-3) 45%, transparent); }
#battle .bt-round { display: grid; gap: 4px; padding-top: 12px; }
#battle .bt-round span:last-child { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; }
#battle .bt-name { grid-row: 3; display: grid; gap: 6px; align-self: end; }
#battle .bt-name--a { grid-column: 1 / 7; justify-items: start; transform-origin: 0% 100%; }
#battle .bt-name--b { grid-column: 7 / -1; justify-items: end; text-align: right; transform-origin: 100% 100%; }
#battle .bt-crew { font-size: clamp(44px, 7.4vw, 116px); line-height: .86; }
#battle .bt-enter { justify-self: start; font-size: 15px; }
@media (max-width: 860px) {
  #battle .bt-side { top: auto; bottom: auto; left: 0; right: 0; width: auto; height: 76%; }
  #battle .bt-side--a { top: 0; clip-path: inset(0 0 calc(100% - var(--split) / .76) 0); }
  #battle .bt-side--b { bottom: 0; clip-path: inset(calc((var(--split) - 24%) / .76) 0 0 0); }
  #battle .bt-line { translate: 0 calc(var(--split) - 50%); }
  #battle .bt-line::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 2px; margin: -1px 0 0; }
  #battle .bt-vs { left: auto; right: 20px; width: 60px; height: 60px; margin: -30px 0 0; font-size: 15px; }
  #battle .bt-copy { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; padding: calc(56px + 3svh) var(--space-2) 3svh; row-gap: 18px; }
  #battle .bt-intro, #battle .bt-rounds { grid-column: 1; }
  #battle .bt-name--a { grid-column: 1; grid-row: 3; align-self: center; margin-top: 10svh; }
  #battle .bt-name--b { grid-column: 1; grid-row: 4; justify-items: start; text-align: left; transform-origin: 0% 100%; margin-bottom: 40px; }
  #battle .bt-crew { font-size: clamp(44px, 14vw, 64px); }
}
}


@layer sections {
#zones { background: var(--color-2); padding: clamp(80px, 13svh, 150px) 0 clamp(70px, 10svh, 120px); }
#zones .zn-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; margin-bottom: clamp(36px, 6svh, 70px); }
#zones .zn-head h2 { grid-column: 1 / 8; }
#zones .zn-head p { grid-column: 8 / -1; max-width: 40ch; }
#zones .zn-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 4vw, 72px); }
#zones .zn-plan { position: sticky; top: calc(50svh - min(100%, 74svh) / 2 + 24px); width: min(100%, 74svh); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-3) 55%, transparent); background: var(--color-1); }
#zones .zn-map { position: absolute; inset: 0; }
#zones .zn-hall { position: absolute; inset: 15%; border: 1px dashed color-mix(in srgb, var(--color-3) 40%, transparent); border-radius: 24px; }
#zones .zn-spot { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); }
#zones .zn-spot img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 5px solid var(--color-1); outline: 1px solid color-mix(in srgb, var(--color-3) 70%, transparent); }
#zones .zn-spot figcaption { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; background: var(--color-1); }
#zones .zn-items { border-top: 1px solid color-mix(in srgb, var(--color-3) 40%, transparent); }
#zones .zn-item { min-height: 62svh; display: grid; align-content: center; gap: 14px; padding-block: 40px; border-bottom: 1px solid color-mix(in srgb, var(--color-3) 40%, transparent); }
#zones .zn-item p { max-width: 38ch; }
#zones .zn-item .m-badge { justify-self: start; }
@media (max-width: 860px) {
  #zones .zn-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  #zones .zn-head h2, #zones .zn-head p { grid-column: 1; }
  #zones .zn-grid { grid-template-columns: minmax(0, 1fr); }
  #zones .zn-plan-col { position: sticky; top: 56px; z-index: 2; background: var(--color-2); padding-block: 12px; }
  #zones .zn-plan { position: relative; top: auto; width: min(100%, 42svh); }
  #zones .zn-item { min-height: 46svh; }
}
}


@layer sections {
#looks { padding: clamp(80px, 13svh, 150px) 0 clamp(60px, 9svh, 110px); }
#looks .lk-head .m-text-3 { color: var(--color-4); background-image: none; -webkit-text-fill-color: currentColor; }
#looks .lk-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; margin-bottom: clamp(36px, 6svh, 70px); }
#looks .lk-head h2 { grid-column: 1 / 8; }
#looks .lk-head p { grid-column: 8 / -1; max-width: 40ch; }
#looks .lk-track { display: grid; gap: clamp(48px, 8svh, 90px); }
#looks .lk-panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: center; padding-inline: var(--space-2); }
#looks .lk-photo { grid-column: 1 / 7; margin: 0; aspect-ratio: 4 / 5; max-height: 76svh; overflow: hidden; clip-path: circle(80% at 50% 42%); background: var(--color-1); }
#looks .lk-photo img { width: 100%; height: 100%; object-fit: cover; }
#looks .lk-text { grid-column: 8 / -1; display: grid; gap: 16px; justify-items: start; max-width: 42ch; }
#looks .lk-text h3 { font-size: clamp(34px, 4.2vw, 64px); }
#looks .lk-steps { display: grid; gap: 0; width: 100%; border-top: 1px solid color-mix(in srgb, var(--color-4) 25%, transparent); }
#looks .lk-steps li { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-4) 25%, transparent); }
#looks .lk-badge { color: var(--color-2); }
@media (max-width: 860px) {
  #looks .lk-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  #looks .lk-head h2, #looks .lk-head p { grid-column: 1; }
  #looks .lk-panel { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  #looks .lk-photo, #looks .lk-text { grid-column: 1; }
  #looks .lk-photo { max-height: 52svh; width: 100%; }
}
}


@layer scenes {
@media (prefers-reduced-motion: no-preference) {
  #looks[data-track] .lk-scroll { height: 270svh; }
  #looks[data-track] .lk-viewport { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
  #looks[data-track] .lk-track { display: flex; gap: 0; width: max-content; }
  #looks[data-track] .lk-panel { width: calc(100vw - 2 * var(--space-1)); flex: none; }
  #looks[data-track] .lk-photo { max-height: 72svh; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  #looks[data-track] .lk-viewport { align-items: flex-start; padding-top: 70px; }
  #looks[data-track] .lk-photo { height: 46svh; width: auto; justify-self: start; }
}
}


@layer scenes {
@media (prefers-reduced-motion: no-preference) {
  #battle[data-duel] { height: 270svh; }
}
}


@layer sections {
#food { overflow: clip; background: var(--color-1); padding: clamp(80px, 13svh, 150px) 0 clamp(70px, 10svh, 120px); }
#food .fd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: clamp(36px, 6svh, 64px); }
#food .fd-head { grid-column: 1 / 6; display: grid; gap: 20px; align-content: start; }
#food .fd-wide { grid-column: 7 / -1; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
#food .fd-wide img { width: 100%; height: 100%; object-fit: cover; }
#food .fd-ring { grid-column: 1 / 5; grid-row: 2; align-self: start; margin: 0; aspect-ratio: 1; max-width: 340px; border-radius: 50%; padding: 8px; border: 1px solid color-mix(in srgb, var(--color-3) 55%, transparent); }
#food .fd-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#food .fd-board { grid-column: 6 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-content: start; }
#food .fd-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; padding: 18px 0 20px; }
#food .fd-ko { grid-column: 1; opacity: .8; }
#food .fd-name { grid-column: 1; }
#food .fd-note { grid-column: 1; opacity: .85; font-size: 14px; }
#food .fd-price { grid-column: 2; grid-row: 2; }
#food .fd-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: color-mix(in srgb, var(--color-3) 35%, transparent); }
@media (max-width: 860px) {
  #food .fd-grid { grid-template-columns: minmax(0, 1fr); }
  #food .fd-head, #food .fd-wide, #food .fd-board, #food .fd-ring { grid-column: 1; grid-row: auto; }
  #food .fd-board { grid-template-columns: minmax(0, 1fr); }
  #food .fd-ring { max-width: 240px; justify-self: end; }
}
}


@layer sections {
#partners { position: relative; min-height: max(100svh, 760px); display: grid; grid-template-rows: auto 1fr auto; overflow: clip; padding: clamp(80px, 12svh, 130px) 0 0; background: linear-gradient(165deg, var(--color-2) 0%, var(--color-2) 42%, var(--color-6) 100%); }
#partners .pt-man { position: absolute; left: 36%; bottom: 0; width: min(40%, 620px); height: 92%; margin: 0; overflow: hidden; }
#partners .pt-man img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.2) brightness(.95); }
#partners .pt-man::after { content: ""; position: absolute; inset: 0; background: var(--color-2); mix-blend-mode: multiply; }
#partners .pt-top { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
#partners .pt-top h2 { grid-column: 1 / 8; font-size: clamp(48px, 7.6vw, 118px); }
#partners .pt-side { grid-column: 9 / -1; display: grid; gap: 22px; justify-items: start; }
#partners .pt-avatars { display: flex; }
#partners .pt-avatars li { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid var(--color-3); margin-left: -12px; background: var(--color-1); }
#partners .pt-avatars li:first-child { margin-left: 0; }
#partners .pt-avatars img { width: 100%; height: 100%; object-fit: cover; }
#partners .pt-plus { display: grid; place-items: center; font-size: 22px; font-weight: 400; }
#partners .pt-cols { position: relative; grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; margin-top: 40px; }
#partners .pt-col { display: grid; grid-template-rows: auto auto 1fr; gap: 12px; padding: 0 16px 0 14px; border-left: 1px solid color-mix(in srgb, var(--color-3) 55%, transparent); min-height: calc(140px + 40 * min(5.6px, .7svh)); }
#partners .pt-points { display: grid; gap: 6px; font-size: 14px; line-height: 1.35; }
#partners .pt-points li { padding-left: 14px; position: relative; }
#partners .pt-points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
#partners .pt-pane { align-self: end; height: calc(var(--share) * min(5.6px, .7svh)); margin: 0 -16px 0 -14px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 12px 14px; clip-path: inset(0 0 0 0); }
#partners .pt-pane p span { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
@media (max-width: 860px) {
  #partners { min-height: 0; padding-top: 90px; }
  #partners .pt-man { left: auto; right: 0; width: 62%; height: 520px; bottom: auto; top: 60px; }
  #partners .pt-top { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  #partners .pt-top h2, #partners .pt-side { grid-column: 1; }
  #partners .pt-top h2 { font-size: clamp(44px, 13vw, 64px); }
  #partners .pt-side { margin-top: 180px; }
  #partners .pt-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; margin-top: 44px; }
}
}


@layer sections {
#fanwall { background: var(--color-4); padding: clamp(80px, 13svh, 150px) 0 clamp(80px, 12svh, 140px); }
#fanwall .fw-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; margin-bottom: clamp(40px, 7svh, 80px); }
#fanwall .fw-head h2 { grid-column: 1 / 8; }
#fanwall .fw-head p { grid-column: 8 / -1; max-width: 40ch; }
#fanwall .fw-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: start; }
#fanwall .fw-item { position: relative; overflow: hidden; aspect-ratio: 3 / 4; }
#fanwall .fw-item--round { aspect-ratio: 1; border-radius: 50%; }
#fanwall .fw-item:nth-child(4n + 2), #fanwall .fw-item:nth-child(4n + 4) { margin-top: clamp(30px, 8svh, 90px); }
#fanwall .fw-item img { width: 100%; height: 100%; object-fit: cover; }
#fanwall .fw-grade { position: absolute; inset: 0; background: var(--color-2); mix-blend-mode: color; }
#fanwall .fw-tag { margin-top: 36px; }
@media (max-width: 860px) {
  #fanwall .fw-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  #fanwall .fw-head h2, #fanwall .fw-head p { grid-column: 1; }
  #fanwall .fw-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #fanwall .fw-item:nth-child(4n + 2), #fanwall .fw-item:nth-child(4n + 4) { margin-top: 0; }
  #fanwall .fw-item:nth-child(2n) { margin-top: 40px; }
}
}


@layer sections {
#tickets { padding: clamp(80px, 13svh, 150px) 0 clamp(80px, 12svh, 140px); overflow: clip; }
#tickets .tk-head .m-text-3 { color: var(--color-4); background-image: none; -webkit-text-fill-color: currentColor; }
#tickets .tk-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; margin-bottom: clamp(40px, 7svh, 80px); }
#tickets .tk-head h2 { grid-column: 1 / 8; }
#tickets .tk-head p { grid-column: 8 / -1; max-width: 40ch; }
#tickets .tk-passes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
#tickets .tk-pass { display: grid; grid-template-rows: auto 1fr auto; gap: 26px; padding: 28px 26px 26px; border-radius: 22px; color: var(--color-3); min-height: 520px; }
#tickets .tk-pass--day { background: var(--color-2); }
#tickets .tk-pass--weekend { background: var(--color-1); }
#tickets .tk-pass--pit { background: var(--color-4); }
#tickets .tk-pass :focus-visible { outline-color: var(--color-3); }
#tickets .tk-top { display: grid; gap: 18px; justify-items: start; }
#tickets .tk-name { font-size: clamp(40px, 4.4vw, 64px); }
#tickets .tk-list { display: grid; align-content: start; border-top: 1px solid color-mix(in srgb, var(--color-3) 35%, transparent); }
#tickets .tk-list li { padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-3) 35%, transparent); }
#tickets .tk-stub { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 2px dashed color-mix(in srgb, var(--color-3) 55%, transparent); }
#tickets .tk-price { font-size: clamp(34px, 3vw, 44px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
#tickets .tk-note { margin-top: 26px; color: var(--color-4); }
@media (max-width: 860px) {
  #tickets .tk-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  #tickets .tk-head h2, #tickets .tk-head p { grid-column: 1; }
  #tickets .tk-passes { grid-template-columns: minmax(0, 1fr); }
  #tickets .tk-pass { min-height: 0; }
}
}


@layer sections {
#faq { background: var(--color-1); padding: clamp(80px, 13svh, 150px) 0 clamp(80px, 12svh, 140px); }
#faq .fq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 36px; }
#faq .fq-head { grid-column: 1 / 5; display: grid; gap: 20px; align-content: start; justify-items: start; }
#faq .fq-list { grid-column: 6 / -1; display: grid; gap: 12px; }
#faq .fq-item summary { list-style: none; cursor: pointer; padding: 22px 64px 22px 22px; }
#faq .fq-item summary::-webkit-details-marker { display: none; }
#faq .fq-item p { padding: 0 64px 24px 22px; max-width: 60ch; }
#faq .fq-item::before, #faq .fq-item::after { transition: rotate .35s cubic-bezier(.2,.7,.2,1); }
#faq .fq-item[open]::before, #faq .fq-item[open]::after { rotate: 45deg; }
@media (hover: hover) { #faq .fq-item summary:hover { background: color-mix(in srgb, var(--color-4) 25%, transparent); } }
@media (max-width: 860px) {
  #faq .fq-grid { grid-template-columns: minmax(0, 1fr); }
  #faq .fq-head, #faq .fq-list { grid-column: 1; }
}
}


@layer sections {
#contact { position: relative; background: var(--color-2); padding: clamp(90px, 14svh, 160px) 0; overflow: clip; }
#contact .ct-rings { position: absolute; left: 70%; top: 50%; width: 0; height: 0; pointer-events: none; }
#contact .ct-rings span { position: absolute; left: 0; top: 0; width: var(--d); aspect-ratio: 1; margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-3) 45%, transparent); }
#contact .ct-rings span:nth-child(1) { --d: 26vmax; }
#contact .ct-rings span:nth-child(2) { --d: 46vmax; }
#contact .ct-rings span:nth-child(3) { --d: 66vmax; }
#contact .ct-rings span:nth-child(4) { --d: 86vmax; }
#contact .ct-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; row-gap: 40px; }
#contact h2 { grid-column: 1 / 8; }
#contact .ct-mail { grid-column: 1 / -1; justify-self: start; font-size: clamp(30px, 4.6vw, 70px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; padding-bottom: 6px; background-size: 300% 2px; }
#contact .ct-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
#contact .ct-list > div { display: grid; gap: 8px; align-content: start; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--color-3) 45%, transparent); }
#contact .ct-list dt { opacity: .85; }
@media (max-width: 860px) {
  #contact .ct-rings { left: 85%; top: 30%; }
  #contact h2 { grid-column: 1 / -1; }
  #contact .ct-mail { font-size: clamp(24px, 7.4vw, 34px); }
  #contact .ct-list { grid-template-columns: minmax(0, 1fr); }
}
}


@layer sections {
#footer { background: var(--color-4); padding: 72px var(--space-2) 28px; margin-bottom: 0; }
#footer .ft-mark { font-size: min(30vw, calc((100vw - 2 * var(--space-1) - 2 * var(--space-2)) / (var(--len) * .65))); white-space: nowrap; }
#footer .ft-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; margin-top: 40px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--color-3) 25%, transparent); }
#footer .ft-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
#footer small { opacity: .75; }
}

#navigation .nav__logo img{width:120px;height:42px;object-fit:contain} #footer .ft-mark img{width:100%;height:auto;max-height:35vw;object-fit:contain;object-position:left center}

/* Contextual film stays inside the original animated photo surface. */
#opening .op-video{position:absolute;inset:0;pointer-events:none} #opening .op-video[hidden]{display:none}

/* Original inline declarations extracted without layout changes. */
[data-noux-style="1"]{background:#260c0c}
[data-noux-style="2"]{--len:18}
[data-noux-style="3"]{--i:0;--col:0;--row:0}
[data-noux-style="4"]{--i:1;--col:1;--row:0}
[data-noux-style="5"]{--i:2;--col:2;--row:0}
[data-noux-style="6"]{--i:3;--col:0;--row:1}
[data-noux-style="7"]{--i:4;--col:1;--row:1}
[data-noux-style="8"]{--i:5;--col:2;--row:1}
[data-noux-style="9"]{--i:6;--col:0;--row:2}
[data-noux-style="10"]{--i:7;--col:1;--row:2}
[data-noux-style="11"]{--i:8;--col:2;--row:2}
[data-noux-style="12"]{--i:0;--col:0;--row:0}
[data-noux-style="13"]{--i:1;--col:1;--row:0}
[data-noux-style="14"]{--i:2;--col:2;--row:0}
[data-noux-style="15"]{--i:3;--col:0;--row:1}
[data-noux-style="16"]{--i:4;--col:1;--row:1}
[data-noux-style="17"]{--i:5;--col:2;--row:1}
[data-noux-style="18"]{--i:6;--col:0;--row:2}
[data-noux-style="19"]{--i:7;--col:1;--row:2}
[data-noux-style="20"]{--i:8;--col:2;--row:2}
[data-noux-style="21"]{background:#c0c0c0}
[data-noux-style="22"]{--len:8}
[data-noux-style="23"]{background:#d9d9d9}
[data-noux-style="24"]{--len:8}
[data-noux-style="25"]{background:#c0c0c0}
[data-noux-style="26"]{--len:11}
[data-noux-style="27"]{background:#262626}
[data-noux-style="28"]{--len:9}
[data-noux-style="29"]{background:#262640}
[data-noux-style="30"]{--len:9}
[data-noux-style="31"]{background:#404040}
[data-noux-style="32"]{background:#260c0c}
[data-noux-style="33"]{--x:33%;--y:33%;--s:40%}
[data-noux-style="34"]{background:#a60c0c}
[data-noux-style="35"]{--x:73%;--y:31%;--s:27%}
[data-noux-style="36"]{background:#262626}
[data-noux-style="37"]{--x:29%;--y:74%;--s:25%}
[data-noux-style="38"]{background:#f34040}
[data-noux-style="39"]{--x:68%;--y:70%;--s:32%}
[data-noux-style="40"]{background:#404040}
[data-noux-style="41"]{background:#c0a68c}
[data-noux-style="42"]{background:#a68c8c}
[data-noux-style="43"]{background:#260c0c}
[data-noux-style="44"]{background:#260c0c}
[data-noux-style="45"]{background:#262626}
[data-noux-style="46"]{background:#262626}
[data-noux-style="47"]{background:#d90c0c}
[data-noux-style="48"]{background:#260c0c}
[data-noux-style="49"]{background:#d9d9d9}
[data-noux-style="50"]{--share:40}
[data-noux-style="51"]{--share:30}
[data-noux-style="52"]{--share:20}
[data-noux-style="53"]{--share:10}
[data-noux-style="54"]{background:#f3a68c}
[data-noux-style="55"]{background:#260c0c}
[data-noux-style="56"]{background:#260c0c}
[data-noux-style="57"]{background:#262626}
[data-noux-style="58"]{background:#260c0c}
[data-noux-style="59"]{background:#f3f3f3}
[data-noux-style="60"]{background:#262640}
[data-noux-style="61"]{background:#260c26}
[data-noux-style="62"]{--len:4}
[data-noux-style="63"]{color:inherit}