/* goodcoin.io marketing pages: home, /about/, /tokenomics/, /buy/, /community/. Character first:
   GOOD (the vault's reaction stickers) sits in every section and reacts to it. Built on the cartoon
   kit and type roles in shared/chrome.css. Four grounds, each with its shadow colour: lime and cream
   (ink shadows), ink and hood green (cream shadows). */

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip on the root lets the tilted tapes bleed off both edges without widening the page */
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--site-nav-clear); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--site-ink); color: var(--site-cream); font-family: var(--site-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
::selection { background: var(--site-lime); color: var(--site-ink); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--site-lime); color: var(--site-ink); font: var(--site-f-strong); border-radius: 10px; }
.skip:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:root { --wrap: 1200px; --gut: clamp(20px, 4vw, 56px); --sec-y: clamp(80px, 9vw, 128px); --ink-2: rgba(12, 6, 2, .72); --cream-2: rgba(254, 249, 244, .74); --down: #ff7a66; }

/* ── Grounds ── */
.sec { position: relative; padding: var(--sec-y) var(--gut); }
.sec--lime { background: var(--site-lime); color: var(--site-ink); }
.sec--cream { background: var(--site-cream); color: var(--site-ink); }
.sec--ink { background: var(--site-ink); color: var(--site-cream); --site-shadow-c: var(--site-cream); }
.sec--hood { background: var(--site-hood); color: var(--site-cream); --site-shadow-c: var(--site-cream); }
/* a cream drop behind a character reads as a white sticker edge, so GOOD gets a lime one on dark grounds */
.sec--ink .sticker, .sec--hood .sticker { filter: drop-shadow(7px 8px 0 var(--site-lime)); }
.dots { background-image: radial-gradient(rgba(12, 6, 2, .13) 1.3px, transparent 1.6px); background-size: 16px 16px; }
.sec--ink.dots, .sec--hood.dots { background-image: radial-gradient(rgba(254, 249, 244, .07) 1.3px, transparent 1.6px); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; }

/* ── Headings ── */
.head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head .tag { margin-bottom: 18px; }
.h-display { font: var(--site-f-display-2); letter-spacing: .005em; text-wrap: balance; } /* no one-word last lines */
.h-title { font: var(--site-f-title-1); }
.h-card { font: var(--site-f-title-2); }
.dek { margin-top: 16px; max-width: 52ch; font: var(--site-f-lead); }
.head--center .dek { margin-left: auto; margin-right: auto; }
.sec--lime .dek, .sec--cream .dek { color: var(--ink-2); }
.sec--ink .dek, .sec--hood .dek { color: var(--cream-2); }
.copy { font: var(--site-f-body); }
.copy + .copy { margin-top: 14px; }
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font: var(--site-f-button); color: inherit; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: currentColor; }
.more:hover { text-decoration-color: var(--site-lime); }
.sec--lime .more:hover { text-decoration-color: var(--site-ink); }

