/* kawhia.co.nz homepage — zine template (adapted from the supplied MoMoney design) */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&family=Permanent+Marker&display=swap');

.zine-home{
  --z-ink:#141414; --z-cream:#fdf7e3; --z-yellow:#ffec00; --z-magenta:#e6007e;
  --z-blue:#1d4ed8; --z-green:#12a150; --z-orange:#ff6a1a; --z-purple:#7c3aed;
  --z-shadow:6px 6px 0 var(--z-ink); --z-shadow-lg:10px 10px 0 var(--z-ink);
  margin:0; background:var(--z-cream); color:var(--z-ink);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height:1.6;
}
.zine-home *{box-sizing:border-box}
.z-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.z-disp{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.01em;line-height:.98}
.z-mono{font-family:'JetBrains Mono',monospace}
.zine-home a{color:inherit}
.z-shadow{box-shadow:var(--z-shadow)}
.z-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(20,20,20,.6)}

/* buttons */
.zbtn{display:inline-flex;align-items:center;gap:.5rem;font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  letter-spacing:.06em;font-size:.9rem;border:3px solid var(--z-ink);padding:12px 20px;background:var(--z-yellow);
  color:var(--z-ink);box-shadow:var(--z-shadow);transform:rotate(-1deg);transition:transform .12s,box-shadow .12s;cursor:pointer}
