/* =========================================================
   CHONKETHA design system
   caramel brown / chocolate / cream / near-black ink
   ========================================================= */

@import url("css2.css");

:root{
  /* palette — sampled from chonkethabeaver.png (fur #C06C24, belly #FCDAA4,
     outline #050404, tail #472A14) so the art and the site are one system */
  --caramel:      #C47430;   /* warmer, more saturated than before, matches fur */
  --caramel-deep: #A55A1E;   /* spotlight + blobs, keeps the mascot popping */
  --choco:        #3A2410;   /* dark sections, from the tail brown */
  --choco-soft:   #4C3016;
  --cream:        #FCDAA4;   /* brighter, straight off the belly */
  --cream-hi:     #FFF0D2;
  --ink:          #140B05;   /* near-black warm, matches the beaver's outline */
  --orange:       #F0912E;   /* brighter pop */

  /* mascot (used by any remaining SVG chonks — peeks etc.) */
  --fur:          #C06C24;
  --fur-dark:     #8A4E1B;
  --fur-light:    #EFC78E;

  /* form */
  --bw:      4px;             /* border width */
  --bw-thin: 3px;
  --r:       28px;            /* radius */
  --r-lg:    44px;
  --shadow:      6px 7px 0 var(--ink);
  --shadow-lg:   10px 12px 0 var(--ink);
  --shadow-soft: 5px 6px 0 rgba(26,18,11,.28);

  --display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --body:    'Nunito', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.34,1.56,.64,1);   /* chunky overshoot */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--caramel);
  color:var(--ink);
  font-family:var(--body);
  font-weight:700;
  font-size:clamp(16px,1.05vw + 13px,19px);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--display); font-weight:800; margin:0; line-height:.95; letter-spacing:-.01em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }

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

/* focus: visible and on-brand */
:focus-visible{
  outline:var(--bw) solid var(--ink);
  outline-offset:4px;
  border-radius:8px;
}

.skip-link{
  position:absolute; left:-9999px; top:12px; z-index:999;
  background:var(--cream); color:var(--ink);
  border:var(--bw) solid var(--ink); border-radius:16px;
  padding:.6rem 1.1rem; text-decoration:none;
}
.skip-link:focus{ left:12px; }

/* ---------- shared ink treatment for SVG shapes ---------- */
.ink{ stroke:var(--ink); stroke-width:7; stroke-linejoin:round; }
.ink-line{ stroke:var(--ink); stroke-width:6; stroke-linecap:round; }

/* =========================================================
   Reusable chunks
   ========================================================= */
.card{
  background:var(--cream);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}

.section-title{
  font-size:clamp(2rem,6.2vw,4.6rem);
  text-align:center;
  text-transform:uppercase;
  text-wrap:balance;
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  color:var(--cream-hi);
  /* two layers: a crisp offset edge for the chunky storybook look, plus a soft
     blurred drop shadow underneath for the depth seen in the reference */
  text-shadow:3px 4px 0 var(--ink), 4px 10px 12px rgba(12,7,2,.42);
}
.section-title--cream{ color:var(--cream-hi); }

.section-sub{
  text-align:center; margin-top:.7rem;
  color:var(--choco); font-style:italic; opacity:.85;
}

section{ padding:clamp(4.5rem,10vw,9rem) clamp(1rem,4vw,3rem); position:relative; }

/* ---------------- buttons ---------------- */
.btn{
  --btn-bg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.05rem,1.9vw,1.5rem);
  text-transform:uppercase; text-decoration:none; letter-spacing:.02em;
  color:var(--ink); background:var(--btn-bg);
  border:var(--bw) solid var(--ink);
  border-radius:999px;
  padding:.85em 1.7em;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s ease;
}
.btn:hover{ transform:translate(-3px,-4px) rotate(-1.2deg); box-shadow:var(--shadow-lg); }
.btn:active{ transform:translate(3px,4px); box-shadow:2px 2px 0 var(--ink); }
.btn--primary{ --btn-bg:var(--orange); }
.btn--secondary{ --btn-bg:var(--cream); }

