/* ==========================================================
   PAWS BUFFER — lavender / cozy retro-gaming / cat theme
   Shared across all pages (index.html, campaigns.html, ...)
   ========================================================== */
:root{
  --ink:#2b1b4a;          /* deep outline purple */
  --ink-2:#3d2a66;
  --night:#1c1234;        /* dark section bg */
  --night-2:#2a1d4d;
  --lav:#b48be6;          /* main lavender */
  --lav-2:#c9a9f2;        /* lighter lavender */
  --lav-3:#e6d6fb;        /* pale lavender */
  --lav-bg:#f3ecfd;       /* page background */
  --cream:#fff7fb;        /* card fill */
  --pink:#f78fb3;
  --pink-2:#ffc2d9;
  --mint:#7ef2c8;
  --mint-2:#b9ffe6;
  --gold:#ffd97a;
  --text:#3a2a5c;
  --muted:#6d5c8e;

  --font-pixel:'Press Start 2P','VT323',monospace;
  --font-body:'Nunito','Segoe UI',system-ui,sans-serif;

  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--lav-bg);
  background-image:radial-gradient(rgba(180,139,230,.28) 1px, transparent 1.5px);
  background-size:22px 22px;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,.pixel{font-family:var(--font-pixel);line-height:1.5;letter-spacing:.5px}
