/* ============================================
   NNZN Studios — Shared base stylesheet
   Imported by every page. Variables + reset + base
   components used across the site. Page-specific
   CSS remains inline in each <style> block.
   ============================================ */

/* ---------- Design tokens ---------- */
:root{
  --bg:           #111214;
  --bg-alt:       #17191c;
  --panel:        #1e2024;
  --text:         #f7f7f5;
  --text-2:       #d7d9dc;
  --muted:        #a9adb3;
  --line:         rgba(255,255,255,.14);
  --line-strong:  rgba(255,255,255,.28);
  --accent:       #b8792d;
  --accent-dim:   rgba(184,121,45,.12);
  --radius:       10px;
  --max:          1240px;
}
[data-theme="light"]{
  --bg:           #d0ceca;
  --bg-alt:       #c4c1bc;
  --panel:        #dcd9d4;
  --text:         #101113;
  --text-2:       #25282c;
  --muted:        #4d535b;
  --line:         rgba(16,17,19,.13);
  --line-strong:  rgba(16,17,19,.26);
  --accent:       #9a6728;
  --accent-dim:   rgba(154,103,40,.1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
}
a { color:inherit; text-decoration:none; }

/* ---------- Layout container ---------- */
.container {
  width:min(100% - 2rem, var(--max));
  margin-inline:auto;
}

/* ---------- Page hero (satellite pages) ---------- */
.page-hero {
  padding:4.5rem 0 3rem;
  border-bottom:1px solid var(--line);
}
.page-title {
  font-size:clamp(2.4rem, 7vw, 5rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  margin-bottom:1rem;
}
.page-lead {
  font-size:1rem;
  color:var(--muted);
  line-height:1.7;
  max-width:580px;
}

/* ---------- Eyebrow / kicker ---------- */
.kicker {
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-bottom:.85rem;
}
.kicker::before {
  content:'';
  width:7px;
  height:7px;
  background:var(--accent);
  transform:rotate(45deg);
}

/* ---------- Content blocks (legal / academy / etc.) ---------- */
.content { padding:4rem 0; }
.content h2 {
  font-size:clamp(1.4rem, 3vw, 2rem);
  font-weight:700;
  margin:2.5rem 0 .85rem;
  letter-spacing:-.02em;
}
.content h3 {
  font-size:1.1rem;
  font-weight:700;
  margin:1.75rem 0 .5rem;
}
.content p {
  font-size:.95rem;
  color:var(--text-2);
  line-height:1.75;
  margin-bottom:.9rem;
}
.content ul {
  padding-left:0;
  margin-bottom:1rem;
  list-style:none;
}
.content ul li {
  font-size:.95rem;
  color:var(--text-2);
  line-height:1.75;
  margin-bottom:.4rem;
  padding-left:1.25rem;
  position:relative;
}
.content ul li::before {
  content:'◆';
  position:absolute;
  left:0;
  font-size:.5rem;
  color:var(--accent);
  top:.4em;
}
.content a {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- Base card ---------- */
.card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem 1.75rem;
}

/* ---------- Outline button (used on satellite pages) ---------- */
.btn-outline {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text);
  transition:background-color .2s ease, color .2s ease;
}
.btn-outline:hover {
  background:var(--text);
  color:var(--bg);
}

/* ---------- Section footer (satellite pages) ---------- */
.section-footer {
  padding:3rem 0;
  border-top:1px solid var(--line);
  margin-top:4rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  font-size:.78rem;
  color:var(--muted);
}
.section-footer a { transition:color .2s ease; }
.section-footer a:hover { color:var(--text); }

/* ---------- Small screens ---------- */
@media (max-width:600px){
  .page-hero { padding:3rem 0 2rem; }
  .content { padding:2.5rem 0; }
}