.btn--mega{
  font-size:clamp(1.6rem,6vw,4rem);
  padding:.6em 1.1em;
  --btn-bg:var(--orange);
  border-width:6px;
  box-shadow:12px 14px 0 var(--ink);
}
.btn--mega:hover{ box-shadow:18px 20px 0 var(--ink); }

.btn-row{ display:flex; gap:clamp(.8rem,2.5vw,1.5rem); flex-wrap:wrap; justify-content:center; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100svh;
  /* content row + cue row: the scroll cue is a real flow item, so it can never
     land under the buttons the way an absolutely-positioned one did */
  display:grid; grid-template-rows:1fr auto;
  justify-items:center; align-items:center;
  /* generous bottom padding: the ticker below pulls itself up 1.4rem with a
     negative margin, so the cue needs clearance or it tucks under the ticker */
  padding-block:clamp(1.5rem,4vh,3rem) clamp(2.2rem,4.5vh,3.2rem);
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 78%, var(--caramel-deep) 0 42%, transparent 43%) no-repeat,
    var(--caramel);
}
.hero__inner{ text-align:center; max-width:1100px; width:100%; position:relative; z-index:2; }

.hero__title{
  display:flex; flex-direction:column; align-items:center;
  /* height-aware so the whole hero (mascot, buttons and cue) holds the fold.
     The vh term is the binding one on short laptop viewports. */
  font-size:clamp(2.2rem,min(10vw,8.8vh),6.5rem);
  /* Tilting a wide line inflates its box height, so line-height alone can't
     keep the lines apart. Flex gap separates them regardless of transform,
     and has to clear the hard shadow too. */
  line-height:1;
  gap:.34em;
  color:var(--cream-hi);
  -webkit-text-stroke:4px var(--ink); paint-order:stroke fill;
  /* crisp offset edge + soft depth shadow, matching the reference lettering */
  text-shadow:3px 4px 0 var(--ink), 5px 13px 15px rgba(12,7,2,.45);
}
.hero__title span{ display:block; }
.hero__title span:nth-child(1){ transform:rotate(-1.2deg); }
.hero__title span:nth-child(2){ transform:rotate(.7deg); }
.hero__title-pop{ color:var(--orange); transform:rotate(-1.8deg) scale(1.03); }

.hero__sub{
  margin:clamp(.5rem,1.4vh,1.1rem) auto 0; max-width:34ch;
  font-size:clamp(.95rem,min(2.3vw,2.4vh),1.4rem);
  color:var(--choco);
}

/* mascot stage */
.hero__stage{ position:relative; margin:clamp(.3rem,1.4vh,1.2rem) auto; }
.chonk-holder{
  width:min(70vw,24vh,320px); margin-inline:auto;
  cursor:pointer;
  /* soft drop shadow to match the new lettering, not the old hard flat one */
  filter:drop-shadow(5px 11px 10px rgba(12,7,2,.42));
  transition:transform .25s var(--ease);
}
.chonk-holder:hover{ transform:scale(1.04) rotate(-1.5deg); }
.chonk-holder.is-poked{ animation:poke .65s var(--ease); }
@keyframes poke{
  0%{transform:scale(1)} 25%{transform:scale(1.14) rotate(6deg)}
  55%{transform:scale(.94) rotate(-6deg)} 100%{transform:scale(1)}
}

/* PNG mascot: a gentle breathing float keeps it alive without the SVG rig */
.chonk-img{ width:100%; height:auto; display:block; animation:chonk-breathe 4s ease-in-out infinite; }
@keyframes chonk-breathe{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-2%) scale(1.015); }
}
.chonk-holder:hover .chonk-img,
.chonk-holder.is-poked .chonk-img{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .chonk-img{ animation:none; } }
.chonk{ width:100%; height:auto; display:block; overflow:visible; }

.chonk-hint{
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--choco); opacity:.7; margin-top:.4rem;
  transition:opacity .4s ease;
}
.chonk-hint.is-hidden{ opacity:0; }

