/* FEGYA — a round green frog who keeps multiplying.

   The art is flat cel-shaded cartoon with thick black outlines, so the site is
   too: cream paper, fat black borders, big round corners, and the candy colours
   the animations cycle through. It is the one bright site in the set — nothing
   here is dark, and every panel is a sticker stuck on the page at a slight
   angle. */

/* ── tokens ─────────────────────────────────────────────────────── */

:root{
  --paper:#FFF6E2;       /* warm cream, the page */
  --paper-2:#FFFDF6;     /* card insides */
  --ink:#141414;         /* every outline and nearly all the text */

  --frog:#6FD86F;        /* his green */
  --frog-deep:#3FAE4C;

  /* the candy run the animations cycle through */
  --c1:#C9A9F5;          /* lilac */
  --c2:#8FE6F2;          /* cyan */
  --c3:#FF9ED2;          /* pink */
  --c4:#FFE272;          /* yellow */
  --c5:#FFAE92;          /* peach */
  --c6:#A8E6A0;          /* mint */

  --line:3px solid var(--ink);
  --r:1.4rem;            /* the round corner */
  --pop:0 .45rem 0 var(--ink);   /* the sticker's flat drop */

  --font-d:'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --font-b:'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --edge:clamp(1rem, 4vw, 3.5rem);
  --wide:80rem;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-b);
  font-size:clamp(1rem, .96rem + .2vw, 1.08rem);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; height:auto; }

a{ color:inherit; }

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

:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--frog); color:var(--ink); padding:.7rem 1rem;
  font-weight:700; z-index:99;
}
.skip:focus{ left:0; }

/* ── top bar ────────────────────────────────────────────────────── */

.bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:1rem;
  padding:.7rem var(--edge);
  background:var(--paper);
  border-bottom:var(--line);
}

.bar__mark{
  font-family:var(--font-d); font-weight:700;
  font-size:1.15rem; letter-spacing:.02em;
  text-decoration:none;
}

.bar__ca{
  display:inline-flex; align-items:center; gap:.5rem;
  /* shrinks rather than stretching, and pushes the nav to the far edge */
  flex:0 1 auto; margin-right:auto; min-width:0;
  padding:.3rem .4rem .3rem .75rem;
  font-family:var(--font-b); font-weight:600; font-size:.78rem;
  color:var(--ink); background:var(--paper-2);
  border:2px solid var(--ink); border-radius:99px;
  cursor:pointer;
}
.bar__ca:hover{ background:var(--c4); }
.bar__ca-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar__ca-verb{
  flex:none; padding:.12rem .5rem; border-radius:99px;
  background:var(--frog); border:2px solid var(--ink);
  font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}

.bar__nav{ display:flex; align-items:center; gap:.4rem; flex:none; }
.bar__nav a{
  padding:.4rem .6rem; font-weight:700; font-size:.88rem;
  text-decoration:none; border-radius:.6rem;
}
.bar__nav a:hover{ background:var(--c2); }
.bar__buy{
  background:var(--frog); border:2px solid var(--ink);
  padding:.35rem 1rem !important; border-radius:99px;
}
.bar__buy:hover{ background:var(--c4) !important; }

@media (max-width:34rem){
  .bar__nav a:not(.bar__buy){ display:none; }
  .bar__ca{ font-size:.72rem; }
}

/* ── hero ───────────────────────────────────────────────────────── */

.hero{ padding:clamp(1.5rem,4vw,3rem) 0 clamp(2.5rem,6vw,4.5rem); }

.screen{
  position:relative;
  width:min(var(--wide), 100% - var(--edge) * 2);
  margin-inline:auto;
  overflow:hidden;
  border:var(--line); border-radius:var(--r);
  box-shadow:var(--pop);
}

.screen__video{
  width:100%;
  /* A wide band: the frogs sit on the centre line, so cropping the top and
     bottom of the clip costs nothing and keeps the hero from eating the screen.
     The floor stops it collapsing to a strip on a phone. */
  height:min(52vh, max(38vw, 17rem));
  object-fit:cover;
  background:var(--c2);
}

