/* ==========================================================================
   $MAPLE — The Pygmy Hippo on Solana
   Structure mirrors moodengsol.com; palette is Canada / Toronto Zoo.

   FONTS
     Headings: Titan One (Google Fonts, OFL — free for commercial use)
     Body:     CCMaladroit (Comicraft) — PAID LICENCE REQUIRED, see README
   ========================================================================== */

@font-face{
  font-family:'TitanOne';
  src:url('../fonts/TitanOne.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Maladroit';
  src:url('../fonts/Maladroit.woff2') format('woff2'),
      url('../fonts/Maladroit.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --display:'TitanOne','Baloo 2',system-ui,sans-serif;
  --body:'Maladroit','Nunito',system-ui,sans-serif;

  /* Canadian flag */
  --red:        #D80621;
  --red-wall:   #7A0316;
  --red-deep:   #A00417;
  --red-soft:   #F0455C;
  --white:      #FFFFFF;

  /* Maple / autumn */
  --amber:      #E8912D;
  --amber-lt:   #F6C177;

  /* Hippo */
  --hippo:      #A9615C;
  --hippo-lt:   #C98A83;
  --hippo-dk:   #7A403D;

  /* Forest / zoo */
  --spruce:     #2F5D3A;
  --spruce-lt:  #4E8055;
  --moss:       #8FA968;

  /* Night sky */
  --night:      #10243A;
  --night-2:    #1B3A57;

  /* Paper */
  --cream:      #FDF3EC;
  --cream-2:    #F7E3D6;
  --ink:        #171412;

  /* sampled from the bottom edge of body-sky.png so the artwork blends into it */
  --sky-floor:  #F7E8CE;
  /* tokenomics boxes use the same paper as the stat cards and About panel */
  --tk-fill:    #FBE6DC;
  --tk-text:    #4A322C;

  /* depth of the hero's torn bottom edge; scales with viewport, clamped */
  --tear: clamp(14px, 2.8vw, 52px);

  --shadow:     0 10px 0 rgba(0,0,0,.18);
  --radius:     26px;
  --maxw:       1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);margin:0}
a{color:inherit;text-decoration:none}

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed;width:30px;height:34px;z-index:9999;
  pointer-events:none;left:0;top:0;
  transform:translate3d(-100px,-100px,0);
  transition:transform .05s linear;
}
@media (hover:hover) and (pointer:fine){
  body,a,button,.btn{cursor:none}
}
@media (hover:none){ .cursor{display:none} }

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,4vw,44px);
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.scrolled{
  background:rgba(253,243,236,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 0 rgba(0,0,0,.10);
  padding-top:8px;padding-bottom:8px;
}
.nav .nav-logo-img.wordmark{font-size:32px;-webkit-text-stroke-width:6px;margin:0;animation:none;text-shadow:0 4px 0 rgba(0,0,0,.3)}
.nav .nav-logo-img.wordmark::before{-webkit-text-stroke-width:14px}
.nav .nav-logo-img .wordmark-leaf{right:-.28em;top:-.30em;width:.60em}
.nav.scrolled .nav-logo-img.wordmark{font-size:26px}
.nav-socials{display:flex;gap:10px;align-items:center}
.nav-socials a{
  width:38px;height:38px;display:grid;place-items:center;
  background:var(--white);border:3px solid var(--ink);border-radius:12px;
  box-shadow:0 3px 0 var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.nav-socials a:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--ink)}
/* All four are flat black silhouettes now, so no rounded tile corners to hide
   an app-icon background — they sit bare on the white chip. */
.nav-socials img{width:22px;height:22px;object-fit:contain}

/* ---------- hero ---------- */
.hero{
  position:relative;z-index:1;
  /* height follows hero-full.png's own 1672x941 ratio, so the whole painting shows.
     min-height is a floor for narrow screens, where it crops instead. */
  /* width MUST be definite. Without it, aspect-ratio resolves against min-height
     instead of the container, so on a 390px phone the hero lays itself out at
     560 x 1672/941 = 995px and drags the whole page into horizontal scroll. */
  width:100%;
  aspect-ratio:1672 / 941;
  min-height:560px;
  display:flex;align-items:flex-start;justify-content:center;
  overflow:hidden;
  background:linear-gradient(180deg,#0B1A2C 0%,var(--night) 42%,var(--night-2) 100%);
}
.hero-scene{position:absolute;inset:0;pointer-events:none}

/* --- single painted hero --- */
.hero-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  will-change:transform;
}