/* soft flat background blobs (parallax) */
.hero__clouds{ position:absolute; inset:0; pointer-events:none; }
.blob{
  position:absolute; border-radius:50%;
  background:var(--caramel-deep); border:var(--bw) solid rgba(26,18,11,.18);
}
.blob--1{ width:26vw; height:26vw; left:-6vw;  top:14vh; }
.blob--2{ width:17vw; height:17vw; right:-4vw; top:9vh; }
.blob--3{ width:12vw; height:12vw; right:16vw; bottom:12vh; }

.hero__scroll{
  display:grid; justify-items:center; gap:.4rem;
  margin-top:clamp(.9rem,2.4vh,1.8rem);
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--choco);
}
/* a scroll cue is least useful and most likely to crowd on a short viewport */
@media (max-height:800px){ .hero__scroll{ display:none; } }

/* On a short viewport the CTA matters more than the flavour text: drop the
   eyebrow and the poke hint so the buttons stay above the fold. */
@media (max-height:640px){
  .chonk-hint{ display:none; }
}
.hero__scroll i{
  width:14px; height:14px; border-right:var(--bw-thin) solid var(--ink);
  border-bottom:var(--bw-thin) solid var(--ink); rotate:45deg;
  animation:bob 1.7s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{translate:0 0} 50%{translate:0 7px} }

/* =========================================================
   TICKER
   ========================================================= */
.ticker{
  background:var(--cream);
  border-top:var(--bw) solid var(--ink);
  border-bottom:var(--bw) solid var(--ink);
  overflow:hidden; padding:.75rem 0;
  rotate:-1.1deg; margin-block:-1.4rem; position:relative; z-index:5;
}
.ticker__track{
  display:flex; width:max-content;
  animation:marquee 26s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.1rem,2.6vw,1.9rem);
  text-transform:uppercase; white-space:nowrap;
  padding-inline:1.1rem; color:var(--ink);
}
.ticker__dot{ color:var(--orange); padding-inline:.2rem; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* =========================================================
   VIRAL FEED: embedded X posts on a corkboard
   ========================================================= */
.feed{ background:var(--caramel); }

.feed__lead{
  margin:clamp(1rem,2.5vw,1.6rem) auto 0; max-width:34ch;
  text-align:center; text-wrap:balance;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.15rem,3.2vw,2rem);
  color:var(--cream); text-shadow:4px 5px 0 var(--ink);
  -webkit-text-stroke:2px var(--ink); paint-order:stroke fill;
}
.feed__lead span{ display:block; color:var(--orange); }

/* makes clear these are real third-party posts about beavers, not about the token */
.feed__note{
  margin:.8rem auto 0; max-width:44ch;
  text-align:center; font-size:.9rem; font-style:italic;
  color:var(--choco); opacity:.85;
}

/* Multi-column, not grid: tweet heights vary wildly (a Community Note can add
   300px), and grid rows are as tall as their tallest card, which left large
   dead gaps under the short ones. Columns pack vertically instead.
   Done in CSS rather than JS masonry on purpose: JS would have to move cards
   between column elements, and reparenting an <iframe> reloads it. */
