/* ============================================================
   MAIN.CSS — shared shell across every page
   Fonts, reset, nav, footer, and utility classes.
   Each page stylesheet (loaded after this one) sets --accent,
   --accent-2, --bg, --ink, --paper for its own identity.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Rajdhani:wght@500;600;700&family=Oswald:wght@400;500;600;700&family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --accent:#1A1A1A;
  --accent-2:#444;
  --bg:#ffffff;
  --ink:#111111;
  --paper:#ffffff;
  --muted:#6b6b6b;
  --radius:14px;
  --maxw:1180px;
  --nav-h:76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--accent); color:var(--bg); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- NAV ---------- */
.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  backdrop-filter:blur(10px);
  transition:background .3s ease, border-color .3s ease;
}
.site-nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.nav-brand{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-0.01em;
  display:flex;
  align-items:center;
  gap:8px;
}
.nav-brand .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
.nav-links{
  display:flex;
  gap:2px;
  align-items:center;
}
.nav-links a{
  font-size:.86rem;
  font-weight:500;
  padding:9px 14px;
  border-radius:100px;
  transition:background .25s ease, color .25s ease;
  white-space:nowrap;
}
.nav-links a:hover{ background:rgba(120,120,120,0.12); }
.nav-links a.active{
  background:var(--accent);
  color:var(--bg);
}
.nav-toggle{
  display:none;
  width:40px;height:40px;
  border:none;background:none;
  align-items:center;justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nav-toggle span{
  width:22px;height:2px;background:var(--ink);
  transition:transform .3s ease, opacity .3s ease;
}

@media (max-width: 880px){
  .nav-links{
    position:fixed;
    top:var(--nav-h); left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    background:var(--bg);
    padding:10px 20px 26px;
    gap:4px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    border-bottom:1px solid rgba(120,120,120,.15);
  }
  .nav-links.open{
    opacity:1; transform:translateY(0); pointer-events:auto;
  }
  .nav-links a{ text-align:center; padding:13px 14px; }
  .nav-toggle{ display:flex; }
}

/* ---------- REVEAL ON SCROLL ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.reveal.in{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* ---------- FOOTER ---------- */
.site-footer{
  padding:56px 0 40px;
  border-top:1px solid rgba(120,120,120,.18);
}
.site-footer .container{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center;
  justify-content:space-between;
}
.footer-links{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
}
.footer-links a{
  font-size:.85rem;
  font-weight:500;
  opacity:.75;
  transition:opacity .2s ease;
}
.footer-links a:hover{ opacity:1; }
.footer-meta{
  font-size:.78rem;
  opacity:.55;
  font-family:'JetBrains Mono',monospace;
}

/* ---------- SHARED PIECES ---------- */
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  opacity:.65;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 24px;
  border-radius:100px;
  font-size:.9rem;
  font-weight:600;
  border:1.5px solid var(--ink);
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.btn.primary{
  background:var(--ink);
  color:var(--bg);
}
.btn:hover{ transform:translateY(-2px); }

.page-fade-in{
  animation:pageFadeIn .7s cubic-bezier(.4,0,.2,1) both;
}
@keyframes pageFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ---------- ROUTE TRANSITION (smooth dip between pages, regardless of theme) ---------- */
/* A pure-CSS pseudo-element covers the viewport at opacity 1 from first paint
   (no JS insertion race), then fades away. On the way out, toggling
   .route-leaving on <body> restarts the reverse animation before navigating. */
body::after{
  content:'';
  position:fixed;
  inset:0;
  background:#0A0A0A;
  z-index:9999;
  pointer-events:none;
  opacity:0;
  animation:routeEnter .6s cubic-bezier(.4,0,.2,1) both;
}
@keyframes routeEnter{
  from{ opacity:1; }
  to{ opacity:0; }
}
body.route-leaving::after{
  animation:routeLeave .38s cubic-bezier(.4,0,.2,1) both;
}
@keyframes routeLeave{
  from{ opacity:0; }
  to{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  body::after{ animation:none !important; opacity:0 !important; }
}