:root {
  --ink: #08080a;
  --ink-2: #141419;
  --bone: #f3ead9;
  --paper: #fffaf1;
  --red: #ff372f;
  --blue: #2948ff;
  --pink: #fa1b87;
  --white: #fffdf7;
  --cyan: #30e0e0;
  --rule: 2px solid var(--ink);
  --page: min(1240px, calc(100vw - 64px));
  --display: "Barlow Condensed", Impact, sans-serif;
  --body: "Archivo", Arial, sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; scroll-behavior: smooth; background: var(--ink); }
body {
  width: 100%;
  margin: 0;
  color: var(--ink);
  background: var(--bone);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  opacity: .055;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid var(--cyan); outline-offset: 4px; }
::selection { color: var(--white); background: var(--pink); }

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 1001;
  padding: 12px 18px;
  color: var(--white);
  background: var(--blue);
  font: 700 14px var(--mono);
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 5px;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span { display: block; width: 0; height: 100%; background: var(--pink); box-shadow: 6px 0 0 var(--blue); }

.utility-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  min-height: 72px;
  padding: 0 max(22px, calc((100vw - 1240px) / 2));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  color: var(--white);
  background: rgba(8, 8, 10, .96);
  border-bottom: 2px solid rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
}
.campaign-mark { display: inline-flex; align-items: center; gap: 11px; color: var(--white); text-decoration: none; font: 800 12px var(--mono); letter-spacing: .04em; }
.campaign-mark__stamp { display: grid; place-items: center; width: 38px; height: 38px; color: var(--white); background: var(--red); border: 2px solid var(--white); box-shadow: 4px 4px 0 var(--blue); transform: rotate(-4deg); }
.utility-route { justify-self: center; margin: 0; display: flex; gap: 12px; align-items: center; font: 600 11px var(--mono); letter-spacing: .08em; }
.utility-route b { color: var(--pink); }
.utility-route em { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.6); font-style: normal; }
.utility-bar nav { display: flex; align-items: center; gap: 21px; }
.utility-bar nav a { color: rgba(255,255,255,.72); font: 700 12px var(--mono); text-decoration: none; text-transform: uppercase; transition: color .15s ease, transform .15s ease; }
.utility-bar nav a:hover { color: var(--white); transform: translateY(-2px); }
.utility-bar nav .nav-action { padding: 11px 14px; color: var(--ink); background: var(--white); border: 2px solid var(--white); box-shadow: 4px 4px 0 var(--red); }
.utility-bar nav .nav-action:hover { color: var(--ink); transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--red); }

.poster-surface { position: relative; isolation: isolate; overflow: hidden; }
.poster-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.08) 3px 4px);
  mix-blend-mode: screen;
}