/* ── Speech bubble ── */
.bubble {
  position: absolute; z-index: 2; padding: 12px 16px 13px; max-width: 220px;
  background: #fff; color: var(--site-ink); border: var(--site-line); border-radius: 18px; box-shadow: 4px 4px 0 var(--site-ink);
  font: var(--site-f-title-2); text-align: center;
}
.bubble::after { content: ""; position: absolute; left: 34px; bottom: -12px; width: 20px; height: 20px; background: #fff; border-right: 3px solid var(--site-ink); border-bottom: 3px solid var(--site-ink); transform: rotate(45deg); }
.bubble--right::after { left: auto; right: 34px; }
.bubble span { display: inline-block; transition: opacity .2s ease, transform .2s ease; }
.bubble.is-swapping span { opacity: 0; transform: translateY(6px); }

/* ── Home hero: the wordmark, the pitch and GOOD himself ── */
.home-hero { position: relative; overflow: hidden; background-color: var(--site-lime); color: var(--site-ink); padding: calc(var(--site-nav-clear) + 28px) var(--gut) 56px; }
.home-hero__grid { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; min-height: min(700px, calc(100svh - 240px)); }
.home-hero h1 { margin: 0; line-height: 0; }
.home-hero h1 img { width: min(480px, 100%); height: auto; filter: drop-shadow(6px 7px 0 var(--site-ink)); }
.home-hero__sub { max-width: 34ch; margin-top: 18px; font: var(--site-f-lead); font-size: clamp(18px, 1.5vw, 22px); color: var(--site-ink); }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.home-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.home-hero__meta .ca-chip { box-shadow: 3px 3px 0 var(--site-ink); }
.stat-pill { display: inline-flex; flex-direction: column; gap: 2px; padding: 7px 12px; background: var(--site-cream); border: 2px solid var(--site-ink); border-radius: 12px; }
.stat-pill dt { font: var(--site-f-label); color: var(--ink-2); }
.stat-pill dd { font: 400 19px/1 var(--site-display); color: var(--site-ink); font-variant-numeric: tabular-nums; }
.stat-pill dd.is-down { color: #b3261e; }
.home-hero__stats { display: contents; }
.home-hero__stats[hidden] { display: none; }
.home-hero h1 img { animation: hero-slam .6s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes hero-slam { from { transform: scale(1.12) rotate(-4deg); } to { transform: none; } }
/* GOOD stands at the bottom of the hero: the art sits flush on the hero's bottom edge (cancelling its
   padding) and the rig runs a further 9% below it, so the hero's overflow hides where the bust is cut */
.home-hero__art { position: relative; justify-self: end; align-self: end; width: min(640px, 100%); margin-bottom: -56px; }
.home-hero__art .bubble { top: 7%; left: -8%; z-index: 3; }
/* the bubble pops in as the shades land */
.js .rig-wrap:not(.is-landed) > .bubble { opacity: 0; }
.rig-wrap.is-landed > .bubble { animation: site-pop .45s both; }

/* ── The anthem: a "now playing" card. The disc spins and the progress strip fills while it plays; the
   bars read --b1..--b5 from site.js's analyser (or loop in CSS when there isn't one). It sits under the
   hero stats: every spot over GOOD covers his face or his medallion at some width. ── */
.anthem {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  width: min(360px, 100%); margin-top: 22px; padding: 10px 12px 14px 10px; overflow: hidden;
  background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 18px; box-shadow: 5px 5px 0 var(--site-ink);
  cursor: pointer; text-align: left; transition: translate .15s ease, box-shadow .15s ease;
}
.anthem:hover { translate: 0 -2px; box-shadow: 6px 7px 0 var(--site-ink); }
.anthem:active { translate: 3px 3px; box-shadow: 2px 2px 0 var(--site-ink); }
.anthem:focus-visible { outline: 3px solid var(--site-ink); outline-offset: 4px; }
.anthem__disc {
  display: grid; place-items: center; width: 48px; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--site-ink);
  background: radial-gradient(circle, transparent 0 31%, var(--site-ink) 32% 35%, transparent 36%), repeating-radial-gradient(circle, #16110d 0 2px, #2c241d 2px 4px);
}
/* the record's label: lime, with the spindle hole */
.anthem__disc span { width: 42%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--site-ink) 0 15%, var(--site-lime) 17%); }
.anthem__text { min-width: 0; }
.anthem__title { display: block; font: 400 17px/1.05 var(--site-display); white-space: nowrap; }
.anthem__state { display: block; margin-top: 4px; font: var(--site-f-small); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anthem__eq { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.anthem__eq i { display: block; width: 4px; height: 100%; border-radius: 2px; background: var(--site-ink); transform-origin: 50% 100%; scale: 1 calc(.16 + var(--eq, 0) * .84); }
.anthem__eq i:nth-child(1) { --eq: var(--b1, 0); }
.anthem__eq i:nth-child(2) { --eq: var(--b2, 0); }
.anthem__eq i:nth-child(3) { --eq: var(--b3, 0); }
.anthem__eq i:nth-child(4) { --eq: var(--b4, 0); }
.anthem__eq i:nth-child(5) { --eq: var(--b5, 0); }
.anthem__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--site-ink); color: var(--site-lime); }
.anthem__icon svg { width: 14px; height: 14px; fill: currentColor; }
.anthem .ico-pause, .anthem[aria-pressed="true"] .ico-play { display: none; }
.anthem[aria-pressed="true"] .ico-pause { display: block; }
.anthem__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(12, 6, 2, .1); }
.anthem__bar span { display: block; height: 100%; background: var(--site-hood); transform-origin: 0 50%; scale: var(--p, 0) 1; }
/* until it's been played once, the button pings to say it does something */
.anthem:not([data-played]) .anthem__icon { animation: anthem-ping 2.2s ease-out infinite; }
.anthem[aria-pressed="true"] .anthem__disc { animation: anthem-spin 1.8s linear infinite; }
.anthem[aria-pressed="true"]:not(.is-live) .anthem__eq i { animation: anthem-eq .7s ease-in-out infinite alternate; }
.anthem[aria-pressed="true"]:not(.is-live) .anthem__eq i:nth-child(2n) { animation-delay: -.35s; animation-duration: .55s; }
.anthem[aria-pressed="true"]:not(.is-live) .anthem__eq i:nth-child(3n) { animation-delay: -.2s; animation-duration: .9s; }
@keyframes anthem-spin { to { rotate: 360deg; } }
@keyframes anthem-ping { 0% { box-shadow: 0 0 0 0 rgba(12, 6, 2, .45); } 70%, 100% { box-shadow: 0 0 0 12px rgba(12, 6, 2, 0); } }
@keyframes anthem-eq { from { scale: 1 .2; } to { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) { .anthem, .anthem * { animation: none !important; transition: none !important; } }

/* ── GOOD himself: the Adopt tool's layers as a rig, standing in front of his sun. Every layer is the
   same 1000px square, so the transform origins below are spots on GOOD (the chain's neck, the paw's
   elbow). On load he rises, the shades drop on and he waves; then he breathes, his chain sways and his
   shades flash. site.js adds the reactions (is-grinning / is-peeking / is-waving / is-cheers /
   is-barking), is-vibing while the anthem plays, --px/--py to lean toward the pointer, and rig--ready
   once the entrance is over, so a reaction never replays it. The bottom of the bust is always below
   the section's edge (margin-bottom here, overflow: hidden on the section). ── */
.rig { position: relative; display: block; width: 100%; aspect-ratio: 1; margin-bottom: -9%; padding: 0; background: none; border: 0; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rig__halo { position: absolute; left: 6%; top: 2%; width: 88%; aspect-ratio: 1; overflow: hidden; background: var(--site-cream); border: var(--site-line); border-radius: 50%; box-shadow: 9px 9px 0 var(--site-ink); }
.sec--ink .rig__halo { box-shadow: 9px 9px 0 var(--site-lime); }
.rig__sun { position: absolute; inset: -22%; background: repeating-conic-gradient(from 0deg, #fff6d6 0deg 9deg, #ffe58f 9deg 18deg); animation: rig-spin 80s linear infinite; }
.rig__halo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 45%, rgba(242, 194, 48, .4) 100%); }
.rig:focus-visible { outline: none; }
.rig:focus-visible .rig__halo { outline: 3px solid var(--site-ink); outline-offset: 6px; }
.sec--ink .rig:focus-visible .rig__halo { outline-color: var(--site-lime); }
.rig__doodles { position: absolute; inset: 0; color: var(--site-ink); pointer-events: none; }
.sec--ink .rig__doodles { color: var(--site-lime); }
.rig__doodles svg { position: absolute; fill: currentColor; animation: rig-twinkle 3.4s ease-in-out infinite; }
.rig__doodles svg:nth-child(1) { left: -2%; top: 12%; width: 9%; }
.rig__doodles svg:nth-child(2) { right: 0; top: 3%; width: 6%; animation-delay: 1.1s; }
.rig__doodles svg:nth-child(3) { right: -5%; top: 40%; width: 7%; animation-delay: 2.1s; }
.rig__doodles svg:nth-child(4) { left: -1%; top: 44%; width: 5%; animation-delay: .6s; }
.rig__doodles svg:nth-child(5) { left: 84%; top: 58%; width: 11%; animation: rig-jiggle 2.8s ease-in-out infinite; }
.rig__pose { position: absolute; inset: 0; transform-origin: 50% 100%; translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 6px); rotate: calc(-2deg + var(--px, 0) * 2deg); transition: translate .4s ease-out, rotate .4s ease-out; }
.rig__bob { position: absolute; inset: 0; transform-origin: 50% 100%; animation: rig-breathe 3.8s ease-in-out infinite; }
.rig__bob img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.rig__body { filter: drop-shadow(10px 4px 0 rgba(12, 6, 2, .9)); }
.sec--ink .rig__body { filter: none; }
.rig__chain { transform-origin: 51% 52%; animation: rig-sway 3.8s ease-in-out infinite; }
.rig__grin { opacity: 0; transition: opacity .1s; }
.rig__shades { transform-origin: 50% 29%; translate: calc(var(--px, 0) * 5px) calc(var(--py, 0) * 3px); transition: translate .4s ease-out; }
.rig__phones { transform-origin: 50% 24%; }
.rig__shades, .rig__chain { position: absolute; inset: 0; }
.rig__glint { position: absolute; inset: 0; overflow: hidden; -webkit-mask: var(--glint-mask) 0 0 / 100% 100% no-repeat; mask: var(--glint-mask) 0 0 / 100% 100% no-repeat; }
.rig__glint::before { content: ""; position: absolute; width: 9%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent); }
.rig__shades .rig__glint { --glint-mask: url("/assets/rig/shades.webp"); }
.rig__shades .rig__glint::before { top: 20%; bottom: 62%; left: 14%; transform: translateX(-100%) skewX(-22deg); animation: rig-glint 5.5s 3.5s ease-in-out infinite; }
.rig__chain .rig__glint { --glint-mask: url("/assets/rig/chain.webp"); }
.rig__chain .rig__glint::before { top: 48%; bottom: 0; left: 18%; transform: translateX(-100%) skewX(-22deg); animation: rig-glint 7s 1.6s ease-in-out infinite; }
.rig__paw { transform-origin: 88% 104%; transform: translateY(46%) rotate(10deg); }
.rig__cup { position: absolute; inset: 0; transform-origin: 92% 104%; }
.rig__steam { position: absolute; left: 69%; top: 29%; width: 18%; overflow: visible; fill: none; stroke: rgba(12, 6, 2, .45); stroke-width: 4; stroke-linecap: round; }
.rig__steam path { opacity: 0; animation: rig-steam 2.6s ease-in-out infinite; }
.rig__steam path:nth-child(2) { animation-delay: .85s; }
.rig__steam path:nth-child(3) { animation-delay: 1.7s; }
.rig__bling { position: absolute; left: 69%; top: 19%; width: 8%; fill: #fff; stroke: var(--site-ink); stroke-width: 1.2; scale: 0; animation: rig-bling 5.5s 2.6s ease-out infinite; }
.rig__notes svg { position: absolute; width: 7%; fill: var(--site-ink); opacity: 0; }
.rig__notes svg:nth-child(1) { left: 84%; top: 20%; }
.rig__notes svg:nth-child(2) { left: 9%; top: 24%; }
.rig__notes svg:nth-child(3) { left: 78%; top: 6%; width: 5.5%; }

/* entrance: rise, shades drop at 0.85s, squash as they land, then the idle move (site.js) */
/* until site.js sees him on screen (is-entering) he waits below with his shades off, so a visitor who
   scrolls to him still gets the entrance */
.js .rig:not(.rig--ready) .rig__bob { transform: translateY(36%); }
.js .rig:not(.rig--ready) .rig__shades { transform: translateY(-110%); }
.rig.is-entering:not(.rig--ready) .rig__bob { animation: rig-enter 1.6s cubic-bezier(.3, .7, .3, 1) both, rig-breathe 3.8s 1.6s ease-in-out infinite; }
.rig.is-entering:not(.rig--ready) .rig__shades { animation: rig-drop .55s .85s cubic-bezier(.55, 0, .75, .45) both; }
/* reactions */
.rig.is-grinning .rig__grin { opacity: 1; }
.rig.is-peeking .rig__shades { animation: rig-peek 1.5s ease-in-out; }
.rig.is-waving .rig__paw { animation: rig-wave 1.8s ease-in-out; }
.rig.is-cheers .rig__cup { animation: rig-cheers 1.6s ease-in-out; }
.rig.is-barking .rig__bob { animation: rig-bark .5s ease-in-out; }
.rig.is-looking .rig__bob { animation: rig-look 1.7s ease-in-out; }
.rig.is-looking .rig__shades { animation: rig-peek 1.7s ease-in-out; }
.rig.is-vibing .rig__bob { animation: rig-vibe .48s ease-in-out infinite alternate; }
.rig.is-vibing .rig__chain { animation-duration: .96s; }
.rig.is-vibing .rig__phones { animation: rig-thump .48s ease-in-out infinite alternate; }
.rig.is-vibing .rig__notes svg { animation: rig-note 1.9s ease-out infinite; }
.rig.is-vibing .rig__notes svg:nth-child(2) { animation-delay: .6s; }
.rig.is-vibing .rig__notes svg:nth-child(3) { animation-delay: 1.2s; }
/* with the analyser (is-live) he moves on the music itself: --beat is the kick, --nod flips each beat */
.rig.is-vibing.is-live .rig__bob { animation: none; transform: translateY(calc(var(--beat, 0) * 2.4%)) rotate(calc(var(--beat, 0) * var(--nod, 1) * 2deg)); }
.rig.is-vibing.is-live .rig__phones { animation: none; scale: calc(1 + var(--beat, 0) * .05); }
.rig.is-vibing.is-live .rig__halo { scale: calc(1 + var(--beat, 0) * .035); }
/* off screen nothing needs to move; !important because the state rules above reset play-state */
.rig.is-paused *, .rig.is-paused *::before, .rig.is-paused *::after { animation-play-state: paused !important; }

@keyframes rig-spin { to { rotate: 360deg; } }
@keyframes rig-breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.006 1.014; } }
@keyframes rig-enter {
  0% { transform: translateY(36%); }
  42% { transform: translateY(-2%); }
  56% { transform: translateY(0); }
  86% { transform: none; }
  90% { transform: scale(1.03, .96); }
  96% { transform: scale(.99, 1.012); }
  100% { transform: none; }
}
@keyframes rig-drop {
  0% { transform: translateY(-110%) rotate(-14deg); }
  78% { transform: translateY(1.5%) rotate(3deg); }
  90% { transform: translateY(-1.2%) rotate(-1deg); }
  100% { transform: none; }
}
@keyframes rig-peek { 0%, 100% { transform: none; } 22%, 74% { transform: translateY(5.5%) rotate(-2deg); } }
@keyframes rig-wave {
  0% { transform: translateY(46%) rotate(10deg); }
  16% { transform: translateY(0) rotate(0deg); }
  28% { transform: rotate(-14deg); }
  40% { transform: rotate(6deg); }
  52% { transform: rotate(-14deg); }
  64% { transform: rotate(6deg); }
  78% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(46%) rotate(10deg); }
}
@keyframes rig-cheers { 0%, 100% { transform: none; } 28%, 66% { transform: translateY(-6%) rotate(-8deg); } 47% { transform: translateY(-7.5%) rotate(-5deg); } }
@keyframes rig-bark { 0%, 100% { transform: none; } 20% { transform: translateX(-1.6%) rotate(-2deg) scale(1.03); } 40% { transform: translateX(1.6%) rotate(2deg) scale(1.03); } 60% { transform: translateX(-1%) rotate(-1deg); } 80% { transform: translateX(.5%); } }
@keyframes rig-vibe { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-1.8%) rotate(1.5deg); } }
@keyframes rig-sway { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
@keyframes rig-thump { from { scale: 1; } to { scale: 1.035; } }
@keyframes rig-bling { 0%, 100% { scale: 0; rotate: 0deg; } 5% { scale: 1; rotate: 45deg; } 11% { scale: 0; rotate: 90deg; } }
@keyframes rig-note { 0% { opacity: 0; translate: 0 0; rotate: -10deg; scale: .6; } 15% { opacity: 1; scale: 1; } 100% { opacity: 0; translate: 14px -110px; rotate: 18deg; scale: 1; } }
@keyframes rig-glint { 0%, 70% { transform: translateX(-100%) skewX(-22deg); } 86%, 100% { transform: translateX(760%) skewX(-22deg); } }
@keyframes rig-look { 0%, 100% { transform: none; } 18%, 40% { transform: translateX(-1.2%) rotate(-3.5deg); } 58%, 80% { transform: translateX(1.2%) rotate(3.5deg); } }
@keyframes rig-twinkle { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: .55; rotate: 45deg; } }
@keyframes rig-jiggle { 0%, 100% { translate: 0 0; rotate: -6deg; } 50% { translate: 0 -6px; rotate: 6deg; } }
@keyframes rig-steam { 0% { opacity: 0; transform: translateY(12px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }

@media (prefers-reduced-motion: reduce) {
  .home-hero h1 img, .rig-wrap > .bubble, .rig *, .rig *::before, .rig *::after { animation: none !important; transition: none !important; }
  .rig-wrap > .bubble { opacity: 1 !important; }
  .rig__steam path { opacity: .8; }
  .rig.is-waving .rig__paw { transform: none; }
  .rig.is-peeking .rig__shades { transform: translateY(5.5%); }
  .rig.is-cheers .rig__cup { transform: translateY(-6%) rotate(-8deg); }
}
@media (max-width: 1023px) {
  .home-hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
  .home-hero__art { justify-self: center; width: min(460px, 100%); margin-top: 20px; }
  .home-hero__art .bubble { left: -2%; top: 4%; font-size: 17px; max-width: 150px; }
}
@media (max-width: 809px) {
  .home-hero__sub { margin-top: 14px; }
  .home-hero__cta, .home-hero__meta { margin-top: 20px; }
  .home-hero { padding-bottom: 40px; }
  .home-hero__art { margin-bottom: -40px; }
  .home-hero h1 img { width: min(330px, 92%); }
  .home-hero__cta .gbtn { flex: 1 1 auto; }
}

/* ── Every official account as big buttons (home "Join the Hood", the Community hero); the list is
   SOCIALS in tools/pages.py ── */
.socials { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.social {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 18px 11px;
  background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 14px; box-shadow: 4px 4px 0 var(--site-shadow-c);
  font: var(--site-f-button); text-decoration: none; transition: translate .15s ease, box-shadow .15s ease;
}
.social svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.social:hover { translate: 0 -2px; box-shadow: 5px 6px 0 var(--site-shadow-c); }
.social:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--site-shadow-c); }
.social:focus-visible { outline: 3px solid var(--site-shadow-c); outline-offset: 3px; }
.social--main { background: var(--site-ink); color: var(--site-lime); }
.social em { position: absolute; top: -11px; right: -9px; padding: 3px 7px; background: var(--site-gold); color: var(--site-ink); border: 2px solid var(--site-ink); border-radius: 999px; font: var(--site-f-label); font-style: normal; rotate: 8deg; }
@media (prefers-reduced-motion: reduce) { .social { transition: none; } }

/* ── The GOOD Mission: three goals in order, joined by a road; the one that's done is lime, with GOOD on it ── */
.mission__steps { position: relative; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(64px, 7vw, 96px); }
.mission__steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; border-top: 5px dashed rgba(254, 249, 244, .35); }
.mission__step {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 2.6vw, 34px);
  background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 22px; box-shadow: 7px 7px 0 var(--site-shadow-c); rotate: 1deg;
}
.mission__step:nth-child(odd) { rotate: -1.5deg; }
.mission__step.is-done { background: var(--site-lime); }
.mission__num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--site-ink); color: var(--site-lime); font: 400 30px/1 var(--site-display); }
.mission__title { font: 400 clamp(28px, 2.8vw, 40px)/1 var(--site-display); }
.mission__state { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 7px 13px 8px; background: #fff; border: 2px solid var(--site-ink); border-radius: 999px; font: 400 17px/1 var(--site-display); }
.mission__state svg { width: 15px; height: 15px; fill: currentColor; }
.is-done .mission__state { background: var(--site-ink); color: var(--site-lime); }
.is-next .mission__state i { width: 10px; height: 10px; border-radius: 50%; background: var(--site-hood); animation: mission-pulse 1.4s ease-in-out infinite; }
.mission__good { position: absolute; right: -4%; top: -40%; width: 34%; max-width: 150px; }
.mission__note { max-width: 62ch; margin: clamp(36px, 4vw, 52px) auto 0; text-align: center; font: var(--site-f-small); color: var(--cream-2); }
.mission__note a { color: var(--site-cream); }
@keyframes mission-pulse { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .6; opacity: .5; } }
@media (max-width: 809px) {
  .mission__steps { grid-template-columns: 1fr; gap: 26px; }
  .mission__steps::before { left: 50%; right: auto; top: 4%; bottom: 4%; border-top: 0; border-left: 5px dashed rgba(254, 249, 244, .35); }
  .mission__good { top: -26%; width: 112px; }
}
@media (prefers-reduced-motion: reduce) { .is-next .mission__state i { animation: none; } }

