@font-face {
  font-family: Anton;
  src: url("assets/fonts/anton-v1/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --paper: #f8faf0;
  --ink: #02101c;
  font-family: Arial, "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); }
p { margin: 0; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 20; padding: 14px 18px; color: var(--ink); background: var(--paper); }
.skip-link:focus { top: 20px; }
a:focus-visible, .hero:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.hero {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}
.hero-atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #02101c url("assets/hero-refraction-v1/background-static-v2.webp") center / 100% 100% no-repeat; }
.hero-background { display: block; width: 100%; height: 100%; opacity: 0; }
.hero-background.is-ready { opacity: 1; }
.hero-header { position: absolute; inset: clamp(10px, 1.4vw, 24px) clamp(12px, 1.4vw, 26px) auto; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; font-size: clamp(9px, .83vw, 14px); line-height: 1; font-weight: 700; }
.header-center { text-align: center; }
.header-right { text-align: right; }
.edge-label { position: absolute; top: 49%; font-size: clamp(9px, .83vw, 14px); font-weight: 700; }
.edge-left { left: 4.2%; }
.edge-right { right: 4.2%; }
.hero-composition { position: absolute; top: 44.4%; left: 52%; width: 56.4%; max-width: 1100px; transform: translate(-50%, -50%); }
.hero-title { margin: 0; font: 400 clamp(28px, 5.04vw, 97px)/1.1 Anton, Impact, sans-serif; letter-spacing: .015em; }
.title-row { display: flex; gap: 2%; align-items: center; height: 1.12em; white-space: nowrap; }
.hero-word { display: block; flex: 0 0 auto; }
.capsule { position: relative; display: block; flex: 0 0 auto; height: .80em; border-radius: 100px; overflow: hidden; }
.capsule-sport::after { content: ''; position: absolute; z-index: 2; inset: 0; border: 1px solid rgba(255, 255, 255, .4); border-radius: inherit; pointer-events: none; }
.capsule-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.capsule-sport { width: 34%; background: #147e9e; }
.capsule-jersey { width: 22%; background: #e78e21; }
.capsule-motion { width: 30%; background: #dce8dc; }
.row-two, .row-three { padding-left: 25.2%; }
/* Percentages remain relative to the full composition, rather than padded rows. */
.row-two .capsule { width: 29.4%; }
.row-three .capsule { width: 40.1%; }
.row-three { gap: 0; }
.collection-note, .composition-note { position: absolute; font: 700 clamp(8px, .84vw, 14px)/1.05 "Courier New", monospace; }
.collection-note { top: 6%; left: 70.5%; }
.composition-note { top: 44.5%; left: 10.6%; }
.hero-caption { padding-top: .7em; text-align: right; font-size: clamp(8px, .83vw, 14px); font-weight: 700; white-space: nowrap; }
.hero-footer { position: absolute; bottom: 3.5%; left: 0; right: 0; text-align: center; font-size: clamp(9px, .83vw, 14px); line-height: 1.1; text-shadow: 0 1px 5px #001b3033; }
.credits { width: max-content; max-width: 90%; margin: 0 auto 3.1em; text-align: justify; text-align-last: justify; font-weight: 700; }
.footer-index { font-weight: 400; }
.is-unavailable .capsule-image { visibility: hidden; }
.text-motion-pending .text-motion { opacity: 0; }
.motion-char { display: inline-block; white-space: pre; }
.capsule.is-jelly-active { z-index: 1; }
.capsule-intro-pending .capsule { opacity: 0; }
.warp-active { color: transparent !important; text-shadow: none !important; }
.warp-text-canvas { position: fixed; display: none; pointer-events: none; z-index: 5; }
.warp-text-canvas.is-active { display: block; }
@media (min-width: 1950px) { .hero-title { font-size: 97px; } }
@media (max-width: 1000px) and (min-height: 561px) {
  .hero-composition { width: 76%; left: 50%; }
  .hero-title { font-size: 6.75vw; }
  .edge-label { top: 69%; }
  .collection-note, .composition-note { font-size: 9px; }
  .hero-caption { font-size: 9px; }
}
@media (max-width: 600px) {
  .hero { min-height: 560px; }
  .hero-header { inset: 18px 18px auto; grid-template-columns: 1fr 1fr; gap: 22px; font-size: 9px; line-height: 1.12; }
  .header-center { position: absolute; top: 62px; left: 50%; width: 180px; transform: translateX(-50%); font-size: 8px; }
  .header-right { grid-column: 2; }
  .hero-composition { top: 45%; left: 50%; width: calc(100% - 36px); max-width: 500px; }
  .hero-title { font-size: 9.6vw; line-height: 1.16; letter-spacing: -.018em; }
  .title-row { height: 1.25em; gap: 3%; }
  .row-two, .row-three { padding-left: 0; }
  .row-one .capsule { width: 39%; }
  .row-two { justify-content: flex-end; }
  .row-two .capsule { width: 22%; }
  .row-three .capsule { width: 28%; }
  .collection-note { top: -37px; left: auto; right: 1px; font-size: 8px; }
  .composition-note { top: auto; bottom: -59px; left: 0; font-size: 8px; }
  .hero-caption { padding-top: 14px; font-size: 7px; letter-spacing: -.01em; white-space: normal; text-align: right; max-width: 76%; margin-left: auto; line-height: 1.4; }
  .edge-label { top: 70%; font-size: 9px; }
  .edge-left { left: 18px; }
  .edge-right { right: 18px; }
  .hero-footer { bottom: 24px; padding: 0 18px; font-size: 8px; }
  .credits { margin-bottom: 29px; font-size: 9px; line-height: 1.2; }
  .footer-index { font-size: 7px; letter-spacing: .015em; }
}
@media (max-height: 560px) and (min-width: 601px) {
  .hero { min-height: 350px; }
  .hero-composition { width: 57%; top: 45%; }
  .hero-title { font-size: 5vw; }
  .hero-header, .edge-label, .collection-note, .composition-note, .hero-caption { font-size: 8px; }
  .credits { margin-bottom: 15px; font-size: 8px; }
  .hero-footer { bottom: 12px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .warp-active { color: var(--paper) !important; }
  .warp-text-canvas { display: none !important; }
  .capsule-intro-pending .capsule { opacity: 1; }
  .text-motion-pending .text-motion { opacity: 1; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}