.hero {
  min-height: calc(100svh - 72px);
  color: var(--white);
  background: var(--ink);
  border-bottom: 10px solid var(--red);
}
.hero-collage {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("assets/street-collage-v2.webp") center / cover no-repeat;
  filter: contrast(1.08) saturate(.94);
}
.hero-collage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,10,.96) 0 34%, rgba(8,8,10,.64) 52%, rgba(8,8,10,.06) 82%);
}
.hero-grid {
  width: var(--page);
  min-height: calc(100svh - 72px);
  margin: auto;
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: center;
  padding: 58px 0 92px;
}
.hero-copy { position: relative; z-index: 6; min-width: 0; }
.presented-by { display: inline-flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin-bottom: 27px; padding: 8px 13px 8px 9px; overflow: hidden; color: var(--white); background: rgba(8,8,10,.9); border: 2px solid rgba(255,255,255,.58); box-shadow: 5px 5px 0 var(--blue); transform: rotate(-1deg); }
.presented-by__label { font: 600 8px var(--mono); letter-spacing: .12em; text-transform: uppercase; writing-mode: vertical-rl; color: rgba(255,255,255,.55); }
.presented-by strong { display: block; white-space: nowrap; text-transform: uppercase; }
.presented-by__rabbit { color: var(--bone); font: 900 19px/.72 var(--display); letter-spacing: -.02em; }
.presented-by__bustr { padding: 5px 8px; color: var(--white); background: var(--red); font: 900 19px/.9 var(--display); letter-spacing: .06em; transform: rotate(2deg); }
.presented-by b { color: var(--pink); font: 900 21px var(--display); }
.stamp { width: fit-content; margin: 0 0 17px; padding: 7px 10px; border: 2px solid currentColor; font: 600 11px var(--mono); letter-spacing: .08em; transform: rotate(1deg); }
.stamp--red { color: var(--white); background: var(--red); box-shadow: 5px 5px 0 var(--blue); }
.hero-title { margin: 0; font-family: var(--display); font-size: clamp(82px, 9.8vw, 154px); font-weight: 900; line-height: .68; letter-spacing: -.055em; text-transform: uppercase; }
.title-line { display: block; width: fit-content; padding-right: .06em; }
.title-line--bone { color: var(--bone); transform: rotate(-1deg); }
.title-line--red { position: relative; z-index: 4; color: var(--red); transform: translateX(7vw) rotate(.7deg); text-shadow: 7px 7px 0 var(--blue); }
.title-line--outline { color: transparent; -webkit-text-stroke: 3px var(--white); font-size: .75em; line-height: .91; transform: translateX(1vw) rotate(-1.2deg); }
.hero-lede { max-width: 600px; margin: 34px 0 15px; color: var(--white); font-size: clamp(18px, 1.7vw, 23px); font-weight: 700; line-height: 1.42; text-wrap: balance; }
.hero-jp { max-width: 610px; margin: 0 0 29px; padding-left: 14px; border-left: 6px solid var(--pink); color: rgba(255,255,255,.72); font: 700 13px/1.75 "Noto Sans JP", sans-serif; }
.sticker-button { display: inline-flex; align-items: stretch; min-height: 55px; color: var(--white); background: var(--red); border: 2px solid var(--white); box-shadow: 7px 7px 0 var(--blue); font: 800 14px var(--mono); letter-spacing: .02em; text-decoration: none; text-transform: uppercase; transform: rotate(-1deg); transition: transform .15s ease, box-shadow .15s ease; }
.sticker-button span { display: flex; align-items: center; padding: 12px 18px; }
.sticker-button b { display: grid; place-items: center; width: 52px; border-left: 2px solid var(--white); font-size: 21px; }
.sticker-button:hover { transform: translate(5px,5px) rotate(0); box-shadow: 2px 2px 0 var(--blue); }

.hero-visual { position: relative; z-index: 4; align-self: stretch; min-height: 680px; }
.vertical-jp { position: absolute; top: 3%; right: -4vw; z-index: 0; color: rgba(255,255,255,.11); font: 900 clamp(80px, 10vw, 156px)/.85 "Noto Sans JP", sans-serif; writing-mode: vertical-rl; letter-spacing: -.12em; }
.mascot-stack { --mx: 0px; --my: 0px; position: absolute; right: -4vw; bottom: -45%; width: min(50vw, 720px); aspect-ratio: 2 / 3; transform: translate3d(var(--mx), var(--my), 0) rotate(2deg); transform-origin: 50% 80%; transition: transform .18s ease-out; }
.mascot-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-mascot { z-index: 3; filter: drop-shadow(4px 0 0 var(--bone)) drop-shadow(-4px 0 0 var(--bone)) drop-shadow(0 4px 0 var(--bone)) drop-shadow(0 -4px 0 var(--bone)) drop-shadow(18px 24px 10px rgba(0,0,0,.36)); }
.mascot-shadow { z-index: 1; opacity: .88; }
.mascot-shadow--blue { transform: translate(-21px, 18px); filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(6967%) hue-rotate(236deg) brightness(98%) contrast(106%); }
.mascot-shadow--red { z-index: 2; transform: translate(15px, 9px); filter: brightness(0) saturate(100%) invert(32%) sepia(97%) saturate(3905%) hue-rotate(349deg) brightness(104%) contrast(109%); opacity: .72; }
.burst { position: absolute; z-index: 8; display: grid; place-items: center; padding: 11px 16px; color: var(--ink); background: var(--bone); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--pink); font: 900 24px var(--display); letter-spacing: .05em; transform: rotate(-7deg); }
.burst--two { right: 2%; bottom: 13%; color: var(--white); background: var(--blue); box-shadow: 6px 6px 0 var(--red); transform: rotate(6deg); font-size: 18px; }
.hero-ticket { position: absolute; right: 0; bottom: 0; z-index: 20; min-width: 310px; display: grid; grid-template-columns: auto auto; gap: 3px 14px; padding: 15px 24px; color: var(--ink); background: var(--bone); border: 3px solid var(--ink); border-bottom: 0; border-right: 0; transform: rotate(-1deg) translateY(3px); }
.hero-ticket span { grid-row: 1 / 3; align-self: center; padding-right: 14px; border-right: 2px solid var(--ink); font: 600 10px var(--mono); writing-mode: vertical-rl; }
.hero-ticket strong { font: 900 27px/1 var(--display); }
.hero-ticket small { font: 600 9px var(--mono); letter-spacing: .06em; }

