/* ============================================================
   NOBODY — GLOBAL SHELL
   The shared, dark hand-made zine base. Every page loads this.
   Page-specific styling lives in each page/component's scoped <style>.
   The one rule: the WORK is the only thing in full colour/motion.
   Tokens follow Nobody DESIGN.md (the spine).
   ============================================================ */

:root{
  --bg:#090B0F;                         /* ground — site */
  --ink:#F6F4F0;                        /* off-white, never pure white */
  --ink-dim:rgba(246,244,240,.6);
  --ink-faint:rgba(246,244,240,.16);
  --red:#FF4937;                        /* hand-drawn marker only, scarce */
  --gold:#F3B029; --gold-hi:#FFD96E; --amber:#E2872A;
  --paper:#E9E3D4;
  --lane:clamp(84px,11vw,172px);        /* left spine reserve */
  --brush:'Permanent Marker',cursive;
  --cond:'Anton',sans-serif;
  --type:'Special Elite','Courier New',monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ background:var(--bg); color:var(--ink); font-family:var(--type); -webkit-font-smoothing:antialiased; }
::selection{ background:var(--red); color:#090B0F; }
a{ color:inherit; }
img{ display:block; max-width:100%; }

/* skip link — keyboard nav */
.np-skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--red); color:#090B0F; padding:10px 16px; font-family:var(--cond); letter-spacing:.1em; text-transform:uppercase; }
.np-skip-link:focus{ left:8px; top:8px; }

/* ── Atmosphere ─────────────────────────────────────────────── */
.ground{ position:fixed; inset:0; z-index:-2; background:radial-gradient(120% 90% at 50% 8%, #15161c 0%, #0c0d12 48%, #07080b 100%), var(--bg); }
.grain{ position:fixed; inset:-60px; z-index:60; pointer-events:none; opacity:.34; mix-blend-mode:overlay; animation:grain .62s steps(3) infinite; }
.vig{ position:fixed; inset:0; z-index:59; pointer-events:none; background:radial-gradient(130% 120% at 50% 45%, transparent 56%, rgba(0,0,0,.4) 88%, rgba(0,0,0,.66) 100%); }

@keyframes grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-18px,10px)} 66%{transform:translate(12px,-16px)} 100%{transform:translate(0,0)} }
@keyframes blink{ 0%,55%{opacity:1} 56%,100%{opacity:.15} }
@keyframes drop{ 0%,100%{transform:scaleY(.4);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
main{ position:relative; z-index:1; }

/* shared kicker label — used across pages */
.kicker{ display:inline-flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-dim); }
.kicker i{ width:26px; height:1.5px; background:var(--red); display:inline-block; }

/* ── Shared nav ─────────────────────────────────────────────── */
.nav{ position:fixed; top:0; left:0; right:0; z-index:70; display:flex; align-items:center; justify-content:space-between; padding:26px clamp(20px,4.4vw,58px) 0; pointer-events:none; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.nav::before{ content:''; position:absolute; inset:0 0 auto 0; height:128px; z-index:-1; background:linear-gradient(180deg, rgba(8,9,12,.78), transparent); }
.brand{ text-decoration:none; display:flex; flex-direction:row; align-items:center; gap:13px; line-height:1; pointer-events:auto; }
.brandChar{ height:58px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
.brandWords{ display:flex; flex-direction:column; }
.bw-name{ font-family:var(--brush); font-size:30px; line-height:.78; color:var(--ink); text-shadow:0 2px 0 rgba(0,0,0,.5); }
.bw-sub{ font-family:var(--cond); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--red); margin-top:7px; }
.navlinks{ position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:clamp(18px,2.6vw,40px); pointer-events:auto; }
.navlinks a{ position:relative; font-family:var(--cond); font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); text-decoration:none; padding:4px 0; transition:color .2s; }
.navlinks a:hover{ color:var(--ink); }
.navlinks a.datsun{ color:var(--gold); opacity:.78; }
.navlinks a.datsun:hover{ color:var(--gold-hi); opacity:1; }
.navlinks a.on{ color:var(--ink); }
.navlinks a.on::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--red); box-shadow:0 0 8px var(--red); }
.navlinks a.datsun.on::after{ background:var(--gold); box-shadow:0 0 8px var(--gold); }
.navchrome{ display:flex; align-items:center; gap:14px; text-align:right; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; pointer-events:auto; }
.navchrome .rec{ display:inline-flex; align-items:center; gap:7px; }
.navchrome .rec i{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); animation:blink 1.4s steps(1) infinite; }

/* Mr. Nobody — nav-bar mascot */
#navNobody{ position:fixed; top:12px; right:clamp(20px,4.4vw,58px); z-index:71; width:46px; pointer-events:none; will-change:transform; }
#navNobody svg{ width:46px; height:auto; display:block; overflow:visible; }

/* ── Left spine rail ────────────────────────────────────────── */
.spine{ position:fixed; left:0; top:0; height:100vh; width:var(--lane); z-index:40; pointer-events:none; }
.spine .rail{ position:absolute; left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); background:linear-gradient(to bottom, transparent, var(--ink-faint) 11%, var(--ink-faint) 89%, transparent); }
.spine .prog{ position:absolute; left:calc(50% - 1px); top:0; width:2px; background:var(--red); box-shadow:0 0 8px var(--red); height:0%; }
.spine .rechead{ position:absolute; top:124px; left:0; width:100%; display:flex; flex-direction:column; align-items:center; gap:9px; }
.spine .recdot{ display:inline-flex; align-items:center; gap:6px; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); }
.spine .recdot i{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); animation:blink 1.4s steps(1) infinite; }
.spine .vlabel{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(180deg); writing-mode:vertical-rl; font-size:8.5px; letter-spacing:.4em; text-transform:uppercase; color:var(--ink-faint); }
.spine .foot{ position:absolute; bottom:18px; left:0; width:100%; text-align:center; font-size:8.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint); }

/* ── Omnipresent contact pill ───────────────────────────────── */
.ambientContact{ position:fixed; right:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,30px); z-index:72; display:inline-flex; align-items:center; gap:10px; font-family:var(--cond); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); text-decoration:none; padding:11px 16px; background:rgba(10,11,15,.55); backdrop-filter:blur(6px); border:1px solid var(--ink-faint); transition:color .2s,border-color .2s; }
.ambientContact:hover{ color:var(--ink); border-color:rgba(246,244,240,.34); }
.ambientContact .d{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 7px var(--red); animation:blink 1.6s steps(1) infinite; }
.ambientContact .ar{ color:var(--red); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:900px){
  .navlinks{ position:static; transform:none; gap:clamp(14px,3vw,28px); }
  .navchrome{ display:none; }
  .nav{ flex-wrap:wrap; gap:6px 0; align-items:flex-start; }
  .brandChar{ height:38px; }
  #navNobody{ width:32px; right:12px; top:10px; }
  #navNobody svg{ width:32px; }
  .spine{ display:none; }
}
@media (max-width:600px){
  .nav{ padding-top:16px; }
  .brandChar{ height:32px; }
  .bw-name{ font-size:23px; }
  /* links drop to their own centered row so they never collide with the brand/mascot */
  .navlinks{ order:3; width:100%; justify-content:center; gap:26px; margin-top:10px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .grain,.navchrome .rec i,.recdot i,.ambientContact .d{ animation:none!important; }
}