/* ═══════════════════════════════════════════════════════════
   FIDEL CATSTRO — COMIC ISSUE #1
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#0A0A0B;
  --soot:#17181A;
  --lime:#C8F32B;
  --acid:#E7FF52;
  --moss:#8FBF14;
  --paper:#F3EEDD;
  --blood:#E23417;
  --cyan:#33E2E2;
  --grape:#6C3BF4;

  --ink-w:4px;                       /* comic outline weight */
  --pop: 10px 10px 0 var(--ink);     /* hard comic shadow    */
  --pop-sm: 6px 6px 0 var(--ink);
  --pop-lime: 10px 10px 0 var(--lime);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{ margin:0; background:var(--ink); }

::selection{ background:var(--lime); color:var(--ink); }

/* comic scrollbar */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--lime); border:3px solid var(--ink); }

/* ───────────────────────────────────────────────────────────
   THE WORLD — fixed art background behind the whole site
   ─────────────────────────────────────────────────────────── */
.world{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.world__collage{
  position:absolute; inset:-6%;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
}
.world__tile{
  background-size:cover; background-position:center;
  filter:grayscale(.35) contrast(1.15) brightness(.42) saturate(1.25);
  opacity:.55;
  animation:driftTile 26s ease-in-out infinite alternate;
}
.world__tile:nth-child(2){ animation-delay:-7s; }
.world__tile:nth-child(3){ animation-delay:-13s; }
.world__tile:nth-child(4){ animation-delay:-19s; }
@keyframes driftTile{ from{ transform:scale(1.04) translate3d(0,0,0);} to{ transform:scale(1.12) translate3d(-1.5%,-1.5%,0);} }

/* rotating sunburst, straight out of the banner art */
.world__rays{
  position:absolute; left:50%; top:32%; width:200vmax; height:200vmax;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,
    rgba(200,243,43,.11) 0deg 6deg, transparent 6deg 14deg);
  animation:spin 90s linear infinite; opacity:.75;
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* halftone dots */
.world__halftone{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(0,0,0,.55) 1.2px, transparent 1.3px);
  background-size:5px 5px; opacity:.85; mix-blend-mode:multiply;
}
.world__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(10,10,11,.15) 0%, rgba(10,10,11,.82) 58%, #0A0A0B 100%),
    linear-gradient(180deg, rgba(10,10,11,.9), rgba(10,10,11,.55) 30%, rgba(10,10,11,.95));
}

main, .masthead, .foot, .ticker{ position:relative; z-index:2; }


/* ───────────────────────────────────────────────────────────
   SHARED COMIC PARTS
   ─────────────────────────────────────────────────────────── */
.ink{ border:var(--ink-w) solid var(--ink); }

.stamp-btn{
  --bg:var(--lime); --fg:var(--ink);
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.4rem;
  font-family:'Bangers',cursive; font-size:1.15rem; letter-spacing:.06em;
  background:var(--bg); color:var(--fg);
  border:var(--ink-w) solid var(--ink); border-radius:4px;
  box-shadow:var(--pop-sm);
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transform:rotate(-1.2deg);
  transition:transform .16s cubic-bezier(.2,1.4,.4,1), box-shadow .16s, filter .16s;
}
.stamp-btn:hover{ transform:rotate(-1.2deg) translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); filter:saturate(1.25); }
.stamp-btn:active{ transform:rotate(-1.2deg) translate(4px,4px); box-shadow:1px 1px 0 var(--ink); }
.stamp-btn--lime{ --bg:var(--lime); }
.stamp-btn--dark{ --bg:var(--soot); --fg:var(--lime); }
.stamp-btn--ghost{ --bg:var(--paper); --fg:var(--ink); }
.stamp-btn--sm{ padding:.5rem .9rem; font-size:.95rem; box-shadow:4px 4px 0 var(--ink); }
.stamp-btn--xl{ padding:1.15rem 2.2rem; font-size:1.7rem; box-shadow:var(--pop); }
.stamp-btn.is-soon{ --bg:#4a4a4a; --fg:#cfcfcf; cursor:not-allowed; filter:none; }

.brand-svg{ width:1.35em; height:1.35em; }

.ico-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; font-size:1.15rem;
  background:var(--paper); color:var(--ink);
  border:3px solid var(--ink); border-radius:50%;
  box-shadow:3px 3px 0 var(--ink); text-decoration:none;
  transition:transform .16s, background .16s, color .16s;
}
.ico-btn:hover{ background:var(--lime); transform:translate(-2px,-2px) rotate(-6deg); box-shadow:5px 5px 0 var(--ink); }
.ico-btn--tiny{ width:34px; height:34px; font-size:.9rem; box-shadow:2px 2px 0 var(--ink); }

/* speech bubbles */
.bubble{ position:relative; background:var(--paper); color:var(--ink);
  border:var(--ink-w) solid var(--ink); border-radius:18px;
  padding:1rem 1.15rem; box-shadow:var(--pop-sm); }
.bubble p{ margin:0; font-weight:700; line-height:1.35; }
.bubble--say{ max-width:34rem; font-size:1.12rem; transform:rotate(.8deg); }
.bubble--say::after{ content:""; position:absolute; left:2.4rem; bottom:calc(-1 * var(--ink-w) - 20px);
  border:12px solid transparent; border-top:22px solid var(--ink); }
.bubble--say::before{ content:""; position:absolute; left:2.6rem; bottom:-14px; z-index:1;
  border:9px solid transparent; border-top:16px solid var(--paper); }
.bubble--think{ position:absolute; right:.9rem; bottom:.9rem; max-width:15rem;
  border-radius:26px; font-size:.95rem; transform:rotate(-1.5deg); }
.bubble--shout{ background:var(--lime); font-family:'Bangers',cursive; letter-spacing:.04em;
  font-size:clamp(1.3rem,3vw,2.1rem); line-height:1.15; text-align:center;
  border-radius:8px; transform:rotate(-1deg); box-shadow:var(--pop); }

/* section headers */
.sec-head{ position:relative; z-index:3; max-width:70rem; margin:0 auto 3.5rem; padding:0 1.25rem; text-align:center; }
.sec-head__no{
  display:inline-block; font-family:'Archivo Black',sans-serif; font-size:.85rem; letter-spacing:.35em;
  background:var(--blood); color:var(--paper); padding:.4rem .9rem .35rem 1.05rem;
  border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); transform:rotate(-2deg);
}
.sec-head__title{
  margin:1.1rem 0 .5rem; font-family:'Bangers',cursive; line-height:.92;
  font-size:clamp(2.8rem,9vw,6rem); letter-spacing:.02em; color:var(--lime);
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink),
    8px 10px 0 rgba(0,0,0,.75);
}
.sec-head__sub{ margin:0; font-size:1.05rem; font-weight:700; color:#c9c6bb; }
.sec-head--light .sec-head__title{ color:var(--paper); }


/* ───────────────────────────────────────────────────────────
   MASTHEAD
   ─────────────────────────────────────────────────────────── */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:1rem;
  padding:.7rem clamp(.9rem,3vw,2rem);
  background:rgba(10,10,11,.86); backdrop-filter:blur(10px);
  border-bottom:var(--ink-w) solid var(--lime);
}
.masthead::after{
  content:""; position:absolute; left:0; right:0; bottom:calc(-1 * var(--ink-w) - 6px); height:6px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--lime) 14px 28px);
}
.masthead__brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.masthead__mark{ display:block; width:46px; height:46px; border:3px solid var(--lime); border-radius:50%;
  overflow:hidden; box-shadow:3px 3px 0 var(--ink); flex:none; }
.masthead__mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.masthead__word b{ display:block; font-family:'Bangers',cursive; font-size:1.35rem; letter-spacing:.05em;
  color:var(--paper); line-height:1; }
.masthead__word i{ display:block; font-style:normal; font-family:'Chakra Petch',sans-serif;
  font-size:.65rem; letter-spacing:.18em; color:var(--lime); text-transform:uppercase; }

.masthead__nav{ display:flex; gap:.35rem; margin-left:auto; }
.masthead__nav a{
  position:relative; padding:.45rem .85rem; text-decoration:none;
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:.9rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--paper);
  border:3px solid transparent; border-radius:4px; transition:.16s;
}
.masthead__nav a:hover, .masthead__nav a.is-active{
  color:var(--ink); background:var(--lime); border-color:var(--ink); box-shadow:3px 3px 0 var(--ink);
  transform:translateY(-1px);
}
.masthead__side{ display:flex; align-items:center; gap:.55rem; }
.burger{ display:none; width:44px; height:44px; font-size:1.5rem; background:var(--lime); color:var(--ink);
  border:3px solid var(--ink); border-radius:4px; box-shadow:3px 3px 0 var(--ink); cursor:pointer; }


/* ───────────────────────────────────────────────────────────
   1 · HERO
   ─────────────────────────────────────────────────────────── */
.hero{ position:relative; padding:8.5rem 1.25rem 4rem; min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
.hero__stage{ perspective:1400px; perspective-origin:50% 45%; max-width:82rem; margin:0 auto; width:100%; }
.hero__grid{
  position:relative; z-index:4; transform-style:preserve-3d;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}

/* floating background panels */
.float-panel{
  position:absolute; width:clamp(150px,17vw,260px); aspect-ratio:1;
  border:var(--ink-w) solid var(--ink); background:var(--soot);
  box-shadow:var(--pop); overflow:hidden; z-index:1; opacity:.9;
  animation:bob 9s ease-in-out infinite;
}
.float-panel img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.1) saturate(1.15); }
.float-panel::after{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(0,0,0,.4) 1px, transparent 1.1px); background-size:4px 4px; }
.float-panel--a{ top:2%;  left:-4%;  transform:rotate(-7deg)  translateZ(-90px); animation-delay:-1s; }
.float-panel--b{ top:8%;  right:-5%; transform:rotate(6deg)   translateZ(-150px); animation-delay:-4s; }
.float-panel--c{ bottom:-4%; left:16%; transform:rotate(4deg) translateZ(-200px); animation-delay:-6.5s; width:clamp(120px,13vw,200px); }
@keyframes bob{ 0%,100%{ margin-top:0; } 50%{ margin-top:-16px; } }

.hero__copy{ position:relative; z-index:5; transform-style:preserve-3d; }

.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink); background:var(--lime);
  padding:.4rem .85rem; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-1.5deg);
}
.kicker i{ color:var(--blood); }

.hero__title{ margin:1.1rem 0 1.2rem; font-family:'Bangers',cursive; line-height:.8; }
.hero__title .line{ display:block; letter-spacing:.01em; }
.hero__title .line--1{
  font-size:clamp(3.2rem,10vw,7rem); color:var(--paper);
  text-shadow:
    4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink),
    4px 4px 0 var(--ink), -4px 4px 0 var(--ink), 4px -4px 0 var(--ink), -4px -4px 0 var(--ink),
    10px 12px 0 var(--blood);
  transform:rotate(-2deg);
}
.hero__title .line--2{
  font-size:clamp(4rem,13.5vw,9.2rem); color:var(--lime); margin-left:.06em;
  text-shadow:
    4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink),
    4px 4px 0 var(--ink), -4px 4px 0 var(--ink), 4px -4px 0 var(--ink), -4px -4px 0 var(--ink),
    9px 9px 0 var(--ink), 14px 16px 0 rgba(0,0,0,.65);
  transform:rotate(-1deg);
}

.ticket{
  display:inline-grid; grid-template-columns:auto auto auto auto auto auto;
  gap:.15rem .55rem; align-items:center; margin-bottom:1.3rem;
  background:var(--soot); border:3px solid var(--lime); padding:.5rem .8rem;
  box-shadow:5px 5px 0 var(--ink); transform:rotate(.7deg);
}
.ticket span{ font-family:'Chakra Petch',sans-serif; font-size:.6rem; letter-spacing:.16em;
  color:var(--moss); text-transform:uppercase; }
.ticket b{ font-family:'Bangers',cursive; font-size:1.05rem; letter-spacing:.04em; color:var(--paper);
  padding-right:.7rem; margin-right:.15rem; border-right:2px dashed #3a3d33; }
.ticket b:last-of-type{ border-right:0; padding-right:0; }

/* contract strip */
.ca-strip{
  display:flex; align-items:stretch; margin:1.4rem 0;
  border:var(--ink-w) solid var(--ink); background:var(--soot);
  box-shadow:var(--pop-sm); max-width:40rem; overflow:hidden; transform:rotate(-.6deg);
}
.ca-strip--center{ margin:3.5rem auto 0; max-width:44rem; position:relative; z-index:5; }
.ca-strip__tag{
  display:flex; align-items:center; padding:0 .9rem; flex:none;
  background:var(--blood); color:var(--paper);
  font-family:'Bangers',cursive; font-size:1.2rem; letter-spacing:.1em;
  border-right:var(--ink-w) solid var(--ink);
}
.ca-strip__val{
  flex:1; min-width:0; display:flex; align-items:center; padding:.75rem .9rem;
  font-family:'Chakra Petch',monospace; font-size:.9rem; letter-spacing:.02em; color:var(--lime);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ca-strip__copy{
  display:flex; align-items:center; gap:.4rem; flex:none; padding:0 1.1rem; cursor:pointer;
  background:var(--lime); color:var(--ink); border:0; border-left:var(--ink-w) solid var(--ink);
  font-family:'Bangers',cursive; font-size:1rem; letter-spacing:.08em; transition:background .15s;
}
.ca-strip__copy:hover{ background:var(--acid); }
.ca-strip__copy.is-done{ background:var(--paper); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.5rem; }

/* character plate */
.hero__plate{ position:relative; z-index:5; transform-style:preserve-3d; display:flex; justify-content:center; }
.plate{
  position:relative; margin:0; width:min(100%,26rem);
  background:var(--paper); border:var(--ink-w) solid var(--ink);
  box-shadow:var(--pop), 0 0 0 12px rgba(200,243,43,.12);
  transform:rotate(3deg) rotateY(-9deg) rotateX(3deg);
  transition:transform .35s cubic-bezier(.2,1.2,.3,1);
}
.plate:hover{ transform:rotate(0deg) rotateY(0deg) rotateX(0deg) scale(1.02); }
.plate img{ display:block; width:100%; border-bottom:var(--ink-w) solid var(--ink); }
.plate figcaption{
  padding:.7rem .9rem; font-family:'Comic Neue',cursive; font-weight:700; font-size:.9rem;
  color:var(--ink); background:var(--paper); text-transform:uppercase; letter-spacing:.02em;
}
.tape{ position:absolute; width:110px; height:34px; background:rgba(231,255,82,.72);
  border:2px solid rgba(10,10,11,.5); box-shadow:2px 2px 0 rgba(0,0,0,.35); }
.tape--tl{ top:-16px; left:-26px; transform:rotate(-24deg); }
.tape--br{ bottom:-14px; right:-24px; transform:rotate(-18deg); }

/* POW burst */
.burst{
  position:absolute; top:-34px; right:-14px; z-index:6; width:150px; height:150px;
  display:grid; place-items:center; background:var(--blood);
  clip-path:polygon(50% 0,60% 18%,78% 8%,78% 28%,97% 26%,86% 43%,100% 55%,82% 63%,92% 82%,72% 78%,68% 97%,52% 84%,38% 100%,32% 80%,13% 87%,17% 67%,0 58%,15% 45%,4% 27%,24% 28%,22% 8%,40% 17%);
  animation:pulseBurst 2.4s ease-in-out infinite; transform:rotate(-8deg);
}
.burst__txt{ font-family:'Bangers',cursive; font-size:1.05rem; line-height:1; color:var(--paper);
  text-align:center; letter-spacing:.04em; text-shadow:2px 2px 0 rgba(0,0,0,.6); }
@keyframes pulseBurst{ 0%,100%{ transform:rotate(-8deg) scale(1);} 50%{ transform:rotate(-4deg) scale(1.07);} }

.scroll-cue{
  position:relative; z-index:5; margin:3rem auto 0; text-decoration:none;
  font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:.75rem; letter-spacing:.28em;
  color:var(--lime); display:flex; align-items:center; gap:.5rem; animation:bob 2.4s ease-in-out infinite;
}


/* ───────────────────────────────────────────────────────────
   TICKER
   ─────────────────────────────────────────────────────────── */
.ticker{ overflow:hidden; background:var(--lime); border-top:var(--ink-w) solid var(--ink);
  border-bottom:var(--ink-w) solid var(--ink); transform:rotate(-1.2deg) scaleX(1.06); margin:1rem 0 5rem; }
.ticker__row{ display:flex; gap:1.6rem; align-items:center; width:max-content; padding:.5rem 0;
  animation:slide 28s linear infinite; }
.ticker__row span{ font-family:'Bangers',cursive; font-size:1.35rem; letter-spacing:.08em; color:var(--ink); white-space:nowrap; }
.ticker__row i{ font-size:.7rem; color:var(--ink); }
@keyframes slide{ to{ transform:translateX(-50%); } }


/* ───────────────────────────────────────────────────────────
   2 · ABOUT — the comic page
   ─────────────────────────────────────────────────────────── */
.about{ padding:2rem 1.25rem 7rem; }
.page-wrap{ perspective:2000px; perspective-origin:50% 40%; max-width:80rem; margin:0 auto; }

.page{
  position:relative;
  display:grid; gap:14px;
  grid-template-columns:repeat(4,1fr);
  grid-template-areas:
    "wide wide tall text"
    "sq   sfx  tall text";
  padding:16px 16px 40px;
  background:var(--paper);
  border:6px solid var(--ink);
  box-shadow:26px 26px 0 rgba(0,0,0,.55), 0 0 0 3px var(--lime);
  transform:rotateY(-7deg) rotateX(3deg) rotate(-.6deg);
  transition:transform .6s cubic-bezier(.2,.9,.25,1);
}
.page.is-open{ transform:rotateY(0deg) rotateX(0deg) rotate(0deg); }
.page::before{ /* paper grain */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.16) 1px, transparent 1.1px);
  background-size:4px 4px; opacity:.5;
}

.cell{ position:relative; overflow:hidden; background:var(--soot);
  border:var(--ink-w) solid var(--ink); min-height:180px; }
.cell img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.cell:hover img{ transform:scale(1.06); }
.cell--wide{ grid-area:wide; min-height:280px; }
.cell--tall{ grid-area:tall; }
.cell--sq{ grid-area:sq; }
.cell--sfx{ grid-area:sfx; }
.cell--text{ grid-area:text; background:var(--paper); color:var(--ink); padding:1.15rem 1.1rem; overflow:auto; }

.caption{
  position:absolute; top:0; left:0; max-width:80%;
  background:var(--acid); color:var(--ink);
  font-family:'Comic Neue',cursive; font-weight:700; font-size:.78rem; letter-spacing:.04em;
  padding:.4rem .6rem; border-right:var(--ink-w) solid var(--ink); border-bottom:var(--ink-w) solid var(--ink);
}
.caption--r{ left:auto; right:0; border-right:0; border-left:var(--ink-w) solid var(--ink); }

.sfx{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-family:'Bangers',cursive; font-size:clamp(1.6rem,4vw,2.6rem); line-height:.95; letter-spacing:.03em;
  color:var(--acid); transform:rotate(-9deg);
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 6px 8px 0 var(--blood);
  pointer-events:none;
}

.cell--text h3{
  margin:0 0 .6rem; font-family:'Bangers',cursive; font-size:1.6rem; letter-spacing:.03em; color:var(--ink);
  border-bottom:4px solid var(--ink); padding-bottom:.35rem;
}
.cell--text p{ margin:0 0 .75rem; font-size:.95rem; line-height:1.5; font-weight:400; }
.dropcap{ float:left; font-family:'Bangers',cursive; font-size:2.7rem; line-height:.8; padding:.05em .18em 0 0; color:var(--blood); }
.hl{ background:var(--lime); box-shadow:0 0 0 3px var(--lime); }

.dossier{ list-style:none; margin:.9rem 0 0; padding:0; border-top:3px dashed var(--ink); }
.dossier li{ display:flex; justify-content:space-between; gap:.6rem; align-items:baseline;
  padding:.35rem 0; border-bottom:2px dotted rgba(10,10,11,.35); }
.dossier span{ font-family:'Chakra Petch',sans-serif; font-size:.62rem; letter-spacing:.16em; opacity:.7; }
.dossier b{ font-family:'Bangers',cursive; font-size:1rem; letter-spacing:.04em; }

.page__corner{
  position:absolute; right:-3px; bottom:-3px; width:54px; height:54px;
  background:linear-gradient(135deg, transparent 50%, #d8d2bf 50%, var(--ink) 52%, var(--paper) 54%);
  border-left:3px solid var(--ink); border-top:3px solid var(--ink);
}
.page__num{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font-family:'Bangers',cursive; font-size:.9rem; letter-spacing:.2em; color:rgba(10,10,11,.6); }


/* ───────────────────────────────────────────────────────────
   3 · HOW TO BUY — the 3D corridor
   ─────────────────────────────────────────────────────────── */
.buy{ position:relative; padding:6rem 1.25rem 7rem; overflow:hidden;
  border-top:var(--ink-w) solid var(--lime); border-bottom:var(--ink-w) solid var(--lime); }
.buy__art{
  position:absolute; inset:0; background-size:cover; background-position:center; background-attachment:fixed;
  filter:grayscale(.2) brightness(.3) contrast(1.2); opacity:.75;
}
.buy::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 50%, transparent 20%, rgba(10,10,11,.85) 90%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.28) 0 4px, transparent 4px 12px);
}

.corridor{ perspective:1500px; perspective-origin:50% 50%; max-width:88rem; margin:0 auto; position:relative; z-index:3; }
.corridor__rail{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.4vw,2rem);
  transform-style:preserve-3d;
}

.step{
  --tilt:0deg; --z:0px;
  position:relative; padding:2.4rem 1.35rem 1.6rem;
  background:var(--paper); color:var(--ink);
  border:var(--ink-w) solid var(--ink); box-shadow:var(--pop);
  transform:rotateY(var(--tilt)) translateZ(var(--z));
  transition:transform .4s cubic-bezier(.2,1.1,.3,1), box-shadow .3s;
}
.corridor__rail .step:nth-child(1){ --tilt:19deg;  --z:-110px; }
.corridor__rail .step:nth-child(2){ --tilt:7deg;   --z:-14px;  }
.corridor__rail .step:nth-child(3){ --tilt:-7deg;  --z:-14px;  }
.corridor__rail .step:nth-child(4){ --tilt:-19deg; --z:-110px; }
.step:hover{ transform:rotateY(0deg) translateZ(70px); box-shadow:16px 16px 0 var(--ink); z-index:5; }

.step::after{ /* halftone corner */
  content:""; position:absolute; right:0; bottom:0; width:70px; height:70px; pointer-events:none;
  background-image:radial-gradient(var(--ink) 1.4px, transparent 1.5px); background-size:7px 7px;
  -webkit-mask-image:linear-gradient(315deg, #000, transparent); mask-image:linear-gradient(315deg, #000, transparent);
}
.step__no{
  position:absolute; top:-24px; left:-18px; width:56px; height:56px; display:grid; place-items:center;
  background:var(--blood); color:var(--paper); border:var(--ink-w) solid var(--ink); border-radius:50%;
  font-family:'Bangers',cursive; font-size:1.8rem; line-height:1; box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-8deg);
}
.step__art{
  display:grid; place-items:center; height:74px; margin-bottom:.9rem;
  background:var(--lime); border:3px solid var(--ink); box-shadow:inset 0 0 0 3px var(--paper);
  font-size:2.1rem; color:var(--ink);
}
.step__art svg{ width:2.4rem; height:2.4rem; }
.step h3{ margin:0 0 .45rem; font-family:'Bangers',cursive; font-size:1.5rem; letter-spacing:.03em; }
.step p{ margin:0; font-size:.92rem; line-height:1.45; }
.step__link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; text-decoration:none;
  font-family:'Bangers',cursive; font-size:.95rem; letter-spacing:.07em;
  color:var(--ink); background:var(--lime); padding:.35rem .7rem;
  border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
}
.step__link:hover{ background:var(--acid); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }


/* ───────────────────────────────────────────────────────────
   4 · COMMUNITY
   ─────────────────────────────────────────────────────────── */
.crowd{ position:relative; padding:6.5rem 1.25rem 7rem; overflow:hidden; }
.crowd__art{
  position:absolute; inset:0; background-size:cover; background-position:center 30%; background-attachment:fixed;
  filter:brightness(.32) contrast(1.15) saturate(1.1); opacity:.8;
}
.crowd::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(200,243,43,.1), transparent 60%),
    linear-gradient(180deg, rgba(10,10,11,.9), rgba(10,10,11,.55) 35%, rgba(10,10,11,.95));
}

.cover-wrap{ perspective:1600px; max-width:76rem; margin:0 auto 4.5rem; position:relative; z-index:3; }
.cover{
  position:relative; background:var(--ink);
  border:6px solid var(--ink); box-shadow:20px 20px 0 rgba(0,0,0,.6), 0 0 0 4px var(--lime);
  transform:rotateX(9deg) rotate(-1.4deg);
  transition:transform .5s cubic-bezier(.2,1.1,.3,1);
}
.cover:hover{ transform:rotateX(0deg) rotate(0deg) translateY(-6px); }
.cover img{ display:block; width:100%; }
.cover__pin{ position:absolute; top:-14px; width:26px; height:26px; border-radius:50%;
  background:var(--blood); border:3px solid var(--ink); box-shadow:2px 3px 0 rgba(0,0,0,.6); }
.cover__pin--l{ left:6%; } .cover__pin--r{ right:6%; }
.cover__badge{
  position:absolute; right:-18px; bottom:-22px; padding:.6rem .8rem; text-align:center;
  background:var(--lime); color:var(--ink); border:var(--ink-w) solid var(--ink);
  font-family:'Bangers',cursive; font-size:1rem; line-height:1.05; letter-spacing:.06em;
  box-shadow:5px 5px 0 var(--ink); transform:rotate(-9deg);
}

.cards{ position:relative; z-index:3; display:grid; gap:1.6rem; max-width:76rem; margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.card{
  --accent:var(--lime);
  position:relative; display:block; padding:1.6rem 1.4rem 1.4rem; text-decoration:none;
  background:var(--soot); color:var(--paper);
  border:var(--ink-w) solid var(--ink); box-shadow:var(--pop-sm), inset 0 0 0 3px rgba(255,255,255,.05);
  transform:rotate(-1deg); transition:transform .25s cubic-bezier(.2,1.3,.35,1), box-shadow .25s, background .25s;
}
.card:nth-child(2){ transform:rotate(1.2deg); }
.card:nth-child(3){ transform:rotate(-.4deg); }
.card:hover{ transform:rotate(0deg) translate(-4px,-6px); box-shadow:12px 14px 0 var(--accent); background:#1e2023; }
.card__ico{ display:block; width:2.6rem; height:2.6rem; font-size:2.2rem; line-height:1; color:var(--accent); margin-bottom:.8rem; }
.card h3{ margin:0 0 .4rem; font-family:'Bangers',cursive; font-size:1.55rem; letter-spacing:.05em; color:var(--paper); }
.card p{ margin:0 0 1rem; font-size:.92rem; line-height:1.45; color:#bcbcb4; }
.card__go{ display:inline-flex; align-items:center; gap:.4rem; font-family:'Chakra Petch',sans-serif;
  font-weight:700; font-size:.78rem; letter-spacing:.16em; color:var(--accent); text-transform:uppercase; }
.card--x{ --accent:var(--paper); }
.card--buy{ --accent:var(--lime); }
.card--dex{ --accent:var(--cyan); }

.rally{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:2rem;
  margin-top:4.5rem; text-align:center; }


/* ───────────────────────────────────────────────────────────
   FOOTER
   ─────────────────────────────────────────────────────────── */
.foot{
  background:var(--ink); border-top:var(--ink-w) solid var(--lime);
  padding:3rem 1.5rem 2.5rem; display:grid; gap:1.5rem; justify-items:center; text-align:center;
}
.foot__brand{ display:flex; align-items:center; gap:.8rem; }
.foot__brand img{ width:56px; height:56px; border:3px solid var(--lime); border-radius:50%; object-fit:cover; }
.foot__brand b{ display:block; font-family:'Bangers',cursive; font-size:1.5rem; letter-spacing:.05em; color:var(--paper); }
.foot__brand span{ display:block; font-family:'Chakra Petch',sans-serif; font-size:.7rem; letter-spacing:.16em; color:var(--lime); }
.foot__ca{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.foot__ca code{ font-family:'Chakra Petch',monospace; font-size:.8rem; color:var(--lime);
  background:var(--soot); border:2px solid #2c2f26; padding:.45rem .7rem; max-width:88vw; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.foot__social{ display:flex; gap:.6rem; }
.foot__legal{ max-width:44rem; margin:0; font-size:.75rem; line-height:1.6; color:#7b7b74; }


/* ───────────────────────────────────────────────────────────
   TOAST
   ─────────────────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%) rotate(-2deg); z-index:90;
  display:flex; align-items:center; gap:.5rem; padding:.8rem 1.3rem;
  background:var(--lime); color:var(--ink); border:var(--ink-w) solid var(--ink);
  box-shadow:var(--pop-sm); font-family:'Bangers',cursive; font-size:1.15rem; letter-spacing:.07em;
  transition:transform .35s cubic-bezier(.2,1.4,.4,1);
}
.toast.is-up{ transform:translate(-50%,0) rotate(-2deg); }


/* ───────────────────────────────────────────────────────────
   REVEAL ON SCROLL
   ─────────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.25,1); }
.reveal.is-in{ opacity:1; transform:none; }


/* ───────────────────────────────────────────────────────────
   RESPONSIVE
   ─────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .corridor__rail{ grid-template-columns:repeat(2,1fr); }
  .corridor__rail .step:nth-child(1){ --tilt:11deg;  --z:-40px; }
  .corridor__rail .step:nth-child(2){ --tilt:-11deg; --z:-40px; }
  .corridor__rail .step:nth-child(3){ --tilt:11deg;  --z:-40px; }
  .corridor__rail .step:nth-child(4){ --tilt:-11deg; --z:-40px; }
  .page{
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "wide wide"
      "tall text"
      "sq   sfx";
    transform:rotateY(-3deg) rotate(-.4deg);
  }
  .cell--tall{ min-height:320px; }
}

@media (max-width:900px){
  .masthead__nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; padding:.6rem;
    background:var(--ink); border-bottom:var(--ink-w) solid var(--lime); display:none;
  }
  .masthead__nav.is-open{ display:flex; }
  .masthead__nav a{ border-radius:0; padding:.75rem 1rem; }
  .burger{ display:grid; place-items:center; }
  .masthead__side .stamp-btn--sm{ display:none; }

  .hero{ padding-top:7rem; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__plate{ order:-1; margin-bottom:1rem; }
  .plate{ width:min(100%,20rem); transform:rotate(2deg); }
  .burst{ width:110px; height:110px; top:-22px; right:0; }
  .burst__txt{ font-size:.8rem; }
  .float-panel--a{ top:auto; bottom:-6%; left:-8%; opacity:.5; }
  .float-panel--b{ top:2%; right:-10%; opacity:.5; }
  .float-panel--c{ display:none; }
  .ticket{ grid-template-columns:auto auto; }
  .ticket b{ border-right:0; padding-right:0; }
  .buy__art, .crowd__art{ background-attachment:scroll; }
}

@media (max-width:680px){
  :root{ --ink-w:3px; }
  .page{
    grid-template-columns:1fr;
    grid-template-areas: "wide" "text" "tall" "sq" "sfx";
    transform:none; box-shadow:14px 14px 0 rgba(0,0,0,.55), 0 0 0 3px var(--lime);
  }
  .cell--tall{ min-height:260px; }
  .corridor__rail{ grid-template-columns:1fr; }
  .corridor__rail .step{ --tilt:0deg; --z:0px; }
  .step:hover{ transform:none; }
  .ca-strip{ flex-wrap:wrap; }
  .ca-strip__val{ order:3; flex-basis:100%; border-top:3px solid var(--ink); font-size:.72rem; }
  .ca-strip__copy{ flex:1; justify-content:center; }
  .hero__cta .stamp-btn{ flex:1 1 100%; justify-content:center; }
  .cover__badge{ right:-6px; bottom:-16px; font-size:.8rem; }
  .stamp-btn--xl{ font-size:1.25rem; padding:.9rem 1.3rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}