/* TheWeirdCatz – look taken from the NFTs: thick black ink lines,
   flat bright colours, hand-drawn feel, paw + signature. */
:root{
  --paper:#fff8ec;
  --ink:#141210;
  --ink-soft:#4a443d;
  --sky:#aedcf2;
  --desert:#e8772e;
  --paris:#e03b36;
  --wine:#7d2230;
  --teal:#83d3cc;
  --yellow:#f8d548;
  --grass:#8cc152;
  --line:3px solid var(--ink);
  --shadow:5px 5px 0 var(--ink);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Nunito",system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
.sticker img{width:100%;aspect-ratio:1/1;object-fit:cover}
a{color:inherit}
h1,h2,h3{font-family:"Chewy","Comic Sans MS",cursive;font-weight:400;margin:0;line-height:1.1;letter-spacing:.01em}

.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.7rem;padding-bottom:.7rem}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-family:"Chewy",cursive;font-size:1.6rem}
.brand img{width:34px;height:auto}
.nav-links{display:flex;gap:1.1rem;font-weight:800;font-size:.95rem}
.nav-links a{text-decoration:none;padding:.15rem 0;border-bottom:3px solid transparent}
.nav-links a:hover,.nav-links a[aria-current="page"]{border-color:var(--paris)}
@media (max-width:720px){.nav-links .opt{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-weight:800;text-decoration:none;
  background:var(--yellow);border:var(--line);border-radius:999px;
  padding:.6rem 1.3rem;box-shadow:4px 4px 0 var(--ink);
  transition:transform .1s, box-shadow .1s;cursor:pointer;font-size:1rem;font-family:inherit;color:var(--ink);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.alt{background:#fff}

/* ---------- hero ---------- */
.hero{background:var(--sky);border-bottom:var(--line);position:relative;overflow:hidden}
.hero::after{ /* grass strip like the park background */
  content:"";position:absolute;left:0;right:0;bottom:0;height:46px;
  background:var(--grass);border-top:var(--line);
}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding-top:3.5rem;padding-bottom:5.5rem;position:relative;z-index:1}
.sun{position:absolute;top:22px;left:4%;width:90px;height:90px;border-radius:50%;background:var(--yellow);border:var(--line);z-index:0}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem)}
.hero h1 span{color:var(--paris);-webkit-text-stroke:0}
.hero p.lead{font-size:1.15rem;font-weight:700;max-width:30ch;margin:1rem 0 1.6rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-cat{justify-self:center;width:min(380px,100%);position:relative}
.sticker{
  border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  background:#fff;overflow:hidden;
}
.hero-cat .sticker{transform:rotate(3deg)}
.hero-cat .badge{position:absolute;top:-14px;left:-14px;transform:rotate(-8deg)}
@media (max-width:760px){
  .hero .wrap{grid-template-columns:1fr;text-align:left;padding-top:2.5rem}
  .hero-cat{width:min(250px,75%)}
  .sun{width:60px;height:60px;left:auto;right:20px}
}

/* ---------- badges ---------- */
.badge{
  display:inline-block;font-weight:900;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;
  background:var(--yellow);border:2.5px solid var(--ink);border-radius:999px;padding:.15rem .7rem;
}
.badge.legendary{background:var(--yellow)}
.badge.epic{background:#c8a2ff}
.badge.rare{background:var(--sky)}
.badge.uncommon{background:var(--grass)}
.badge.common{background:#fff}

/* ---------- sections ---------- */
section{padding:4rem 0}
section + section{border-top:var(--line)}
.section-title{font-size:clamp(2rem,5vw,2.8rem);margin-bottom:.4rem}
.section-sub{color:var(--ink-soft);font-weight:700;margin:0 0 2rem;max-width:56ch}

/* story */
.story .wrap{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:center}
.story .paw-big{width:140px;transform:rotate(-12deg)}
.story blockquote{margin:0;font-size:1.25rem;font-weight:700;max-width:52ch}
.story blockquote footer{margin-top:1rem;display:flex;align-items:center;gap:.6rem;font-size:1rem;color:var(--ink-soft)}
.story blockquote footer img{width:34px}
@media (max-width:640px){.story .wrap{grid-template-columns:1fr}.story .paw-big{width:90px}}

/* originals */
.originals{background:var(--yellow)}
.orig-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem}
.orig{text-align:center;margin:0}
.orig .sticker{margin-bottom:.7rem}
.orig:nth-child(odd) .sticker{transform:rotate(-2deg)}
.orig:nth-child(even) .sticker{transform:rotate(2deg)}
.orig h3{font-size:1.35rem}
.orig small{font-weight:800;color:var(--ink-soft)}
@media (max-width:900px){.orig-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.orig-grid{grid-template-columns:repeat(2,1fr)}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.gallery figure{margin:0;position:relative}
.gallery figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;font-weight:800}
@media (max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* rarity */
.rarity{background:var(--teal)}
.tiers{display:grid;gap:.8rem;max-width:720px}
.tier{display:grid;grid-template-columns:130px 1fr 110px;align-items:center;gap:1rem;font-weight:800}
.bar{height:26px;background:#fff;border:var(--line);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;border-right:var(--line)}
.tier .num{text-align:right}
@media (max-width:560px){.tier{grid-template-columns:100px 1fr 70px;gap:.6rem}.tier .num small{display:none}}

/* utilities */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem}
.card{background:#fff;border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.card h3{font-size:1.6rem}
.card p{margin:0;color:var(--ink-soft);font-weight:600}
.card .badge{align-self:flex-start}
.card.live .badge{background:var(--grass)}
.card.dev .badge{background:var(--desert)}
.card.soon .badge{background:#fff}

/* contract */
.contract{background:var(--wine);color:#fff}
.contract .section-sub{color:#f3d9dc}
.contract-box{background:var(--paper);color:var(--ink);border:var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.4rem;max-width:760px}
.addr-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-bottom:1.2rem}
.addr{font-family:ui-monospace,Menlo,monospace;font-size:.95rem;font-weight:700;background:#fff;border:2.5px solid var(--ink);border-radius:10px;padding:.5rem .8rem;word-break:break-all;flex:1 1 300px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:0}
.facts div{border:2.5px solid var(--ink);border-radius:12px;padding:.6rem .8rem;background:#fff}
.facts dt{font-size:.75rem;font-weight:900;text-transform:uppercase;color:var(--ink-soft)}
.facts dd{margin:0;font-weight:800}

/* prose (about) */
.prose{max-width:64ch;padding:3.5rem 16px;margin:0 auto}
.prose h1{font-size:clamp(2.4rem,6vw,3.4rem);margin-bottom:1rem}
.prose h2{font-size:1.9rem;margin:2.2rem 0 .4rem}
.prose p{font-weight:600;color:var(--ink-soft)}

/* footer */
.site-footer{border-top:var(--line);background:var(--ink);color:var(--paper)}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.4rem;padding-bottom:1.4rem;font-weight:700;font-size:.9rem}
.site-footer img{width:30px;filter:invert(1)}