h1{font-size:clamp(1.15rem,3.4vw,2.1rem);line-height:1.55;color:#fff;text-shadow:4px 4px 0 var(--ink)}
h2{font-size:clamp(.95rem,2.2vw,1.35rem);color:var(--ink);margin:.3rem 0 1rem}
h3{font-size:.72rem;color:var(--ink);margin-bottom:.6rem;line-height:1.7}
p{margin-bottom:1rem}
.container{width:min(1120px,92%);margin:0 auto}
.section{padding:clamp(3.5rem,8vw,6rem) 0;position:relative}
.eyebrow{
  display:inline-block;font-family:var(--font-pixel);font-size:.6rem;
  color:var(--ink);background:var(--mint);padding:.55rem .8rem;
  border:3px solid var(--ink);box-shadow:var(--shadow);margin-bottom:1.2rem;
  letter-spacing:1px;
}
.eyebrow.pink{background:var(--pink-2)}
.eyebrow.gold{background:var(--gold)}
.eyebrow.lav{background:var(--lav-2)}
.lead{font-size:1.1rem;color:var(--muted);max-width:60ch}

/* ---------- CAT SPRITES ----------
   Each cat is a horizontal sprite sheet (assets/cats/*.png) of 64x64
   frames (a few are 68x68). .cat shows a cropped window of one frame,
   scaled by an integer --s so pixels stay crisp. --n is the frame count
   and --f the current frame; a small script below nudges --f so each cat
   rests on its first frame and only plays one gentle loop now and then. */
.cat{
  --s:4;            /* integer scale factor */
  --x:9;  --y:10;   /* crop origin, in sprite pixels */
  --w:44; --h:38;   /* crop size, in sprite pixels */
  --sheet:64;       /* frame size */
  --n:1;            /* frames in the sheet */
  --f:0;            /* current frame */
  display:block;position:relative;overflow:hidden;
  width:calc(var(--w) * var(--s) * 1px);
  height:calc(var(--h) * var(--s) * 1px);
  flex:none;
}
.cat img{
  position:absolute;
  width:calc(var(--n) * var(--sheet) * var(--s) * 1px);
  height:calc(var(--sheet) * var(--s) * 1px);
  left:calc((var(--x) + var(--f) * var(--sheet)) * var(--s) * -1px);
  top:calc(var(--y) * var(--s) * -1px);
  max-width:none;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.cat.s68{--sheet:68}
.cat.flip{transform:scaleX(-1)}
/* bottom-of-cat offsets so rows of cats sit on the same floor line */
.cat.b44{--h:34}  .cat.b45{--h:35}  .cat.b42{--h:32}  .cat.b31{--y:0;--h:32}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-pixel);font-size:.68rem;text-decoration:none;
  padding:1rem 1.35rem;border:4px solid var(--ink);color:var(--ink);
  background:var(--mint);box-shadow:var(--shadow-lg);
  transition:transform .08s ease, box-shadow .08s ease;
  cursor:pointer;line-height:1.4;text-align:center;
}
.btn:hover{transform:translate(2px,2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(8px,8px);box-shadow:0 0 0 var(--ink)}
.btn.pink{background:var(--pink)}
.btn.lav{background:var(--lav)}
.btn.gold{background:var(--gold)}
.btn.small{padding:.65rem .9rem;font-size:.55rem;box-shadow:var(--shadow)}
.btn.small:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn:disabled:hover,.btn[disabled]:hover{transform:none;box-shadow:var(--shadow-lg)}
.btn .arrow{display:inline-block}
.btn:hover .arrow{animation:nudge .8s steps(2,end) infinite}
.btn .icon-lg{display:inline-flex;align-items:center;font-size:2em;line-height:1}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* ---------- retro window / card ---------- */
.win{background:var(--cream);border:4px solid var(--ink);box-shadow:var(--shadow-lg);position:relative}
.win .bar{
  display:flex;align-items:center;gap:.5rem;
  background:var(--lav);border-bottom:4px solid var(--ink);
  padding:.5rem .8rem;font-family:var(--font-pixel);font-size:.55rem;color:var(--ink);
}
.win .bar .dots{display:flex;gap:.35rem;margin-right:.35rem}
.win .bar .dots i{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);display:block}
.win .bar .dots i:nth-child(1){background:var(--mint)}
.win .bar .dots i:nth-child(2){background:var(--pink)}
.win .bar .dots i:nth-child(3){background:#8fb8ff}
.win .bar .dots i:nth-child(4){background:var(--gold)}
.win .body{padding:1.4rem 1.5rem}
.win.pink .bar{background:var(--pink-2)}
.win.mint .bar{background:var(--mint)}
.win.gold .bar{background:var(--gold)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--lav-3);border-bottom:4px solid var(--ink);box-shadow:0 4px 0 rgba(43,27,74,.15)}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:70px;position:relative}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand .cat{--s:2;--x:16;--y:16;--w:30;--h:30}
.brand span:last-child{font-family:var(--font-pixel);font-size:.72rem;letter-spacing:1px}
.nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center}
.nav-links a{text-decoration:none;font-family:var(--font-pixel);font-size:.55rem;color:var(--ink);padding:.4rem 0;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:4px;width:0;background:var(--pink);transition:width .15s steps(4,end)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links .btn{padding:.65rem .9rem;font-size:.55rem;box-shadow:var(--shadow)}
.nav-links .btn::after{display:none}
.nav-links .btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.nav-toggle{display:none}
.burger{display:none;width:44px;height:44px;border:4px solid var(--ink);background:var(--cream);box-shadow:var(--shadow);cursor:pointer;place-items:center}
.burger i{display:block;width:20px;height:4px;background:var(--ink);box-shadow:0 -7px 0 var(--ink),0 7px 0 var(--ink)}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(ellipse at 20% 10%, rgba(180,139,230,.35), transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(247,143,179,.22), transparent 45%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 70%, #3a2868 100%);
  color:#fff;position:relative;overflow:hidden;border-bottom:4px solid var(--ink);
}
.stars,.stars2{position:absolute;inset:0;pointer-events:none}
.stars{
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff 100%, transparent 0),
    radial-gradient(2px 2px at 30% 70%, #fff 100%, transparent 0),
    radial-gradient(3px 3px at 55% 15%, var(--mint) 100%, transparent 0),
    radial-gradient(2px 2px at 72% 40%, #fff 100%, transparent 0),
    radial-gradient(2px 2px at 85% 12%, var(--pink-2) 100%, transparent 0),
    radial-gradient(3px 3px at 40% 45%, #fff 100%, transparent 0),
    radial-gradient(2px 2px at 20% 85%, var(--gold) 100%, transparent 0),
    radial-gradient(2px 2px at 65% 88%, #fff 100%, transparent 0),
    radial-gradient(2px 2px at 92% 60%, #fff 100%, transparent 0),
    radial-gradient(3px 3px at 5% 55%, var(--pink-2) 100%, transparent 0);
  animation:twinkle 9s steps(2,end) infinite;
}
.stars2{
  background-image:
    radial-gradient(2px 2px at 15% 40%, #fff 100%, transparent 0),
    radial-gradient(2px 2px at 48% 80%, var(--mint) 100%, transparent 0),
    radial-gradient(2px 2px at 78% 25%, #fff 100%, transparent 0),
    radial-gradient(3px 3px at 60% 60%, var(--gold) 100%, transparent 0),
    radial-gradient(2px 2px at 25% 8%, #fff 100%, transparent 0),
    radial-gradient(2px 2px at 95% 92%, #fff 100%, transparent 0);
  animation:twinkle 9s steps(2,end) infinite reverse;
}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.55}}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 2px, transparent 2px 4px);mix-blend-mode:multiply;opacity:.6}
.moon{position:absolute;right:6%;top:8%;width:70px;height:70px;background:var(--gold);
  box-shadow:0 0 0 4px var(--ink), 0 0 40px 10px rgba(255,217,122,.25);
  clip-path:polygon(0 25%,25% 25%,25% 0,75% 0,75% 25%,100% 25%,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%)}
.hero .container{display:grid;grid-template-columns:1fr;gap:2.5rem;justify-items:center;text-align:center;padding:clamp(3.5rem,8vw,6rem) 0 clamp(4rem,8vw,6rem);position:relative;z-index:2}
.hero .container>div:first-child{max-width:720px}
.hero .eyebrow{background:var(--lav-2)}
.hero p.lead{color:var(--lav-3);font-size:1.15rem;margin:1.2rem auto 2rem;max-width:56ch}
.hero .actions{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center}
.press-start{font-family:var(--font-pixel);font-size:.55rem;color:var(--mint);letter-spacing:2px;margin-top:2rem;animation:blink 1.8s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

/* hero scene: the whole crew hanging out on one long platform */
.scene{position:relative;width:100%;height:230px;display:flex;align-items:flex-end;justify-content:center;gap:0}
.scene .platform{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(880px,100%);height:28px;background:var(--lav);
  border:4px solid var(--ink);box-shadow:var(--shadow-lg);
  background-image:repeating-linear-gradient(90deg, var(--lav-2) 0 14px, var(--lav) 14px 28px);
}
/* hero cats are placed and moved by the little behavior script below */
.scene .cat{--s:4;--x:6;--y:8;--w:52;--h:38;position:absolute;left:0;bottom:22px;z-index:2;margin:0}
.scene .cat.flip{transform:scaleX(-1)}
/* before the script runs, fan the cats out so nothing overlaps */
.scene .cat:nth-child(3){left:6%}  .scene .cat:nth-child(4){left:22%}  .scene .cat:nth-child(5){left:40%}
.scene .cat:nth-child(6){left:58%} .scene .cat:nth-child(7){left:74%}
.scene .heart{position:absolute;font-family:var(--font-pixel);color:var(--pink);font-size:1.3rem;opacity:0;animation:floatheart 9s linear infinite;z-index:1}
.scene .heart.h1{left:14%;top:26%;animation-delay:0s}
.scene .heart.h2{right:12%;top:34%;animation-delay:4.5s}
@keyframes floatheart{0%{opacity:0;transform:translateY(16px)}10%{opacity:1}55%{opacity:1}70%,100%{opacity:0;transform:translateY(-50px)}}

/* ---------- PAGE HEADER (non-hero pages) ---------- */
.pagehead{
  background:
    radial-gradient(ellipse at 20% 10%, rgba(180,139,230,.35), transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(247,143,179,.22), transparent 45%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 70%, #3a2868 100%);
  color:#fff;position:relative;overflow:hidden;border-bottom:4px solid var(--ink);
  padding:clamp(2.6rem,6vw,4rem) 0;
}
.pagehead .container{position:relative;z-index:2;text-align:center}
.pagehead .lead{color:var(--lav-3);margin:0 auto}
.pagehead .eyebrow{background:var(--lav-2)}

/* ticker */
.ticker{background:var(--ink);color:var(--lav-3);border-bottom:4px solid var(--ink);overflow:hidden;white-space:nowrap;font-family:var(--font-pixel);font-size:.55rem;padding:.7rem 0}
.ticker .track{display:inline-block;animation:scroll 75s linear infinite}
.ticker span{padding:0 2.2rem}
.ticker b{color:var(--pink)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- MISSION ---------- */
.mission .grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.mission .art{display:grid;place-items:center}
.mission .win .body{display:grid;place-items:center;padding:2rem 1.5rem 1.5rem}
.mission .win .cat{--s:6;--x:14;--y:16;--w:36;--h:30}
.lifebar{display:flex;align-items:center;gap:.9rem;background:var(--ink);border-bottom:4px solid var(--ink);padding:.55rem .9rem}
.lifebar .label{font-family:var(--font-pixel);font-size:.55rem;color:#fff;letter-spacing:1px}
.lifebar .hearts{display:flex;gap:4px;flex-wrap:wrap}
.lifebar .heart{width:21px;height:18px;color:var(--cream);display:block}
.lifebar .heart.full{color:var(--pink)}
.lifebar .heart.pop{animation:heartpop .35s steps(2,end)}
@keyframes heartpop{50%{transform:scale(1.35)}}
.map-card{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;padding:1.2rem;border:4px solid var(--ink);background:var(--cream);box-shadow:var(--shadow-lg);margin-top:1.5rem;font-family:var(--font-pixel);font-size:.55rem;text-align:center;line-height:1.8}
.map-card .node{padding:.9rem .5rem;border:3px solid var(--ink)}
.map-card .node.from{background:var(--pink-2)}
.map-card .node.to{background:var(--mint)}
.map-card .arrow{font-size:1.2rem}
.map-card small{display:block;font-family:var(--font-body);font-size:.85rem;font-weight:700;letter-spacing:0}

/* ---------- PROCESS ---------- */
.process{background:var(--lav-3);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.5rem}
.level{background:var(--cream);border:4px solid var(--ink);box-shadow:var(--shadow-lg);padding:1.8rem 1.3rem 1.5rem;position:relative;transition:transform .1s}
.level:hover{transform:translate(-3px,-3px)}
/* dotted level-map trail running behind the checkpoint flags */
.levels{position:relative}
.levels::before{content:"";position:absolute;left:12.5%;right:12.5%;top:-1px;border-top:4px dotted var(--ink);z-index:0}
.level .cp{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  background:var(--ink);color:var(--mint);font-family:var(--font-pixel);font-size:.5rem;padding:.4rem .6rem;z-index:1;
}
.level .cp.goal{color:var(--gold)}
.flag{position:relative;width:13px;height:15px;flex:none}
.flag::before{content:"";position:absolute;left:0;top:0;width:3px;height:15px;background:var(--lav-3)}
.flag::after{content:"";position:absolute;left:3px;top:1px;width:10px;height:8px;background:var(--pink);
  clip-path:polygon(0 0,100% 0,72% 50%,100% 100%,0 100%)}
.cp.goal .flag::after{background:var(--gold);clip-path:none;width:9px;height:7px}
.level .stage{margin:.4rem 0 1rem;display:flex;align-items:flex-end;justify-content:center;height:130px;background:var(--lav-3);border:3px solid var(--ink);padding:0 .4rem .5rem;
  background-image:repeating-linear-gradient(0deg, transparent 0 8px, rgba(43,27,74,.06) 8px 10px)}
.level .stage .cat{--s:3}
.level p{font-size:.95rem;color:var(--muted);margin:0}

/* ---------- ADOPT ---------- */
.adopt .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:stretch;margin-top:1.5rem}
.quest{list-style:none;display:grid;gap:1.1rem;height:100%;grid-template-rows:repeat(3,1fr)}
.adopt-cta{display:flex;flex-direction:column}
.adopt-cta .body{flex:1;display:flex;flex-direction:column;justify-content:center}
.quest li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;align-content:center;background:var(--cream);border:4px solid var(--ink);box-shadow:var(--shadow);padding:1.1rem 1.2rem}
.quest .check{width:28px;height:28px;border:3px solid var(--ink);background:var(--mint);display:grid;place-items:center;font-family:var(--font-pixel);font-size:.6rem;color:var(--ink);margin-top:.15rem}
.quest h3{margin-bottom:.35rem}
.quest p{margin:0;font-size:.95rem;color:var(--muted)}
.adopt-cta .body{text-align:center;padding:1.6rem 1.2rem 2rem}
.adopt-cta p{color:var(--muted)}
.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.4rem 0 1.4rem;max-width:400px;margin-left:auto;margin-right:auto}
.roster figure{display:grid;justify-items:center;gap:0}
.roster .cat{--s:4;--x:15;--y:16;--w:32;--h:30}
.roster .tile{display:block;width:92px;height:14px;margin-top:-4px;background:var(--lav);border:3px solid var(--ink);
  background-image:repeating-linear-gradient(90deg, var(--lav-2) 0 10px, var(--lav) 10px 20px)}
.roster figcaption{font-family:var(--font-pixel);font-size:.45rem;color:var(--muted);letter-spacing:1px;margin-top:.5rem}
.roster figure:hover figcaption{color:var(--ink)}
.roster figure:hover .cat{animation:hop .5s steps(2,end)}
@keyframes hop{50%{transform:translateY(-8px)}}

/* ---------- INVOLVED ---------- */
.involved{background:var(--night);color:var(--lav-3);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);position:relative;overflow:hidden}
.involved h2{color:#fff}
.involved .lead{color:var(--lav-2)}
.involved .cards{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.5rem}
.involved .win .body{color:var(--text);display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
.involved .win .body .cat{--s:3}
.involved .win h3{margin-top:.2rem}
.involved .win p{color:var(--muted)}
.social{display:flex;gap:.8rem;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--font-pixel);font-size:.55rem;color:var(--ink);border:3px solid var(--ink);padding:.7rem .9rem;background:var(--lav-3);box-shadow:var(--shadow)}
.social a:hover{background:var(--pink-2)}

/* ---------- CAMPAIGNS PREVIEW ---------- */
.campaigns-preview{background:var(--lav-3);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.cp-list{display:flex;flex-direction:column;gap:.7rem;margin-top:2rem}
.cp-row{
  display:flex;align-items:center;gap:.9rem;flex-wrap:nowrap;
  background:var(--cream);border:3px solid var(--ink);box-shadow:var(--shadow);
  padding:.55rem .8rem;
}
.cp-row .thumb{width:48px;height:48px;flex:none;border:3px solid var(--ink);overflow:hidden;background:var(--night)}
.cp-row .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cp-row .info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.cp-row .head-line{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cp-row h3{margin:0;font-size:.6rem;line-height:1.4}
.cp-row .cat-tag{
  font-family:var(--font-pixel);font-size:.42rem;color:var(--ink);background:var(--lav-2);
  border:2px solid var(--ink);padding:.18rem .4rem;white-space:nowrap;letter-spacing:.5px;
}
.cp-row .progress-mini{display:flex;align-items:center;gap:.5rem}
.cp-bar{flex:0 1 140px;max-width:160px;border:2px solid var(--ink);background:var(--lav-3);height:8px;overflow:hidden}
.cp-bar .fill{height:100%;background:var(--mint)}
.cp-amt{font-size:.75rem;color:var(--muted);white-space:nowrap}
.cp-amt b{color:var(--ink)}
.campaigns-preview .cta{text-align:center;margin-top:2.2rem}

/* ---------- DONATE ---------- */
.donate{text-align:center}
.donate .win{max-width:760px;margin:2rem auto 0;text-align:left}
.donate .win .body{padding:1.6rem 2rem 2rem}
.coin-line{display:flex;align-items:center;justify-content:center;gap:1rem;font-family:var(--font-pixel);font-size:.6rem;color:var(--ink);margin:.5rem 0 1rem;text-align:center;line-height:1.8}
.coin{flex:none;color:var(--pink);font-size:1.1rem;line-height:1;animation:pulse 6s steps(2,end) infinite}
@keyframes pulse{0%,80%{transform:scale(1)}90%{transform:scale(1.35)}100%{transform:scale(1)}}
.donate-row{display:flex;align-items:flex-end;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.donate-row .cat{--s:3}
.donate-row .btn{margin-bottom:1.2rem}
.zeffy-embed{margin-top:1.5rem}
.zeffy-embed:not(:empty){border:4px solid var(--ink);background:#fff}
.zeffy-embed iframe{width:100%;border:0;display:block}
.donate .fine{font-size:.85rem;color:var(--muted);margin:1.2rem 0 0}

/* ---------- NAP STRIP (above footer): a row of cats dozing on a shelf ---------- */
.parade{background:var(--lav-3);border-top:4px solid var(--ink);overflow:hidden;position:relative;height:110px}
.parade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:var(--lav);border-top:4px solid var(--ink);
  background-image:repeating-linear-gradient(90deg, var(--lav-2) 0 14px, var(--lav) 14px 28px)}
.parade .line{position:absolute;bottom:14px;left:0;right:0;display:flex;align-items:flex-end;justify-content:center;gap:clamp(.6rem,4vw,3rem)}
.parade .cat{--s:2;--x:8;--w:48}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:var(--lav-3);padding:3.5rem 0 2rem}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
footer h3{color:var(--mint);font-size:.6rem}
footer p{font-size:.95rem;color:var(--lav-2)}
footer ul{list-style:none}
footer li{margin-bottom:.5rem}
footer a{color:var(--lav-3);text-decoration:none}
footer a:hover{color:var(--pink-2)}
footer .brand{color:#fff;margin-bottom:1rem}
footer .bottom{margin-top:2.5rem;padding-top:1.4rem;border-top:3px dashed var(--ink-2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.85rem;color:var(--lav-2)}
footer .bottom .pixel{font-size:.5rem}

/* ---------- ADOPTABLE CATS PAGE ---------- */
.cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.5rem}
.cat-card .body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:1.6rem 1.2rem}
.cat-card .stage{
  width:100%;height:130px;background:var(--lav-3);border:3px solid var(--ink);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5rem;
  background-image:repeating-linear-gradient(0deg, transparent 0 8px, rgba(43,27,74,.06) 8px 10px);
}
.cat-card .stage .cat{--s:4}
.cat-card .stage.photo{padding:0;overflow:hidden}
.cat-card .stage.photo img{width:100%;height:100%;object-fit:cover;display:block}
.cat-card h3{margin:.3rem 0 0}
.cat-card .photo-note{font-size:.68rem;color:var(--muted);font-style:italic;margin:0}
.cat-card .btn{margin-top:.3rem;font-size:.5rem;padding:.65rem .9rem}

/* ---------- CAT PROFILE PAGE ---------- */
.back-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.2rem;font-family:var(--font-pixel);font-size:.55rem;color:var(--mint);text-decoration:none;letter-spacing:.5px}
.back-link:hover{text-decoration:underline}
.profile-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.2rem;align-items:start}
.video-wrap{position:relative;width:100%;padding-top:56.25%;background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.stat-sheet dl{display:grid;grid-template-columns:auto 1fr;gap:.9rem 1.2rem;margin:0}
.stat-sheet dt{font-family:var(--font-pixel);font-size:.65rem;color:var(--muted);letter-spacing:.5px;align-self:center}
.stat-sheet dd{margin:0;font-weight:700;color:var(--ink);align-self:center}
.stat-sheet .btn{margin-top:1.4rem;width:100%;justify-content:center}
.stat-sheet .tbd{color:var(--muted);font-style:italic;font-weight:400}

.media-row{display:flex;flex-direction:column;gap:1rem}
.mini-slideshow{position:relative;aspect-ratio:4/3;overflow:hidden;border:3px solid var(--ink);background:#000}
.mini-slideshow .slide{display:none;width:100%;height:100%}
.mini-slideshow .slide.active{display:block}
.mini-slideshow .slide img{width:100%;height:100%;object-fit:cover;display:block}
.mini-slideshow .ms-prev,.mini-slideshow .ms-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:2px solid var(--ink);background:var(--cream);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;font-family:var(--font-pixel);font-size:.55rem;padding:0;
}
.mini-slideshow .ms-prev{left:.4rem}
.mini-slideshow .ms-next{right:.4rem}
.mini-slideshow .ms-dots{position:absolute;bottom:.5rem;left:0;right:0;display:flex;gap:.35rem;justify-content:center}
.mini-slideshow .ms-dots button{width:9px;height:9px;border-radius:50%;border:2px solid var(--ink);background:var(--cream);padding:0;cursor:pointer}
.mini-slideshow .ms-dots button.active{background:var(--pink)}
.media-row .video-wrap{border:3px solid var(--ink)}

/* ---------- ADOPTION APPLICATION FORM ---------- */
.app-form{max-width:780px;margin:0 auto}
.form-cp{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  background:var(--ink);color:var(--mint);font-family:var(--font-pixel);font-size:.55rem;
  padding:.5rem .8rem;margin-bottom:1.2rem;letter-spacing:1px;
}
.form-cp.goal{color:var(--gold)}
.form-section{margin-bottom:2.4rem}
.form-section>p.hint{margin:-.6rem 0 1.2rem;color:var(--muted);font-size:.92rem}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem}
.field.full{grid-column:1/-1}
.field>label{font-family:var(--font-pixel);font-size:.55rem;color:var(--ink);letter-spacing:.5px;line-height:1.6}
.field .req{color:var(--pink)}
.field .hint{display:block;font-family:var(--font-body);font-size:.82rem;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:.15rem}
.app-form input[type=text],.app-form input[type=email],.app-form input[type=tel],
.app-form select,.app-form textarea{
  font-family:var(--font-body);font-size:1rem;padding:.75rem .9rem;
  border:3px solid var(--ink);background:#fff;color:var(--text);width:100%;
}
.app-form textarea{resize:vertical;min-height:100px;line-height:1.5}
.app-form input:focus,.app-form select:focus,.app-form textarea:focus{outline:3px solid var(--mint);outline-offset:1px}
.checkline{display:flex;gap:.8rem;align-items:flex-start;background:var(--lav-3);border:3px solid var(--ink);padding:.9rem 1rem;margin-bottom:.8rem}
.checkline input[type=checkbox]{width:21px;height:21px;flex:none;margin-top:.1rem;accent-color:var(--pink);cursor:pointer}
.checkline label{font-size:.92rem;font-weight:700;color:var(--text);cursor:pointer}
.app-actions{text-align:center;margin-top:1rem}
.app-actions .fine{font-size:.82rem;color:var(--muted);margin-top:1rem}
.app-fallback{display:none;margin-top:2rem}
.app-fallback.show{display:block}
.app-fallback textarea{width:100%;min-height:260px;font-family:'Courier New',monospace;font-size:.82rem;line-height:1.5;border:3px solid var(--ink);padding:1rem;background:#fff;color:var(--text)}
.app-fallback .copy-row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.app-fallback .copied{font-family:var(--font-pixel);font-size:.55rem;color:var(--mint-2);opacity:0;transition:opacity .15s}
.app-fallback .copied.show{opacity:1}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .profile-grid{grid-template-columns:1fr}
  .field-grid{grid-template-columns:1fr}
  .levels::before{display:none}
  .hero .container,.mission .grid,.adopt .grid,.involved .cards{grid-template-columns:1fr}
  .hero .scene{height:190px}
  .scene .cat{--s:3}
  .levels{grid-template-columns:1fr 1fr}
  .cats-grid{grid-template-columns:repeat(3,1fr)}
  footer .grid{grid-template-columns:1fr 1fr}
  .parade .cat:nth-child(n+6){display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .burger{display:grid}
  .nav-links{display:none;position:absolute;left:-4.35%;right:-4.35%;top:70px;flex-direction:column;background:var(--lav-3);border-bottom:4px solid var(--ink);padding:1.2rem 4%;gap:1.1rem;align-items:flex-start}
  .nav-toggle:checked ~ .nav-links{display:flex}
  .moon{width:44px;height:44px;top:14px;right:14px;box-shadow:0 0 0 3px var(--ink), 0 0 28px 6px rgba(255,217,122,.22)}
  .hero .scene{height:160px;gap:.6rem}
  .scene .cat{--s:3}
  .scene .cat:nth-child(6),.scene .cat:nth-child(7){display:none}
  .mission .win .cat{--s:5}
  .roster .cat{--s:3}
  .roster .tile{width:72px}
  .parade .cat:nth-child(n+5){display:none}
  .levels{grid-template-columns:1fr}
  .cats-grid{grid-template-columns:1fr 1fr}
  .involved .win .body{grid-template-columns:1fr}
  .involved .win .body .cat{justify-self:center}
  footer .grid{grid-template-columns:1fr}
  .map-card{grid-template-columns:1fr}
  .map-card .arrow{transform:rotate(90deg)}
  .hero .actions .btn,.adopt-cta .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}