/* =====================================================================
   Mobile only.

   This file is loaded with media="(max-width: 720px)" on the <link>, so
   the browser never applies it on desktop. Anything in here is safe to
   change without touching the desktop layout.
   ===================================================================== */

/* ---------- top bar: wordmark left, menu button right ----------
   The bar has to outrank the panel, or the panel covers its own close
   button and the menu becomes a trap. */
.nav{z-index:80}
body.mnav-open .nav{background:var(--paper);backdrop-filter:none;
  border-bottom-color:var(--line-soft)}
/* ---------- top bar: wordmark left, menu button right ---------- */
.nav-in{
  --navgap:0px;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 16px;
}
.nav-side{display:none}                 /* inline links live in the panel now */
.brand{justify-self:auto;flex:none}
.brand-name{font-size:19px}
.mark{width:32px;height:32px}

.nav-toggle{
  display:grid;place-items:center;
  width:42px;height:42px;flex:none;
  background:none;border:1px solid var(--line);border-radius:11px;
  cursor:pointer;padding:0;
}
.nav-toggle:active{background:#1A1F26}
.nav-toggle span{
  display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .18s ease;
}
.nav-toggle span + span{margin-top:5px}
.nav-toggle[aria-expanded="true"]{border-color:var(--up)}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- the panel ---------- */
.mnav{
  display:block;
  position:fixed;inset:0;z-index:70;
  background:var(--paper);
  padding:calc(env(safe-area-inset-top) + 74px) 22px calc(env(safe-area-inset-bottom) + 28px);
  overflow-y:auto;
  opacity:0;transform:translateY(-10px);
  transition:opacity .24s ease,transform .28s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.mnav.open{opacity:1;transform:none;pointer-events:auto}
.mnav[hidden]{display:none}

.mnav-close{display:flex;align-items:center;gap:8px;margin:0 0 18px;
  background:none;border:0;padding:6px 2px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint)}
.mnav-close svg{width:13px;height:13px}
.mnav-close:active{color:var(--up-2)}

.mnav-links{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.mnav-links a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 2px;border-bottom:1px solid var(--line-soft);
  font-family:var(--display);font-size:26px;letter-spacing:-.025em;
  color:var(--ink);text-decoration:none;
}
.mnav-links a:active{color:var(--up-2)}
.mnav-links a span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}

.mnav-ca{margin-top:22px}
.mnav-ca .cabar{margin:0}

/* one link now, so it spans rather than sitting half-width */
.mnav-social{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
.mnav-social a{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);text-decoration:none;
  font-size:15px;font-weight:600;
}
.mnav-social a.pending{opacity:.45;pointer-events:none}
.mnav-social svg{width:17px;height:17px}

.mnav-foot{margin-top:22px;font-family:var(--mono);font-size:11px;color:var(--faint);
  line-height:1.6}
.mnav-foot b{color:var(--up-2)}

/* the page must not scroll behind an open panel */
body.mnav-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .mnav,.nav-toggle span{transition:none}
}

/* ---------- hero ----------
   The artwork is 1584x672. Filling a tall phone hero means stretching 672
   source pixels over ~1500 device pixels, so any vertical crop costs
   sharpness. No upscale here: the image renders at its natural height for the
   frame, and the frame is kept shorter to reduce the stretch. The copy is
   pushed to the bottom over a heavier scrim so it clears the character
   instead of the image being zoomed to move him. */
.hero-banner{position:relative;overflow:hidden}
.hb-art{position:static}
.hb-art img{position:static;width:100%;height:64vh;min-height:380px;max-height:560px;
  object-fit:cover;object-position:30% 50%}
.hb-scrim{background:linear-gradient(180deg,rgba(11,18,32,.26) 0%,
  rgba(11,18,32,0) 26%,rgba(11,18,32,.22) 58%,rgba(11,18,32,.70) 100%)}
.hb-copy{padding-bottom:18px}

/* ---------- RDDT strip: compact ----------
   The desktop version is a wide row with four stats side by side. On a phone
   that wraps into a tall block with a two-line title, which reads as clutter.
   Shorten the name, drop the strapline, put the numbers in a 2x2. */
.pl-long{display:none}
.pairbox{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 17px}
.pairbox .pl b{font-size:16px;line-height:1.2}
.pairbox .pl span{display:none}
.pair-link{width:100%;text-align:left}

/* ---------- the receipt card: compact ----------
   Three stacked stat rows ate most of a screen. Put them back in a row and
   tighten everything around them. */
.receipt{padding:17px}
.receipt-head{gap:10px;padding-bottom:12px;margin-bottom:12px}
.receipt-av{width:32px;height:32px;font-size:13px}
.receipt-who b{font-size:13.5px}
.receipt-who span{font-size:10.5px}
.receipt-q{font-size:14.5px;line-height:1.5;margin-bottom:12px}
.receipt-stat{grid-template-columns:repeat(3,1fr)}
.receipt-stat div{padding:9px 7px}
.receipt-stat b{font-size:13px}
.receipt-stat span{font-size:8px;letter-spacing:.03em;line-height:1.3}
.receipt-src{font-size:10px;line-height:1.55}

/* the three cards stack on a phone; keep the official one first */
.social-row{grid-template-columns:1fr;gap:10px}
.social{padding:15px 17px}
.social-ic{width:36px;height:36px}
.social-tx b{font-size:15px}
.social-tx span{font-size:11px}

/* ---------- meme gallery ----------
   Cards were sized by width, which made each one taller than the screen, so
   seeing one image meant scrolling the page vertically inside a horizontal
   shelf. Size by HEIGHT instead: a whole image fits on screen, and the only
   gesture is a sideways swipe. */
.shelf{overflow-y:hidden;gap:12px;padding-bottom:10px;
  scroll-padding-left:22px;overscroll-behavior-x:contain}
.meme{flex:0 0 auto;scroll-snap-align:center}
.meme-frame{height:58vh;max-height:540px;width:auto;
  aspect-ratio:720/1290}          /* the artwork's true ratio, so nothing crops */
.meme-frame img{object-fit:cover}

/* the loop needs room to run past the ends without snapping to an edge, and a
   solid ground so a half-painted frame never shows through as black */
/* mandatory, not proximity: proximity lets the strip come to rest between two
   cards, which is how it ends up parked on a gap with no image on screen */
.shelf{scroll-snap-type:x mandatory;background:var(--paper)}
.meme-frame{background:#12161C}

/* ---------- airdrop method cards ----------
   Two columns at phone width gave each card about 40 characters of line, so a
   short paragraph ran fifteen lines deep. Stack them. */
.method{grid-template-columns:1fr;gap:12px}
.mcard{padding:18px}
.mcard p{font-size:14px;line-height:1.55}

/* ---------- inner-page address strip ----------
   Redundant on a phone: the address is already on the home page hero and
   inside the menu on every page, so the strip just costs vertical space. */
.ca-strip{display:none}

/* the rail runs edge to edge on a phone, so keep the arrow head on screen */
.scrub-arrow{width:42px;height:12px;transform:translateY(-50%)}