/* ══════════════════════════════════════════════
   ZANJI — PUBLIC / BASE
   Design tokens, reset, typography, utilities
   ══════════════════════════════════════════════ */

:root {
  /* Palette */
  --z-black:#0D0B08;
  --z-ink:#1C1912;
  --z-warm:#2A2418;
  --z-amber:#C8922A;
  --z-sun:#F6B44A;
  --z-sun-ink:#241A08;
  --z-cream:#F2EDE4;
  --z-terra:#B85C38;

  /* Type */
  --z-display:'Anton','Arial Narrow',Impact,sans-serif;
  --z-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Floating nav metrics — page sub-navs offset from these */
  --z-nav-h:66px;
  --z-nav-top:18px;
  --z-nav-gap:14px;
  --z-subnav-top:calc(var(--z-nav-h) + var(--z-nav-top) + var(--z-nav-gap));

  --z-shell:1280px;
}

*,*::before,*::after { box-sizing:border-box; }

body {
  margin:0;
  background:var(--z-black);
  color:var(--z-cream);
  font-family:var(--z-body);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ── Display type ───────────────────────────── */
h1,h2,h3,h4,h5 {
  font-family:var(--z-display);
  font-weight:400;
  line-height:.94;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0;
}
h1 em,h2 em,h3 em,h4 em,.font-display em { font-style:normal; color:var(--z-amber); display:block; }
.font-display { font-family:var(--z-display); font-weight:400; text-transform:uppercase; letter-spacing:.005em; }
.font-mono,.font-sans { font-family:var(--z-body); }

/* Anton ships a single weight — neutralise synthetic bolding */
.font-display.font-bold,.font-display.font-black,
h1.font-bold,h1.font-black,h2.font-bold,h2.font-black,h3.font-bold,h3.font-black { font-weight:400; }

::selection { background:var(--z-amber); color:var(--z-black); }

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* Boxicons */
.bx, .bxs, .bxl { display:inline-block; vertical-align:middle; line-height:1; }

/* ── Film grain ─────────────────────────────── */
body::after {
  content:'';
  position:fixed; inset:0; z-index:9999;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:.45;
}

/* ── Pattern fills ──────────────────────────── */
.kente-bg {
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23C8922A' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.pattern-strip {
  height:48px;
  background-image:repeating-linear-gradient(90deg,var(--z-amber) 0,var(--z-amber) 2px,transparent 2px,transparent 30px),
                   repeating-linear-gradient(90deg,transparent 0,transparent 14px,rgba(200,146,42,.3) 14px,rgba(200,146,42,.3) 16px,transparent 16px,transparent 30px);
  opacity:.35;
}

/* ── Eyebrow labels, rules ──────────────────── */
.z-label {
  font-family:var(--z-body);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--z-amber);
}
.z-rule { border:none; border-top:1px solid rgba(200,146,42,.2); }

/* ── Badges ─────────────────────────────────── */
.z-badge {
  display:inline-block;
  font-family:var(--z-body);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:4px 11px;
  border-radius:999px;
}
.z-badge-amber { background:var(--z-amber); color:var(--z-black); }
.z-badge-dim   { background:rgba(242,237,228,.15); color:var(--z-cream); }
.z-badge-red   { background:rgba(184,92,56,.3); color:#f87171; }

/* ── Motion helpers ─────────────────────────── */
.z-lift { transition:transform .25s ease, box-shadow .25s ease; }
.z-lift:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.5); }

@keyframes zFadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes zSlideUp { from { transform:translateY(18px); opacity:0 } to { transform:translateY(0); opacity:1 } }

/* ── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--z-black); }
::-webkit-scrollbar-thumb { background:var(--z-amber); }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}