/* ============================================================
   Diego Claw — shared foundation
   ------------------------------------------------------------
   The canonical tokens, chrome, type system, focus system and
   motion floor for every page on diegoclaw.com.

   DESIGN.md is the spec this implements. Page-specific layout
   stays in the page; anything that decides what the SITE looks
   like belongs here, so a new page inherits it by linking this
   file and nothing drifts.

   North star: "The Pirate Signal".
   Rules this file enforces:
     - zero border-radius (corners are clip-path notches)
     - every box-shadow starts 0 0 (things are lit, not lifted)
     - two type voices: Space Mono is the machine, Space Grotesk
       is the human, and Grotesk is headings-only
     - no neutral grey; every neutral is tinted to the brand hue
     - #8a8194 is the dimmest text permitted on Dead Air
   ============================================================ */

:root{
  /* Theme: Magenta + Cyan (default). Swap these four to retheme. */
  --neon1: oklch(0.68 0.27 340);
  --neon2: #22d3ee;
  --rgb1: 255,47,208;
  --rgb2: 34,211,238;
  /* Two voices. Space Mono is the machine: eyebrows, HUD, terminal, timestamps,
     metadata, buttons, nav — and all body prose. Space Grotesk is the human
     voice, used only for headlines and card titles, where two weights of mono
     left nothing to build hierarchy with. Grotesk is drawn from Space Mono, so
     the skeleton and the sheared terminals carry straight over. */
  --mono: 'Space Mono','SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
  --display: 'Space Grotesk',system-ui,-apple-system,sans-serif;
  /* Surfaces, edges and ink. Named to match DESIGN.md; only values the system
     actually reuses are tokenised — genuine one-offs stay literal. */
  --dead-air: #07070c;
  --signal-floor: #0c0a12;
  --signal-floor-raised: #0e0b14;
  --transmission-black: #06060b;
  --carrier-edge: #2a2030;
  --carrier-edge-soft: #221a2c;
  --ink: #dcd7e6;
  --ink-lede: #c2bad0;
  --ink-muted: #b9b0c6;
  --ink-quiet: #9a90a8;
  --ink-dim: #8a8194;
  --ink-terminal: #cfc7da;
  --on-signal: #0a0410;
  /* Placeholder texture. One unit: collapsing the two stripes into the surface
     tokens would leave only 23% of the contrast and the hatch would vanish. */
  --hatch: repeating-linear-gradient(45deg,#14101c,#14101c 6px,#0d0a13 6px,#0d0a13 12px);
  --bloom: 0.55; /* min(1, glow*0.55), glow default 1 */
  --scan: 0.5;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--dead-air);-webkit-font-smoothing:antialiased}
body{font-family:var(--mono);color:var(--ink)}
::selection{background:rgba(255,47,208,.45);color:#fff}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--neon2);outline-offset:3px}
.btn-primary:focus-visible,
.video-modal-close:focus-visible,
[style*="clip-path"]:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 3px var(--on-signal), 0 0 16px rgba(var(--rgb1),.55)}
.btn-ghost:focus-visible{outline:2px solid var(--neon2);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  background:var(--neon1);color:var(--on-signal);padding:12px 18px;font-weight:700;
  transition:top .14s ease}
.skip:focus{top:12px}
input::placeholder,textarea::placeholder{color:var(--ink-dim)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
@keyframes flick{0%,100%{opacity:1}50%{opacity:.86}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.shell{position:relative;min-height:100vh;
  background:
    radial-gradient(1100px 600px at 78% -8%,rgba(var(--rgb1),.16),transparent 60%),
    radial-gradient(900px 520px at 12% 4%,rgba(var(--rgb2),.13),transparent 60%),
    var(--dead-air);}
.fx-scan{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:var(--scan);
  background:repeating-linear-gradient(rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,.26) 3px,rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;animation:flick 5s steps(2) infinite}
.fx-vignette{position:fixed;inset:0;pointer-events:none;z-index:59;box-shadow:inset 0 0 200px rgba(0,0,0,.72)}
.fx-bloom{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:var(--bloom);
  background:radial-gradient(680px 420px at 80% 12%,rgba(var(--rgb1),.5),transparent 62%),
            radial-gradient(620px 400px at 14% 30%,rgba(var(--rgb2),.42),transparent 62%);
  mix-blend-mode:screen}
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:13px 26px;
  background:linear-gradient(180deg,rgba(12,9,18,.96),rgba(8,7,12,.85));backdrop-filter:blur(8px);
  border-bottom:1px solid var(--carrier-edge-soft);box-shadow:0 1px 0 rgba(var(--rgb1),.25)}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;flex:none}
