/* ============================================================
   dark.css — shared dark theme for nickcoma.io (experimental)
   Linked AFTER each page's inline <style> so it overrides tokens.
   Grainy "underwater" black background with an overhead light,
   plus white outlines on black buttons for visibility.
   Remove the <link> to revert any page to light.
   ============================================================ */

:root{
  --bg:#000000;
  --bg-card:#141414;
  --bg-card-hover:#1e1e1e;
  --text:#FAFAF8;
  --text-2:#b6b4ac;
  --text-3:#7c7a72;
  --text-inv:#FAFAF8;
  --accent:#FAFAF8;
  --border:rgba(250,250,248,0.10);
  --border-h:rgba(250,250,248,0.20);
}

/* html carries the page black; body stays transparent so fixed layers with
   negative z-index (the particle sphere on the homepage) can show through */
html { background:#000; }
body { background:transparent; color:var(--text); position:relative; /* grain ::after spans the full document */ }

/* film grain overlay — absolute (scrolls with content), NOT fixed: on iOS,
   fixed layers ride the browser-chrome show/hide animation, and the grain
   texture sliding over the page read as shimmer/distortion */
body::after{
  content:""; position:absolute; inset:0; z-index:60; pointer-events:none;
  opacity:0.18; background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* liquid-glass nav: smoked glass — the backdrop is darkened (not brightened)
   and a translucent dark base sits under the sheen, so white text stays
   readable even when bright content (photos etc.) passes behind the pill */
nav .wrap {
  position:relative;
  background:linear-gradient(155deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.07));
  background-color:rgba(10,11,13,0.6);
  border:1px solid rgba(255,255,255,0.18);
  -webkit-backdrop-filter:blur(20px) saturate(150%) brightness(0.7);
  backdrop-filter:blur(20px) saturate(150%) brightness(0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 1px rgba(0,0,0,0.28);
}
nav .wrap::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(125% 150% at 12% -25%, rgba(255,255,255,0.38), rgba(255,255,255,0) 46%);
  opacity:.7;
}
nav .wrap > * { position:relative; z-index:1; }

/* inverted CTA block needs a hairline so it separates from the page */
.cta-inner { border:1px solid var(--border-h); }

/* white outline on black buttons so they stay visible on the dark bg */
.cta-btn,
.gate-btn,
.articles-more a,
.chr-btn-primary {
  border:1px solid rgba(250,250,248,0.55);
}

::selection { background:#FAFAF8; color:#000; }