/* ─────────────────────────────────────────────────────────────────────────
   MEAN GIRL MACHINE — site-wide shared styles
   Built by services/builder and written to the site root as /site.css; every
   builder-generated page links it with <link rel="stylesheet" href="/site.css">.
   This is the ONE place for the design tokens, the page background, the page
   container width, the nav (header), and the footer. Page-specific styles stay
   in each page's own <style> block.

   ► To change the site width everywhere, edit --page-max below (one line).
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* --violet / --violet-2 keep their NAMES (used site-wide) but now carry the
     brand's blood-red accent, so every var(--violet) reference flips at once. */
  --bg: #08070a; --violet: #e0102a; --violet-2: #8c0a1c; --amber: #f0a23b;
  --chrome-hi: #ffffff; --chrome-mid: #aeb2bf; --chrome-lo: #5a5d68;
  --ink: #e9eaee; --muted: #8a8b95; --edge: rgba(255,255,255,.10); --card: rgba(255,255,255,.03);
  /* one canonical content width for the whole site (override per page only if ever needed) */
  --page-max: 1120px; --page-pad: clamp(18px,4vw,44px); --page-bottom: 90px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100%;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(224,16,42,.16), transparent 55%),
    radial-gradient(80% 60% at 95% 105%, rgba(240,162,59,.08), transparent 60%),
    var(--bg);
  color: var(--ink); font-family: "Space Mono", ui-monospace, monospace;
  position: relative; -webkit-font-smoothing: antialiased; line-height: 1.6;
}

/* animated chrome sheen + film grain (the two fixed backdrop layers) */
.sheen { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .4;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.05) 47%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 53%, transparent 70%);
  background-size: 300% 300%; animation: sweep 9s ease-in-out infinite; }
@keyframes sweep { 0%,100%{ background-position: 120% 0 } 50%{ background-position: -20% 0 } }
.grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── the shared page container — single width across the whole site ── */
.page { position: relative; z-index: 1; max-width: var(--page-max); margin: 0 auto;
  padding: 0 var(--page-pad) var(--page-bottom); }

@keyframes rotate { to { transform: rotate(360deg) } }

/* ── universal header (from partials/nav.html, injected at @@NAV@@) ──
   One source for every builder page; the home page mirrors this markup/look. */
.nav { display: flex; justify-content: space-between; align-items: center; gap: 12px 22px; flex-wrap: wrap;
  padding: clamp(14px,3vw,22px) 0; margin-bottom: clamp(14px,3vw,28px);
  border-bottom: 1px solid var(--edge); }
.nav .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none;
  font-family: "Big Shoulders Display", sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(15px,2.2vw,19px); letter-spacing: .03em; line-height: 1; }
.nav .brand .emblem { width: 26px; height: 26px; opacity: .9;
  filter: drop-shadow(0 0 7px rgba(255,255,255,.22)); animation: rotate 38s linear infinite; }
.nav-links { display: flex; gap: clamp(16px,4vw,30px); align-items: center;
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase; }
.nav-links a { position: relative; color: var(--muted); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 0;
  background: var(--violet); transition: width .25s; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--violet); }
@media (max-width: 460px) { .nav-links { font-size: 11px; } .nav .brand { font-size: 15px; } }

/* ── universal footer (from partials/footer.html, injected at @@FOOTER@@) ──
   flex (not grid) so it collapses cleanly in both the wide content pages and the
   narrow 520px links page: brand left · links center · meta right, wrapping when tight. */
footer { border-top: 1px solid var(--edge); margin-top: clamp(56px,8vw,100px); padding-top: clamp(26px,4vw,38px);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px 36px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
footer .foot-brand { display: flex; align-items: center; gap: 13px; }
footer .foot-brand .emblem { width: 38px; height: 38px; opacity: .85; filter: drop-shadow(0 0 9px rgba(255,255,255,.14)); }
footer .foot-brand .nm { font-family: "Big Shoulders Display", sans-serif; font-weight: 900; color: var(--ink);
  text-transform: uppercase; font-size: 20px; line-height: .92; letter-spacing: .02em; }
footer .foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; flex: 1 1 auto; }
footer .foot-links a { color: var(--muted); text-decoration: none; transition: color .2s; }
footer .foot-links a:hover { color: var(--violet); }
footer .foot-meta { color: var(--chrome-lo); white-space: nowrap; }
@media (max-width: 600px) { footer { justify-content: center; text-align: center; }
  footer .foot-brand { justify-content: center; } }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }