:root{
  color-scheme:dark;
  --paper:#0E1014; --card:#161A20; --ink:#F2F4F7;
  --muted:#98A1AE; --faint:#6C7583;
  --line:#272E38; --line-soft:#1E242C;
  --up:#FF6A00; --up-2:#FF9040; --up-soft:#2C1B0E;
  --gain:#2FBF71; --loss:#F0656B;
  --display:"Archivo Black",Impact,sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --w:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(14,16,20,.88);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.nav-in{--navgap:min(calc(30px + 5vw),150px);
  max-width:1420px;margin:0 auto;padding:13px clamp(16px,3%,60px);
  display:flex;align-items:center;justify-content:center;gap:var(--navgap)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
/* the brand mark is artwork now, so no plate behind it */
.mark{width:38px;height:38px;flex:none;display:grid;place-items:center;
  background:none;box-shadow:none;border-radius:0}
.mark img{width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 10px rgba(255,106,0,.28))}
.mark svg{width:18px;height:18px;color:#fff;display:block}
.brand-name{font-family:var(--display);font-size:24px;letter-spacing:-.02em}

/* links sit either side of the wordmark */
.nav-side{display:flex;gap:var(--navgap);min-width:0}
.nav-side a{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap;
  transition:color .18s ease}
/* brighter orange on hover reads better on the dark bar than the base brand
   tone; the deeper one lands on press so a click feels like it registered */
.nav-side a:hover{color:var(--up-2)}
.nav-side a:active{color:var(--up)}
.nav-side a:focus-visible{outline:2px solid var(--up-2);outline-offset:3px;border-radius:2px;
  color:var(--up-2)}

/* the wordmark follows the same rule */
.brand{transition:color .18s ease}
.brand:hover .brand-name{color:var(--up-2)}
.brand:active .brand-name{color:var(--up)}
.brand-name{transition:color .18s ease}
.spacer{flex:1}
/* mobile-only chrome, switched on by assets/mobile.css */
.nav-toggle,.mnav{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;
  font-weight:600;text-decoration:none;padding:10px 18px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
  white-space:nowrap;transition:transform .12s ease,background .15s ease}
.btn:hover{background:#1A1F26;border-color:#3A424E}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn.pri{background:var(--up);border-color:var(--up);color:#fff;box-shadow:0 2px 10px rgba(255,106,0,.3)}
.btn.pri:hover{background:#EE6000;border-color:#EE6000}
.btn.big{font-size:16px;padding:14px 26px;border-radius:11px}
.btn svg{width:15px;height:15px;flex:none}
.btn.soon{opacity:.5;pointer-events:none}

/* hero */
.hero{padding:70px 0 40px;text-align:center}
.hero.no-pill{padding-top:88px}
h1{font-family:var(--display);font-size:clamp(40px,8.6vw,96px);line-height:.92;
  letter-spacing:-.035em;margin:0 0 20px}
h1 em{font-style:normal;color:var(--up);display:block}
.hero p.sub{max-width:620px;margin:0 auto 28px;font-size:18px;color:#C3CAD4}
.hero p.sub b{font-weight:600;color:var(--ink)}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* marquee */
.marquee{background:var(--up);color:#0E1014;padding:13px 0;overflow:hidden}
.marquee-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee span{font-family:var(--display);font-size:15px;padding:0 22px;white-space:nowrap;
  text-transform:lowercase;letter-spacing:-.01em}
.marquee span i{font-style:normal;color:#fff}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
section{padding:64px 0}
.sec-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--up);margin:0 0 10px;font-weight:600}
h2{font-family:var(--display);font-size:clamp(28px,5vw,44px);line-height:1.02;
  letter-spacing:-.03em;margin:0 0 16px}
h2 em{font-style:normal;color:var(--up)}
.lede{font-size:17px;color:var(--muted);max-width:640px;margin:0 0 34px}

/* ===== the mechanic ===== */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch}
.node{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.node.hi{border-color:var(--up);box-shadow:0 0 0 3px var(--up-soft)}
.node .ntag{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin-bottom:9px}
.node h3{font-family:var(--display);font-size:19px;letter-spacing:-.02em;margin:0 0 7px}
.node p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.node p b{color:var(--ink);font-weight:600}
.arrow{display:grid;place-items:center;color:var(--up);font-size:22px;font-family:var(--mono)}

/* the pair asset gets its own treatment: darker than the cards above it, with
   an orange edge, because it is the one external thing the token depends on */
.pairbox{margin-top:16px;border-radius:14px;padding:24px 26px;
  background:linear-gradient(150deg,#1A2028,#12161C);
  border:1px solid #2D3742;border-left:3px solid var(--up);
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.pairbox .pl b{display:block;font-family:var(--display);font-size:22px;
  letter-spacing:-.02em;color:var(--ink)}
.pairbox .pl span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.pair-link{display:block;text-decoration:none;text-align:right;
  padding:12px 16px;border-radius:11px;border:1px solid #2D3742;
  background:rgba(255,255,255,.03);transition:border-color .18s ease,background .18s ease}
.pair-link:hover{border-color:var(--up);background:rgba(255,106,0,.07)}
.pl-addr{display:block;font-family:var(--mono);font-size:13px;color:var(--ink)}
.pl-go{display:block;font-family:var(--mono);font-size:10.5px;color:var(--up);margin-top:5px}

/* lore */
.lore{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.lore-lines p{font-size:19px;line-height:1.5;margin:0 0 16px;color:#CFD5DE}
.lore-lines p b{font-weight:700;color:var(--ink)}
/* the dates are the spine of the timeline, so they lean out of the prose */
.lore-d{font-style:italic;color:var(--ink);font-weight:600;margin-right:2px}
.lore-lines p.kick{font-family:var(--display);font-size:23px;line-height:1.22;
  letter-spacing:-.02em;color:var(--ink);margin-top:26px}
.lore-lines p.kick em{font-style:normal;color:var(--up)}

.receipt{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;
  position:sticky;top:88px}
.receipt-head{display:flex;align-items:center;gap:11px;padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);margin-bottom:14px}
.receipt-av{width:38px;height:38px;border-radius:50%;flex:none;
  background:linear-gradient(160deg,#3A424E,#8B939F);display:grid;place-items:center;
  font-family:var(--display);font-size:15px;color:#fff}
.receipt-who b{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.receipt-who span{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.receipt-q{font-size:16.5px;line-height:1.55;color:#CFD5DE;margin:0 0 14px}
.receipt-q b{font-weight:700;color:var(--ink)}
.receipt-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:9px;overflow:hidden;margin-bottom:13px}
.receipt-stat div{background:#1B2027;padding:10px 11px}
.receipt-stat b{display:block;font-family:var(--mono);font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums}
.receipt-stat b.dn{color:var(--loss)}
.receipt-stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
/* one linked story rather than a row of citation chips */
.receipt-story{display:block;text-decoration:none;border:1px solid var(--line);
  border-left:3px solid var(--up);border-radius:11px;padding:14px 16px;
  background:#12161C;transition:border-color .18s ease,background .18s ease}
.receipt-story:hover{background:#171C24;border-color:#3A424E;border-left-color:var(--up-2)}
.rs-meta{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.rs-head{display:block;font-size:14.5px;line-height:1.4;font-weight:600;color:var(--ink)}
.rs-go{display:block;font-family:var(--mono);font-size:11px;color:var(--up);margin-top:9px}
.receipt-story:hover .rs-go b{margin-left:3px}
.rs-go b{display:inline-block;transition:margin-left .18s ease}

/* addresses */
.ca{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 10px 10px 16px;display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ca.official{border-color:#2E5343;background:#0F1F19}
.ca-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);flex:none;min-width:64px}
.ca-val{font-family:var(--mono);font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ca-val.pending{color:var(--faint)}
.ca button{font-family:var(--mono);font-size:12px;padding:8px 14px;border-radius:7px;
  border:1px solid var(--line);background:#1A1F26;cursor:pointer;flex:none}
.ca button:hover{background:#12151A}
.warn{font-family:var(--mono);font-size:11.5px;color:var(--loss);background:#2A1618;
  border:1px solid #4B2A2D;border-radius:9px;padding:11px 15px;margin-top:12px;line-height:1.55}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;
  padding:8px 13px;border-radius:8px;border:1px solid var(--line);background:#1B2027;text-decoration:none}
.chip:hover{background:#1C2129}
.chip.pending{opacity:.5;pointer-events:none}
.chip .dotm{width:6px;height:6px;border-radius:50%;background:var(--faint)}


/* airdrop band */
.band{background:linear-gradient(150deg,#1B222C,#141920);color:#fff;
  border:1px solid #2C3540;border-radius:18px;padding:44px;
  display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
.band .sec-tag{color:var(--up-2)}
.band h2{color:#fff;margin-bottom:12px}
.band p{color:#A8B0BC;font-size:16.5px;margin:0;max-width:530px}
.band p b{color:#fff;font-weight:600}
.band-num{text-align:right}
.band-num b{display:block;font-family:var(--display);font-size:clamp(44px,7vw,74px);
  line-height:.92;letter-spacing:-.035em;color:var(--up-2);font-variant-numeric:tabular-nums}
.band-num span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#7C8492}
.band-cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.band .btn{background:transparent;border-color:#3C4550;color:#fff}
.band .btn:hover{background:#242B35;border-color:#556070}
.band .btn.pri{background:var(--up);border-color:var(--up)}

/* faq */
.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
details{border-bottom:1px solid var(--line-soft)}
details:last-child{border-bottom:0}
summary{padding:17px 22px;cursor:pointer;font-weight:600;font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-size:19px;color:var(--up);flex:none}
details[open] summary::after{content:"\2212"}
details p{margin:0;padding:0 22px 19px;font-size:15px;color:var(--muted);line-height:1.65;max-width:780px}
details p b{color:var(--ink);font-weight:600}

.todo{font-family:var(--mono);font-size:11.5px;color:var(--muted);border:1px dashed #3A424E;
  background:#171B21;border-radius:9px;padding:11px 15px;margin-top:20px;line-height:1.6}
.todo b{color:var(--ink)}

footer{border-top:1px solid var(--line);padding:34px 0 44px;margin-top:24px}
.foot{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;
  font-family:var(--mono);font-size:12.5px}
.foot-links a{color:var(--muted);text-decoration:none;transition:color .18s ease}
.foot-links a:hover{color:var(--up-2)}
.foot-mark{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}

@media (min-width:1100px){ .hb-sub{white-space:nowrap} }

@media (max-width:900px){
  .flow{grid-template-columns:1fr}
  .arrow{transform:rotate(90deg);padding:2px 0}
  .lore{grid-template-columns:1fr;gap:28px}
  .receipt{position:static}
  .rows,  .band{grid-template-columns:1fr;padding:32px}
  .band-num{text-align:left}
}
@media (max-width:1120px){
  .nav-in{--navgap:min(calc(18px + 3.4vw),74px);padding:13px clamp(14px,2.4%,34px)}
  .nav-side a{font-size:12px;letter-spacing:.08em}
}
@media (max-width:560px){
  .hero{padding:48px 0 32px}
  section{padding:48px 0}
  .receipt-stat{grid-template-columns:1fr}
  .ca{flex-wrap:wrap}
  .ca-val{flex-basis:100%;order:3}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- contract address bars (filled by assets/site.js) ---------- */
.cabar{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:10px 10px 10px 16px}
.cabar + .cabar{margin-top:10px}
.cabar.official{border-color:#2E5343;background:#0F1F19}
.cabar .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);flex:none;min-width:58px}
.cabar .val{font-family:var(--mono);font-size:13px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.cabar .val.pending{color:var(--faint)}
.cabar button{font-family:var(--mono);font-size:12px;padding:8px 14px;border-radius:7px;
  border:1px solid var(--line);background:#1A1F26;cursor:pointer;flex:none}
.cabar button:hover{background:#12151A}
.cabar button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* the big one, under the hero buttons */
.cabar.hero-ca{max-width:660px;margin:30px auto 0;padding:13px 13px 13px 20px;
  border-width:2px;border-color:var(--up);background:var(--card);
  box-shadow:0 4px 20px rgba(255,106,0,.12)}
.cabar.hero-ca .lbl{color:var(--up);font-weight:600}
.cabar.hero-ca .val{font-size:15px;font-weight:500}
.cabar.hero-ca.is-pending{border-color:var(--line);box-shadow:none}
.cabar.hero-ca.is-pending .lbl{color:var(--faint)}

/* the slim one, under the nav on inner pages */
.ca-strip{background:var(--card);border-bottom:1px solid var(--line)}
.ca-strip .cabar{border:0;border-radius:0;background:none;padding:9px 20px;
  max-width:var(--w);margin:0 auto}
.ca-strip .cabar .val{font-size:12.5px}

@media (max-width:560px){
  .cabar{flex-wrap:wrap}
  .cabar .val{flex-basis:100%;order:3;font-size:12px}
  .cabar.hero-ca .val{font-size:13px}
}


/* ---------- two-up address row (socials moved to the footer) ---------- */

/* ---------- footer ---------- */
@media (max-width:900px){
    }

/* ================= motion =================
   Everything here is additive and gated on prefers-reduced-motion at the
   bottom of the block. The page must read correctly with all of it off. */

/* scroll progress, sits on top of the sticky nav */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--up),var(--up-2));
  transition:width .1s linear;pointer-events:none}

/* nav lifts off the page once you start scrolling */
.nav{transition:box-shadow .25s ease,background .25s ease}
.nav.scrolled{box-shadow:0 1px 20px rgba(0,0,0,.5)}

/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}

/* hero entrance, runs on load rather than on scroll */
.hero h1,.hero .sub,.hero-btns,.hero .cabar{animation:riseIn .8s cubic-bezier(.22,.61,.36,1) both}
.hero .sub{animation-delay:.09s}
.hero-btns{animation-delay:.17s}
.hero .cabar{animation-delay:.25s}
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* the accent in the headline wipes in behind the text */
.hero h1 em{position:relative;display:block}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.07em;height:.09em;
  background:var(--up);opacity:.18;transform:scaleX(0);transform-origin:left;
  animation:wipe .9s cubic-bezier(.22,.61,.36,1) .5s both}
@keyframes wipe{to{transform:scaleX(1)}}

/* cards lift on hover */
.node,.card,.step,.venue,.mcard,.guide,.node:hover,.card:hover,.venue:hover,.mcard:hover,.guide:hover{
  transform:translateY(-3px);box-shadow:0 8px 26px rgba(0,0,0,.45);border-color:#3A424E}
.node.hi:hover{border-color:var(--up)}

/* the highlighted step in the flow breathes */
.node.hi{position:relative}
.node.hi::before{content:"";position:absolute;inset:-3px;border-radius:16px;
  border:2px solid var(--up);opacity:0;animation:halo 3.4s ease-in-out infinite;
  pointer-events:none}
@keyframes halo{0%,100%{opacity:0;transform:scale(.99)}50%{opacity:.32;transform:scale(1)}}

/* the arrows between the flow nodes drift along */
.arrow,.farrow{animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* buttons get a sheen on hover */
.btn.pri{position:relative;overflow:hidden}
.btn.pri::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .55s ease}
.btn.pri:hover::after{left:135%}

/* numbers counting up should not reflow the layout while they do it */
[data-count]{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .hero h1,.hero .sub,.hero-btns,.hero .cabar,.hero h1 em::after,
  .arrow,.farrow,.node.hi::before{animation:none!important}
  .hero h1 em::after{transform:scaleX(1)}
  .progress{display:none}
  .node:hover,.card:hover,.venue:hover,.mcard:hover,.guide:hover{transform:none}
}

/* ================= meme gallery =================
   9:16 artwork, sized by its grid column and never by the container width, so
   a vertical image cannot run away to two thousand pixels tall on desktop. */
/* Four across, the rest behind a sideways scroll. A grid wrapped the extras
   onto a second row, which read as a leftover shelf rather than a gallery.
   The vertical padding is so the hover lift is not clipped by the scroller. */
.shelf{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 0 14px;overscroll-behavior-x:contain;
  /* a slim bar stays on desktop: with it hidden there is nothing telling a
     mouse user the strip moves, and nothing to drag. Touch hides it below. */
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.shelf::-webkit-scrollbar{height:8px}
.shelf::-webkit-scrollbar-track{background:transparent}
.shelf::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.shelf::-webkit-scrollbar-thumb:hover{background:var(--up)}
.meme{margin:0;min-width:0;flex:0 0 calc((100% - 42px) / 4);scroll-snap-align:start}
.meme-frame{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  background:#12161C;border:1px solid var(--line);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s ease}
.meme-frame img{width:100%;height:100%;object-fit:cover;display:block}
.meme:hover .meme-frame{transform:translateY(-4px);border-color:var(--up)}
/* the strip runs past the edge, so say so */
.shelf-wrap{position:relative}
.shelf-wrap::after{content:"";position:absolute;top:0;bottom:14px;right:0;width:64px;
  pointer-events:none;background:linear-gradient(90deg,rgba(14,16,20,0),var(--paper))}

@media (max-width:900px){
  .shelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding-bottom:6px;-webkit-overflow-scrolling:touch;
    /* the swipe is the affordance here, the native bar just sits under the
       artwork as a grey stub */
    scrollbar-width:none;-ms-overflow-style:none}
  .shelf::-webkit-scrollbar{display:none}
  .meme{flex:0 0 62%;scroll-snap-align:start}
  .shelf-wrap::after{display:none}   /* touch does not need the hint */
}
@media (max-width:560px){ .meme{flex-basis:74%} }

/* ================= scroll-driven story =================
   The stage sticks while the copy scrolls past it, so a 9:16 video sits in a
   phone frame at its native shape instead of being cropped by a wide viewport. */
.scrolly{padding:0}
.scrolly-head{min-height:40vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:30px 20px 12px}
.scrolly-head .sec-tag{margin-bottom:14px}
.scrolly-head h2{margin:0;font-size:clamp(34px,6.6vw,78px);line-height:.98;
  max-width:15ch;letter-spacing:-.035em}
.scrolly-cue{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);animation:cue2 2.3s ease-in-out infinite}
.scrolly-cue svg{width:14px;height:14px}
@keyframes cue2{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(7px);opacity:1}}
.scrolly-in{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:70px;align-items:start}
/* The tail has to be roughly the size of the lead, or the last beat runs out of
   section before it ever reaches the middle of the screen. */
.scrolly-copy{padding:36vh 0 50vh}
/* Beat 01 carries the most text so it holds longest. site.js measures these
   boxes and lights whichever is nearest the middle of the screen, so these
   heights are the only thing setting the pace. Set as a variable, not
   min-height, so the reduced-motion fallback can still flatten them. */
.beat:nth-child(1){--beat-h:68vh}
.beat:nth-child(2){--beat-h:42vh}
.beat:nth-child(3){--beat-h:42vh}
/* Beats do not get equal scroll: these heights are the only thing setting the
   pace, since site.js measures the boxes and lights whichever is nearest the
   middle of the screen. Set as a variable, not min-height, so the reduced-motion
   fallback can still flatten them. */
.beat:nth-child(4){--beat-h:34vh}
.beat{min-height:var(--beat-h,62vh);display:flex;flex-direction:column;
  justify-content:center;opacity:.34;transition:opacity .45s ease}
.beat.on{opacity:1}
.beat-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--up);
  font-weight:600;margin-bottom:12px}
.beat h3{font-family:var(--display);font-size:clamp(24px,3.6vw,36px);line-height:1.05;
  letter-spacing:-.03em;margin:0 0 12px}
.beat p{margin:0;font-size:17px;line-height:1.62;color:#C3CAD4;max-width:460px}

.scrolly-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px}
.phone{width:302px;max-width:100%;padding:9px;border-radius:38px;background:#14161A;
  box-shadow:0 22px 60px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.14) inset}
/* The first frame sits behind the video as a real background. iOS can refuse to
   paint a video it has only been asked to seek, and a black rectangle is the
   worst possible fallback, so the still is always there underneath. */
.phone-screen{position:relative;aspect-ratio:9/16;border-radius:30px;overflow:hidden;
  background:#000 url("/assets/reels/story.jpg") center/cover no-repeat}
.phone-screen video{width:100%;height:100%;object-fit:cover;display:block}
/* no track and no fill: just an arrow flying at a target. The span is an
   invisible ruler whose width the scrub sets, and the arrow rides its edge. */
.scrub-rail{position:relative;width:302px;max-width:100%;height:34px;background:none}
.scrub-rail span{position:relative;display:block;height:100%;width:0;background:none}
.scrub-target{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:34px;height:34px;pointer-events:none;z-index:0;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
.scrub-target svg{width:100%;height:100%;display:block}

/* the arrow rides the leading edge of the fill, so it travels with the scroll
   without needing its own position updates */
.scrub-arrow{position:absolute;right:17px;top:50%;
  transform:translateY(-50%);z-index:2;
  width:52px;height:14px;pointer-events:none;
  filter:drop-shadow(0 0 7px rgba(255,106,0,.55))}
.scrub-arrow svg{width:100%;height:100%;display:block;overflow:visible}

/* On a phone the screen is already 9:16, so drop the phone frame entirely and
   let the video fill it. The copy then scrolls over the top of the video
   rather than beside it, which is the only layout that fits the shape. */
@media (max-width:940px){
  .scrolly{position:relative;background:#0B0C0E}
  .scrolly-in{display:flex;flex-direction:column;padding-left:0;padding-right:0;max-width:none}
  .scrolly-stage{order:-1}

  .scrolly-stage{position:sticky;top:0;height:100svh;width:100%;flex:0 0 100svh;
    padding:0;gap:0;z-index:0;background:#000}
  .phone{width:100%;height:100%;padding:0;border-radius:0;background:none;box-shadow:none}
  .phone-screen{aspect-ratio:auto;width:100%;height:100%;border-radius:0}
  .phone-screen video{object-fit:cover}
  .scrolly-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(11,12,14,.62) 0%,rgba(11,12,14,.18) 30%,
    rgba(11,12,14,.30) 62%,rgba(11,12,14,.88) 100%)}

  /* pulled back over the sticky stage */
  /* Dropped down the frame so the opening beat reads lower over the video,
     which also pushes its centre later and starts the footage further in. */
  .scrolly-copy{position:relative;z-index:1;margin-top:-100svh;padding:26svh 0 0}
  .scrolly-head{min-height:24svh;padding:22px 22px 8px}
  .scrolly-head h2{font-size:clamp(30px,9vw,46px);max-width:14ch}
  .scrolly-cue{margin-top:18px}
  /* same weighting as desktop, in units that suit a tall screen */
  .beat:nth-child(1){--beat-h:150svh}
  .beat:nth-child(2){--beat-h:90svh}
  .beat:nth-child(3){--beat-h:86svh}
  .beat:nth-child(4){--beat-h:64svh}
  .beat{--beat-h:150svh;justify-content:center;padding:0 24px;color:#fff;
    opacity:0;transition:opacity .6s ease}
  .beat.on{opacity:1}
  .beat-n{color:var(--up-2)}
  .beat h3{color:#fff;font-size:clamp(26px,7.4vw,40px);text-shadow:0 2px 24px rgba(0,0,0,.5)}
  .beat p{color:rgba(255,255,255,.86);font-size:16px;max-width:34ch;
    text-shadow:0 1px 16px rgba(0,0,0,.5)}

  /* no track here either: the arrow flies across the bottom of the video
     toward the target pinned at the right */
  .scrub-rail{position:absolute;left:16px;right:16px;bottom:10px;width:auto;height:30px;
    z-index:2;background:none;border-radius:0}
  .scrub-target{width:30px;height:30px}
  .scrub-arrow{right:15px}
}
@media (max-width:940px) and (prefers-reduced-motion:reduce){
  .scrolly-stage{position:static;height:62svh}
  .scrolly-copy{margin-top:0}
  .beat{min-height:auto;padding:26px 24px;opacity:1;color:var(--ink)}
  .beat h3{color:var(--ink);text-shadow:none}
  .beat p{color:#C3CAD4;text-shadow:none}
  .scrolly{background:var(--paper)}
}
@media (prefers-reduced-motion:reduce){
  .scrolly-cue{animation:none}
  .beat{opacity:1;--beat-h:62vh}
  .scrolly-stage{position:static;height:auto;padding:20px 0}
}

/* ================= full-screen scroll intro =================
   A 9:16 source cannot cover a 16:9 screen without throwing most of the frame
   away, so the sharp video is contained at full height and a blurred still of
   itself fills the space either side. Native full-bleed on phones. */
.intro{height:340vh;position:relative;background:#0B0C0E}
.intro-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0B0C0E}
.intro-bg{position:absolute;inset:-14%;background-size:cover;background-position:center;
  filter:blur(60px) brightness(.5) saturate(1.2);transform:scale(1.14)}
.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.intro-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,12,14,.55) 0%,rgba(11,12,14,.12) 34%,
  rgba(11,12,14,.18) 62%,rgba(11,12,14,.86) 100%)}

.intro-copy{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 22px;color:#fff}
.intro-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;
  position:absolute;top:26px;left:50%;transform:translateX(-50%)}
.intro-brand span:last-child{font-family:var(--display);font-size:20px;letter-spacing:-.02em}
.intro-line{position:absolute;margin:0;max-width:16ch;
  font-family:var(--display);font-size:clamp(30px,6vw,68px);line-height:1.02;
  letter-spacing:-.035em;text-shadow:0 2px 30px rgba(0,0,0,.55);
  opacity:0;transform:translateY(16px) scale(.99);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.intro-line.on{opacity:1;transform:none}

.intro-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(255,255,255,.72);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  animation:cue 2.2s ease-in-out infinite}
.intro-cue svg{width:15px;height:15px}
@keyframes cue{0%,100%{transform:translate(-50%,0);opacity:.72}50%{transform:translate(-50%,7px);opacity:1}}

.intro-rail{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.14)}
.intro-rail span{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--up),var(--up-2))}

@media (max-width:820px){
  /* a phone screen is already 9:16, so fill it properly */
  .intro-video{object-fit:cover}
  .intro-bg{display:none}
  .intro{height:300vh}
}
@media (prefers-reduced-motion:reduce){
  .intro{height:auto}
  .intro-stage{position:static;height:78vh}
  .intro-line{position:static;opacity:1;transform:none;margin:0 0 10px;font-size:clamp(24px,5vw,44px)}
  .intro-copy{justify-content:flex-end;padding-bottom:60px}
  .intro-cue{animation:none}
}

/* ---- intro: live backdrop + feathered video edges ----
   The canvas is painted from the video every frame at 64x114, then blurred to
   nothing, so the surround tracks the footage instead of sitting on one still.
   The video's left and right edges are masked into it so there is no seam. */
.intro-bg-live{position:absolute;inset:-14%;width:128%;height:128%;
  filter:blur(64px) brightness(.58) saturate(1.25);
  opacity:0;transition:opacity .6s ease;pointer-events:none}
.intro-bg-live.on{opacity:1}

.intro-video{
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 5%,rgba(0,0,0,.07) 9%,rgba(0,0,0,.16) 12%,rgba(0,0,0,.30) 15%,rgba(0,0,0,.47) 18%,rgba(0,0,0,.64) 21%,rgba(0,0,0,.79) 24%,rgba(0,0,0,.90) 27%,rgba(0,0,0,.97) 30%,#000 34%,#000 66%,rgba(0,0,0,.97) 70%,rgba(0,0,0,.90) 73%,rgba(0,0,0,.79) 76%,rgba(0,0,0,.64) 79%,rgba(0,0,0,.47) 82%,rgba(0,0,0,.30) 85%,rgba(0,0,0,.16) 88%,rgba(0,0,0,.07) 91%,rgba(0,0,0,.02) 95%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 5%,rgba(0,0,0,.07) 9%,rgba(0,0,0,.16) 12%,rgba(0,0,0,.30) 15%,rgba(0,0,0,.47) 18%,rgba(0,0,0,.64) 21%,rgba(0,0,0,.79) 24%,rgba(0,0,0,.90) 27%,rgba(0,0,0,.97) 30%,#000 34%,#000 66%,rgba(0,0,0,.97) 70%,rgba(0,0,0,.90) 73%,rgba(0,0,0,.79) 76%,rgba(0,0,0,.64) 79%,rgba(0,0,0,.47) 82%,rgba(0,0,0,.30) 85%,rgba(0,0,0,.16) 88%,rgba(0,0,0,.07) 91%,rgba(0,0,0,.02) 95%,rgba(0,0,0,0) 100%)}

@media (max-width:820px){
  /* full-bleed on a 9:16 screen, so nothing to feather or fill */
  .intro-bg-live{display:none}
  .intro-video{-webkit-mask-image:none;mask-image:none}
}

/* ---------- hero banner ----------
   The art is 2.36:1. Capping the height stops it eating the whole screen on a
   wide monitor, and the focal point sits left of centre so the crop favours it. */
.banner{width:100%;background:#080B12;overflow:hidden;line-height:0;
  border-bottom:1px solid var(--line)}
.banner img{width:100%;height:auto;max-height:340px;object-fit:cover;
  object-position:32% 50%;display:block}
@media (max-width:900px){ .banner img{max-height:230px;object-position:26% 50%} }
@media (max-width:560px){ .banner img{max-height:170px;object-position:22% 50%} }

/* ================= hero banner =================
   The art runs at its native 2.36:1 with the copy sitting on it. The character
   occupies the left third, so the text is pinned right of centre and the scrim
   only darkens the side it needs to. */
.hero-banner{position:relative;background:#080B12;overflow:hidden;line-height:0}
.hb-art img{width:100%;height:auto;display:block}
.hb-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    /* weighted to the lower half, so the moon in the top right stays lit */
    linear-gradient(180deg,rgba(11,18,32,0) 32%,rgba(11,18,32,.30) 56%,
      rgba(11,18,32,.66) 80%,rgba(11,18,32,.86) 100%),
    linear-gradient(90deg,rgba(11,18,32,0) 48%,rgba(11,18,32,.16) 100%)}

/* The character sits bottom-left and the moon top-right, which leaves the
   middle-right of the frame empty. The copy goes there. */
.hb-copy{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;line-height:1.6;padding-top:4%}
.hb-inner{max-width:1400px;width:100%;margin:0 auto;padding:0 26px;
  display:flex;justify-content:flex-end}
.hb-text{width:min(62ch,56%);text-align:left}

.hero-banner h1{font-family:var(--display);color:#fff;margin:0 0 14px;
  font-size:clamp(26px,4.05vw,60px);line-height:1.0;letter-spacing:-.035em;
  text-shadow:0 3px 34px rgba(0,0,0,.62);text-wrap:balance}
.hero-banner h1 em{font-style:normal;display:block;color:var(--up-2)}
.hb-sub{margin:0;color:rgba(255,255,255,.88);
  font-size:clamp(13px,1.22vw,18px);line-height:1.5;
  text-shadow:0 2px 18px rgba(0,0,0,.7)}
.hb-sub b{color:#fff;font-weight:600}
.hb-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}
.btn.ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34);color:#fff;
  backdrop-filter:blur(6px)}
.btn.ghost:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}

/* the contract bar, on its own, directly beneath the art */
.ca-below{padding:22px 0 4px}
.ca-below .cabar{margin:0 auto}

/* below ~900px the band is too short to hold text, so give the art a taller
   crop and drop the copy into the lower half of it */
@media (max-width:900px){
  .hb-art img{height:76vh;min-height:420px;max-height:640px;object-fit:cover;
    object-position:24% 46%}
  .hb-scrim{background:linear-gradient(180deg,rgba(11,18,32,.34) 0%,
    rgba(11,18,32,0) 26%,rgba(11,18,32,.62) 62%,rgba(11,18,32,.93) 100%)}
  .hb-copy{align-items:flex-end;justify-content:center;padding-top:0;padding-bottom:26px}
  .hb-inner{justify-content:flex-start;padding:0 22px}
  .hb-text{width:auto;max-width:34ch}
  .hero-banner h1{font-size:clamp(30px,8.4vw,46px);max-width:16ch}
  .hb-sub{max-width:38ch;font-size:15px}
  .hb-btns{justify-content:flex-start}
  .ca-below{padding:16px 0 2px}
}
@media (max-width:560px){
  .hb-art img{height:70vh;min-height:380px}
  .hero-banner h1{font-size:clamp(27px,8.6vw,38px)}
  .hb-sub{font-size:14px;max-width:32ch}
  .hb-btns .btn{flex:1;min-width:135px}
}

/* ---------- socials, under the contract addresses ---------- */
.social-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  margin:26px auto 0;max-width:760px}
.social{display:flex;align-items:center;gap:15px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:19px 22px;text-decoration:none;
  transition:transform .2s cubic-bezier(.22,.61,.36,1),border-color .2s ease,background .2s ease}
.social:hover{transform:translateY(-3px);border-color:var(--up);background:#1A1F26}
.social.pending{opacity:.55;pointer-events:none}
/* a stub with nowhere to go should not look like a live button */
.btn.pending{opacity:.45;pointer-events:none;box-shadow:none}
.social-ic{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:#1F252E;color:var(--ink)}
.social:hover .social-ic{background:var(--up);color:#fff}
.social-ic svg{width:19px;height:19px;display:block}
.social-tx b{display:block;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.social-tx span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);
  margin-top:2px}
@media (max-width:700px){ .social-row{grid-template-columns:1fr} }


/* the official site card, marked so it reads as the trusted one */
.social.official{border-color:#2E5343;background:#0F1F19}
.social.official:hover{border-color:var(--gain);background:#132a21}
.social.official .social-ic{background:#17352A;color:var(--gain)}
.social.official:hover .social-ic{background:var(--gain);color:#08120D}
.social-badge{margin-left:auto;width:20px;height:20px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--gain);color:#08120D}
.social-badge svg{width:11px;height:11px}

/* ---------- airdrop status strip ----------
   Three steps, two done and one open, so the state of the whole thing is
   readable in about a second. */
.status{list-style:none;margin:0 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.status li{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:20px 22px}
.status li.done{border-left:3px solid var(--gain)}
.status li.open{border-left:3px solid var(--up);background:#181410}
.st-n{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  color:var(--faint);margin-bottom:9px}
.status li.done .st-n{color:var(--gain)}
.status li.open .st-n{color:var(--up)}
.status b{display:block;font-family:var(--display);font-size:19px;
  letter-spacing:-.02em;margin-bottom:6px}
.status span:last-child{display:block;font-size:13.5px;line-height:1.5;color:var(--muted)}
.status li.done b::after{content:" \2713";color:var(--gain);font-size:15px}
@media (max-width:900px){ .status{grid-template-columns:1fr;gap:10px}
  .status li{padding:16px 18px} .status b{font-size:17px} }

/* the standing rule under a band's copy, quieter than the body text */
.band-rule{margin-top:12px!important;font-family:var(--mono);font-size:12px;
  line-height:1.6;color:#8C94A2!important;border-top:1px solid #2C3540;padding-top:12px}



/* ---------- the two-source pair, filling the right of a band ----------
   One card holding both rows rather than two floating boxes, so the pairing
   reads as a single statement instead of needing a symbol between them. */
.band-pair{min-width:264px;border:1px solid #2C3540;border-radius:14px;
  background:rgba(255,255,255,.03);overflow:hidden}
.bp-row{display:flex;align-items:center;gap:13px;padding:16px 18px}
.bp-row + .bp-row{border-top:1px solid #2C3540}
.bp-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:#0F1319;color:var(--up-2)}
.bp-ic svg{width:16px;height:16px;display:block}
.bp-tx b{display:block;font-size:14.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.bp-tx span{display:block;font-family:var(--mono);font-size:10.5px;color:#8C94A2;margin-top:3px}
@media (max-width:900px){ .band-pair{min-width:0} }

/* ---------- the "never" list, filling the right of a band ---------- */
.never{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
  min-width:260px}
.never li{display:flex;align-items:baseline;gap:12px;padding:12px 15px;border-radius:11px;
  background:rgba(255,255,255,.035);border:1px solid #2C3540}
.never b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--loss);flex:none}
.never span{font-size:13.5px;line-height:1.4;color:#C3CAD4}
@media (max-width:900px){ .never{min-width:0} }

/* buttons inside a numbered guide step */
.step-links{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.step-links .btn{font-size:13.5px;padding:9px 16px}