/* ── Slogan tape ── */
.tape { position: relative; z-index: 3; overflow: hidden; padding: 14px 0; background: var(--site-ink); color: var(--site-cream); border-block: 3px solid var(--site-ink); }
/* The tilted tape is drawn wider than the screen so its ends never show; clip it here too, since iOS
   Safari has ignored root-level overflow clipping */
.tape-clip { overflow-x: clip; }
.tape--tilt { width: 110vw; margin-left: -5vw; rotate: -1.5deg; margin-top: -14px; margin-bottom: -14px; }
.tape--lime { background: var(--site-lime); color: var(--site-ink); }
.tape__track { display: flex; width: max-content; }
.tape__set { display: flex; flex: none; }
.tape__set span { display: inline-flex; align-items: center; gap: 22px; padding-left: 22px; font: var(--site-f-display-3); white-space: nowrap; }
.tape__set span::after { content: ""; width: 14px; height: 14px; background: currentColor; opacity: .5; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.tape b { font-weight: inherit; color: var(--site-lime); }
.tape--lime b { color: var(--site-ink); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.tape--move .tape__track { animation: tape 55s linear infinite; }
.tape--reverse.tape--move .tape__track { animation-direction: reverse; }
.tape:hover .tape__track, .is-paused .tape__track { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tape--move .tape__track { animation: none; } }

/* ── Cartoon panel: the frame for cards, videos and art ── */
.frame { overflow: hidden; background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 20px; box-shadow: 7px 7px 0 var(--site-shadow-c); }
.frame video, .frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Home: who's GOOD ── */
.who__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.who__video { aspect-ratio: 16 / 10; rotate: -1.2deg; }
.who__copy { margin-top: 16px; }
.who__traits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.who__traits .tag:nth-child(2) { rotate: 2deg; background: var(--site-gold); }
.who__traits .tag:nth-child(3) { rotate: -1deg; background: var(--site-cream); }
@media (max-width: 1023px) { .who__grid { grid-template-columns: 1fr; } }

/* ── Stats: the four numbers, each with its proof ── */
.stats-sec { overflow: hidden; }
.stats-sec__peek { position: absolute; right: max(0px, calc((100% - 1300px) / 2)); top: clamp(36px, 5vw, 64px); width: clamp(150px, 17vw, 240px); translate: 30% 0; rotate: -6deg; transition: translate .6s cubic-bezier(.2, .9, .3, 1.2); }
.stats-sec.in .stats-sec__peek { translate: 0 0; }
.stats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stat { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 20px; box-shadow: 6px 6px 0 var(--site-shadow-c); }
.stat:nth-child(2) { rotate: .8deg; } .stat:nth-child(3) { rotate: -.6deg; } .stat:nth-child(4) { rotate: .5deg; }
.stat b { font: var(--site-f-display-2); }
.stat span { flex: 1; font: var(--site-f-body); color: var(--ink-2); }
.stat a { font: 400 17px/1 var(--site-display); color: var(--site-ink); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.badges { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: clamp(36px, 4vw, 52px); }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 11px; background: var(--site-lime); color: var(--site-ink); border: var(--site-line); border-radius: 14px; box-shadow: 4px 4px 0 var(--site-shadow-c); font: 400 20px/1 var(--site-display); text-decoration: none; rotate: -1.5deg; transition: rotate .15s ease; }
.badge:nth-child(even) { rotate: 1.5deg; background: var(--site-cream); }
.badge:hover { rotate: 0deg; }
.badge::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--site-ink); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.badge:focus-visible { outline: 3px solid var(--site-shadow-c); outline-offset: 3px; }
:root { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.6 2.6 8l1.1-1.1 2.5 2.5 6.1-6.1 1.1 1.1z'/%3E%3C/svg%3E"); }
@media (max-width: 1023px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats-sec__peek { width: 130px; top: 24px; } }
@media (max-width: 809px) { .stats { gap: 14px; } .stat { padding: 18px 16px; } .stats-sec__peek { display: none; } .badge { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .stats-sec__peek { transition: none; translate: 0 0; } }

/* ── Get $GOOD (home) and the buy steps ── */
.get__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 14px; }
.steps li { counter-increment: step; position: relative; padding: 18px 20px 18px 74px; background: rgba(0, 0, 0, .2); border: 2px solid rgba(254, 249, 244, .16); border-radius: 18px; }
.steps li::before { content: counter(step); position: absolute; left: 18px; top: 16px; width: 42px; height: 42px; display: grid; place-items: center; background: var(--site-lime); color: var(--site-ink); border: 3px solid var(--site-ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--site-cream); font: 400 24px/1 var(--site-display); rotate: -4deg; }
.steps b { display: block; font: var(--site-f-title-2); }
.steps span { display: block; margin-top: 4px; font: var(--site-f-body); color: var(--cream-2); }
.steps a { color: var(--site-lime); }
.venues { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.venue { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; background: #fff; color: var(--site-ink); border: var(--site-line); border-radius: 999px; box-shadow: 3px 3px 0 var(--site-shadow-c); font: 400 19px/1 var(--site-display); text-decoration: none; transition: transform .12s ease; }
.venue:hover { transform: translateY(-2px) rotate(-1deg); }
.venue--main { background: var(--site-lime); }
.venue:focus-visible { outline: 3px solid var(--site-shadow-c); outline-offset: 3px; }
.get__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 1023px) { .get__grid { grid-template-columns: 1fr; } }

/* ── Tool cards ── */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.card { display: flex; flex-direction: column; overflow: hidden; background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 20px; box-shadow: 6px 6px 0 var(--site-shadow-c); transition: transform .15s ease; }
.card:hover { transform: translateY(-4px) rotate(-.6deg); }
.card__art { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--site-line); background: var(--site-hood-deep); }
.card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 18px 20px; }
.card__body p { flex: 1; font: var(--site-f-body); color: var(--ink-2); }
.card .gbtn { margin-top: 8px; }
.today { --today-bg: var(--site-hood-deep); }
.today .card__art { background: var(--today-bg); display: grid; place-items: center; }
.today .card__art img { width: auto; height: 100%; aspect-ratio: 1; object-fit: contain; }
.today__line { font: var(--site-f-small) !important; }
@media (prefers-reduced-motion: reduce) { .card, .venue { transition: none; } .card:hover, .venue:hover { transform: none; } }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) { .cards { grid-template-columns: 1fr; gap: 16px; } }

