/* Meme-token look: dark teal night from the painted banner, cream cards with thick outlines and
   hard shadows, marigold buttons, peony pink accents. Phone width first. */

@font-face{font-family:Fraunces;src:url(fonts/fraunces.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}

/* the page has its own fixed colours; stop phone browsers recolouring it in dark mode */
:root{
  color-scheme:only light;
  --night:#0c3546;--navy:#0a2230;--cream:#fff3d9;--white:#fffaf0;
  --gold:#f9b72c;--pink:#f590ab;--sky:#a5ddff;--ink:#0a2230;--soft:#c9e3ec;
  --edge:3px solid var(--navy);--drop:5px 5px 0 var(--navy);--drop-dark:5px 5px 0 #05141c;
  --r:22px;--gut:18px;--max:1140px;
  --serif:Fraunces,"Cooper Black","Palatino Linotype",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{margin:0;background:var(--night);color:var(--cream);font:500 1.03rem/1.6 var(--sans);overflow-x:clip}
h1,h2,h3,p,figure{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
.bf{fill:currentColor}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px var(--gut);background:var(--navy);border-bottom:3px solid var(--gold)}
.nav-brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:700 1.15rem/1 var(--serif);color:var(--cream)}
.nav-brand svg{width:30px;height:24px;color:var(--sky)}
.nav nav{display:flex;gap:2px}
.nav nav a{padding:9px 10px;border-radius:999px;text-decoration:none;font:700 .85rem/1 var(--sans);color:var(--soft)}
.nav nav a:hover{background:var(--gold);color:var(--navy)}

/* hero */
#hero{overflow-x:clip}
.hero-art{width:100%;height:auto;max-height:min(600px,46vh);object-fit:cover}
.tape{position:relative;z-index:2;margin:-10px -12px 0;padding:10px 0;overflow:hidden;white-space:nowrap;
  background:var(--gold);color:var(--navy);border-block:var(--edge);transform:rotate(-1.4deg);
  font:700 1.05rem/1 var(--serif)}
.tape div{display:inline-block;animation:tape 30s linear infinite}
.tape span{margin-right:18px}
.tape span::after{content:"\1F98B";margin-left:18px}
@keyframes tape{to{transform:translateX(-50%)}}

.hero-body{text-align:center;padding-top:40px;padding-bottom:72px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chip{display:inline-block;padding:7px 13px;border-radius:999px;border:2px solid currentColor;color:var(--sky);
  font:700 .7rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase}
h1{font:700 clamp(3.7rem,17.5vw,8.5rem)/1 var(--serif);letter-spacing:-.03em;margin-top:22px;color:var(--cream);
  text-shadow:.045em .045em 0 var(--pink)}
.hook{font:italic 600 clamp(1.7rem,7vw,3rem)/1.1 var(--serif);color:var(--gold);margin-top:10px}
.sub{max-width:32em;margin:16px auto 0;color:var(--soft)}
.ca{max-width:600px;margin:30px auto 0}
.ca-label{font:700 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:10px}
.pill{display:flex;align-items:center;gap:10px;padding:7px 7px 7px 18px;border-radius:999px;background:var(--cream);color:var(--ink);
  border:var(--edge);box-shadow:var(--drop-dark)}
.pill code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font:600 .86rem/1 ui-monospace,Consolas,monospace}
.pending{color:var(--soft)}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}
.actions span:empty,.actions:empty,.socials:empty{display:none}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:26px}
.socials a{font:700 .85rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-underline-offset:5px}

/* buttons: one shape. .btn-alt is the second colour, .btn-small the small size. */
.btn{display:inline-block;padding:17px 30px;border-radius:999px;background:var(--gold);color:var(--navy);border:var(--edge);
  box-shadow:var(--drop);font:700 1.12rem/1 var(--serif);text-decoration:none;cursor:pointer;transition:transform .12s}
.btn:hover{transform:translate(-2px,-2px)}
.btn:active{transform:translate(3px,3px)}
.btn-alt{background:var(--sky)}
.btn-small{padding:10px 18px;font-size:.9rem;box-shadow:3px 3px 0 var(--navy)}
.band:not(.cream) .btn,#hero .btn:not(.btn-small){box-shadow:var(--drop-dark)}

