/* ==========================================================================
   SPINA ZONKE — design tokens
   Palette drawn from Ndebele geometric house-painting (gold/ember/jade/sky)
   against a near-black township-night backdrop.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:        #16140F;   /* near-black background */
  --ink-soft:   #201C14;   /* panel background, one step up */
  --paper:      #F3ECDD;   /* warm off-white text */
  --paper-dim:  #C9C0AC;   /* secondary text on dark */
  --gold:       #E8A93A;   /* signage gold — primary accent */
  --ember:      #C9432B;   /* ndebele red */
  --jade:       #1F6E4A;   /* sa-flag green */
  --sky:        #2E7A93;   /* ndebele blue */
  --line:       #3A3527;   /* hairline on dark */

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body:    'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 780px;
  --radius: 2px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: var(--gold); text-decoration-color: rgba(232,169,58,.4); text-underline-offset: 3px; }
a:hover{ text-decoration-color: var(--gold); }

.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- header / nav ---------- */
header.site{
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 20;
  background: rgba(22,20,15,.92);
  backdrop-filter: blur(6px);
}
.nav{
  position: relative;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px;
  max-width: var(--wrap); margin:0 auto;
}
.brand{
  font-family: var(--display);
  letter-spacing: .04em;
  font-size: 1.25rem;
  color: var(--paper);
  text-decoration:none;
}
.brand span{ color: var(--gold); }
.nav-links{ display:flex; gap: 22px; list-style:none; margin:0; padding:0; }
.nav-links a{
  color: var(--paper-dim); text-decoration:none;
  font-size: .88rem; letter-spacing:.03em; text-transform:uppercase;
}
.nav-links a:hover{ color: var(--gold); }

/* ---------- mobile burger toggle ---------- */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; padding:0;
  background:none; border:1px solid var(--line);
  cursor:pointer;
}
.nav-toggle span{
  display:block; width:18px; height:2px; margin:0 auto;
  background: var(--paper); transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{ padding: 76px 0 0; }
.hero-grid{ display:flex; align-items:center; justify-content:space-between; gap:36px; }
.hero-copy{ flex: 1 1 480px; min-width:0; }
.hero-art{
  flex: 0 0 auto;
  width:180px; height:180px;
  opacity:.95;
}
@media (max-width: 860px){
  .hero-art{ display:none; }
}
.eyebrow{
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--gold);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:"—"; color: var(--ember); }
h1.wordmark{
  font-family: var(--display);
  font-weight:400;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  line-height: .95;
  letter-spacing: .01em;
  margin: 14px 0 6px;
  color: var(--paper);
}
h1.wordmark em{ font-style:normal; color: var(--gold); }
.dek{
  max-width: 62ch;
  font-size: 1.15rem;
  color: var(--paper-dim);
  margin: 0 0 30px;
}
.meta-row{
  display:flex; flex-wrap:wrap; gap: 8px 18px;
  font-family: var(--mono); font-size:.78rem; color: var(--paper-dim);
  padding-bottom: 26px;
}
.meta-row b{ color: var(--paper); }

/* ---------- article typography ---------- */
article{ padding: 44px 0 10px; }
article h2{
  font-family: var(--display);
  font-weight:400;
  font-size: clamp(1.6rem, 4vw, 2.15rem);
  letter-spacing:.01em;
  margin: 52px 0 14px;
  color: var(--paper);
}
article h2 .num{ color: var(--jade); margin-right:10px; }
article h3{
  font-family: var(--body);
  font-weight:700;
  font-size: 1.15rem;
  margin: 28px 0 8px;
  color: var(--gold);
}
article p{ margin: 0 0 16px; }
article ul, article ol{ margin: 0 0 18px; padding-left: 1.2em; }
article li{ margin-bottom: 6px; }
.lede{ font-size:1.05rem; }
strong{ color: var(--paper); }

blockquote{
  margin: 26px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--ember);
  font-style: italic; color: var(--paper-dim);
}

/* ---------- stat scoreboard ---------- */
.stat-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 22px 0 30px;
}
.stat{
  background: var(--ink-soft);
  padding: 18px 16px;
}
.stat .n{
  font-family: var(--mono); font-weight:600;
  font-size: 1.5rem; color: var(--gold);
  display:block;
}
.stat .l{
  font-size: .76rem; color: var(--paper-dim);
  text-transform:uppercase; letter-spacing:.04em;
}

/* ---------- comparison table ---------- */
.table-wrap{ overflow-x:auto; margin: 20px 0 30px; border:1px solid var(--line); }
table{ width:100%; border-collapse: collapse; font-size:.92rem; min-width:560px; }
th, td{ padding: 11px 14px; text-align:left; border-bottom:1px solid var(--line); }
thead th{
  font-family: var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--gold); background: var(--ink-soft);
}
tbody tr:hover{ background: rgba(232,169,58,.05); }
tbody td:first-child{ font-weight:600; color: var(--paper); }
.badge{
  display:inline-block; font-family: var(--mono); font-size:.7rem;
  padding: 2px 7px; border-radius: var(--radius);
  background: rgba(31,110,74,.25); color:#7FCBA2; border:1px solid rgba(31,110,74,.5);
}

/* ---------- card grid (game links etc) ---------- */
.card-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 16px; margin: 24px 0 34px;
}
.card{
  background: var(--ink-soft); border:1px solid var(--line);
  padding: 22px; text-decoration:none; color: var(--paper);
  transition: border-color .15s ease, transform .15s ease;
  display:block;
}
.card:hover{ border-color: var(--gold); transform: translateY(-2px); }
.card .tag{
  font-family: var(--mono); font-size:.7rem; color: var(--gold);
  text-transform:uppercase; letter-spacing:.05em;
}
.card h3{ margin: 8px 0 6px; color: var(--paper); font-size:1.2rem; }
.card p{ margin:0; color: var(--paper-dim); font-size:.92rem; }

/* ---------- callout / disclaimer boxes ---------- */
.callout{
  border: 1px solid var(--line); border-left: 3px solid var(--sky);
  background: var(--ink-soft);
  padding: 16px 20px; margin: 24px 0;
  font-size: .95rem; color: var(--paper-dim);
}
.callout b{ color: var(--paper); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); padding: 18px 0; }
.faq-item h3{ margin:0 0 8px; color: var(--paper); font-size:1.05rem; }
.faq-item p{ margin:0; color: var(--paper-dim); }

/* ---------- footer ---------- */
footer.site{
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding: 40px 0 50px;
  color: var(--paper-dim);
  font-size: .85rem;
}
footer.site .foot-grid{
  display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px;
}
footer.site h4{
  font-family: var(--mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color: var(--gold); margin:0 0 12px;
}
footer.site ul{ list-style:none; margin:0; padding:0; }
footer.site li{ margin-bottom:8px; }
footer.site a{ color: var(--paper-dim); }
footer.site a:hover{ color: var(--gold); }
.legal-strip{
  margin-top: 30px; padding-top: 20px; border-top:1px solid var(--line);
  font-size:.78rem; line-height:1.7;
}

@media (max-width: 768px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background: var(--ink-soft);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden;
    transition: max-height .25s ease;
  }
  .nav-links.is-open{ max-height: 320px; }
  .nav-links li{ border-top:1px solid var(--line); }
  .nav-links a{ display:block; padding:14px 24px; font-size:.92rem; }
}

@media (max-width: 640px){
  footer.site .foot-grid{ grid-template-columns: 1fr; }
}