.screen__sound{
  position:absolute; right:.8rem; top:.8rem;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .8rem;
  font-family:var(--font-b); font-weight:700; font-size:.75rem;
  color:var(--ink); background:var(--paper-2);
  border:2px solid var(--ink); border-radius:99px;
  cursor:pointer;
}
.screen__sound-dot{
  width:.5rem; height:.5rem; border-radius:50%;
  border:2px solid var(--ink); background:var(--paper);
}
.screen__sound[aria-pressed="true"] .screen__sound-dot{ background:var(--frog); }

/* The name, fat and green with a black outline, sitting under the frame.
   --wm-size is measured by app.js and set on .hero. */
.wordmark{
  width:min(var(--wide), 100% - var(--edge) * 2);
  margin:clamp(1rem,2.5vw,2rem) auto 0;
  padding:0;
  font-family:var(--font-d); font-weight:700;
  font-size:var(--wm-size, clamp(3rem, 16vw, 12rem));
  line-height:.92;
  letter-spacing:.01em;
  white-space:nowrap;
  text-align:center;
  color:var(--frog);
  -webkit-text-stroke:.055em var(--ink);
  paint-order:stroke fill;   /* draw the outline behind the fill, not over it */
}
/* inline-block, not block: the fitter measures this span, and a block one
   would always report the full container width and never resize anything. */
.wordmark span{ display:inline-block; }
.wordmark span span{ display:inline-block; margin-right:.01em; }
.wordmark span span:last-child{ margin-right:-.01em; }

.hero__foot{
  display:grid; gap:1.5rem;
  width:min(var(--wide), 100% - var(--edge) * 2);
  margin:clamp(1.25rem,3vw,2rem) auto 0;
}
@media (min-width:56rem){
  .hero__foot{ grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2.5rem; }
}

.lede{
  margin:0; max-width:46ch;
  font-size:clamp(1.05rem,.98rem + .5vw,1.35rem);
  font-weight:600; line-height:1.5;
}

/* ── buttons ────────────────────────────────────────────────────── */

.acts{ display:flex; flex-wrap:wrap; gap:.75rem; }

.act{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.4rem;
  font-family:var(--font-d); font-size:1rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  border:var(--line); border-radius:99px;
  background:var(--paper-2); color:var(--ink);
  box-shadow:0 .3rem 0 var(--ink);
  transition:transform .1s, box-shadow .1s, background .15s;
}
/* press it in, like a button with some give */
.act:active{ transform:translateY(.3rem); box-shadow:0 0 0 var(--ink); }
.act--go{ background:var(--frog); }
.act--go:hover{ background:var(--c4); }
.act--copy:hover{ background:var(--c2); }
.act--flat{
  background:transparent; border-color:transparent; box-shadow:none;
  text-decoration:underline; text-underline-offset:.3em;
}
.act--flat:active{ transform:none; }

/* ── ticker ─────────────────────────────────────────────────────── */

.strip{
  overflow:hidden; padding:.75rem 0;
  background:var(--frog);
  border-top:var(--line); border-bottom:var(--line);
}
.strip__run{ display:flex; width:max-content; animation:slide 30s linear infinite; }
.strip__run span{
  padding:0 1.5rem;
  font-family:var(--font-d); font-weight:600; font-size:1rem;
  letter-spacing:.04em; white-space:nowrap;
}
/* an even number of identical copies, so shifting by half lands on a copy */
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── headings ───────────────────────────────────────────────────── */

.head{ width:min(var(--wide), 100% - var(--edge) * 2); margin-inline:auto; }
.head--mid{ text-align:center; }