/* --- fallback: stacked SVG layers (revealed only if the PNG is missing) --- */
.hero-layers{position:absolute;inset:0}
.hero-layers[hidden]{display:none}
.hl{
  position:absolute;left:50%;top:50%;
  width:118%;min-width:1100px;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.hl5{z-index:5}   /* Maple herself */
.hl6{z-index:6}   /* front trees */

/* --- drifting leaves, on top of either mode --- */
.hf{
  position:absolute;height:clamp(38px,5.4vw,74px);width:auto;z-index:7;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.28));
  animation:drift 8s ease-in-out infinite;
}
.hfa{left:13%;top:26%}
.hfb{left:84%;top:44%;animation-duration:11s;animation-delay:-4s}
.hfc{left:68%;top:16%;height:clamp(26px,3.4vw,46px);animation-duration:13s;animation-delay:-7s;opacity:.85}
@keyframes drift{
  0%,100%{transform:translate(0,0) rotate(-10deg)}
  50%    {transform:translate(14px,-26px) rotate(12deg)}
}

/* --- scrim: keeps the logo and copy legible over bright artwork --- */
.hero-scrim{
  position:absolute;inset:0;z-index:10;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(6,18,12,.50) 0%,
      rgba(6,18,12,.28) 26%,
      rgba(6,18,12,.06) 48%,
      rgba(6,18,12,0)   62%),
    radial-gradient(110% 66% at 50% 6%, rgba(6,18,12,.30) 0%, rgba(6,18,12,0) 60%);
}

.hero-content{
  position:relative;z-index:20;text-align:center;
  padding:clamp(52px,7vh,84px) 20px 30px;max-width:900px;
}
/* Live text rather than an SVG, so the WORD is what centres — the leaf is
   absolutely positioned decoration and does not pull the lockup off-axis. */
.wordmark{
  position:relative;display:inline-block;margin:0 auto 14px;
  font-family:var(--display);font-weight:400;
  font-size:clamp(52px,9vw,116px);line-height:1;letter-spacing:.01em;
  color:var(--red);
  -webkit-text-stroke:9px var(--ink);paint-order:stroke fill;
  text-shadow:0 9px 0 rgba(0,0,0,.34);
  animation:pop .8s cubic-bezier(.22,1.4,.4,1) forwards;
}
.wordmark::before{
  content:attr(data-text);position:absolute;left:0;top:0;z-index:-1;
  color:#fff;-webkit-text-stroke:21px #fff;paint-order:stroke fill;
}
.wordmark-leaf{
  position:absolute;right:-0.30em;top:-0.30em;
  width:0.62em;height:auto;pointer-events:none;
  transform:rotate(18deg);
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.28));
}
@keyframes pop{from{opacity:0;transform:scale(.82) translateY(24px)}to{opacity:1;transform:none}}
.hero-tag{
  font-size:clamp(14px,1.9vw,19px);font-weight:700;line-height:1.5;
  color:#EAF3FF;margin:0 0 14px;
  text-shadow:0 2px 10px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.6);
}



