/* site/audit-base.css — Purpose: tokens, reset, typography, atoms for the audit page */
:root{
  --bg:#121212; --bg2:#1a1a1a; --panel:#1f1f1f; --line:#2c2c2c;
  --txt:#e8e6e1; --dim:#8a8a86; --cyan:#00d4ff; --blue:#4a6cf7; --fail:#ff5c5c;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"IBM Plex Sans",-apple-system,sans-serif;
  --max:1080px;
  --sp:clamp(4rem,3rem + 6vw,9rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--txt);font:400 1.06rem/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* film grain — atmosphere, compositor-friendly */
body::after{
  content:"";position:fixed;inset:-50%;pointer-events:none;opacity:.05;z-index:9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{to{transform:translate(8%,4%)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
em{font-style:italic;color:var(--cyan)}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.dim{color:var(--dim)}
.tag{color:var(--cyan);margin-bottom:1.4rem}
.brand{font-family:var(--sans);font-weight:600;letter-spacing:.22em;font-size:.8rem}
.brand b{color:var(--cyan);font-weight:600}

.sec-title{
  font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem);margin-bottom:2.8rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.sec-title .mono{letter-spacing:.14em}

.ev{
  color:var(--dim);font-size:.68rem;border-left:2px solid var(--blue);
  padding-left:.7rem;margin-top:1.1rem;text-transform:none;letter-spacing:.04em;
  word-break:break-word;
}

.btn{
  display:inline-block;font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;
  color:#0a0a0a;background:var(--cyan);padding:1.05rem 1.7rem;text-decoration:none;
  border:1px solid var(--cyan);transition:background .18s,color .18s,transform .18s;
}
.btn:hover{background:transparent;color:var(--cyan);transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}