.head__kicker{
  display:inline-block; margin:0 0 .75rem;
  padding:.25rem .85rem;
  background:var(--c3); border:2px solid var(--ink); border-radius:99px;
  font-family:var(--font-d); font-weight:600; font-size:.82rem;
}
.head h2{
  margin:0;
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(2rem,1.4rem + 2.8vw,3.8rem);
  line-height:1.02;
}
.head__sub{ margin:.7rem 0 0; max-width:48ch; font-weight:600; }
.head--mid .head__sub{ margin-inline:auto; }

/* ── sticker wall ───────────────────────────────────────────────── */

.wall{ padding:clamp(3rem,8vw,6rem) 0; }

.stickers{
  width:min(var(--wide), 100% - var(--edge) * 2);
  margin:clamp(2.5rem,6vw,4rem) auto 0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.25rem);
  /* start, not stretch: a card is only as tall as its own picture and caption,
     so the landscape one doesn't get padded out with empty colour. */
  align-items:start;
}
@media (min-width:46rem){ .stickers{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:72rem){ .stickers{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

.sticker{
  margin:0; padding:.6rem .6rem .25rem;
  border:var(--line); border-radius:var(--r);
  box-shadow:var(--pop);
  transition:transform .15s;
}
.sticker img,
.sticker video{
  width:100%; height:auto; aspect-ratio:1;
  object-fit:cover;
  border:2px solid var(--ink); border-radius:calc(var(--r) - .6rem);
  background:var(--paper-2);
}
/* the one landscape picture keeps its own shape rather than being cropped square */
.sticker--g img{ aspect-ratio:680 / 383; }

.sticker figcaption{
  padding:.6rem .25rem .35rem;
  font-weight:700; font-size:.92rem; line-height:1.35;
}

/* Each sticker gets its own colour and a slightly different angle, so the wall
   reads as things stuck on by hand rather than a grid. Kept under 2deg: more
   than that and the corners start colliding with the gap. */
.sticker--a{ background:var(--c1); transform:rotate(-1.6deg); }
.sticker--b{ background:var(--c2); transform:rotate(1.1deg); }
.sticker--c{ background:var(--c4); transform:rotate(-.7deg); }
.sticker--d{ background:var(--c3); transform:rotate(1.7deg); }
.sticker--e{ background:var(--c6); transform:rotate(-1.2deg); }
.sticker--f{ background:var(--c5); transform:rotate(.8deg); }
.sticker--g{ background:var(--c2); transform:rotate(-1.4deg); }
.sticker--h{ background:var(--c1); transform:rotate(1.3deg); }
.sticker--i{ background:var(--c4); transform:rotate(-.9deg); }
.sticker--j{ background:var(--c3); transform:rotate(1.5deg); }
.sticker--k{ background:var(--c6); transform:rotate(-1.7deg); }
.sticker--l{ background:var(--c5); transform:rotate(.6deg); }
.sticker--m{ background:var(--c2); transform:rotate(-1.1deg); }
.sticker--n{ background:var(--c1); transform:rotate(1.2deg); }

/* straighten under the cursor — the one bit of play on the wall */
.sticker:hover{ transform:rotate(0deg) scale(1.02); }

/* ── band ───────────────────────────────────────────────────────── */

.band{
  position:relative;
  display:grid; place-items:center;
  min-height:min(70vh,32rem);
  overflow:hidden;
  border-top:var(--line); border-bottom:var(--line);
  background:var(--c1);
}
.band__video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.band__creed{
  position:relative; z-index:2;
  margin:0; padding:clamp(1rem,3vw,1.75rem) clamp(1.25rem,4vw,2.5rem);
  max-width:min(22ch, calc(100% - var(--edge) * 2));
  text-align:center;
  justify-self:center;
  font-family:var(--font-d); font-weight:600;
  font-size:clamp(1.3rem,1rem + 1.8vw,2.4rem);
  line-height:1.2;
  /* a card rather than a shadow: the clip behind it is pale and busy, and white
     text would disappear into the clouds */
  background:var(--paper); color:var(--ink);
  border:var(--line); border-radius:var(--r);
  box-shadow:var(--pop);
}
/* Off to one side once there's room, so the card stops sitting on top of
   whoever is in the middle of the clip. */
@media (min-width:56rem){
  .band__creed{
    justify-self:start; text-align:left;
    margin-left:clamp(2rem, 7vw, 7rem);
  }
}

/* ── buying ─────────────────────────────────────────────────────── */

.buy{ padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,6vw,4rem); }

.steps{
  display:grid; gap:1.4rem;
  width:min(var(--wide), 100% - var(--edge) * 2);
  margin:clamp(2rem,5vw,3.5rem) auto 0;
  list-style:none; padding:0;
}
@media (min-width:48rem){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.75rem; } }

.steps li{
  padding:1.5rem;
  background:var(--paper-2);
  border:var(--line); border-radius:var(--r);
  box-shadow:var(--pop);
}
.steps li:nth-child(1){ background:var(--c2); }
.steps li:nth-child(2){ background:var(--c6); }
.steps li:nth-child(3){ background:var(--c4); }

.steps__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; margin-bottom:.9rem;
  border-radius:50%; background:var(--paper);
  border:var(--line);
  font-family:var(--font-d); font-weight:700; font-size:1.1rem;
}
.steps li p{ margin:0; font-weight:600; }