.zbtn:hover{transform:translate(2px,2px) rotate(-1deg);box-shadow:3px 3px 0 var(--z-ink);text-decoration:none}
.zbtn-magenta{background:var(--z-magenta);color:#fff}
.zbtn-blue{background:var(--z-blue);color:#fff}
.zbtn-lg{font-size:1.1rem;padding:16px 28px;border-width:4px}

/* header */
.zh-header{position:sticky;top:0;z-index:50;background:var(--z-ink);border-bottom:3px solid var(--z-ink)}
.zh-inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.zh-brand{display:inline-block;background:var(--z-yellow);border:3px solid var(--z-ink);padding:6px 12px;
  transform:rotate(-2deg);box-shadow:var(--z-shadow);font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:1.15rem;color:var(--z-ink)}
.zh-brand span{color:var(--z-magenta)}
.zh-nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.zh-nav a{font-family:'Manrope';font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
  color:#fff;padding:8px 10px}
.zh-nav a:hover{color:var(--z-yellow);text-decoration:none}
.zh-cta{background:var(--z-magenta);color:#fff;border:3px solid var(--z-ink);font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;font-size:.78rem;letter-spacing:.08em;padding:8px 14px;transform:rotate(1deg);box-shadow:var(--z-shadow)}
.zh-cta:hover{text-decoration:none;transform:translate(1px,1px) rotate(1deg);box-shadow:3px 3px 0 var(--z-ink)}
.zh-agestrip{background:var(--z-ink);color:#c9c9c9;font-family:'JetBrains Mono',monospace;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.12em;border-top:1px solid #333;padding:6px 0}
.zh-agestrip a{color:var(--z-yellow)}

/* hero */
.zhero{position:relative;background:var(--z-ink);color:#fff;overflow:hidden;display:flex;align-items:flex-end}
.zhero-bg{position:absolute;inset:0;background:
  radial-gradient(circle at 20% 20%, rgba(230,0,126,.35), transparent 45%),
  radial-gradient(circle at 85% 30%, rgba(29,78,216,.4), transparent 45%),
  radial-gradient(circle at 60% 90%, rgba(18,161,80,.3), transparent 45%),
  repeating-linear-gradient(45deg, #1b1b1b 0 22px, #161616 22px 44px)}
.zhero-inner{position:relative;z-index:2;width:100%;padding:44px 0 40px}
.zhero h1{display:inline-block;background:var(--z-yellow);color:var(--z-ink);border:4px solid var(--z-ink);
  box-shadow:var(--z-shadow-lg);transform:rotate(-1.5deg);padding:14px 20px;
  font-size:clamp(1.9rem,6vw,4rem);max-width:20ch;margin:0}
.zhero p.sub{margin-top:20px;max-width:46ch;font-size:1.1rem;font-weight:600;
  background:var(--z-ink);display:inline-block;padding:6px 10px;border:2px solid #333}
.zhero .byline{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#cbb;letter-spacing:.06em}

/* marquee */
.zmarquee{background:var(--z-ink);color:var(--z-cream);border-top:3px solid var(--z-ink);border-bottom:3px solid var(--z-ink);
  padding:12px 0;overflow:hidden;display:flex;align-items:center;gap:20px}
.zmarquee .lbl{flex-shrink:0;padding-left:20px;color:var(--z-yellow)}
.zmarquee .track{display:flex;gap:26px;white-space:nowrap;animation:zmove 26s linear infinite;font-weight:700}
.zmarquee .track span.dot{color:rgba(253,247,227,.35)}
@keyframes zmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.zmarquee .track{animation:none}}

/* generic section */
.zsec{padding:56px 0;border-bottom:3px solid var(--z-ink)}
.zsec.cream{background:var(--z-cream)}
.zsec.blue{background:var(--z-blue);color:#fff}
.zsec h2{font-size:clamp(1.8rem,4.5vw,3.2rem);margin:.2em 0 .4em}
.zsec .mark{display:inline-block;background:var(--z-yellow);color:var(--z-ink);padding:2px 10px;transform:rotate(-1deg);box-shadow:var(--z-shadow)}
.zsec.blue .mark{background:var(--z-yellow)}
.zlead{font-size:1.2rem;font-weight:600;max-width:62ch}
.zsub{color:rgba(20,20,20,.7);max-width:60ch;margin-top:8px}

/* zine cards */
.zcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin:28px 0}
.zcard{background:#fff;border:3px solid var(--z-ink);box-shadow:var(--z-shadow);padding:20px}
.zcard.rot1{transform:rotate(-1.2deg)}.zcard.rot2{transform:rotate(1deg)}.zcard.rot3{transform:rotate(-.6deg)}
.zcard h3{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:1.15rem;margin:.2em 0 .4em}
.zcard .tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.66rem;text-transform:uppercase;
  letter-spacing:.12em;border:2px solid var(--z-ink);padding:2px 8px;margin-bottom:8px}
.zcard .logo-plate{background:#fff;border:2px solid #000;border-radius:10px;padding:14px;display:flex;justify-content:center;margin-bottom:12px}
.zcard .logo-plate img{height:56px;width:auto;filter:drop-shadow(0 0 1px #000) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000)}
.tag-y{background:var(--z-yellow)}.tag-g{background:var(--z-green);color:#fff}.tag-m{background:var(--z-magenta);color:#fff}
.tag-b{background:var(--z-blue);color:#fff}.tag-o{background:var(--z-orange);color:#fff}.tag-p{background:var(--z-purple);color:#fff}

/* info / trust card */
.zinfo{background:#fff;border:3px solid var(--z-ink);box-shadow:var(--z-shadow-lg);padding:26px;transform:rotate(-.5deg);max-width:720px}
.zinfo ul{padding-left:0;list-style:none;margin:0}
.zinfo li{padding:12px 0;border-bottom:1px dashed rgba(20,20,20,.35);display:flex;gap:12px}
.zinfo li:last-child{border-bottom:0}
.zinfo li b{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.8rem;color:var(--z-magenta)}

/* stats */
.zstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px}
.zstat{background:#fff;border:3px solid var(--z-ink);box-shadow:var(--z-shadow);padding:20px;text-align:center}
.zstat .n{font-family:'Archivo Black',sans-serif;font-size:2.4rem;line-height:1;color:var(--z-magenta)}
.zstat .l{font-family:'JetBrains Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin-top:8px;color:rgba(20,20,20,.7)}
.zstars{color:#f5b301;letter-spacing:.08em}

/* affiliate table zine skin */
.zine-home .top-tablez{padding:44px 0;background:var(--z-cream);border-bottom:3px solid var(--z-ink)}
.zine-home .top-tablez h2{font-size:clamp(1.6rem,4vw,2.6rem);margin:0 0 6px}
.zine-home table.cmp{border:3px solid var(--z-ink)}
.zine-home table.cmp thead th{background:var(--z-ink)}
.zine-home table.cmp .rank{color:var(--z-magenta)}
.zine-home .btn{background:var(--z-magenta);color:#fff;border:3px solid var(--z-ink);box-shadow:3px 3px 0 var(--z-ink);
  font-family:'Archivo Black',sans-serif;border-radius:0}
.zine-home .btn:hover{background:var(--z-ink);color:var(--z-yellow)}
.zine-home .table-wrap{border:0;box-shadow:var(--z-shadow-lg)}

.zclose{text-align:center}
.zclose h2{color:#fff}
.zclose .mark{background:var(--z-yellow);color:var(--z-ink)}

@media(max-width:820px){
  .zh-nav{display:none}
}