/* NZ Online Social — split-duotone system
   Two flat fields, one hard vertical seam. No gradients anywhere. */

:root{
  --purple:#B4A0DC;
  --yellow:#F3E4A6;
  --ink:#2A2438;
  --paper:#FFFEFB;
  --cream:#F7F3EB;
  --gutter:clamp(20px,5vw,72px);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Unbounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;
  font-size:clamp(.88rem,.53rem + .45vw,1rem);
  line-height:1.8;
  letter-spacing:-.005em;
  color:var(--paper);
  overflow-x:hidden;
}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}

/* ---------- the split ---------- */
.split-page::before,
.split-page::after{
  content:"";
  position:fixed;
  top:0;bottom:0;
  z-index:-2;
}
.split-page::before{left:0;right:50%;background:var(--purple)}
.split-page::after{left:50%;right:0;background:var(--yellow)}
.plain-page{background:var(--cream);color:var(--ink)}

/* text that reads across the seam */
.split-line{position:relative;display:block}
.split-line .lay{
  display:block;
  width:100%;
  text-align:center;
  color:var(--paper);
}
.split-line .over{
  position:absolute;
  inset:0;
  color:var(--ink);
  -webkit-clip-path:inset(0 0 0 50%);
  clip-path:inset(0 0 0 50%);
}

/* ---------- utility ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;font-size:.75rem}
.skip:focus{left:8px;top:8px}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:40;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:76px;
}
.head-l{
  background:var(--purple);
  display:flex;align-items:center;
  padding:14px 20px 14px var(--gutter);
}
.head-r{
  background:var(--yellow);
  display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(14px,2vw,32px);
  padding:14px var(--gutter) 14px 20px;
}
.wordmark{
  font-weight:800;
  font-size:clamp(.82rem,.6rem + .35vw,1.02rem);
  letter-spacing:-.03em;
  color:var(--paper);
  text-decoration:none;
  line-height:1.1;
}
.head-nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,30px);flex-wrap:nowrap;justify-content:flex-end}
.head-nav a{
  color:var(--ink);
  text-decoration:none;
  font-weight:500;
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.head-nav a:hover,.head-nav a:focus-visible{border-bottom-color:var(--ink)}
.head-nav a.here{border-bottom-color:var(--ink);font-weight:800}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:26px;height:3px;background:var(--paper);margin:5px 0}

.drawer{
  position:fixed;inset:0;z-index:60;
  background:var(--yellow);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--gutter);
}
.drawer[hidden]{display:none}
.drawer nav{display:flex;flex-direction:column;gap:18px}
.drawer a{
  color:var(--ink);text-decoration:none;
  font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.5rem,8vw,2.6rem);
  line-height:1.1;
}
.drawer-close{
  position:absolute;top:14px;right:18px;
  background:none;border:0;font-size:2.6rem;line-height:1;
  color:var(--ink);cursor:pointer;font-family:inherit;
}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,9vw,132px) 0 clamp(40px,6vw,84px)}
.hero .split-line{
  font-weight:800;
  font-size:clamp(2.1rem,1rem + 6.4vw,6rem);
  line-height:1.02;
  letter-spacing:-.055em;
}
.hero .lay{padding:0 clamp(12px,3vw,40px)}
.hero-cat .split-line{font-size:clamp(2rem,1rem + 5.4vw,5rem)}

/* the sub-line crosses the seam too */
.hero .hero-sub{
  margin-top:clamp(26px,3.6vw,46px);
  font-weight:300;
  font-size:clamp(.84rem,.7rem + .35vw,1.06rem);
  line-height:1.8;
  letter-spacing:-.01em;
}
.hero .hero-sub .lay{padding:0 clamp(20px,16vw,300px)}
.hero-cat .hero-sub .lay{padding:0 clamp(20px,13vw,250px)}

/* hero photo, centred on the seam */
.photo-slot{
  width:min(720px,calc(100% - 2*var(--gutter)));
  margin:clamp(44px,6vw,80px) auto 0;
  aspect-ratio:1/1;
  border:4px solid var(--paper);
  overflow:hidden;
  position:relative;
}
.photo-slot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- category cards (home) ---------- */
.cats{padding:clamp(20px,4vw,48px) var(--gutter)}
.cat-grid{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.4vw,32px);
}
.cat-card{
  display:flex;flex-direction:column;
  padding:clamp(26px,3.4vw,46px);
  border:3px solid currentColor;
  text-decoration:none;
  transition:transform .18s ease;
}
.cat-card:hover{transform:translateY(-4px)}
.cat-card.p{background:var(--purple);color:var(--paper)}
.cat-card.y{background:var(--yellow);color:var(--ink)}
.cat-count{
  display:block;
  font-weight:800;
  font-size:clamp(2.6rem,1rem + 5vw,4.4rem);
  line-height:.92;
  letter-spacing:-.06em;
}
.cat-count-label{
  display:block;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.75;margin-top:6px;
}
.cat-card h3{
  margin-top:clamp(22px,2.6vw,34px);
  font-weight:800;
  font-size:clamp(1.25rem,.8rem + 1.5vw,2.05rem);
  letter-spacing:-.04em;
  line-height:1.1;
}
.cat-card p{margin-top:14px;font-size:.84rem;line-height:1.8}
.cat-card .cat-go{
  margin-top:auto;
  padding-top:clamp(20px,2.4vw,30px);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}