.addr{
  width:min(52rem, 100% - var(--edge) * 2);
  margin:clamp(2.5rem,6vw,4rem) auto 0;
  padding:clamp(1.5rem,4vw,2.5rem);
  text-align:center;
  background:var(--paper-2);
  border:var(--line); border-radius:var(--r);
  box-shadow:var(--pop);
}
.addr__label{
  margin:0 0 .8rem;
  font-family:var(--font-d); font-weight:600; font-size:.9rem;
  letter-spacing:.08em; text-transform:uppercase;
}
.addr__value{
  display:block;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:clamp(.78rem,.58rem + 1vw,1.05rem);
  /* a base58 address has no spaces; let it break rather than scroll the page */
  word-break:break-all; line-height:1.5;
}
.addr__acts{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem;
  margin-top:1.5rem;
}

.buy__him{
  width:min(16rem, calc(100% - var(--edge) * 2));
  margin:clamp(2.5rem,6vw,4rem) auto 0;
}
.buy__him img{
  width:100%; height:auto; border-radius:50%;
  border:var(--line);
  box-shadow:var(--pop);
  background:var(--c6);
}

/* ── foot ───────────────────────────────────────────────────────── */

.foot{
  display:grid; gap:1rem; justify-items:center;
  padding:clamp(2.5rem,6vw,4rem) var(--edge) clamp(3rem,7vw,4.5rem);
  text-align:center;
  background:var(--frog);
  border-top:var(--line);
}
.foot__mark{
  margin:0;
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);
}
.foot__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.2rem; }
.foot__nav a{
  font-weight:700; font-size:.92rem;
  text-decoration:none;
  border-bottom:2px solid var(--ink);
}
.foot__nav a:hover{ background:var(--c4); }
.foot__fine{
  margin:0; max-width:52ch;
  font-size:.88rem; font-weight:600;
}

/* ── toast ──────────────────────────────────────────────────────── */

.toast{
  position:fixed; left:50%; bottom:1.4rem; z-index:60;
  margin:0; padding:.7rem 1.2rem;
  transform:translate(-50%, 1.5rem);
  opacity:0; pointer-events:none;
  font-family:var(--font-d); font-weight:600; font-size:.88rem;
  color:var(--ink); background:var(--c4);
  border:var(--line); border-radius:99px;
  box-shadow:var(--pop);
  max-width:calc(100vw - 2rem); word-break:break-all;
  transition:opacity .2s, transform .2s;
}
.toast.is-up{ opacity:1; transform:translate(-50%, 0); }

/* ── reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  .strip__run{ animation:none; }
  .sticker{ transform:none !important; }
  *{ transition-duration:.01ms !important; }
}