.logo .lob{font-size:20px;filter:drop-shadow(0 0 7px rgba(var(--rgb1),.9))}
.logo .wm{font-weight:700;letter-spacing:.14em;font-size:15px;color:#fff;text-shadow:0 0 12px rgba(var(--rgb1),.6)}
.logo .wm i{font-style:normal;color:var(--neon1)}
.navitems{display:flex;gap:3px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.navbtn{cursor:pointer;font-size:12px;letter-spacing:.08em;padding:8px 13px;color:var(--ink-muted);background:transparent;
  border:1px solid var(--carrier-edge);transition:all .14s ease;user-select:none;white-space:nowrap;font-family:inherit}
.navbtn.active{color:var(--on-signal);background:var(--neon1);border-color:var(--neon1);box-shadow:0 0 12px rgba(var(--rgb1),.5)}
.navdrop{position:relative;display:inline-block}
.navmenu{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;padding:6px;display:none;z-index:70;
  background:linear-gradient(180deg,rgba(14,11,20,.98),rgba(10,8,16,.98));border:1px solid var(--carrier-edge);
  box-shadow:0 12px 28px rgba(0,0,0,.55),0 0 16px rgba(var(--rgb1),.2)}
.navdrop:hover .navmenu,.navdrop:focus-within .navmenu{display:block}
.navmenu a{display:block;padding:8px 12px;color:var(--ink-muted);font-size:12px;letter-spacing:.06em;white-space:nowrap;border:1px solid transparent;transition:all .14s ease}
.navmenu a:hover{color:#fff;border-color:var(--carrier-edge);background:rgba(var(--rgb1),.08)}
.col{max-width:1140px;margin:0 auto;padding:0 26px 90px;position:relative;z-index:10}
.view{display:none}
.view.show{display:block}
.card{display:flex;flex-direction:column;border:1px solid var(--carrier-edge);border-top:2px solid var(--ac,var(--neon1));
  background:var(--signal-floor);overflow:hidden;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer}
.card:hover{transform:translateY(-3px);box-shadow:0 0 22px rgba(var(--acrgb,var(--rgb1)),.3)}
.post{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--carrier-edge);border-top:2px solid var(--ac,var(--neon1));
  background:var(--signal-floor);padding:18px 20px;margin-bottom:14px;text-decoration:none;transition:background .15s ease}
.post:hover{background:#100c18}
.btn-primary{cursor:pointer;background:var(--neon1);color:var(--on-signal);font-weight:700;font-size:13px;letter-spacing:.08em;
  padding:13px 22px;box-shadow:0 0 16px rgba(var(--rgb1),.55);border:none;font-family:inherit;
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px))}
.btn-ghost{cursor:pointer;border:1px solid var(--neon2);color:var(--neon2);font-weight:700;font-size:13px;letter-spacing:.08em;
  padding:13px 22px;box-shadow:0 0 11px rgba(var(--rgb2),.3);background:transparent;font-family:inherit}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.eyebrow{font-size:12px;letter-spacing:.2em;margin-bottom:8px}
h1.big{margin:0 0 10px;font-size:42px;color:#fff;font-weight:700}
/* Display face on headings site-wide. Landing adds its own classes on top. */
h1,h2,h3,h1.big{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.card:active,.post:active{transform:translateY(-1px)}
.btn-primary:active,.btn-ghost:active{transform:translateY(1px)}

/* ---------- responsive + motion floor (site-wide) ---------- */
@media(max-width:700px){
  /* The nav right-aligns and wraps; on a phone that stacks six buttons into
     five ragged rows. Give it its own full-width row, left-aligned and tight. */
  .nav{flex-wrap:wrap;gap:10px;padding:11px 16px}
  .navitems{margin-left:0;width:100%;justify-content:flex-start;gap:6px}
  .navbtn{padding:7px 10px;font-size:11px;min-height:44px;display:inline-flex;align-items:center}
  .navmenu{left:0;right:auto}
  .col{padding:0 16px 70px}
  /* Body copy never drops below 16px on a phone — under that iOS zooms on focus. */
  .card p,.post div,p.lede,.page-lede{font-size:16px!important;line-height:1.7}
  .btn-primary,.btn-ghost{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:600px){h1.big{font-size:32px}}

@media (prefers-reduced-motion: reduce){
  .fx-scan,.floaty,.dot,.wn-cursor{animation:none!important}
  .card,.post,.btn-primary,.btn-ghost,.navbtn{transition:none!important}
  .card:hover,.card:active,.post:active,.btn-primary:active,.btn-ghost:active{transform:none!important}
  .skip{transition:none}
}

/* ============================================================
   Legacy bridge
   ------------------------------------------------------------
   main.css, nav.css and site.css are retired. What survived them
   is assets/css/about-blog.css (about + blog layout) and
   ai-literacy-hub/assets/literacy.css (Hub layout) — the rules
   those pages genuinely use, with their token blocks removed so
   this file is the single source of the palette.

   Those two sheets still carry the *old token names* in their
   declarations. Rather than rewrite every layout rule, this maps
   the old names onto the canonical palette, so the pages keep
   their structure and inherit the system's colour, type and shape.

   Deleting a name here silently un-styles whatever still refers to
   it — grep both sheets before removing one.

   This file loads last, so these definitions win. The !important
   flags below are deliberate: this sheet is enforcing DESIGN.md
   over page CSS that predates it, and losing that fight silently
   is how the site drifted into three looks in the first place.
   ============================================================ */
:root{
  /* inherited from main.css (now about-blog.css) */
  --bg: var(--dead-air);
  --surface: var(--signal-floor);
  --surface-2: var(--signal-floor-raised);
  --surface-3: var(--signal-floor);
  --panel: var(--signal-floor);
  --panel-strong: var(--signal-floor-raised);
  --text: var(--ink);
  --muted: var(--ink-muted);
  --faint: var(--ink-quiet);
  --line: var(--carrier-edge);
  --accent: var(--neon2);
  --divider: var(--carrier-edge-soft);
  /* accent names inherited from site.css (now literacy.css),
     pointed at the two brand neons */
  --cyan: var(--neon2);
  --mint: var(--neon2);
  --pink: var(--neon1);
  --gold: var(--neon1);
}

body{background:var(--dead-air);color:var(--ink);font-family:var(--mono)}

/* The Two Voices Rule: Grotesk on headings, Mono everywhere else. */
h1,h2,h3,h4,h5,h6{font-family:var(--display);letter-spacing:-.02em}
p,li,td,th,label,input,textarea,select,button,a,small,figcaption{font-family:var(--mono)}

/* Zero border-radius. Corners are clip-path notches; the only round
   things in this system are status dots and avatars. */
*{border-radius:0 !important}
.dot,[class*="dot"],[style*="border-radius:50%"],[style*="border-radius: 50%"],
[style*="border-radius:999px"],.avatar,.avatar img{border-radius:50% !important}

/* Ink floor: nothing quieter than #8a8194 on the page ground. */
.muted,.faint,small,figcaption{color:var(--ink-dim)}

/* ---------- section nav ----------
   A second-level nav for sub-sites (the AI Literacy Hub). Sits under the
   site nav, reads as machine voice, and never competes with it. */
/* Width matches the Hub's own content container so the two align; the page
   supplies the gutter at narrow widths. */
.section-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  max-width:1180px;margin:0 auto;padding:14px 0 0}
.section-nav-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--neon2);margin-right:8px}
.section-nav a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  padding:8px 12px;color:var(--ink-muted);border:1px solid var(--carrier-edge);
  text-decoration:none;transition:color .14s ease,border-color .14s ease}
.section-nav a:hover{color:#fff;border-color:var(--neon2)}
@media(max-width:700px){.section-nav{padding:12px 16px 0}.section-nav a{min-height:44px;display:inline-flex;align-items:center}}