/* ============================================================
   allmyfuckingwebsites.com — shared styles
   ============================================================ */

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

:root {
  --black:       #0a0a0a;
  --off-white:   #f0ece3;
  --red:         #e8001d;
  --blue:        #4a9eff;
  --gold:        #c8a951;
  --green:       #5cb85c;
  --dim:         #555;
  --dim2:        #888;
  --card-border: #1e1e1e;
  --max-w:       900px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--off-white);
  font-family: 'Space Mono', monospace;
  min-height: 100vh;
  overflow-x: hidden;
  cursor: crosshair;
}

/* grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  z-index: 9999;
}

/* ── TYPOGRAPHY ── */
a { color: inherit; }

/* ── SITE NAV ── */
.site-nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--card-border);
}

.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--off-white);
}

.nav-logo .red { color: var(--red); }

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  transition: color 0.15s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--off-white); }

/* ── SITE FOOTER ── */
.site-footer {
  border-top: 1px solid var(--card-border);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-footer .footer-left {
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
}

.site-footer .footer-right {
  display: flex;
  gap: 1.5rem;
}

.site-footer .footer-right a {
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  transition: color 0.15s;
}

.site-footer .footer-right a:hover { color: var(--off-white); }

/* ── DIVIDER ── */
.divider {
  border: none;
  border-top: 1px solid var(--card-border);
  margin: 2.5rem auto;
  max-width: var(--max-w);
}

/* ── DOTS ── */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.dot-personal  { background: var(--blue); }
.dot-political { background: var(--red); }
.dot-corporate { background: var(--gold); }
.dot-nonprofit { background: var(--green); }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim { animation: fadeUp 0.5s ease both; }
.anim-1 { animation-delay: 0.05s; }
.anim-2 { animation-delay: 0.12s; }
.anim-3 { animation-delay: 0.19s; }
.anim-4 { animation-delay: 0.26s; }
.anim-5 { animation-delay: 0.33s; }
.anim-6 { animation-delay: 0.40s; }

/* ── RESPONSIVE ── */
@media (max-width: 540px) {
  .site-nav { padding: 1.25rem; }
  .site-footer { padding: 1.5rem 1.25rem; }
}