/* sections */
.band{position:relative;padding:76px 0;overflow:hidden}
.cream{background:var(--cream);color:var(--ink);border-block:var(--edge)}
.cream .chip{color:var(--navy);background:var(--pink);border-color:var(--navy)}
h2{font:700 clamp(2.2rem,8.4vw,4.4rem)/1.02 var(--serif);letter-spacing:-.025em;margin-top:16px;max-width:15em}
h3{font:700 1.3rem/1.15 var(--serif)}
.lede{max-width:36em;margin-top:18px;font-size:1.1rem;color:var(--soft)}
.cream .lede{color:#33505c}

.grid{display:grid;gap:18px;margin-top:38px}
.card{position:relative;padding:24px 22px 26px;border-radius:var(--r);background:var(--white);color:var(--ink);border:var(--edge);box-shadow:var(--drop)}
.band:not(.cream) .card{background:var(--cream);box-shadow:var(--drop-dark)}
.card:nth-child(odd){transform:rotate(-.7deg)}
.card:nth-child(even){transform:rotate(.7deg)}
.num{display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:62px;padding:0 14px;border-radius:999px;
  background:var(--gold);border:var(--edge);font:700 1.6rem/1 var(--serif);transform:rotate(-5deg)}
.num.serif{font-style:italic;font-size:2rem}
.card:nth-child(even) .num{background:var(--pink)}
.card h3{margin-top:16px}
.card p:last-child{margin-top:8px;color:#33505c;font-size:.98rem;line-height:1.5}
.card i{font-family:var(--serif);font-weight:600}
.source{margin-top:26px;font-size:.82rem;color:#33505c}

/* butterfly effect: rings spreading from one small butterfly */
.ripple{position:absolute;right:-60px;top:-40px;width:420px;height:420px;pointer-events:none}
.ripple i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--sky);opacity:0;animation:ring 6s linear infinite}
.ripple i:nth-child(2){animation-delay:-2s}
.ripple i:nth-child(3){animation-delay:-4s}
.ripple svg{position:absolute;left:50%;top:50%;width:64px;height:50px;margin:-25px 0 0 -32px;color:var(--sky);animation:flap .3s ease-in-out infinite alternate}
@keyframes ring{from{transform:scale(.12);opacity:.9}to{transform:scale(1.25);opacity:0}}
@keyframes flap{to{transform:scaleX(.25)}}
#effect .wrap{position:relative}

/* meme kit */
.tile{padding:10px;border-radius:var(--r);background:var(--white);border:var(--edge);box-shadow:var(--drop)}
.tile img{width:100%;height:auto;border-radius:13px;border:2px solid var(--navy)}
/* a meme base: square frame, dark behind it so the glow on the cut-out reads */
.tile-base img{aspect-ratio:1;object-fit:contain;background:var(--navy)}
.tile figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 6px 6px}
.tile b{font:700 1.05rem/1.2 var(--serif)}

.foot{background:var(--navy);text-align:center;padding:60px 0 52px}
.foot-mark{width:76px;height:60px;margin:0 auto;color:var(--sky)}
.foot-name{font:700 2.2rem/1 var(--serif);margin-top:14px;color:var(--cream)}
.fine{max-width:46em;margin:26px auto 0;font-size:.8rem;line-height:1.6;color:var(--soft);opacity:.85}
.fine + .fine{margin-top:12px}

/* three butterflies crossing the page; they never block a tap */
.flutter{position:fixed;z-index:10;inset:0;pointer-events:none;overflow:hidden}
.flutter span{position:absolute;left:-60px;animation:cross 36s linear infinite}
.flutter i{display:block;animation:bob 5s ease-in-out infinite alternate}
.flutter svg{width:36px;height:28px;color:var(--sky);filter:drop-shadow(0 0 7px #fff) drop-shadow(0 2px 3px rgba(5,20,28,.5));animation:flap .28s ease-in-out infinite alternate}
.flutter span:nth-child(1){top:28%}
.flutter span:nth-child(2){top:60%;animation-duration:50s;animation-delay:-19s}
.flutter span:nth-child(2) svg{width:24px;height:19px;color:#fff}
.flutter span:nth-child(3){top:84%;animation-duration:43s;animation-delay:-31s}
.flutter span:nth-child(3) i{animation-duration:7s}
@keyframes cross{to{transform:translateX(calc(100vw + 120px))}}
@keyframes bob{from{transform:translateY(-60px) rotate(8deg)}to{transform:translateY(60px) rotate(22deg)}}

@media (min-width:720px){
  :root{--gut:32px}
  .band{padding:112px 0}
  .nav nav a{padding:10px 16px;font-size:.95rem}
  .tape{font-size:1.3rem;padding:13px 0}
  .hero-body{padding-top:44px;padding-bottom:104px}
  .grid.two,.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid{gap:24px}
  .ripple{width:680px;height:680px;right:-80px;top:-120px}
}
@media (min-width:1040px){
  .grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .flutter,.ripple i{display:none}
  .tape div,.ripple svg{animation:none}
  .btn{transition:none}
}