/* ============================================================
   Theme: phosphor-blueprint — utility archetype stylesheet.

   Extracted verbatim from press.html's inline <style> block — the
   shared chrome (base tokens, resets, nav, page-hero, footer, and the
   Phosphor Blueprint treatment layer), byte-diffed against privacy.html
   before extraction to confirm it's genuinely shared, not assumed
   (themes.html's copy has since diverged in two small ways — see
   docs/theme-archetypes.md, "why themes.html keeps tokens.css").

   This is press.html's CURRENT rendering, drift and all: the unconditional
   `h1 { text-shadow }` (rather than tokens.css's `header.hero h1`, which
   never matched `.page-hero` anyway), and no `nav.nav` z-index bump or
   `::after` scanline overlay the way tokens.css gives index.html's nav.
   That drift is not a bug to fix here — it's what Phosphor Blueprint's
   utility dress IS. A future theme designs its own utility.css and is
   free to make different choices.

   Consumed by press.html and privacy.html via a <link> render-hub.py
   keeps pointed at the ACTIVE theme (see the "theme-css" zone in
   scripts/render-hub.py's main()) — not a static, one-time reference.
   ============================================================ */
/* 626 Labs Design System — see ~/.claude/skills/626labs-design + /Design */
@import url('/fonts/fonts.css');

:root {
  --navy-deep: #0f1f31;
  --navy-mid:  #192e44;
  --navy-hi:   #223a54;
  --navy-line: #2a3a5c;
  --cyan:      #17d4fa;
  --cyan-pale: #5ce6ff;
  --cyan-dim:  #0fa8c9;
  --magenta:   #f22f89;
  --magenta-pale: #ff5aa3;
  --ink-0:     #ffffff;
  --ink-950:   #050c18;
  --text:      #e8f2ff;
  --text-sec:  #a8c2d9;
  --text-dim:  #9fafc0;
  --text-mute: #92a5bd;
  --ok:        #2bd99a;
  --warn:      #ffb454;

  --bg-0: var(--navy-deep);
  --bg-1: var(--navy-mid);
  --bg-2: var(--navy-hi);
  --fg-1: var(--text);
  --fg-2: var(--text-sec);
  --fg-3: var(--text-dim);
  --fg-muted: var(--text-mute);

  --border-1: rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,.14);
  --border-strong: rgba(255,255,255,.24);
  --border-accent: rgba(23,212,250,.45);

  --brand-gradient: linear-gradient(135deg, var(--cyan) 0%, var(--magenta) 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(23,212,250,.18) 0%, rgba(242,47,137,.18) 100%);
  --glow-cyan: 0 0 0 1px rgba(23,212,250,.35), 0 0 24px rgba(23,212,250,.35);
  --glow-duo: 0 0 24px rgba(23,212,250,.22), 0 0 48px rgba(242,47,137,.16);
  --inner-stroke: inset 0 0 0 1px rgba(255,255,255,.06);

  --shadow-2: 0 4px 16px rgba(0,0,0,.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,.55);

  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur-med: 220ms;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --r-pill: 999px;

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a.inline-link {
  color: var(--cyan);
  border-bottom: 1px solid rgba(23,212,250,.35);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a.inline-link:hover { color: var(--cyan-pale); border-bottom-color: var(--cyan-pale); }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; }

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--s-8);
}

/* ========== Nav (mirrors index.html) ========== */
nav.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(0,0,0, 0.72);
  border-bottom: 1px solid var(--border-1);
}
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--s-8);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.nav-brand .brand-626 { color: var(--cyan); }
.nav-brand .brand-labs { color: var(--fg-1); }
.nav-links {
  display: flex;
  gap: var(--s-6);
  font-size: 14px;
  color: var(--fg-2);
}
.nav-links a {
  position: relative;
  padding: 6px 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--fg-1); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-950);
  background: var(--cyan);
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: none;
  box-shadow: 0 0 0 1px rgba(23,212,250,.4), 0 0 18px rgba(23,212,250,.25);
  transition: all var(--dur-fast) var(--ease-out);
}
.nav-cta:hover {
  background: var(--cyan-pale);
  box-shadow: 0 0 0 1px rgba(92,230,255,.55), 0 0 28px rgba(23,212,250,.5);
}
@media (max-width: 720px) { .nav-links { display: none; } }
.ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ========== Page header ========== */
header.page-hero {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0 var(--s-12);
  overflow: hidden;
  border-bottom: 1px solid var(--border-1);
}
.page-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.page-hero-bg .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(23,212,250,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,47,137,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 75%);
}
.page-hero-bg .glow {
  position: absolute;
  top: -30%; right: -20%;
  width: 70%; height: 100%;
  background: radial-gradient(closest-side, rgba(23,212,250,.18), transparent 70%);
  filter: blur(60px);
}
.page-hero-inner { position: relative; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  margin-bottom: var(--s-5);
}
.eyebrow .pulse {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 10px var(--ok);
}
h1.page-title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 var(--s-4);
  color: var(--fg-1);
}
h1.page-title .accent {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0 0 var(--s-5);
}
.page-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}
.page-meta .sep { margin: 0 var(--s-3); color: var(--text-mute); }

/* ========== Footer (mirrors index.html) ========== */
footer {
  border-top: 1px solid var(--border-1);
  padding: var(--s-8) 0;
  background: var(--bg-0);
}
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--s-8);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  gap: var(--s-5);
  font-size: 13px;
  color: var(--fg-3);
  flex-wrap: wrap;
}
.footer-links a { color: var(--fg-3); transition: color var(--dur-fast) var(--ease-out); }
.footer-links a:hover { color: var(--cyan); }
.footer-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.footer-meta .brand-tagline { color: var(--cyan); }

/* ============================================================
   Phosphor Blueprint — treatment layer (adopted 2026-07-07)
   Append-only override + in-place navy-glass swaps; matches the
   homepage treatment (626labs.dev PR #73).
   ============================================================ */
:root {
  --pb-field: rgb(0,0,0);
  --pb-grid-fine: rgba(23,212,250,.05);
  --pb-grid-coarse: rgba(23,212,250,.11);
  --pb-scanline: rgba(0,0,0,.42);
  --pb-panel: rgba(0,0,0,.72);
  --pb-panel-border: rgba(23,212,250,.25);
  --pb-bloom-cyan: 0 0 14px rgba(23,212,250,.5);
  --pb-trail: 0 0 6px rgba(23,212,250,.9), 0 0 28px rgba(23,212,250,.5), 12px 0 24px rgba(23,212,250,.25);
}
.pb-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background: repeating-linear-gradient(0deg, var(--pb-scanline) 0 1px, transparent 1px 3px);
}

:root {
  --bg-0: var(--pb-field);
  --bg-1: rgba(0,0,0,.6);
  --bg-2: rgba(0,0,0,.72);
  --border-1: rgba(23,212,250,.14);
  --border-2: rgba(23,212,250,.25);
}

body {
  background:
    linear-gradient(90deg, var(--pb-grid-fine) 1px, transparent 1px),
    linear-gradient(0deg,  var(--pb-grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--pb-grid-coarse) 1px, transparent 1px),
    linear-gradient(0deg,  var(--pb-grid-coarse) 1px, transparent 1px),
    var(--pb-field);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
}
@media (max-width: 720px) {
  body {
    background:
      linear-gradient(90deg, var(--pb-grid-coarse) 1px, transparent 1px),
      linear-gradient(0deg,  var(--pb-grid-coarse) 1px, transparent 1px),
      var(--pb-field);
    background-size: 120px 120px, 120px 120px;
  }
}
h1 { text-shadow: var(--pb-bloom-cyan); }