/* ---------- entries (category pages) ---------- */
.entries{padding:clamp(20px,4vw,48px) var(--gutter) 0;display:grid;gap:clamp(18px,2.4vw,32px);max-width:var(--max);margin:0 auto}
.entry{
  border:3px solid currentColor;
  padding:clamp(26px,3.4vw,50px);
  display:grid;
  grid-template-columns:minmax(220px,.85fr) 1.9fr;
  gap:clamp(22px,3vw,52px);
}
.entry.p{background:var(--purple);color:var(--paper)}
.entry.y{background:var(--yellow);color:var(--ink)}
.entry-head{display:flex;gap:16px;align-items:flex-start}
.entry-no{
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.06em;
  padding-top:.5em;
  opacity:.6;
}
.entry h3{
  font-weight:800;
  font-size:clamp(1.3rem,.9rem + 1.5vw,2.1rem);
  letter-spacing:-.045em;
  line-height:1.08;
}
.entry-where{
  margin-top:10px;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;opacity:.8;
}
.entry-body p + p{margin-top:1.05em}
.entry-body p{font-size:.86rem;line-height:1.85}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(22px,2.4vw,30px)}
.tag{
  border:1.5px solid currentColor;
  border-radius:999px;
  padding:6px 14px;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}

/* ---------- closing ---------- */
.closing{padding:clamp(56px,8vw,120px) 0}
.closing .split-line{
  font-weight:400;
  font-size:clamp(1.15rem,.7rem + 1.8vw,2.3rem);
  line-height:1.4;
  letter-spacing:-.035em;
}
.closing .lay{padding:0 clamp(20px,12vw,220px)}

/* ---------- long-form pages ---------- */
.band{position:relative;padding:clamp(64px,9vw,128px) 0}
.band::before,.band::after{content:"";position:absolute;top:0;bottom:0}
.band::before{left:0;right:50%;background:var(--purple)}
.band::after{left:50%;right:0;background:var(--yellow)}
.band > *{position:relative;z-index:1}
.band .split-line{
  font-weight:800;
  font-size:clamp(1.9rem,1rem + 5vw,4.6rem);
  line-height:1.05;
  letter-spacing:-.05em;
}
.band .lay{padding:0 clamp(12px,3vw,40px)}
.prose{
  max-width:720px;
  margin:0 auto;
  padding:clamp(48px,7vw,92px) var(--gutter) clamp(56px,8vw,110px);
  color:var(--ink);
}
.prose p{font-size:.88rem;line-height:1.95}
.prose p + p{margin-top:1.15em}
.prose h2{
  margin-top:clamp(36px,4.4vw,60px);
  margin-bottom:14px;
  font-weight:800;
  font-size:clamp(1.05rem,.8rem + .9vw,1.5rem);
  letter-spacing:-.035em;
  line-height:1.2;
}
.prose h2::after{content:"";display:block;width:64px;height:4px;background:var(--purple);margin-top:14px}
.prose strong{font-weight:600}

/* ---------- footer ---------- */
.site-foot{position:relative;padding:clamp(48px,6vw,86px) 0 clamp(28px,3vw,44px);overflow:hidden}
.site-foot::before,.site-foot::after{content:"";position:absolute;top:0;bottom:0}
.site-foot::before{left:0;right:50%;background:var(--purple)}
.site-foot::after{left:50%;right:0;background:var(--yellow)}
.site-foot > *{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1fr 1fr}
.foot-l{color:var(--paper);padding:0 clamp(24px,3vw,48px) 0 var(--gutter)}
.foot-r{color:var(--ink);padding:0 var(--gutter) 0 clamp(24px,3vw,48px);display:grid;grid-template-columns:1fr 1fr;gap:24px}
.foot-name{font-weight:800;font-size:clamp(1.1rem,.8rem + 1vw,1.7rem);letter-spacing:-.04em;line-height:1.1}
.foot-desc{margin-top:16px;font-size:.78rem;line-height:1.85;max-width:44ch}
.foot-h{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;margin-bottom:14px}
.foot-col li + li{margin-top:9px}
.foot-col a{font-size:.76rem;text-decoration:none;border-bottom:1px solid transparent}
.foot-col a:hover{border-bottom-color:var(--ink)}
.foot-closing{
  margin-top:clamp(48px,6vw,88px);
  font-weight:600;
  font-size:clamp(1rem,.7rem + 1.2vw,1.9rem);
  letter-spacing:-.04em;
  line-height:1.3;
}
.foot-legal{
  margin-top:clamp(30px,3.4vw,48px);
  font-size:.58rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  font-weight:500;
}
.foot-legal .lay{padding:0 var(--gutter)}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .head-nav a{font-size:.58rem;letter-spacing:.06em}
  .wordmark{font-size:.78rem}
}
@media (max-width:1000px){
  .entry{grid-template-columns:1fr;gap:clamp(18px,3vw,28px)}
}
@media (max-width:860px){
  .site-head{grid-template-columns:1fr;background:var(--purple)}
  .head-l{padding-right:var(--gutter)}
  .head-r{
    background:transparent;
    position:absolute;top:0;right:0;height:100%;
    padding:0 calc(var(--gutter) - 8px) 0 0;
  }
  .head-nav{display:none}
  .burger{display:block}
  .cat-grid{grid-template-columns:1fr}
  .site-foot{padding:0}
  .site-foot::before,.site-foot::after{display:none}
  .foot-grid{grid-template-columns:1fr}
  .foot-l{background:var(--purple);padding:clamp(40px,8vw,56px) var(--gutter)}
  .foot-r{background:var(--yellow);padding:clamp(40px,8vw,56px) var(--gutter)}
  .foot-closing{background:var(--purple);margin-top:0;padding:clamp(40px,8vw,56px) 0 0}
  .foot-closing .lay{padding:0 var(--gutter)}
  .foot-legal{background:var(--purple);padding:clamp(28px,4vw,40px) 0 32px;margin-top:0}
  .foot-closing .over,.foot-legal .over{display:none}
}
@media (max-width:560px){
  .hero .split-line{letter-spacing:-.04em}
  .foot-r{grid-template-columns:1fr;gap:32px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}