.feed__grid{
  --feed-gap:clamp(1rem,2.2vw,1.8rem);
  max-width:1180px; margin:clamp(2.5rem,5vw,4rem) auto 0;
  columns:3; column-gap:var(--feed-gap);
}
.feed__item{
  /* inline-block + width:100% keeps WebKit from splitting a card across
     columns even with break-inside:avoid */
  display:inline-block; width:100%;
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 var(--feed-gap);
  background:var(--cream);
  border:var(--bw) solid var(--ink);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:.85rem;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
/* stable hand-pinned tilts */
.feed__item:nth-child(3n+1){ rotate:-1.3deg; }
.feed__item:nth-child(3n+2){ rotate:.9deg; }
.feed__item:nth-child(3n+3){ rotate:-.5deg; }
.feed__item:hover,.feed__item:focus-within{
  transform:translateY(-8px); rotate:0deg; box-shadow:var(--shadow-lg);
}

/* the widget swaps the blockquote for an iframe, so both must sit flush */
.feed__item .twitter-tweet{ margin:0 !important; width:100% !important; }
.feed__item iframe{ border-radius:16px !important; }

/* Fallback: if widgets.js is blocked the blockquote stays. Style it so the
   section still reads as a feed rather than raw quoted text. */
.feed__item blockquote.twitter-tweet:not(.twitter-tweet-rendered){
  font-family:var(--body); font-weight:700; font-size:.98rem;
  color:var(--ink); padding:.4rem .3rem;
}
.feed__item blockquote.twitter-tweet:not(.twitter-tweet-rendered) p{ margin-bottom:.6rem; }
.feed__item blockquote.twitter-tweet:not(.twitter-tweet-rendered) a{
  color:var(--caramel-deep); font-weight:900;
  /* comfortable tap target in the fallback state (X's own embed handles its
     own hit areas once the widget renders) */
  display:inline-block; padding:.55rem 0; min-height:44px;
}

@media (max-width:1100px){ .feed__grid{ columns:2; max-width:820px; } }
@media (max-width:700px){ .feed__grid{ columns:1; max-width:520px; } }

/* =========================================================
   STATS
   ========================================================= */
.stats{ background:var(--choco); }
.stat-grid{
  display:grid; gap:clamp(1rem,2.6vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  max-width:1200px; margin:clamp(2.5rem,5vw,4rem) auto 0;
}
.stat{
  padding:clamp(1.6rem,3vw,2.6rem) 1.2rem;
  text-align:center; border-radius:var(--r-lg);
  transition:transform .25s var(--ease);
}
.stat:nth-child(odd){ rotate:-1.4deg; }
.stat:nth-child(even){ rotate:1.2deg; }
.stat:hover{ transform:translateY(-8px) rotate(0deg); }
.stat__val{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(2.4rem,6vw,4rem); line-height:1;
  color:var(--caramel-deep); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill;
  /* nowrap so a long value overflows rather than wrapping. JS then measures
     it and scales it down to fit. Single digits keep the full size; only long
     strings ("BILLIONS", and "1,000,000,000" mid count-up) shrink. */
  white-space:nowrap;
  transform-origin:50% 50%;
}
.stat__label{
  display:block; margin-top:.6rem;
  font-size:.9rem; text-transform:uppercase; letter-spacing:.09em; color:var(--choco);
}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{ background:var(--caramel); }
.table{
  margin-top:clamp(2rem,4vw,3.4rem);
  padding:clamp(1.4rem,3vw,2.6rem) 0;
  border-block:var(--bw) solid var(--ink);
  background:
    repeating-linear-gradient(90deg,#8A5A33 0 62px,#7E5130 62px 64px),
    #8A5A33;
  box-shadow:inset 0 8px 0 rgba(26,18,11,.16);
}
.rail{
  display:flex; gap:clamp(1rem,2.4vw,1.9rem);
  padding-inline:clamp(1rem,5vw,4rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; cursor:grab;
  scroll-snap-type:x proximity;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail.is-dragging .meme{ pointer-events:none; }

.meme{
  flex:0 0 auto; width:clamp(190px,26vw,290px);
  background:var(--cream-hi);
  border:var(--bw) solid var(--ink); border-radius:20px;
  padding:.7rem .7rem 0;
  box-shadow:var(--shadow);
  scroll-snap-align:center;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
  will-change:transform;
}
.meme:hover,.meme:focus-within{
  transform:scale(1.09) rotate(0deg) translateY(-10px) !important;
  box-shadow:var(--shadow-lg); z-index:3;
}
.meme img,
.meme__vid{
  display:block;
  width:100%; aspect-ratio:1; object-fit:cover;
  border:var(--bw-thin) solid var(--ink); border-radius:12px;
  /* the stickers sit on their own dark backdrop; ink matches it so the frame
     reads as one clean screen rather than a seam */
  background:var(--ink);
}
.meme figcaption{
  font-family:var(--display); font-weight:800;
  text-align:center; text-transform:uppercase;
  font-size:.9rem; padding:.55rem .2rem .7rem; color:var(--ink);
}

/* =========================================================
   TOKEN: blueprint
   ========================================================= */
.token{ background:var(--choco); }
.blueprint{
  position:relative;
  max-width:1000px; margin-inline:auto;
  padding:clamp(2rem,5vw,4rem) clamp(1.2rem,4vw,3.4rem);
  background:
    linear-gradient(var(--choco-soft),var(--choco-soft)),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(246,228,200,.14) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(246,228,200,.14) 39px 40px);
  background-blend-mode:multiply,normal,normal;
  border:var(--bw) dashed var(--cream);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  text-align:center;
  color:var(--cream);
}
.blueprint::before,.blueprint::after{
  content:''; position:absolute; width:22px; height:22px;
  border:var(--bw-thin) solid var(--cream); border-radius:50%;
}
.blueprint::before{ left:18px; top:18px; }
.blueprint::after{ right:18px; bottom:18px; }

.blueprint__stamp{
  display:inline-block; margin-bottom:1.2rem;
  font-family:var(--display); letter-spacing:.2em; font-size:.78rem;
  color:var(--choco); background:var(--orange);
  border:var(--bw-thin) solid var(--ink); border-radius:8px;
  padding:.35rem .9rem; rotate:-2.5deg;
}

.token__big{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.2rem,8.6vw,5.6rem); line-height:1;
  margin-top:1.4rem; color:var(--orange);
  -webkit-text-stroke:2px var(--ink); paint-order:stroke fill;
  font-variant-numeric:tabular-nums;
}
.token__cap{ font-size:clamp(1rem,2.4vw,1.5rem); margin-top:.4rem; color:var(--cream); }

.specs{
  /* 2x2 rather than auto-fit, so four chips never break 3 + 1 orphan */
  display:grid; gap:.9rem; grid-template-columns:repeat(2,minmax(0,1fr));
  margin:clamp(2rem,4vw,3rem) 0 0; text-align:left;
}
@media (max-width:600px){ .specs{ grid-template-columns:1fr; } }
.spec{
  display:flex; align-items:center; gap:.7rem;
  background:var(--cream); color:var(--ink);
  border:var(--bw-thin) solid var(--ink); border-radius:18px;
  padding:.85rem 1.1rem;
  font-family:var(--display); font-weight:800; font-size:1.02rem;
  box-shadow:var(--shadow-soft);
  transition:transform .2s var(--ease);
}
.spec:hover{ transform:translate(-2px,-3px) rotate(-1deg); }
.spec__tick{
  flex:none; width:1.7em; height:1.7em; border-radius:50%;
  display:grid; place-items:center;
  background:var(--orange); border:var(--bw-thin) solid var(--ink);
}

/* contract address */
.ca{ margin-top:clamp(2rem,4vw,3rem); text-align:left; }
.ca__label{
  display:block; font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream); margin-bottom:.5rem;
}
.ca__row{ display:flex; gap:.7rem; flex-wrap:wrap; }
.ca__input{
  flex:1 1 260px; min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9rem;
  background:var(--cream); color:var(--ink);
  border:var(--bw) solid var(--ink); border-radius:16px;
  padding:.85rem 1rem;
  text-overflow:ellipsis;
}
.btn--copy{ --btn-bg:var(--cream); font-size:1rem; padding:.75em 1.5em; border-radius:16px; }

/* offsite payment CTA: near-black reads as a payment button and still sits
   inside the palette (it's the ink colour, not a foreign brand colour) */
.btn--pay{
  --btn-bg:var(--ink);
  color:var(--cream);
  width:100%; margin-top:1.1rem;
  gap:.7rem; border-radius:18px;
  font-size:clamp(1rem,1.6vw,1.25rem);
}
.btn--pay:hover{ --btn-bg:#2A1D12; }
/* the FOMO icon is near-black navy on a near-black button, so a cream ring
   separates it and matches the outlined treatment used everywhere else */
.btn__ico{
  width:1.7em; height:1.7em; flex:none;
  border-radius:.45em;
  border:2px solid var(--cream);
}

.ca__offsite{
  margin-top:.6rem; text-align:center;
  font-size:.78rem; color:var(--cream); opacity:.7;
}
.btn--copy.is-done{ --btn-bg:var(--orange); }
.ca__note{ min-height:1.5em; margin-top:.6rem; font-size:.85rem; color:var(--cream); opacity:.85; }

/* =========================================================
   HOW TO BUY
   ========================================================= */
.buy{ background:var(--caramel); }
.buy__grid{
  display:grid; gap:clamp(2rem,4vw,3.4rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:start;
  max-width:1200px; margin:clamp(2.5rem,5vw,4rem) auto 0;
}
.steps{ display:grid; gap:clamp(.9rem,2vw,1.4rem); }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.1rem;
  padding:clamp(1.1rem,2.4vw,1.7rem);
  opacity:.45; translate:0 18px;
  transition:opacity .5s ease, translate .5s var(--ease), transform .25s var(--ease);
}
.step.is-on{ opacity:1; translate:0 0; }
.step:hover{ transform:rotate(-1deg) scale(1.015); }
.step__n{
  grid-row:1 / span 2; align-self:start;
  width:2.3em; height:2.3em; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:1.3rem;
  background:var(--orange); color:var(--ink);
  border:var(--bw) solid var(--ink);
}
.step h3{ font-size:clamp(1.15rem,2.6vw,1.7rem); text-transform:uppercase; }
.step p{ color:var(--choco); font-size:.96rem; font-weight:700; }

.dam-wrap{ position:sticky; top:14vh; text-align:center; }
.dam{ width:100%; height:auto; overflow:visible; filter:drop-shadow(7px 9px 0 rgba(26,18,11,.28)); }
.dam__count{
  margin-top:.9rem; font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:var(--cream);
  text-shadow:3px 3px 0 var(--ink);
}
.log{ opacity:0; transform-box:fill-box; transform-origin:50% 50%; }
.log.is-on{ animation:drop .55s var(--ease) forwards; }
@keyframes drop{
  from{ opacity:0; translate:0 -90px; rotate:-14deg; }
  to  { opacity:1; translate:0 0;     rotate:0deg; }
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.colony{
  background:var(--choco);
  min-height:100svh; display:grid; place-items:center;
  overflow:hidden; position:relative; text-align:center;
}
.colony__inner{
  position:relative; z-index:2;
  display:grid; gap:clamp(1.6rem,4vw,2.8rem); justify-items:center;
  /* keeps the headline clear of the beavers peeking in at the edges */
  max-width:min(1040px,88vw); margin-inline:auto;
}
.colony__title{ font-size:clamp(1.5rem,5.4vw,3.9rem); }
.colony__title span{ color:var(--orange); }
.colony__fine{ font-size:.82rem; color:var(--cream); opacity:.7; max-width:40ch; }

.colony__peeks{ position:absolute; inset:0; pointer-events:none; }
.peek{
  position:absolute; width:var(--w,150px);
  opacity:0; transition:opacity .5s ease, translate .6s var(--ease);
}
.peek img{
  width:100%; height:auto; display:block;
  /* matches the flat drop shadow the rest of the art uses */
  filter:drop-shadow(5px 6px 0 rgba(26,18,11,.35));
}
.peek.is-on{ opacity:1; translate:0 0 !important; }

/* =========================================================
   FOOTER + easter eggs
   ========================================================= */
.foot{
  background:var(--choco); color:var(--cream);
  border-top:var(--bw) solid var(--ink);
  padding:2rem 1rem; text-align:center; font-size:.85rem;
}
.foot__sep{ opacity:.45; padding-inline:.35rem; }
.foot__mail{
  color:var(--cream); font-weight:900;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:2px;
  /* comfortable tap target without disturbing the single-line footer */
  display:inline-block; padding-block:.5rem;
}
.foot__mail:hover{ color:var(--orange); }
.egg-layer{ position:fixed; inset:0; pointer-events:none; z-index:99; overflow:hidden; }
.egg{
  position:fixed; font-size:2rem;
  animation:fly 1.5s ease-out forwards;
}
@keyframes fly{
  from{ opacity:1; transform:translate(-50%,-50%) scale(.4); }
  to  { opacity:0; transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.5) rotate(var(--rot)); }
}

/* =========================================================
   MASCOT RIG: placement and idle animation
   Every part is positioned from 0,0 via translate() so that
   transform-origin stays on the part's own box.
   ========================================================= */
.chonk-tail,.chonk-body,.chonk-head,.chonk-eyes,.chonk-paw{
  transform-box:fill-box;
}

.chonk-tail{
  transform-origin:50% 4%;
  transform:translate(98px,470px) rotate(-16deg);
  animation:tail-slap 9s var(--ease) infinite;
}
@keyframes tail-slap{
  0%,84%,100%{ transform:translate(98px,470px) rotate(-16deg); }
  88%        { transform:translate(98px,470px) rotate(-44deg); }
  92%        { transform:translate(98px,470px) rotate(-2deg); }
  96%        { transform:translate(98px,470px) rotate(-20deg); }
}

.chonk-body{
  transform-origin:50% 100%;
  animation:breathe 3.6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1,1); }
  50%    { transform:scale(1.025,1.04); }
}

.chonk-head{
  transform-origin:50% 100%;
  animation:head-bob 3.6s ease-in-out infinite;
}
@keyframes head-bob{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%    { transform:translate(0,-7px) rotate(.7deg); }
}

.chonk-eyes{
  transform-origin:50% 50%;
  animation:blink 6.5s ease-in-out infinite;
}
@keyframes blink{
  0%,90%,100%{ transform:scaleY(1); }
  94%        { transform:scaleY(.28); }
}

/* base transforms double as the resting pose when animation is disabled */
.chonk-paw{ transform-origin:50% 20%; }
.chonk-paw--l{ transform:translate(122px,468px); animation:paw-l 4.2s ease-in-out infinite; }
.chonk-paw--r{ transform:translate(478px,468px); animation:paw-r 4.2s ease-in-out infinite .5s; }
@keyframes paw-l{
  0%,100%{ transform:translate(122px,468px) rotate(0deg); }
  50%    { transform:translate(122px,462px) rotate(-11deg); }
}
@keyframes paw-r{
  0%,100%{ transform:translate(478px,468px) rotate(0deg); }
  50%    { transform:translate(478px,462px) rotate(11deg); }
}

/* while poked, he gets excited */
.is-poked .chonk-tail{ animation-duration:1.1s; }
.is-poked .chonk-paw--l,.is-poked .chonk-paw--r{ animation-duration:.5s; }

/* konami mode */
.chonk-mode .chonk-holder,.chonk-mode .meme,.chonk-mode .card{ rotate:2deg; }
.chonk-mode{ --orange:#F2A65A; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:860px){
  .buy__grid{ grid-template-columns:1fr; }
  .dam-wrap{ position:static; order:-1; max-width:340px; margin-inline:auto; }
  .blob--1,.blob--2,.blob--3{ display:none; }
}
@media (max-width:520px){
  :root{ --bw:3px; --bw-thin:2px; --shadow:4px 5px 0 var(--ink); --shadow-lg:7px 8px 0 var(--ink); }
  .hero__stage{ margin-block:.5rem; }
  /* stacked full-width buttons reach the bottom edge, so the cue would collide */
  .hero__scroll{ display:none; }
  .btn{ width:100%; max-width:340px; }
  .ca__row{ flex-direction:column; }
  .btn--copy{ width:100%; }
  /* a 44-char address can't fit a phone: shrink it so more is readable,
     the full value still goes to the clipboard via COPY.
     flex must be reset too. The row is a column here, so the 260px basis
     from the desktop rule would apply to HEIGHT and give a 260px tall box. */
  .ca__input{ font-size:.78rem; padding:.75rem .8rem; flex:0 0 auto; width:100%; }
}

/* =========================================================
   REDUCED MOTION: kill all movement, keep all content
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .step,.peek,.log{ opacity:1 !important; translate:none !important; }
  .log{ animation:none !important; }
  .dam-wrap{ position:static; }
}