.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.btn{
  display:inline-block;font-family:var(--body);font-weight:400;
  font-size:clamp(15px,1.8vw,19px);letter-spacing:.03em;
  padding:13px 34px;border-radius:999px;
  border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);
  transition:transform .14s ease, box-shadow .14s ease;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn-red{background:var(--red);color:#fff}
.btn-white{background:var(--white);color:var(--ink)}


/* ---------- stat cards ---------- */
.stats{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(34px,4.6vw,62px) 20px 0;
}
.stats-inner{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,2vw,30px);
}
.stat{
  position:relative;
  aspect-ratio:622 / 492;              /* matches the card SVG incl. sprig overhang */
  display:grid;place-content:center;align-content:center;text-align:center;
  padding:0 20%;
  background:center/contain no-repeat;
  transition:transform .2s cubic-bezier(.2,1.1,.4,1);
}
.stat:nth-child(1){background-image:url("../art/stat-card-1.svg");transform:rotate(-2.2deg)}
.stat:nth-child(2){background-image:url("../art/stat-card-2.svg");transform:rotate(1.4deg)}
.stat:nth-child(3){background-image:url("../art/stat-card-3.svg");transform:rotate(-1deg)}
.stat:nth-child(1):hover{transform:rotate(-2.2deg) translateY(-8px) scale(1.03)}
.stat:nth-child(2):hover{transform:rotate(1.4deg) translateY(-8px) scale(1.03)}
.stat:nth-child(3):hover{transform:rotate(-1deg) translateY(-8px) scale(1.03)}
/* body face, matching the tokenomics boxes — these are content, not headings */
.stat b{
  display:block;font-family:var(--body);font-weight:400;
  font-size:clamp(24px,4.2vw,50px);line-height:.98;color:var(--hippo-dk);
  white-space:nowrap;
}
.stat span{
  display:block;margin-top:.28em;font-family:var(--body);
  color:var(--hippo-dk);opacity:.88;
  font-size:clamp(12px,1.7vw,22px);line-height:1.1;
}

/* Torn seams. Both live inside .body-bg so their transparent halves reveal the sky
   rather than the neighbouring section's own flat colour. */
/* Relative + z-index so the ridge paints above the falling leaves in .htb:
   they run off the bottom of the section and vanish behind it, rather than
   being sliced off by an overflow clip. margin-bottom keeps the old 1px
   overlap, which `bottom` could not do while the image was still static. */
.divider-bottom{position:relative;z-index:4;display:block;width:100%;margin-bottom:-1px}

/* ---------- body / sections ---------- */
/* Painted sky sits at the top at its natural aspect and fades out; --sky-floor is
   the artwork's own bottom colour, so the join is invisible at any section height. */
.body-bg{
  position:relative;overflow:hidden;
  /* negative margin tucks the sky beneath the hero's torn edge;
     the matching padding keeps content exactly where it was */
  z-index:2;
  /* The artwork's own transparent band overlaps the hero above, so the drawn
     ridge becomes the seam. Pull up by the FULL extent of transparency
     — the deepest jagged notch, now 8.10vw after trimming the artwork's
     surplus transparent band. Any less and the notches fall past the hero's
     bottom edge and expose the page colour behind. */
  margin-top:-8.2vw;padding-top:8.2vw;
  background:
    url("../art/body-sky.png") top center / 100% auto no-repeat,
    /* the flat page colour must NOT start until below the torn ridge, or it
       fills the artwork's transparent band and hides the hero behind it.
       body-sky.png is only fully opaque from 8.10vw down, so 8.6vw. */
    linear-gradient(180deg, transparent 0 8.6vw, var(--sky-floor) 8.6vw);
}
.section{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(60px,9vw,110px) 20px}

.h-title{
  font-size:clamp(32px,6vw,64px);font-weight:800;text-align:center;
  color:var(--red);letter-spacing:.02em;
  text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink),0 8px 0 rgba(0,0,0,.20);
  margin-bottom:14px;
}
.h-title-light{color:var(--white);text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink),0 8px 0 rgba(0,0,0,.28)}
/* left-aligned variants: heading sits directly above its own body copy,
   rather than centred over the whole two-column grid */
/* Sits above its own body copy rather than over the whole two-column grid,
   but centred within that column. */
.h-title-left{text-align:center;margin-bottom:14px}
/* Tokenomics follows the reference layout: heading and sub flush left at the
   top of the section, content grid beneath. Doubled class keeps these ahead of
   the base .h-title / .h-sub rules, which are declared further down. */
.h-title.h-title-tk{text-align:center;margin-bottom:14px}
.h-sub.h-sub-tk{text-align:center;margin:0 auto clamp(26px,3.6vw,48px);max-width:none}