.ticker { overflow: hidden; color: var(--white); background: var(--red); border-bottom: 4px solid var(--ink); }
.ticker-track { width: max-content; min-height: 72px; display: flex; align-items: center; gap: 25px; padding: 0 20px; animation: tickerMove 24s linear infinite; font: 900 34px var(--display); letter-spacing: .03em; white-space: nowrap; }
.ticker-track i { color: var(--ink); font-style: normal; }
@keyframes tickerMove { to { transform: translateX(-50%); } }

.fact-rail { display: grid; grid-template-columns: repeat(4,1fr); background: var(--bone); border-bottom: 4px solid var(--ink); }
.fact-rail article { position: relative; min-height: 190px; padding: 35px 28px 27px; border-right: 2px solid var(--ink); }
.fact-rail article:last-child { border-right: 0; }
.fact-rail b { position: absolute; top: 14px; right: 16px; color: transparent; -webkit-text-stroke: 1px var(--ink); font: 900 61px/1 var(--display); opacity: .25; }
.fact-rail strong { display: block; margin-bottom: 12px; font: 900 30px/1 var(--display); text-transform: uppercase; }
.fact-rail span { display: block; max-width: 260px; color: rgba(8,8,10,.69); font-size: 14px; line-height: 1.5; }

.micro-label { margin: 0 0 18px; font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.micro-label--light { color: var(--white); }

.why-section { min-height: 1040px; padding: 120px max(32px, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: auto auto; gap: 36px 28px; background: var(--paper); border-bottom: 4px solid var(--ink); }
.section-index { position: absolute; top: 44px; right: 4vw; z-index: -1; color: transparent; -webkit-text-stroke: 2px rgba(8,8,10,.12); font: 900 250px/1 var(--display); }
.why-heading { grid-column: 1 / 7; align-self: start; }
.why-heading h2 { margin: 0; font: 900 clamp(72px, 8.5vw, 132px)/.73 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.why-heading h2 em { color: var(--red); font-style: normal; text-shadow: 7px 7px 0 var(--blue); }
.game-poster { grid-column: 7 / 13; align-self: center; margin: 55px 0 0; padding: 13px; background: var(--blue); border: 3px solid var(--ink); box-shadow: 15px 15px 0 var(--red); transform: rotate(2deg); transition: transform .2s ease; }
.game-poster:hover { transform: rotate(0) translate(-5px,-5px); }
.game-poster img { width: 100%; min-height: 300px; object-fit: cover; filter: saturate(1.2) contrast(1.08); border: 3px solid var(--ink); }
.game-poster figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 12px 4px 0; color: var(--white); font: 600 11px var(--mono); }
.game-poster figcaption b { color: var(--white); }
.why-notes { grid-column: 2 / 12; display: grid; grid-template-columns: 1.1fr .95fr 1.05fr; align-items: stretch; margin-top: 30px; }
.note { min-height: 280px; padding: 31px; border: 3px solid var(--ink); }
.note + .note { border-left: 0; }
.note span { display: block; margin-bottom: 60px; font: 600 11px var(--mono); }
.note h3 { margin: 0 0 13px; font: 900 37px/1 var(--display); text-transform: uppercase; }
.note p { margin: 0; max-width: 350px; font-size: 15px; font-weight: 600; line-height: 1.6; }
.note--red { color: var(--white); background: var(--red); transform: rotate(-1.3deg) translateY(7px); }
.note--blue { color: var(--white); background: var(--blue); transform: rotate(1deg) translateY(-7px); }
.note--ink { color: var(--white); background: var(--ink); transform: rotate(-.5deg) translateY(4px); }
.margin-word { position: absolute; left: 12px; bottom: 30px; margin: 0; color: rgba(8,8,10,.25); font: 600 9px var(--mono); letter-spacing: .25em; writing-mode: vertical-rl; }

.route-section { position: relative; isolation: isolate; min-height: 930px; padding: 115px max(32px, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; color: var(--white); background: var(--ink); border-bottom: 10px solid var(--pink); overflow: hidden; }
.route-section::before { content: "ROUTE 02"; position: absolute; right: -25px; top: 40px; z-index: -2; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.1); font: 900 190px/1 var(--display); writing-mode: vertical-rl; }
.route-section::after { content: ""; position: absolute; inset: 0; z-index: -3; opacity: .18; background: url("assets/caribbean-japan-waves.jpg") center / cover; filter: grayscale(1) contrast(1.5); }
.route-robot { position: absolute; left: -17%; bottom: -1%; z-index: -1; width: 67vw; max-width: 1000px; opacity: .76; filter: contrast(1.2) saturate(.7) drop-shadow(20px 15px 0 rgba(41,72,255,.42)); transform: rotate(-7deg); }
.route-heading { align-self: start; max-width: 540px; }
.route-heading h2 { margin: 0 0 30px; font: 900 clamp(82px, 9vw, 142px)/.73 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.route-heading h2 span { color: var(--red); text-shadow: 7px 7px 0 var(--blue); }
.route-heading > p:last-child { max-width: 430px; color: rgba(255,255,255,.7); font-size: 18px; font-weight: 600; }
.route-map { position: relative; align-self: center; margin: 60px 0 0; padding: 0; list-style: none; }
.route-map::before { content: ""; position: absolute; left: 37px; top: 20px; bottom: 20px; width: 7px; background: var(--blue); box-shadow: 8px 0 0 var(--red); }
.route-map li { position: relative; z-index: 1; display: grid; grid-template-columns: 82px 1fr; align-items: center; min-height: 135px; }
.route-map li b { display: grid; place-items: center; width: 70px; height: 70px; color: var(--ink); background: var(--bone); border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--pink); border-radius: 50%; font: 900 26px var(--display); }
.route-map li:nth-child(even) b { color: var(--white); background: var(--red); box-shadow: 5px 5px 0 var(--blue); }
.route-map li div { padding: 20px 25px; background: rgba(8,8,10,.82); border: 2px solid rgba(255,255,255,.28); box-shadow: 8px 8px 0 rgba(41,72,255,.4); transform: rotate(-.5deg); }
.route-map li:nth-child(even) div { transform: rotate(.7deg) translateX(16px); }
.route-map span { color: var(--pink); font: 900 28px/1 var(--display); letter-spacing: .04em; }
.route-map p { margin: 7px 0 0; color: rgba(255,255,255,.68); font-size: 14px; font-weight: 600; }

.exchange-section { padding: 120px max(32px, calc((100vw - 1240px)/2)); background: var(--bone); border-bottom: 4px solid var(--ink); }
.exchange-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 58px; }
.exchange-header h2 { margin: 0; font: 900 clamp(90px, 10vw, 155px)/.72 var(--display); letter-spacing: -.05em; text-align: right; text-transform: uppercase; }
.partner-posters { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 3px solid var(--ink); box-shadow: 17px 17px 0 var(--ink); }
.partner-poster { position: relative; min-height: 610px; padding: 48px; overflow: hidden; }
.partner-poster + .partner-poster { border-left: 3px solid var(--ink); }
.partner-poster--tt { color: var(--white); background: var(--red); }
.partner-poster--tt::after { content: ""; position: absolute; inset: 0; opacity: .25; background: url("assets/caribbean-japan-waves.jpg") center / cover; mix-blend-mode: multiply; }
.partner-poster--jp { color: var(--ink); background: var(--paper); }
.partner-poster--jp::after { content: ""; position: absolute; right: -130px; top: -130px; width: 420px; height: 420px; border: 65px solid var(--blue); border-radius: 50%; opacity: .14; }
.partner-poster > * { position: relative; z-index: 1; }
.poster-flag { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 95px; border: 3px solid currentColor; box-shadow: 6px 6px 0 var(--ink); font: 900 26px var(--display); transform: rotate(-5deg); }
.partner-poster--jp .poster-flag { color: var(--white); background: var(--blue); }
.partner-poster h3 { margin: 0 0 24px; font: 900 clamp(60px, 6vw, 96px)/.78 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.partner-poster > p:not(.micro-label) { max-width: 500px; min-height: 90px; margin-bottom: 25px; font-size: 16px; font-weight: 700; line-height: 1.65; }
.partner-poster ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.partner-poster li { display: flex; gap: 12px; align-items: flex-start; font-weight: 800; }
.partner-poster li::before { content: "↗"; color: var(--ink); }
.partner-poster--jp li::before { color: var(--red); }

.unlock-section { min-height: 1030px; padding: 120px max(32px, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: .78fr 1.22fr; grid-template-rows: auto auto; gap: 50px 70px; color: var(--white); background: var(--pink); border-bottom: 4px solid var(--ink); }
.unlock-section::before { content: "SUPPORT"; position: absolute; left: -10px; bottom: -20px; z-index: -1; color: transparent; -webkit-text-stroke: 3px rgba(255,255,255,.14); font: 900 230px/1 var(--display); }
.unlock-heading h2 { margin: 0; font: 900 clamp(82px, 8vw, 130px)/.73 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.unlock-heading h2 span { color: var(--ink); text-shadow: 6px 6px 0 var(--bone); }
.kpi-wall { display: grid; grid-template-columns: repeat(3,1fr); align-self: start; border: 3px solid var(--ink); box-shadow: 14px 14px 0 var(--blue); }
.kpi-wall article { min-height: 310px; padding: 25px; color: var(--ink); background: var(--bone); border-right: 3px solid var(--ink); }
.kpi-wall article:last-child { border-right: 0; }
.kpi-wall strong { display: block; margin-bottom: 55px; color: var(--blue); font: 900 100px/.72 var(--display); }
.kpi-wall span { display: block; margin-bottom: 12px; font: 900 23px/1 var(--display); }
.kpi-wall p { margin: 0; font-size: 13px; font-weight: 700; }
.support-wall { grid-column: 1 / -1; align-self: end; padding: 13px 22px; color: var(--white); background: var(--ink); border: 3px solid var(--white); box-shadow: 14px 14px 0 var(--blue); transform: rotate(-1deg); }
.support-wall p { margin: 0; min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.3); font: 900 clamp(25px,3.3vw,49px)/1 var(--display); letter-spacing: .01em; }
.support-wall p:last-child { border-bottom: 0; }
.support-wall b { color: var(--red); }

.timeline-section { position: relative; isolation: isolate; min-height: 820px; padding: 115px max(32px, calc((100vw - 1240px)/2)); color: var(--white); background: var(--blue); border-bottom: 4px solid var(--ink); overflow: hidden; }
.timeline-section::after { content: ""; position: absolute; top: -30vw; right: -26vw; z-index: -1; width: 72vw; height: 72vw; border: 9vw solid rgba(255,255,255,.08); border-radius: 50%; }
.timeline-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 50px; }
.timeline-heading h2 { margin: 0; font: 900 clamp(90px,10vw,158px)/.72 var(--display); letter-spacing: -.045em; text-align: right; text-transform: uppercase; }
.timeline-line { position: relative; margin: 100px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); list-style: none; }
.timeline-line::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 8px; background: var(--ink); box-shadow: 0 9px 0 var(--red); }
.timeline-line li { position: relative; padding: 62px 36px 0 0; }
.timeline-line li::before { content: ""; position: absolute; top: 0; left: 0; z-index: 2; width: 43px; height: 43px; background: var(--bone); border: 7px solid var(--ink); border-radius: 50%; box-shadow: 6px 6px 0 var(--red); }
.timeline-line b { display: block; margin-bottom: 10px; color: var(--bone); font: 600 13px var(--mono); }
.timeline-line span { display: block; font: 900 31px/1 var(--display); text-transform: uppercase; }
.timeline-line p { max-width: 230px; color: rgba(255,255,255,.72); font-size: 14px; font-weight: 600; }