/* ── Join the hood (home band) ── */
.join__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.join__good { width: 100%; max-width: 340px; animation: site-wiggle 4s ease-in-out infinite; transform-origin: 50% 90%; }
.join__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.join__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.join__list li { padding: 8px 14px; background: var(--site-cream); border: 2px solid var(--site-ink); border-radius: 999px; font: 400 17px/1 var(--site-display); }
@media (prefers-reduced-motion: reduce) { .join__good { animation: none; } }
@media (max-width: 809px) { .join__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } .join__good { max-width: 220px; } .join__grid .join__cta, .join__grid .socials, .join__list { justify-content: center; } }

/* ── Subpage hero ── */
.page-hero { position: relative; overflow: hidden; padding: calc(var(--site-nav-clear) + clamp(40px, 5vw, 64px)) var(--gut) clamp(56px, 6vw, 88px); }
.page-hero__grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px; align-items: center; }
.page-hero h1 { font: var(--site-f-display-1); letter-spacing: .005em; }
.page-hero .tag { margin-bottom: 18px; }
.page-hero__art { position: relative; justify-self: center; width: min(360px, 100%); }
.page-hero__art .sticker { width: 100%; animation: site-float 5.5s ease-in-out infinite; }
.page-hero__art .bubble { top: -4%; left: -18%; }
@media (prefers-reduced-motion: reduce) { .page-hero__art .sticker { animation: none; } }
@media (max-width: 809px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__art { width: 200px; order: -1; justify-self: start; }
  /* GOOD sits left, in line with the headline, so his bubble has the right-hand side to itself */
  .page-hero__art .bubble { left: 74%; top: 4%; width: max-content; max-width: min(170px, calc(100vw - 148px - 2 * var(--gut))); font-size: 17px; }
}
/* About: GOOD with his $GOOD cup stands at the bottom of the hero, like the home one */
.page-hero__art.page-hero__art--rig { align-self: end; justify-self: end; width: min(480px, 100%); margin-bottom: calc(-1 * clamp(56px, 6vw, 88px)); }
.page-hero__art--rig .bubble { top: 8%; left: -12%; z-index: 3; }
@media (max-width: 809px) {
  .page-hero__art.page-hero__art--rig { order: 0; justify-self: center; width: min(400px, 100%); margin-top: 24px; }
  .page-hero__art--rig .bubble { left: -2%; top: 4%; width: auto; max-width: 150px; }
}

