/* ─── Custom Properties ─────────────────────────────────────────── */
:root {
  --white:      #f8f7f4;
  --ink:        #0a0908;
  --ink2:       #1e1c1a;
  --orange:     #e8420a;
  --orange-hi:  #ff5520;
  --muted:      rgba(10,9,8,0.42);
  --border:     rgba(10,9,8,0.10);
  --border-hi:  rgba(10,9,8,0.20);

  --font-disp: 'Barlow Condensed', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --ease:      cubic-bezier(0.16,1,0.3,1);

  /* Category accents */
  --c-nonprofit: #2dba6a;
  --c-film:      #c9922a;
  --c-gov:       #c9a850;
  --c-tech:      #00d4ff;
  --c-brand:     #e8d832;
  --c-gaming:    #7b2fff;
}

/* ─── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { background: var(--white); color: var(--ink); font-family: var(--font-mono); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ─── Nav ───────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  z-index: 100;
  background: rgba(248,247,244,0.98);
  border-bottom: 1px solid rgba(10,9,8,0.10);
  transition:
    backdrop-filter 0.25s var(--ease);
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.nav-logo {
  font-family: var(--font-disp);
  font-style: italic;
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.nav-logo:hover { color: var(--orange); }

/* Scrolled — add blur */
.site-nav.is-scrolled {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Dark-theme nav (dark-bg pages) */
.site-nav--dark {
  background: rgba(10,9,8,0.98);
  border-bottom-color: rgba(255,255,255,0.10);
}
.site-nav--dark .nav-logo  { color: var(--white); }
.site-nav--dark .nav-logo:hover { color: var(--orange-hi); }

.site-nav--dark.is-scrolled {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ─── Full Nav links (data-nav="full") ─────────────────────────── */
.nav-links {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.nav-link:hover                     { color: var(--ink); }
.nav-link--active,
.nav-link--active:hover             { color: var(--orange); }

.site-nav--dark .nav-link           { color: rgba(248,247,244,0.50); }
.site-nav--dark .nav-link:hover     { color: var(--white); }
.site-nav--dark .nav-link--active,
.site-nav--dark .nav-link--active:hover { color: var(--orange-hi); }

/* ─── Hamburger ─────────────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s ease;
}
.site-nav--dark .nav-hamburger span { background: var(--white); }

.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── Mobile drawer ─────────────────────────────────────────────── */
.nav-drawer {
  position: absolute;
  top: 52px;
  left: 0; right: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.nav-drawer.is-open {
  max-height: 560px;
  pointer-events: auto;
}
.nav-drawer-inner {
  background: rgba(248,247,244,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-hi);
  padding: 8px 24px 20px;
  display: flex;
  flex-direction: column;
}
.site-nav--dark .nav-drawer-inner {
  background: rgba(10,9,8,0.96);
  border-bottom-color: rgba(248,247,244,0.10);
}
.nav-drawer .nav-link {
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.site-nav--dark .nav-drawer .nav-link { border-bottom-color: rgba(248,247,244,0.08); }
.nav-drawer .nav-link:last-child      { border-bottom: none; }

/* Switch from links to hamburger at 900px */
@media (max-width: 900px) {
  .nav-links    { display: none; }
  .nav-hamburger { display: flex; }
}

/* ─── Footer ────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  border-top: 3px solid var(--orange);
  padding: 40px 24px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-logo {
  font-family: var(--font-disp);
  font-style: italic;
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  color: var(--white);
  flex-shrink: 0;
  transition: color 0.2s var(--ease);
}
.footer-logo:hover { color: var(--orange); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: center;
}

.footer-nav a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248,247,244,0.55);
  transition: color 0.2s var(--ease);
}
.footer-nav a:hover { color: var(--orange); }

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(248,247,244,0.35);
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── Scaffold / Placeholder ────────────────────────────────────── */
.page-placeholder {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 52px;
}

.page-placeholder h1 {
  font-family: var(--font-disp);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.page-placeholder p {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ─── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
  }

  .footer-copy { white-space: normal; text-align: center; }
}