.pack-section { min-height: 890px; padding: 115px max(32px, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; background: var(--bone); border-bottom: 4px solid var(--ink); }
.pack-heading h2 { margin: 0; font: 900 clamp(86px,8.7vw,138px)/.72 var(--display); letter-spacing: -.045em; text-transform: uppercase; }
.pack-heading h2 span { color: var(--red); text-shadow: 7px 7px 0 var(--blue); }
.document-index { align-self: start; border-top: 4px solid var(--ink); }
.document-index a { min-height: 132px; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 18px; padding: 20px 10px; border-bottom: 2px solid var(--ink); text-decoration: none; transition: color .15s ease, background .15s ease, transform .15s ease; }
.document-index a:hover { color: var(--white); background: var(--ink); transform: translateX(10px); }
.document-index b { font: 600 13px var(--mono); }
.document-index strong { display: block; margin-bottom: 5px; font: 900 28px/1 var(--display); text-transform: uppercase; }
.document-index small { display: block; color: rgba(8,8,10,.62); font: 600 11px var(--mono); }
.document-index a:hover small { color: rgba(255,255,255,.64); }
.document-index em { font: 600 12px var(--mono); font-style: normal; }

.final-cta { min-height: 760px; padding: 120px max(32px, calc((100vw - 1240px)/2)); color: var(--white); background: var(--ink); }
.final-cta::before { content: ""; position: absolute; inset: 0; z-index: -3; background: url("assets/street-collage-v2.webp") center / cover; filter: saturate(.92) contrast(1.15); }
.final-cta__ink { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(8,8,10,.94) 0 47%, rgba(8,8,10,.45) 75%, rgba(8,8,10,.18)); }
.final-cta h2 { max-width: 900px; margin: 0 0 28px; font: 900 clamp(110px,14vw,220px)/.7 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.final-cta > p:not(.micro-label) { max-width: 650px; margin-bottom: 30px; font-size: 21px; font-weight: 700; }
.contact-stamp { width: fit-content; margin: 0 0 35px; padding: 13px 17px; display: grid; grid-template-columns: auto auto; gap: 3px 19px; color: var(--ink); background: var(--bone); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--red); transform: rotate(-1deg); }
.contact-stamp span { grid-row: 1 / 3; padding-right: 16px; border-right: 2px solid var(--ink); font: 600 10px var(--mono); writing-mode: vertical-rl; }
.contact-stamp strong { font: 900 20px var(--display); }
.contact-stamp em { font: 600 10px var(--mono); font-style: normal; }
.final-actions { display: flex; align-items: center; gap: 30px; }
.sticker-button--bone { color: var(--ink); background: var(--bone); border-color: var(--ink); box-shadow: 7px 7px 0 var(--pink); }
.sticker-button--bone b { border-color: var(--ink); }
.text-link { color: var(--white); font: 600 12px var(--mono); text-underline-offset: 6px; }