/* ── About: lore, mantra, trifecta, the comic strip ── */
.lore__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.lore__grid + .lore__grid { margin-top: clamp(64px, 7vw, 104px); }
.every { font: var(--site-f-display-3); }
.every span { display: block; }
.every span:nth-child(even) { color: var(--site-hood); }
.sec--ink .every span:nth-child(even) { color: var(--site-lime); }
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; background: #000; border: 0; cursor: pointer; overflow: hidden; }
.yt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt__play { position: absolute; top: 50%; left: 50%; width: 72px; height: 52px; transform: translate(-50%, -50%); }
.yt:hover .yt__play path:first-child { fill: #f00; fill-opacity: 1; }
.yt:focus-visible { outline: 3px solid var(--site-lime); outline-offset: -6px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lore__video { aspect-ratio: 16 / 9; rotate: 1deg; }
@media (max-width: 1023px) { .lore__grid { grid-template-columns: 1fr; } }

.mantra { overflow: hidden; padding: var(--sec-y) 0; }
.mantra .wrap { padding: 0 var(--gut); }
.mantra__say { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: clamp(48px, 6vw, 80px) auto; font: var(--site-f-display-1); color: var(--site-ink); }
.mantra__pre, .mantra__post { transition: opacity .22s ease, translate .22s ease; }
.mantra__pre { text-align: right; padding-right: .25em; }
.mantra__post { text-align: left; padding-left: .25em; }
.mantra__pre:empty { padding-right: 0; }
.mantra__post:empty, .mantra__post--glued { padding-left: 0; }
.mantra__say.is-out .mantra__pre { opacity: 0; translate: -12px 0; }
.mantra__say.is-out .mantra__post { opacity: 0; translate: 12px 0; }
.mantra__good { padding: .04em .22em .08em; margin: 0; background: var(--site-ink); color: var(--site-lime); border: 4px solid var(--site-ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--site-cream); font: inherit; letter-spacing: inherit; cursor: pointer; rotate: -3deg; }
.mantra__good:focus-visible { outline: 3px solid var(--site-ink); outline-offset: 4px; }
.mantra__foot { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: clamp(48px, 6vw, 80px); text-align: center; }
.mantra__lock { font: var(--site-f-display-2); color: var(--site-ink); }
/* inline-block so a wrapped second line can't paint over the first */
.mantra__lock mark { display: inline-block; padding: .02em .12em .06em; background: var(--site-ink); color: var(--site-lime); border-radius: 8px; }
.mantra__pause { min-height: 38px; padding: 0 14px; background: transparent; color: var(--site-ink); border: 2px solid var(--site-ink); border-radius: 999px; cursor: pointer; font: 400 15px/1 var(--site-display); }
.mantra__pause[aria-pressed="true"] { background: var(--site-ink); color: var(--site-lime); }
.mantra__pause:focus-visible { outline: 3px solid var(--site-ink); outline-offset: 3px; }
.mantra .tape { width: 110vw; margin-left: -5vw; }
.mantra .tape:first-of-type { rotate: -2deg; }
.mantra .tape--lime { rotate: 1.5deg; }
/* Robinhood's posts: two big quote cards either side of a jaw-dropped GOOD */
.rh__stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .6fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2vw, 28px); margin-top: clamp(40px, 5vw, 64px); }
.post { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 2.4vw, 32px); background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 22px; box-shadow: 8px 8px 0 var(--site-lime); }
.post--a { rotate: -2.5deg; }
.post--b { rotate: 2deg; align-self: end; }
.post__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.post__who { display: flex; flex-direction: column; gap: 2px; }
.post__who b { font: var(--site-f-strong); }
.post__who span { font: var(--site-f-small); color: var(--ink-2); }
.post__head svg { width: 26px; height: 26px; fill: var(--site-ink); flex: none; }
.post__text { font: 400 clamp(26px, 2.5vw, 38px)/1.12 var(--site-display); }
.post__text--big { font: var(--site-f-display-2); line-height: 1.02; }
/* inline-block so a highlight can't paint over the line above (the display face sets tight) */
.post__text mark { display: inline-block; padding: .05em .14em .02em; line-height: 1; background: var(--site-lime); color: var(--site-ink); border-radius: 6px; }
.post__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 2px solid rgba(12, 6, 2, .12); font: var(--site-f-small); color: var(--ink-2); }
.post__foot a { font: var(--site-f-strong); font-size: 14px; color: var(--site-ink); }
/* GOOD stands on the section's bottom edge between the posts, so his cut-off hoodie never shows */
.rh { overflow: hidden; }
.rh__good { position: relative; justify-self: center; align-self: end; width: 100%; max-width: 240px; margin-bottom: calc(-1 * var(--sec-y)); }
.rh__good .sticker { width: 100%; }
.rh__good .bubble { top: -22%; right: -18%; font-size: 18px; max-width: 170px; }
@media (max-width: 1023px) {
  .rh__stage { grid-template-columns: 1fr; justify-items: center; gap: 28px; }
  .post { width: min(560px, 100%); }
  .post--b { align-self: auto; }
  .rh__good { order: 3; max-width: 190px; margin-top: 24px; }
  .rh__good .bubble { top: -16%; right: auto; left: -46%; }
}
@media (prefers-reduced-motion: reduce) { .mantra__pre, .mantra__post { transition: none; } }
@media (max-width: 809px) {
  .mantra__say { display: flex; flex-direction: column; align-items: center; gap: 8px; font: var(--site-f-display-2); text-align: center; }
  .mantra__pre, .mantra__post { padding: 0; text-align: center; }
  .mantra__pre:empty, .mantra__post:empty { display: none; }
  .mantra__say.is-out .mantra__pre, .mantra__say.is-out .mantra__post { translate: 0 0; }
}

.trio { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.trio li { padding: 26px 24px; background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 20px; box-shadow: 6px 6px 0 var(--site-shadow-c); }
.trio li:nth-child(2) { rotate: 1deg; } .trio li:nth-child(3) { rotate: -.8deg; }
.trio b { display: block; font: var(--site-f-title-1); }
.trio p { margin-top: 10px; font: var(--site-f-body); color: var(--ink-2); }
.trio a { color: var(--site-ink); }
@media (max-width: 809px) { .trio { grid-template-columns: 1fr; } }

/* the lore art as a comic page: mixed panel sizes, ink gutters */
.comic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 230px); gap: 14px; }
.comic figure { position: relative; overflow: hidden; border: var(--site-line); border-radius: 14px; box-shadow: 5px 5px 0 var(--site-shadow-c); background: var(--site-ink); }
.comic figure:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.comic figure:nth-child(2), .comic figure:nth-child(3) { grid-column: span 3; }
.comic figure:nth-child(4), .comic figure:nth-child(5), .comic figure:nth-child(6) { grid-column: span 2; }
.comic figure:nth-child(7) { grid-column: span 4; }
.comic figure:nth-child(8) { grid-column: span 2; }
.comic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.comic figure:hover img { transform: scale(1.04); }
.comic figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px 7px; background: var(--site-cream); color: var(--site-ink); border: 2px solid var(--site-ink); border-radius: 8px; font: 400 15px/1 var(--site-display); }
@media (max-width: 809px) {
  .comic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; grid-auto-flow: dense; }
  .comic figure:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .comic figure:nth-child(1), .comic figure:nth-child(7) { grid-column: span 2; }
  .comic figure:nth-child(1) { grid-row: span 2; }
}
@media (prefers-reduced-motion: reduce) { .comic img { transition: none; } .comic figure:hover img { transform: none; } }

/* ── Tokenomics page ── */
.alloc-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.donut { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; }
.donut svg { display: block; width: 100%; height: 100%; rotate: -90deg; }
/* only the five segments carry a class; the outline rings keep their own fill and stroke */
.donut circle[class] { fill: none; stroke-width: 22; }
.donut__mid { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut__mid b { display: block; font: var(--site-f-display-2); }
.donut__mid span { font: var(--site-f-label); color: var(--ink-2); }
.legend { list-style: none; padding: 0; display: grid; gap: 10px; }
.legend li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 14px 16px; background: #fff; border: 2px solid var(--site-ink); border-radius: 14px; }
.legend i { width: 18px; height: 18px; border: 2px solid var(--site-ink); border-radius: 5px; }
.legend b { font: var(--site-f-title-2); }
.legend em { font-style: normal; font: var(--site-f-display-3); }
.legend span { grid-column: 2 / -1; font: var(--site-f-small); color: var(--ink-2); }
.c-pre { background: var(--site-lime); stroke: var(--site-lime); }
.c-liq { background: #8fb300; stroke: #8fb300; }
.c-team { background: var(--site-ink); stroke: var(--site-ink); }
.c-mkt { background: var(--site-hood); stroke: var(--site-hood); }
.c-com { background: var(--site-gold); stroke: var(--site-gold); }
@media (max-width: 1023px) { .alloc-grid { grid-template-columns: 1fr; justify-items: center; } .legend { width: 100%; } }

.vest { list-style: none; padding: 0; display: grid; gap: 14px; }
.vest li { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 8px 20px; padding: 16px 18px; background: rgba(0, 0, 0, .2); border: 2px solid rgba(254, 249, 244, .16); border-radius: 16px; }
.vest b { font: var(--site-f-title-2); }
.vest small { display: block; margin-top: 2px; font: var(--site-f-small); color: var(--cream-2); }
.vest__track { position: relative; height: 34px; border-radius: 10px; background: rgba(254, 249, 244, .08); }
.vest__bar { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 12px; border: 2px solid var(--site-ink); border-radius: 10px; font: 400 15px/1 var(--site-display); color: var(--site-ink); white-space: nowrap; }
.vest__axis { display: flex; justify-content: space-between; margin: 10px 0 0 180px; font: var(--site-f-small); color: var(--cream-2); }
@media (max-width: 809px) { .vest li { grid-template-columns: 1fr; } .vest__axis { margin-left: 0; } }

.addrs { display: grid; gap: 12px; margin-top: 22px; }
.addr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; padding: 14px 16px; background: #fff; color: var(--site-ink); border: 2px solid var(--site-ink); border-radius: 14px; }
.addr__label { grid-column: 1 / -1; font: 400 17px/1.1 var(--site-display); }
.addr__value { min-width: 0; font: var(--site-f-mono); font-size: 14px; word-break: break-all; }
.addr__actions { display: flex; gap: 8px; }
.addr__btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; background: var(--site-lime); border: 2px solid var(--site-ink); border-radius: 10px; cursor: pointer; font: 400 15px/1 var(--site-display); color: var(--site-ink); text-decoration: none; }
a.addr__btn { background: var(--site-cream); }
.addr__btn:focus-visible { outline: 3px solid var(--site-ink); outline-offset: 2px; }
@media (max-width: 809px) { .addr { grid-template-columns: 1fr; } }

.records { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.record { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 18px; box-shadow: 5px 5px 0 var(--site-shadow-c); text-decoration: none; }
.record b { font: var(--site-f-title-2); }
.record span { flex: 1; font: var(--site-f-body); color: var(--ink-2); }
.record em { font-style: normal; align-self: flex-start; padding: 4px 9px; background: var(--site-lime); border: 2px solid var(--site-ink); border-radius: 999px; font: var(--site-f-label); }
.record em.is-pending { background: var(--site-gold); }
a.record:hover { transform: translateY(-3px); }
@media (max-width: 1023px) { .records { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809px) { .records { grid-template-columns: 1fr; } }

/* ── The paperwork: the whitepaper and the audit as document cards (home and /tokenomics/) ── */
.papers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: clamp(36px, 4vw, 52px); }
.paper { display: grid; grid-template-columns: minmax(0, 128px) minmax(0, 1fr); align-items: center; gap: 22px; padding: 22px; background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 20px; box-shadow: 6px 6px 0 var(--site-shadow-c); }
.sec--cream .paper { background: #fff; }
.paper__cover { display: block; rotate: -3deg; transition: rotate .2s ease, translate .2s ease; }
.paper:nth-child(even) .paper__cover { rotate: 3deg; }
.paper:hover .paper__cover { rotate: 0deg; translate: 0 -4px; }
.paper__cover img { display: block; width: 100%; height: auto; border: 3px solid var(--site-ink); border-radius: 6px; box-shadow: 5px 5px 0 var(--site-ink); }
.paper__title { font: var(--site-f-title-1); }
.paper__meta { margin-top: 8px; font: var(--site-f-body); color: var(--ink-2); }
.paper__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 1023px) { .papers { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .paper { grid-template-columns: minmax(0, 92px) minmax(0, 1fr); gap: 16px; padding: 18px 16px; } .paper__title { font: var(--site-f-title-2); } }
@media (prefers-reduced-motion: reduce) { .paper__cover { transition: none; } }

/* ── Buy page ── */
.buy-steps { list-style: none; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.buy-steps li { counter-increment: step; position: relative; padding: 70px 20px 22px; background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 20px; box-shadow: 6px 6px 0 var(--site-shadow-c); }
.buy-steps li::before { content: counter(step); position: absolute; left: 18px; top: -18px; width: 64px; height: 64px; display: grid; place-items: center; background: var(--site-lime); border: var(--site-line); border-radius: 16px; box-shadow: 4px 4px 0 var(--site-ink); font: 400 38px/1 var(--site-display); rotate: -6deg; }
.buy-steps b { display: block; font: var(--site-f-title-1); }
.buy-steps p { margin-top: 8px; font: var(--site-f-body); color: var(--ink-2); }
.buy-steps a { color: var(--site-ink); }
@media (max-width: 1023px) { .buy-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 809px) { .buy-steps { grid-template-columns: 1fr; } }
.trackers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.trackers a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 2px solid currentColor; border-radius: 999px; font: 400 17px/1 var(--site-display); color: inherit; text-decoration: none; }
.trackers a:hover { background: var(--site-lime); color: var(--site-ink); border-color: var(--site-ink); }
.safety { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(24px, 4vw, 40px); background: var(--site-gold); color: var(--site-ink); border: var(--site-line); border-radius: 24px; box-shadow: 7px 7px 0 var(--site-shadow-c); }
.safety .sticker { width: 100%; max-width: 220px; }
.safety ul { margin-top: 14px; padding-left: 20px; font: var(--site-f-body); }
.safety li + li { margin-top: 6px; }
.safety a { color: var(--site-ink); }
@media (max-width: 809px) { .safety { grid-template-columns: 1fr; justify-items: center; } .safety .sticker { max-width: 160px; } }

/* ── Community page ── */
.perks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.perk { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 20px; box-shadow: 6px 6px 0 var(--site-shadow-c); }
.perk__icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 6px; background: var(--site-lime); border: var(--site-line); border-radius: 16px; font: 400 22px/1 var(--site-display); rotate: -5deg; }
.perk p { font: var(--site-f-body); color: var(--ink-2); }
.perk a { color: var(--site-ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.perk a:hover { text-decoration-color: var(--site-hood); }
@media (max-width: 1023px) { .perks { grid-template-columns: 1fr; } }
.dogs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.dogs__shades { padding: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 48px); background: var(--site-cream); }
.dogs__shades img { display: block; width: 100%; animation: site-wiggle 3s ease-in-out infinite; }
.dog-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
@media (max-width: 599px) { .dog-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .dog { padding: 7px 7px 9px; } .dog b { font-size: 18px; } }
.dog-wall:not(:has(.dog)) { display: none; }
.dog { margin: 0; padding: 10px 10px 12px; background: #fff; color: var(--site-ink); border: var(--site-line); border-radius: 16px; box-shadow: 5px 5px 0 var(--site-ink); }
.dog:nth-child(odd) { rotate: -1.5deg; } .dog:nth-child(even) { rotate: 1.5deg; }
.dog img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.dog figcaption { padding-top: 10px; text-align: center; }
.dog b { display: block; font: var(--site-f-title-2); }
.dog figcaption span { display: block; font: var(--site-f-small); color: var(--ink-2); }
.dog figcaption .dog__tag { display: inline-block; margin-top: 4px; padding: 2px 8px; background: var(--site-lime); border: 2px solid var(--site-ink); border-radius: 999px; font: var(--site-f-label); color: var(--site-ink); }
.dog-wall__note { grid-column: 1 / -1; font: var(--site-f-small); color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .dogs__shades img { animation: none; } }
@media (max-width: 1023px) { .dogs__grid { grid-template-columns: 1fr; } }
.meme-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.meme { display: block; overflow: hidden; background: var(--site-cream); color: var(--site-ink); border: var(--site-line); border-radius: 16px; box-shadow: 5px 5px 0 var(--site-shadow-c); text-decoration: none; transition: transform .15s ease; }
.meme:hover { transform: translateY(-3px) rotate(-1deg); }
.meme:focus-visible { outline: 3px solid var(--site-shadow-c); outline-offset: 3px; }
.meme img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-bottom: var(--site-line); }
.meme__cap { display: flex; align-items: baseline; gap: 6px; padding: 9px 11px; font: var(--site-f-small); text-transform: capitalize; }
.meme__cap b { flex: none; font: var(--site-f-label); color: var(--ink-2); }
.meme__cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; }
.vault-head .head { margin-bottom: 0; }
.vault-head__cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 1023px) { .meme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 809px) { .meme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ── Closing CTA band (subpages) ── */
.cta-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 36px; }
.cta-band .sticker { width: 150px; }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 809px) { .cta-band { grid-template-columns: 1fr; justify-items: center; text-align: center; } .cta-band__btns { justify-content: center; } }

/* ── Scroll entrance for stickers that pop in ── */
.js .pop-in { opacity: 0; transform: translateY(24px) scale(.9) rotate(-6deg); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1.3); }
.js .pop-in.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .pop-in { opacity: 1; transform: none; transition: none; } }