@font-face { font-family: 'Fayte Pixel'; src: url('../assets/fonts/fayte-pixel-hard.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --bg-black: #030000;
  --bg-red: #ff3c51;
  --text-red: #ff3048;
  --glitch-red: #ff3048;
  --font-display: 'Pirata One', Georgia, serif;
  --font-mono: 'VT323', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg-red); color: var(--text-red); font-family: var(--font-mono); line-height: 1.3; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1,h2,h3,p,ul,ol { margin: 0; padding: 0; }
ul,ol { list-style: none; }
a,button { -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Each composition scales from its own width, including after browser zoom. */
.hero { position: relative; container-type: inline-size; background: #fb263b; }
.hero__image { width: 100%; height: auto; }
.hero-nav { position: relative; width: 90%; margin: 0 auto; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; color: #080000; border-bottom: 1px solid #080000; }
.hero-nav__brand { display: flex; flex-direction: column; line-height: 1; padding: 5px 8px; }
.hero-nav__brand span { font-size: 10px; letter-spacing: .12em; }
.hero-nav__brand strong { font: 34px/1.1 var(--font-display); }
.hero-nav__links { display: flex; gap: clamp(14px,2.5cqw,36px); font-size: 20px; text-transform: uppercase; }
.hero-nav__links a { display: flex; align-items: baseline; gap: 7px; padding: 9px 5px; }
.hero-nav__index { font-size: 11px; opacity: .65; }
.hero-nav__wallet { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid #080000; background: transparent; color: #080000; font-size: 18px; text-transform: uppercase; }
.hero-nav__arrow { font-size: 26px; line-height: 1; }
:is(.hero-nav a,.hero-nav__wallet,.frame-nav__logo,.frame-nav__menu a,.frame-nav__cta) { position: relative; transition: transform .25s ease; }
:is(.hero-nav a,.hero-nav__wallet,.frame-nav__logo,.frame-nav__menu a,.frame-nav__cta):is(:hover,:focus-visible) { transform: scale(1.08); }
:is(.hero-nav a,.hero-nav__wallet,.frame-nav__logo,.frame-nav__menu a,.frame-nav__cta)::before,
:is(.hero-nav a,.hero-nav__wallet,.frame-nav__logo,.frame-nav__menu a,.frame-nav__cta)::after { content: ''; position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; transition: width .35s ease, height .35s ease .08s, opacity .2s; }
:is(.hero-nav a,.hero-nav__wallet,.frame-nav__logo,.frame-nav__menu a,.frame-nav__cta)::before { left: -4px; top: -4px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; }
:is(.hero-nav a,.hero-nav__wallet,.frame-nav__logo,.frame-nav__menu a,.frame-nav__cta)::after { right: -4px; bottom: -4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; }
:is(.hero-nav a,.hero-nav__wallet,.frame-nav__logo,.frame-nav__menu a,.frame-nav__cta):is(:hover,:focus-visible)::before,
:is(.hero-nav a,.hero-nav__wallet,.frame-nav__logo,.frame-nav__menu a,.frame-nav__cta):is(:hover,:focus-visible)::after { width: 30%; height: 70%; opacity: 1; }

.about { position: relative; container-type: inline-size; background: var(--bg-black); margin-top: -4.7%; z-index: 1; }
.about__matrix { position: absolute; left: 0; width: 100%; background: var(--bg-black); pointer-events: none; }
.about__inner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48cqw; padding: 8cqw 22%; }
.about__content { width: 100%; }
.about__glitch-text { font-size: 2.1cqw; font-weight: bold; letter-spacing: .09em; text-transform: uppercase; line-height: 1.15; }
.about__line { display: block; width: max-content; max-width: 100%; }
.about__line:nth-child(3n) { margin-left: 20%; }
.about__line:nth-child(3n + 1) { margin-left: 5%; }
.about__line:nth-child(4n) { margin-left: 29%; }
.about__rail { position: absolute; top: 6%; bottom: 5%; width: 10%; display: flex; flex-direction: column; align-items: center; justify-content: space-around; pointer-events: none; }
.about__rail--left { left: 10%; }
.about__rail--right { right: 9%; }
.about__letter { width: 100%; height: 18%; object-fit: contain; animation: letter-float 7s ease-in-out infinite alternate; }
.about__letter--a { --float-x: 14%; --float-y: -12%; --float-turn: 10deg; animation-delay: -2s; }
.about__letter--b { --float-x: -22%; --float-y: 15%; --float-turn: -12deg; animation-delay: -5s; animation-duration: 9s; }
.about__letter--o { --float-x: 26%; --float-y: 8%; --float-turn: 14deg; animation-delay: -1s; animation-duration: 8s; }
.about__letter--u { --float-x: -16%; --float-y: -14%; --float-turn: -8deg; animation-delay: -4s; }
.about__letter--t { --float-x: 20%; --float-y: 12%; --float-turn: 9deg; animation-delay: -6s; animation-duration: 10s; }
.about__rail--right .about__letter { animation-direction: alternate-reverse; }
.glyph { display: inline-block; }
.glyph.is-glitching { background: var(--text-red); color: #000; }

.frame { position: relative; container-type: inline-size; width: 90%; max-width: 1500px; margin: 10% auto 1%; border: clamp(3px,.65vw,9px) solid #ff6876; background: #000; }
.frame-nav { position: absolute; inset: 0 0 auto; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 8px 3.5%; height: 45px; }
.frame-nav__logo { font: clamp(12px,1.7cqw,23px) var(--font-display); background: #000; padding: 0 8px; white-space: nowrap; }
.frame-nav__menu { display: flex; align-items: center; gap: 20px; background: #000; padding: 4px 12px; }
.frame-nav__menu a { display: block; font-size: clamp(10px,1cqw,14px); text-transform: uppercase; white-space: nowrap; }
.frame-nav__socials { display: flex; gap: 9px; }
.frame-nav__icon { fill: currentColor; width: 12px; height: 12px; }
.frame-nav__cta { background: #000; color: var(--text-red); border: 1px solid currentColor; text-transform: uppercase; font-size: clamp(10px,1.05cqw,14px); padding: 3px 8px; white-space: nowrap; }
.frame-nav__toggle { display: none; }
.corner-hover:hover { color: #ff6473; }

/* Crown image and title use the original artwork's 1063 × 777 coordinate system. */
.product-hero { position: relative; container-type: inline-size; aspect-ratio: 1063/777; isolation: isolate; background: #ff142e; }
.product-hero__crown { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none; }
.product-hero:after { content: ''; position: absolute; inset: 78% 0 0; background: linear-gradient(transparent,#000); pointer-events: none; }
.product-hero__taglines { position: absolute; left: 3.5%; right: 3.5%; top: 23%; display: flex; justify-content: space-between; font: 2cqw/1.1 var(--font-display); }
.product-hero__tagline { width: 36%; text-wrap: balance; }
.product-hero__tagline--right { text-align: right; }
.product-hero__tagline span { background: #000; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 3px; }
.product-hero__wordmark-band { position: absolute; top: 58.5%; height: 19.6%; width: 100%; display: grid; place-items: center; background: #000; z-index: 1; }
.product-hero__wordmark { font: 11.6cqw/1 'Fayte Pixel', var(--font-display); transform: scaleX(2.2); letter-spacing: -.025em; text-transform: uppercase; white-space: nowrap; }

.collection-info { padding: 2% 4% 7%; }
.collection-info h2,.roadmap h2 { position: relative; z-index: 2; display: inline-block; background: var(--text-red); color: #000; font: 3.8cqw/1 var(--font-display); text-transform: uppercase; margin-bottom: 3%; padding: 0 5px; }
.collection-info__body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3%; align-items: start; }
.collection-info__copy { position: relative; z-index: 2; font-size: clamp(14px,1.8cqw,25px); line-height: 1.25; }
.collection-info__lead { font: 3.7cqw/1.1 var(--font-display); text-transform: uppercase; margin-bottom: 4%; }
.collection-info__classes { display: grid; gap: 22px; margin: 6% 0 0 16%; }
.collection-info__classes h3 { font: 2.6cqw/1.1 var(--font-display); margin-bottom: 8px; text-transform: uppercase; }
.collection-info__classes p { font-size: .88em; }
.collection-info__crest { width: 100%; height: auto; mix-blend-mode: screen; animation: none; transform: none; }
.collection-info__mint { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4%; border-top: 1px solid #ff304855; margin-top: 5%; padding-top: 3%; }
.collection-info__mint span { font-size: clamp(10px,1.1cqw,17px); letter-spacing: .08em; }
.collection-info__mint strong { display: block; font: 3cqw/1.2 var(--font-display); margin: 4% 0; }
.collection-info__mint p { font-size: clamp(12px,1.4cqw,20px); line-height: 1.2; }
.collection-info__source { display: inline-block; margin-top: 3%; border-bottom: 1px solid; font-size: clamp(12px,1.4cqw,20px); }

.gallery { position: relative; padding: 0 1.5% 6%; isolation: isolate; }
.gallery__body { position: relative; }
.gallery__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3% 2.5%; width: 100%; align-items: center; }
.gallery__hand-cell { grid-column: 1; grid-row: 1; align-self: end; }
.gallery__hand-cell img { width: 95%; mix-blend-mode: screen; animation: none; transform: none; }
.nft-card { position: relative; min-width: 0; transition: transform .3s; }
.nft-card:nth-child(2) { grid-column: 2; grid-row: 1; }
.nft-card:nth-child(3) { grid-column: 3; grid-row: 1; }
.nft-card:nth-child(4) { grid-column: 1; grid-row: 2; }
.nft-card:nth-child(5) { grid-column: 2; grid-row: 2; }
.nft-card.is-active,.nft-card:focus-visible { transform: translateY(-6px) rotate(-2deg); z-index: 3; }
.nft-card:focus-visible { outline: 2px solid var(--text-red); outline-offset: 4px; }
.nft-card::before,.nft-card::after { content: ''; position: absolute; pointer-events: none; z-index: 5; width: 0; height: 0; opacity: 0; transition: width .35s ease, height .35s ease .2s, opacity .2s; }
.nft-card::before { top: -3px; left: -3px; border-top: 1px solid var(--text-red); border-left: 1px solid var(--text-red); }
.nft-card::after { bottom: -3px; right: -3px; border-bottom: 1px solid var(--text-red); border-right: 1px solid var(--text-red); }
.nft-card:is(.is-active,:focus-visible)::before,.nft-card:is(.is-active,:focus-visible)::after { width: calc(100% + 6px); height: calc(100% + 6px); opacity: 1; }
.nft-card__media { position: relative; aspect-ratio: 272/364; background: var(--text-red); }
.nft-card__media>img:first-child { position: absolute; inset: 4% 4% 5%; width: 92%; height: 91%; object-fit: cover; filter: grayscale(1); mix-blend-mode: multiply; transition: filter .45s; }
.nft-card.is-active .nft-card__media>img:first-child,.nft-card:focus-visible .nft-card__media>img:first-child { filter: grayscale(0); mix-blend-mode: normal; }
.nft-card__media .nft-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.nft-card:nth-child(4) .nft-card__frame { filter: hue-rotate(320deg) saturate(1.5); }
.nft-card__price { position: absolute; top: 0; left: 7%; right: 7%; background: var(--text-red); color: #000; text-align: center; font-size: 1.65cqw; line-height: 1; letter-spacing: .06em; z-index: 3; }
.nft-card__title { text-align: center; font: clamp(12px,2cqw,30px)/1.3 var(--font-display); padding: 5px 2px; }
.gallery__butterfly { position: absolute; right: -3%; bottom: -4%; width: 43%; z-index: -1; mix-blend-mode: screen; animation: none; transform: none; }

.roadmap { padding: 6% 4% 5%; overflow: hidden; }
.roadmap__body { position: relative; aspect-ratio: 1.8; }
.roadmap__crown { position: absolute; width: 125%; height: 180%; max-width: none; object-fit: contain; top: -39%; left: -12%; mix-blend-mode: screen; pointer-events: none; }
.roadmap__item { position: absolute; width: 29%; z-index: 1; }
.roadmap__stage { display: block; font: 6cqw/1 var(--font-display); text-transform: uppercase; }
.roadmap__label { display: block; font: 1.8cqw/1 var(--font-display); text-transform: uppercase; }
.roadmap__item--ch1 { top: 0; left: 65%; }
.roadmap__item--ch2 { top: 20%; left: 12%; text-align: center; }
.roadmap__item--ch3 { top: 42%; left: 70%; width: 27%; }
.roadmap__item--ch4 { top: 74%; left: 15%; }
.roadmap__item--ch3 .roadmap__label,.roadmap__desc { background: var(--text-red); color: #000; padding: 4px; }
.roadmap__desc { display: block; font-size: clamp(10px,1.2cqw,17px); line-height: 1.1; }

.site-footer { position: relative; isolation: isolate; aspect-ratio: 1366/857; background: var(--bg-red) url('../assets/footer-art.svg') center/100% 100% no-repeat; overflow: hidden; }
.site-footer__matrix { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.site-footer__marks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@keyframes letter-float { from { transform: translate(calc(var(--float-x) * -1),calc(var(--float-y) * -1)) rotate(calc(var(--float-turn) * -1)); } to { transform: translate(var(--float-x),var(--float-y)) rotate(var(--float-turn)); } }
@keyframes butterfly-drift { 50% { transform: translateY(-15px) rotate(-5deg) scale(.97); } }
@keyframes shoot-arrow { 0%,15% { transform: translateX(0); } 45%,60% { transform: translateX(-15px); } 75%,100% { transform: translateX(90px); opacity: 0; } }
@keyframes draw-string { 0%,65%,100% { transform: scaleX(1); transform-origin: 68px 48px; } 45%,60% { transform: scaleX(1.7); transform-origin: 68px 48px; } }
@keyframes loader-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

@media (max-width: 800px) {
  .hero-nav { width: 94%; padding: 12px 2px; gap: 10px; flex-wrap: wrap; }
  .hero-nav__brand { flex: 1; }
  .hero-nav__brand span { font-size: 8px; }
  .hero-nav__brand strong { font-size: 21px; }
  .hero-nav__wallet { padding: 6px 9px; font-size: 13px; gap: 7px; }
  .hero-nav__arrow { font-size: 20px; }
  .hero-nav__links a { gap: 4px; padding: 6px 2px; }
  .hero-nav__links { order: 3; width: 100%; justify-content: space-between; font-size: 14px; gap: 10px; border-top: 1px solid #08000033; padding-top: 7px; }
  .frame-nav__toggle { display: flex; flex-direction: column; gap: 4px; background: #000; border: 0; padding: 7px; color: var(--text-red); margin-left: auto; }
  .frame-nav__toggle-bar { width: 17px; height: 2px; background: currentColor; }
  .frame-nav__menu { display: none; position: absolute; top: 40px; left: 0; right: 0; padding: 15px 20px; flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--text-red); gap: 12px; }
  .frame-nav__menu.is-open { display: flex; }
  .frame-nav__menu a { font-size: 17px; padding: 3px; }
}
@media (max-width: 600px) {
  .frame { width: 94%; }
  .frame-nav { height: 40px; padding: 5px 3%; gap: 8px; }
  .frame-nav__logo { font-size: 16px; }
  .about__inner { min-height: 62cqw; padding: 10cqw 22%; }
  .about__glitch-text { font-size: 2.5cqw; }
  .about__rail--left { left: 7%; }
  .about__rail--right { right: 7%; }
  .product-hero__taglines { top: 25%; font-size: 2.6cqw; }
  .collection-info { padding-top: 5%; }
  .collection-info h2,.roadmap h2 { font-size: 5cqw; }
  .collection-info__body { position: relative; display: block; }
  .collection-info__copy { font-size: 15px; }
  .collection-info__lead { font-size: 7cqw; }
  .collection-info__copy>p { max-width: 72%; }
  .collection-info__crest { position: absolute; top: 0; right: -4%; width: 38%; opacity: .7; }
  .collection-info__classes { margin: 7% 0 0; gap: 18px; }
  .collection-info__classes h3 { font-size: 5cqw; }
  .collection-info__classes p { font-size: 15px; }
  .collection-info__mint { grid-template-columns: 1fr; gap: 18px; padding-top: 6%; }
  .collection-info__mint strong { font-size: 6cqw; margin: 2% 0; }
  .collection-info__mint p { font-size: 14px; }
  .collection-info__source { margin: 6% 0 4%; font-size: 14px; }
  .gallery__grid { width: 100%; }
  .nft-card__price { font-size: 2.3cqw; }
  .nft-card__title { font-size: 2.8cqw; }
  .roadmap__body { aspect-ratio: 1.35; }
  .roadmap__stage { font-size: 7cqw; }
  .roadmap__label { font-size: 2.8cqw; }
  .roadmap__item--ch3 { left: 66%; width: 34%; }
  .roadmap__item--ch1 { left: 62%; width: 38%; }
  .roadmap__crown { height: 160%; top: -30%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .page-loader { display: none; }
}
@media (scripting: none) { .page-loader { display: none; } }
@media (max-width: 600px) {
  .hero-nav { position: relative; top: auto; left: auto; width: 94%; margin: 0 auto; }
}