footer { min-height: 210px; padding: 45px max(24px, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: .8fr 1.3fr auto; gap: 50px; align-items: start; color: rgba(255,255,255,.6); background: var(--ink); border-top: 2px solid rgba(255,255,255,.2); font-size: 12px; }
.footer-brand b { display: block; color: var(--white); font: 900 27px var(--display); }
.footer-brand span { font: 600 9px var(--mono); letter-spacing: .08em; }
footer p { margin: 0; max-width: 600px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 15px; font: 600 10px var(--mono); }
.footer-links a { color: var(--white); }

.motion-ready [data-reveal] { opacity: 0; transform: translateY(38px) rotate(.8deg); clip-path: inset(0 0 100% 0); transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1), clip-path .75s cubic-bezier(.2,.8,.2,1); }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

@media (max-width: 1100px) {
  :root { --page: min(100% - 42px, 1240px); }
  .utility-route { display: none; }
  .utility-bar { grid-template-columns: 1fr auto; }
  .hero-grid { grid-template-columns: 55% 45%; }
  .hero-title { font-size: clamp(76px, 11.6vw, 126px); }
  .mascot-stack { right: -9vw; width: min(52vw, 590px); }
  .why-section { padding-inline: 30px; }
  .why-heading { grid-column: 1 / 8; }
  .game-poster { grid-column: 7 / 13; }
  .why-notes { grid-column: 1 / 13; }
  .route-section { grid-template-columns: .82fr 1.18fr; padding-inline: 32px; gap: 40px; }
  .route-heading h2 { font-size: 10vw; }
  .exchange-section, .unlock-section, .timeline-section, .pack-section, .final-cta { padding-inline: 32px; }
  .partner-poster { padding: 38px; }
  .pack-section { gap: 40px; }
}