.h-sub{text-align:center;font-weight:700;font-size:clamp(14px,1.9vw,19px);color:var(--hippo-dk);margin:0 auto 46px;max-width:640px}

/* ---------- 3-layer parallax card ---------- */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,56px);align-items:center;
}
.about-grid.reverse .pcard{order:2}
/* tokenomics: give the wider artwork more of the row */
#tokenomics .about-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.pcard{
  position:relative;aspect-ratio:1/1;width:100%;max-width:470px;margin:0 auto;
  perspective:900px;
}
.pl{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);will-change:transform;
}
.pl-back{z-index:1}
.pl-mid{z-index:2}
.pl-front{z-index:3}

/* single painted card — matches the hero's treatment: one image, subtle tilt */
/* shown near its native 854px so the linework keeps the hero's weight —
   at 400px the strokes shrink to ~1.9px and read thin against the hero's ~2.7px */
.pcard-tall{aspect-ratio:854 / 1205;max-width:500px}
/* landscape piece — container follows the art, not the other way round */
.pcard-wide{aspect-ratio:1100 / 949;max-width:680px}
.pl-solo{z-index:2;filter:drop-shadow(0 14px 18px rgba(23,20,18,.22))}

/* ---------- stone panel ---------- */
.panel{position:relative}
.panel-inner{
  position:relative;z-index:2;
  background:var(--cream-2);
  border:4px solid var(--ink);border-radius:var(--radius);
  box-shadow:0 9px 0 var(--ink);
  padding:clamp(24px,3.4vw,40px);
}
.panel p{font-size:clamp(14px,1.7vw,17px);line-height:1.65;font-weight:600;margin:0 0 14px;color:#3B2E28}
.panel p:last-child{margin-bottom:0}
.panel b{color:var(--red-deep);font-weight:800}
.panel-kicker{font-family:var(--display);font-weight:800;font-size:clamp(16px,2.2vw,22px)!important;color:var(--red)!important}

/* tokenomics boxes */
.tk-boxes{display:flex;flex-direction:column;gap:clamp(16px,2.4vw,26px);justify-content:center}
.tk-box{
  background:var(--tk-fill);
  border:5px solid var(--ink);border-radius:24px;
  box-shadow:0 7px 0 var(--ink);
  padding:clamp(18px,2.6vw,28px) clamp(16px,2.4vw,30px);
  text-align:center;
  transition:transform .16s ease, box-shadow .16s ease;
}
/* slight hand-placed tilt; --rot lets hover keep it while adding lift */
.tk-box:nth-child(1){--rot:-1.4deg}
.tk-box:nth-child(2){--rot:1.1deg}
.tk-box:nth-child(3){--rot:-0.7deg}
.tk-box{transform:rotate(var(--rot,0deg))}
.tk-box:hover{
  transform:rotate(var(--rot,0deg)) translateY(-5px) scale(1.02);
  box-shadow:0 12px 0 var(--ink);
}
.tk-box h3{
  font-family:var(--body);font-weight:400;
  font-size:clamp(19px,2.7vw,32px);line-height:1.1;color:var(--red-deep);
  margin:0 0 6px;letter-spacing:.01em;
}
.tk-box p{
  margin:0;font-family:var(--body);color:var(--tk-text);
  font-size:clamp(13px,1.7vw,20px);line-height:1.35;
  word-break:break-all;
}
.tk-box-ca{cursor:pointer}
.tk-box-ca:active{transform:rotate(var(--rot,0deg)) translateY(2px);box-shadow:0 3px 0 var(--ink)}

/* ---------- venues ---------- */
.venues{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:clamp(20px,2.2vw,30px)}
.venue{
  position:relative;
  background:var(--white);border:4px solid var(--ink);border-radius:20px;
  box-shadow:0 6px 0 var(--ink);
  padding:24px 12px 26px;min-height:186px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  transition:transform .16s ease, box-shadow .16s ease;
}
.venue:hover{transform:translateY(-5px) rotate(-1.2deg);box-shadow:0 11px 0 var(--ink)}
/* Brand icons arrive as a mix of dark app-icon tiles, white tiles and transparent
   marks. Framing each at one size with rounded corners makes them read as a set. */
.venue img{
  width:clamp(80px,7.6vw,108px);height:clamp(80px,7.6vw,108px);flex:none;
  object-fit:contain;border-radius:18px;
}
.venue span{
  font-family:var(--body);font-size:clamp(18px,2.1vw,25px);
  color:var(--ink);line-height:1.15;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- how to buy ---------- */
/* Leaves floating in the empty margin down the far left of How To Buy. The
   container is pulled out to full viewport width so "far left" means the edge of
   the screen, not the edge of the centred content column — the step cards live in
   the middle 780px, so nothing here can drift over them. */
.htb-fall{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  z-index:1;overflow:visible;pointer-events:none}
.htb-fall .fl{
  position:absolute;left:var(--x);top:var(--t);
  width:var(--s);height:auto;
  rotate:var(--r);
  animation:htb-float var(--d) ease-in-out var(--dl) infinite;
  filter:drop-shadow(0 4px 6px rgba(23,20,18,.18));
}
/* They hover rather than fall — a slow lift and a few degrees of turn. */
@keyframes htb-float{
  0%,100%{translate:0 0;rotate:var(--r)}
  50%    {translate:var(--sway) -22px;rotate:calc(var(--r) + 7deg)}
}
/* Below this the centred column fills the width and there is no margin to sit in. */
@media (max-width:1180px){.htb-fall{display:none}}
.htb{position:relative;padding-bottom:clamp(134px,12vw,196px)}
/* Cards centre on the page; the character is lifted out of the flow and pinned
   near the viewport's right edge, so centring is not pulled off by her column. */
.htb-body{position:relative}
.steps{max-width:780px;margin:0 auto}
.htb-char{
  position:absolute;bottom:0;z-index:3;
  right:calc(50% - 50vw + clamp(6px,1.6vw,34px));
  width:clamp(170px,21vw,350px);height:auto;
  transform:translateY(104px);
  pointer-events:none;
  filter:drop-shadow(0 12px 16px rgba(23,20,18,.20));
}
.steps{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.6vw,32px);
}
.step{
  position:relative;overflow:hidden;
  background:var(--cream-2);
  border:5px solid var(--ink);border-radius:26px;
  box-shadow:0 8px 0 var(--ink);
  /* white ring inside the black border, as on the reference */
  outline:5px solid var(--white);outline-offset:-11px;
  padding:clamp(24px,3vw,34px) clamp(22px,2.8vw,32px);
  transition:transform .16s ease, box-shadow .16s ease;
}
.step::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../art/card-pattern.svg") center/cover no-repeat;
  opacity:.5;
}
.step:hover{transform:translateY(-5px);box-shadow:0 13px 0 var(--ink)}
.step h3{
  position:relative;z-index:1;
  font-family:var(--body);font-weight:400;font-style:italic;
  font-size:clamp(17px,2.1vw,24px);color:var(--red-deep);
  margin:0 0 14px;line-height:1.2;
}
.step .step p{
  position:relative;z-index:1;margin:0;
  font-family:var(--body);font-size:clamp(14px,1.7vw,19px);
  line-height:1.5;color:#3B2E28;
}
.step p a{color:#1C7FA8;text-decoration:none}
.step p a:hover{text-decoration:underline}


/* ---------- loved by millions ---------- */
.loved{--tw-w:clamp(272px,31vw,360px);position:relative;background:var(--red-wall);padding-bottom:clamp(28px,4vw,54px);overflow:hidden}
.loved .h-title{margin:clamp(20px,4vw,44px) 0 clamp(28px,4vw,46px)}
.marquee{overflow:hidden;padding:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* The wreath's outer edge is sparse leaf tips, so each tile carries a band of
   near-empty space inside its own box. Overlap the rows to absorb it, or the
   two rows sit ~90px apart with nothing in the middle. */
.marquee + .marquee{margin-top:-26px}
.marquee-track{display:flex;gap:clamp(8px,1vw,16px);width:max-content;align-items:center;animation:slide 46s linear infinite}
.marquee-track.reverse{animation-direction:reverse;animation-duration:56s}
.marquee:hover .marquee-track{animation-play-state:paused}
/* The wreath fills the whole tile and the content card sits INSIDE it at 78%,
   at 64% — matched to the wreath's hole, which measures 56% across. Sizing the
   card to the hole is what keeps the band visible; oversize it and the leaves
   disappear behind it. The leaves are
   no longer clipped by the marquee's overflow and no longer collide with the
   neighbouring tile — so the gap above is pure spacing, and how much leaf shows
   is set by one number here instead of fighting the layout. */
.tw{position:relative;flex:none;width:var(--tw-w);aspect-ratio:1/1;display:grid;place-items:center}
.tw::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../art/social-frame.png") center / 100% 100% no-repeat}
/* Real tweet cards. System sans on purpose — these are quotes from X, so they
   should read like X, not like the rest of the site's comic lettering. */
.tweet{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:10px;
  width:66%;height:66%;
  box-sizing:border-box;
  padding:14px 15px 15px;
  background:#0B0B0D;color:#E7E9EA;
  border:4px solid #F2E3C8;border-radius:26px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  text-decoration:none;overflow:hidden;
}
.tw-head{display:flex;align-items:center;gap:9px;flex:none}
.tw-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.tw-who{display:flex;flex-direction:column;min-width:0;line-height:1.2}
/* Wrap rather than ellipsise. Below ~1160px the tile sits on its 272px floor,
   so there is never enough head room for a long display name at 14px — and a
   truncated name is worse than a two-line one. */
.tw-name{display:flex;align-items:flex-start;gap:4px;font-size:14px;font-weight:700;color:#fff;
  min-width:0;overflow-wrap:anywhere}
.tw-badge{width:15px;height:15px;flex:none;margin-top:2px}
.tw-handle{font-size:13px;font-style:normal;color:#71767B;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-text{flex:none;font-size:14px;line-height:1.35;overflow:hidden}
/* The image takes whatever height is left, so every card stays square regardless
   of how long its quote is. One card has no image and simply ends after the text. */
.tw-img{flex:1 1 auto;min-height:0;width:100%;object-fit:cover;border-radius:14px;display:block}
/* Banner-shaped media (3:1 and wider) loses its whole point when centre-cropped,
   so show it complete and let it letterbox, the way X itself does. */
.tw-img-wide{object-fit:contain;background:#000}
/* A tweet with no media would otherwise be a small line of text above a lot of
   empty black, so set it as a pull-quote filling the card instead. */
.tweet-quote .tw-text{flex:1 1 auto;display:flex;align-items:center;
  font-size:22px;line-height:1.3;font-weight:600;padding:4px 2px 10px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- footer ---------- */
/* Green carries straight on from the social wall above — one continuous field —
   and the pool artwork now sits at the very bottom of the page. */
.footer{position:relative;background:var(--red-wall);padding-top:clamp(28px,4vw,52px);overflow:hidden}
/* The pool artwork dips low in the centre and only has tall foliage at the far
   left and right, so its top third is mostly empty. Pull it up under the text
   instead of leaving that emptiness as a dead green band. */
.footer-art{display:block;width:100%;height:auto;
  margin-top:clamp(-190px,-9vw,-44px);pointer-events:none}
.footer-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 20px;text-align:center}
.footer-socials{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2.2vw,26px);
  max-width:820px;margin:clamp(26px,3.6vw,40px) auto clamp(20px,2.6vw,30px);
}
.social{
  --rot:0deg;transform:rotate(var(--rot));
  aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,1.6vw,18px);
  background:#2B1D1B;
  border:5px solid var(--ink);border-radius:24px;
  box-shadow:0 8px 0 var(--ink);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
/* Each tile sits at its own slight angle, like stickers pressed on by hand.
   The angle lives in --rot so the hover lift can keep it rather than reset it. */
.social:nth-of-type(1){--rot:-3.2deg}
.social:nth-of-type(2){--rot:2.4deg}
.social:nth-of-type(3){--rot:-1.8deg}
.social:nth-of-type(4){--rot:3deg}
.social:hover{transform:translateY(-6px) rotate(var(--rot));box-shadow:0 14px 0 var(--ink);background:#3A2724}
.social img{
  width:clamp(38px,5.4vw,62px);height:clamp(38px,5.4vw,62px);
  object-fit:contain;
}
.social span{
  font-family:var(--body);color:#fff;
  font-size:clamp(13px,1.7vw,20px);line-height:1;
}
/* one tile picked out in the accent colour, as on the reference */
.social-hot{background:var(--cream-2)}
.social-hot:hover{background:#FFF1E9}
.social-hot span{color:var(--ink)}
.footer-legal{max-width:660px;margin:0 auto 12px;font-size:13px;line-height:1.65;color:#FFE9EC;font-weight:600}
.footer-copy{margin:0;font-family:var(--display);font-weight:400;color:#FFFFFF;font-size:16px}

/* ---------- toast ---------- */
/* Hidden by sliding below the fold. translate(-50%,140%) was cutting it far too
   fine: on a phone the text wraps to two lines, the pill becomes 81px tall, and
   140% of that leaves its top edge just 2px below the viewport — so the top of
   the pill showed as a dark lump along the bottom of the screen. Offsetting by
   its own full height PLUS a fixed margin is height-independent, and opacity and
   visibility make it definitively gone rather than merely off-screen. */
.toast{
  position:fixed;left:50%;bottom:30px;
  transform:translate(-50%,calc(100% + 60px));
  opacity:0;visibility:hidden;pointer-events:none;
  max-width:min(320px,calc(100vw - 32px));text-align:center;
  background:var(--ink);color:#fff;font-weight:800;font-size:14px;
  padding:13px 26px;border-radius:999px;z-index:9998;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
  transition:transform .35s cubic-bezier(.2,1.3,.4,1), opacity .25s ease,
             visibility 0s linear .35s;
}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;transition-delay:0s,0s,0s}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1320px){
  .htb-char{position:static;width:min(250px,44vw);margin:26px auto 0;transform:none;display:block}
  .htb{padding-bottom:0}
}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;max-width:520px}
  .htb{padding-bottom:0}
  .htb-char{position:static;width:min(240px,56vw);margin:26px auto 0;transform:none}
  .about-grid{grid-template-columns:1fr}
  /* About keeps order:2 when stacked, so the copy leads and the artwork closes
     the section. Only About carries .reverse, so nothing else is affected. */
}
/* Between ~620 and 1160px the tweet tile is pinned to its 272px minimum while
   the type is still desktop-sized, so cards overflowed and names truncated.
   Scale the contents to the card, not the viewport. */
@media (max-width:1160px){
  .tweet{padding:12px 13px 13px;gap:9px}
  .tw-av{width:32px;height:32px}
  .tw-name{font-size:13px}
  .tw-handle{font-size:12px}
  .tw-text{font-size:13px;line-height:1.32}
}
/* On narrow screens the hero crops horizontally, not vertically, so the artwork's
   height always equals the hero's height — which means Maple's face sits at a
   fixed FRACTION of it. Giving the hero more height therefore pushes her face
   further down the screen, away from the buttons, while trimming the content
   block lifts them. Both are needed; either alone leaves them touching. */
@media (max-width:900px){
  /* The nav is fixed and 72px tall, so the hero's own top padding has to clear
     it — 4.5vh resolved to 38px and put the wordmark behind the nav. Clearing it
     costs ~52px, which would drop the buttons back onto Maple's face, so the
     hero grows by the same amount to keep them apart. */
  .hero{min-height:740px}
  .hero-content{padding:90px 18px 22px}
  .wordmark{margin-bottom:8px}
  .hero-tag{margin-bottom:16px}
}
@media (max-width:380px){
  .hero-content{padding-top:84px}   /* nav is 66px here, not 72px */
}
/* ---------- mobile ---------- */
/* 38px is below the 44px minimum touch target; applies across tablets too. */
@media (max-width:900px){
  .nav-socials{gap:8px}
  .nav-socials a{width:44px;height:44px;border-radius:13px}
  .nav-socials img{width:23px;height:23px}
}
/* Small phones: the logo plus four 44px targets plus gutters is 353px, which
   does not fit a 320px screen. Trim all three rather than any one of them, so
   the targets stay close to 44px. */
@media (max-width:380px){
  .nav{padding:12px 12px}
  .nav-logo-img{height:32px}
  .nav-socials{gap:6px}
  .nav-socials a{width:42px;height:42px}
  .nav-socials img{width:22px;height:22px}

  /* At 320px the tile still left only 107px of head room and "Proud to be
     Canadian" needs 128px. Widen the tile and trim the avatar and padding
     together — no single one of them closes the gap. Doubled class because the
     620px block below sets --tw-w too and would otherwise win on source order. */
  .loved.loved{--tw-w:min(304px,90vw)}
  .tweet{padding:10px}
  .tw-head{gap:6px}
  .tw-av{width:26px;height:26px}
}
@media (max-width:900px){
  /* #tokenomics .about-grid outranks the plain .about-grid stacking rule above,
     so without this the tokenomics block stays two-column on phones: postage-stamp
     artwork beside boxes so narrow the contract address wraps onto four lines. */
  #tokenomics .about-grid{grid-template-columns:1fr}
  #tokenomics .about-grid .pcard{max-width:420px;margin:0 auto}
}
@media (max-width:620px){
  .section{padding:clamp(44px,11vw,72px) 16px}
  .h-sub{margin-bottom:30px}

  /* eight full-width chips made this section 1881px tall on a phone */
  .venues{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .venue{min-height:0;padding:18px 8px 20px;gap:9px}
  .venue img{width:clamp(50px,14vw,66px);height:clamp(50px,14vw,66px)}
  .venue span{font-size:clamp(12.5px,3.5vw,16px)}

  /* Stays 4-up. repeat(4,1fr) resolves columns to min-content, so "DEXSCREENER"
     alone pushed the row off-screen — minmax(0,1fr) caps them at a true quarter,
     and the tile contents shrink to match. */
  .footer-socials{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:none}
  .social{gap:5px;padding:7px 3px;border-width:3px;border-radius:14px;box-shadow:0 5px 0 var(--ink)}
  .social:hover{box-shadow:0 8px 0 var(--ink)}
  .social img{width:clamp(24px,7.4vw,50px);height:clamp(24px,7.4vw,50px)}
  .social span{font-size:clamp(7.5px,2.5vw,15px);line-height:1.05}

  .steps{gap:16px}
  .step{padding:22px 18px}

  /* Three across a 320px screen is ~92px per card; the 20% side padding and the
     24px floor on the number both had to go or the text overflows the card. */
  .stat{padding:0 7%}
  .stat b{font-size:clamp(13px,4.6vw,26px)}
  .stat span{font-size:clamp(9px,2.7vw,13px);margin-top:.2em}

  /* the negative pull that tucks the pool art up under the copy on desktop
     clamps to -44px here, which collides with the legal text */
  .footer-art{margin-top:18px}

  /* Tweet cards: a 272px tile leaves the card ~104px of head room, so 14px
     display names were truncating. Widen the tile a little and scale the card's
     contents to match, rather than letting the names ellipsise. */
  .loved{--tw-w:min(304px,82vw)}
  .tweet{padding:11px 12px 12px;gap:8px;border-width:3px;border-radius:20px}
  .tw-head{gap:7px}
  .tw-av{width:29px;height:29px}
  .tw-name{font-size:clamp(11px,3vw,14px)}
  .tw-handle{font-size:clamp(10px,2.7vw,13px)}
  .tw-badge{width:12px;height:12px}
  .tw-text{font-size:clamp(11px,3vw,14px);line-height:1.3}
  .tweet-quote .tw-text{font-size:clamp(14px,4.4vw,20px)}
}
@media (max-width:560px){
  .stats-inner{gap:6px}
  
  
  .nav-logo-img{height:38px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}