/* Nkwata · design tokens, reset, layout primitives */
/* ═══════════════════════════════════════════════════════════
   NKWATA — "THE GRASSFIELDS HOUSE"
   Premium real-estate art direction: walnut, warm limewash
   plaster, brass, ember, moss. Interiors-led. Media is the hero.
   Never: indigo/violet, Inter, bento grids, uniform fades.
   ═══════════════════════════════════════════════════════════ */
:root{
  --espresso:#191310; --walnut:#241C17; --walnut-2:#31261F; --walnut-3:#40332A;
  --plaster:#F6F1E8; --plaster-2:#EFE8DB; --linen:#E7DECD; --sand:#DBCFB8;
  --line:#E0D6C3; --line-2:#CDBFA5; --line-dark:#3E3128;
  --ember:#B8442A;  --ember-2:#9C3620;  --ember-lift:#DD6A45;  --ember-wash:#F6E5DE;
  --moss:#4F6B4A;   --moss-wash:#E6EDE2;
  --brass:#B08D57;  --brass-2:#CDA96C;  --brass-soft:rgba(176,141,87,.30);
  --honey:#D9A441;
  --ink:#1E1712; --ink-2:#4A3E33; --muted:#6E6152;
  --on-dark:#F4EFE5; --on-dark-2:#AFA491;
  --r-s:8px; --r-m:14px; --r-l:22px; --r-xl:34px;
  --sh-1:0 1px 2px rgba(25,19,16,.05),0 8px 22px -12px rgba(25,19,16,.22);
  --sh-2:0 2px 6px rgba(25,19,16,.06),0 26px 52px -20px rgba(25,19,16,.32);
  --sh-3:0 6px 18px rgba(25,19,16,.08),0 54px 100px -34px rgba(25,19,16,.5);
  --sh-em:0 18px 42px -16px rgba(184,68,42,.58);
  --display:"Fraunces",Georgia,serif;
  --body:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.68,.28,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* overflow-x must be CLIP, never HIDDEN.
   `hidden` quietly turns <body> into a scroll container — the computed
   overflow-y becomes `auto` — and every scroll-driven animation on the
   page then measures itself against a box that never scrolls, because
   the real scrolling is happening on <html>. The camera sections in
   10-camera.css sat frozen on their first frame until this was changed.
   `clip` stops the sideways overflow exactly the same way and creates
   no scroll container. */
html{overflow-x:clip}
body{margin:0;font-family:var(--body);background:var(--plaster);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0;
  font-variation-settings:"SOFT" 45,"WONK" 1}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--ember-lift);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px;background:var(--ember);color:#fff;padding:12px 18px;z-index:300;font-weight:700}
.skip:focus{left:0;top:0}
.grain{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.chapter{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.chapter .num{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--ember)}
.chapter .lab{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600}
.chapter .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--brass-soft),transparent)}
.dark-sec .chapter .num{color:var(--brass-2)}
.dark-sec .chapter .lab{color:var(--on-dark-2)}