@media (max-width: 760px) {
  :root { --page: min(100% - 28px, 1240px); }
  body { font-size: 16px; }
  .utility-bar { min-height: 64px; padding-inline: 14px; }
  .campaign-mark span:last-child { display: none; }
  .campaign-mark__stamp { width: 35px; height: 35px; }
  .utility-bar nav a:not(.nav-action) { display: none; }
  .utility-bar nav .nav-action { min-height: 44px; display: grid; place-items: center; padding: 8px 13px; }

  .hero { min-height: auto; }
  .hero-collage { background-position: 63% center; }
  .hero-collage::after { background: rgba(8,8,10,.64); }
  .hero-grid { min-height: auto; grid-template-columns: 1fr; padding: 40px 0 0; }
  .hero-copy { z-index: 12; }
  .presented-by { margin-bottom: 24px; }
  .presented-by { gap: 10px; }
  .presented-by__rabbit { font-size: 18px; }
  .presented-by__bustr { font-size: 18px; }
  .stamp { margin-bottom: 18px; font-size: 9px; }
  .hero-title { font-size: clamp(72px, 24vw, 102px); line-height: .69; }
  .title-line--red { transform: translateX(12vw) rotate(.7deg); }
  .title-line--outline { font-size: .7em; -webkit-text-stroke-width: 2px; }
  .hero-lede { margin-top: 30px; font-size: 18px; line-height: 1.5; }
  .hero-jp { font-size: 14px; line-height: 1.75; }
  .sticker-button { min-height: 54px; width: 100%; justify-content: space-between; }
  .hero-visual { min-height: 650px; margin-top: -5px; }
  .vertical-jp { top: 9%; right: -11px; font-size: 86px; }
  .mascot-stack { right: 50%; bottom: -3%; width: min(112vw, 500px); transform: translate3d(calc(50% + var(--mx)),var(--my),0) rotate(2deg); }
  .burst--two { right: 3px; bottom: 14%; }
  .hero-ticket { position: relative; right: auto; bottom: auto; z-index: 20; width: calc(100% + 28px); min-width: 0; margin-left: -14px; transform: none; border-left: 0; border-right: 0; border-bottom: 0; }

  .ticker-track { min-height: 61px; gap: 18px; font-size: 27px; animation-duration: 18s; }
  .fact-rail { grid-template-columns: 1fr 1fr; }
  .fact-rail article { min-height: 165px; padding: 27px 18px; border-bottom: 2px solid var(--ink); }
  .fact-rail article:nth-child(2) { border-right: 0; }
  .fact-rail article:nth-child(n+3) { border-bottom: 0; }
  .fact-rail strong { font-size: 25px; }
  .fact-rail span { font-size: 12px; }

  .why-section { min-height: auto; padding: 80px 14px 90px; display: block; }
  .section-index { top: 40px; right: 4px; font-size: 150px; }
  .why-heading h2 { font-size: clamp(72px, 22vw, 100px); }
  .game-poster { margin: 55px 0 0; padding: 8px; transform: rotate(1deg); box-shadow: 9px 9px 0 var(--red); }
  .game-poster img { min-height: 220px; }
  .game-poster figcaption { flex-direction: column; gap: 3px; }
  .why-notes { display: block; margin-top: 65px; }
  .note { min-height: 250px; padding: 28px; }
  .note + .note { border-left: 3px solid var(--ink); border-top: 0; }
  .note span { margin-bottom: 50px; }
  .note--red, .note--blue, .note--ink { transform: none; }

  .route-section { min-height: auto; padding: 85px 14px 320px; display: block; }
  .route-heading h2 { font-size: clamp(78px,23vw,104px); }
  .route-heading > p:last-child { font-size: 16px; }
  .route-map { margin-top: 65px; }
  .route-map::before { left: 27px; }
  .route-map li { grid-template-columns: 62px 1fr; min-height: 145px; }
  .route-map li b { width: 54px; height: 54px; border-width: 3px; font-size: 21px; }
  .route-map li div { padding: 19px 16px; }
  .route-map li:nth-child(even) div { transform: rotate(.7deg) translateX(5px); }
  .route-map span { font-size: 25px; }
  .route-robot { left: -38%; width: 150%; bottom: -2%; opacity: .58; }

  .exchange-section { padding: 80px 14px 95px; }
  .exchange-header { display: block; }
  .exchange-header h2 { margin-top: 23px; font-size: clamp(84px,25vw,112px); text-align: left; }
  .partner-posters { grid-template-columns: 1fr; box-shadow: 10px 10px 0 var(--ink); }
  .partner-poster { min-height: 570px; padding: 31px 27px; }
  .partner-poster + .partner-poster { border-left: 0; border-top: 3px solid var(--ink); }
  .poster-flag { margin-bottom: 72px; }
  .partner-poster h3 { font-size: 76px; }
  .partner-poster > p:not(.micro-label) { min-height: auto; font-size: 15px; }

  .unlock-section { min-height: auto; padding: 85px 14px 100px; display: block; }
  .unlock-heading h2 { font-size: clamp(78px,23vw,104px); }
  .kpi-wall { margin-top: 60px; grid-template-columns: 1fr; box-shadow: 9px 9px 0 var(--blue); }
  .kpi-wall article { min-height: 210px; border-right: 0; border-bottom: 3px solid var(--ink); }
  .kpi-wall article:last-child { border-bottom: 0; }
  .kpi-wall strong { margin-bottom: 35px; font-size: 84px; }
  .support-wall { margin-top: 70px; padding: 8px 14px; transform: none; box-shadow: 9px 9px 0 var(--blue); }
  .support-wall p { min-height: 76px; font-size: 27px; }

  .timeline-section { min-height: auto; padding: 85px 14px 100px; }
  .timeline-heading { display: block; }
  .timeline-heading h2 { margin-top: 22px; font-size: clamp(86px,25vw,112px); text-align: left; }
  .timeline-line { margin-top: 70px; display: block; }
  .timeline-line::before { left: 18px; top: 0; bottom: 0; right: auto; width: 8px; height: auto; box-shadow: 9px 0 0 var(--red); }
  .timeline-line li { min-height: 190px; padding: 4px 0 45px 78px; }
  .timeline-line li::before { top: 0; left: 0; }
  .timeline-line span { font-size: 30px; }

  .pack-section { min-height: auto; padding: 85px 14px 100px; display: block; }
  .pack-heading h2 { font-size: clamp(78px,22vw,102px); }
  .document-index { margin-top: 65px; }
  .document-index a { min-height: 126px; grid-template-columns: 35px 1fr auto; gap: 10px; padding: 17px 4px; }
  .document-index strong { font-size: 22px; }
  .document-index small { font-size: 9px; line-height: 1.5; }

  .final-cta { min-height: 760px; padding: 85px 14px; }
  .final-cta::before { background-position: 64% center; }
  .final-cta__ink { background: rgba(8,8,10,.68); }
  .final-cta h2 { font-size: clamp(92px,27vw,120px); }
  .final-cta > p:not(.micro-label) { font-size: 18px; }
  .contact-stamp { width: 100%; grid-template-columns: auto 1fr; }
  .contact-stamp strong { font-size: 17px; overflow-wrap: anywhere; }
  .final-actions { flex-direction: column; align-items: flex-start; }
  .final-actions .sticker-button { width: 100%; }

  footer { padding: 42px 18px 55px; grid-template-columns: 1fr; gap: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .ticker-track { transform: none !important; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .mascot-stack { --mx: 0px !important; --my: 0px !important; }
}