/* ─── BLUEPRINT THEME — site-wide overlay ─────────────────────
   Linked from every page after the inline <style> block so it wins
   on cascade. Overrides the existing palette + body bg, and adds
   the grid, schematic, scanlines, and glitch-on-text behaviour.
   ──────────────────────────────────────────────────────────── */

:root {
  --paper:        #0d2747;
  --paper-clean:  #103257;
  --paper-deep:   #081d36;
  --ink:          #f6fbff;
  --ink-soft:     #dceaf7;
  --concrete:     #061525;
  --mute:         #9ab6d4;
  --mute-soft:    #b6cee8;
  --signal:       #5cd5ff;
  --signal-rgb:   92,213,255;
  --hairline:        rgba(220, 235, 255, .14);
  --hairline-strong: rgba(220, 235, 255, .28);
  --grid-fine:       rgba(220, 235, 255, .045);
  --grid-major:      rgba(220, 235, 255, .12);
  --glitch-r:     rgba(255, 80, 110, .5);
  --glitch-c:     rgba(80, 220, 255, .5);
  /* Reusable surface tokens */
  --surface-bg:   rgba(8, 24, 46, .88);
  --surface-bg-hi: rgba(13, 39, 71, .92);
  --halo-text:    0 1px 2px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .4);
  --lift-sm:      inset 0 1px 0 rgba(220,235,255,.10), 0 1px 0 rgba(0,0,0,.35), 0 6px 14px -4px rgba(0,0,0,.5);
  --lift-md:      inset 0 1px 0 rgba(220,235,255,.12), 0 1px 0 rgba(0,0,0,.45), 0 14px 32px -8px rgba(0,0,0,.6), 0 4px 12px -2px rgba(0,0,0,.35);
  --lift-lg:      inset 0 1px 0 rgba(220,235,255,.14), 0 1px 0 rgba(0,0,0,.45), 0 24px 48px -12px rgba(0,0,0,.65), 0 6px 18px -4px rgba(0,0,0,.4);
  --glow-signal:  0 0 28px -4px rgba(var(--signal-rgb),.55), 0 0 0 1px var(--signal);
}

/* Body — blueprint grid background, fixed to viewport */
body {
  background-color: var(--paper) !important;
  background-image:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0,0,0,.35) 100%) !important;
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px, 100% 100% !important;
  background-attachment: fixed, fixed, fixed, fixed, fixed !important;
  font-size: 19px !important;
}

/* Schematic layer — fixed full-viewport SVG behind content */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: url('blueprint-schematic.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .22;
  z-index: 0;
}

/* Make sure foreground content sits above the schematic */
body > * { position: relative; z-index: 1; }

/* Scanline overlay with periodic flicker */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(0,0,0,.18) 50%, transparent 50%);
  background-size: 100% 3px;
  opacity: .22;
  z-index: 1000;
  mix-blend-mode: overlay;
  animation: bp-flicker 6s steps(1, end) infinite;
}
@keyframes bp-flicker {
  0%, 97%, 100% { opacity: .22; }
  98% { opacity: .35; }
  99% { opacity: .12; }
}

/* ─── TYPOGRAPHY BUMP — bigger text site-wide ───────────────── */

/* Body / description text */
.work-desc, .lf-body, .bg-body,
.dv-desc, .rule-body, .tc-desc, .flow-cap, .c-cap, .cmp-cap,
.proj-desc {
  font-size: 19.5px !important;
  line-height: 1.6 !important;
}

/* Hero subtitles + leads */
.hero-tagline, .hero-sub, .stack-lede, .stack-footnote {
  font-size: clamp(19px, 1.9vw, 24px) !important;
  line-height: 1.55 !important;
}

/* Card titles bumped */
.lf-title, .work-name, .tc-name, .rule-name {
  font-size: clamp(22px, 2.1vw, 28px) !important;
}

/* Detail-page hero h1 */
#hero-hl {
  font-size: clamp(54px, 8.6vw, 116px) !important;
}

/* Index hero h1 */
.hero-h1 {
  font-size: clamp(38px, 5vw, 76px) !important;
}

/* Section h2 */
.section-h2, .dv-title {
  font-size: clamp(30px, 3.8vw, 50px) !important;
}

/* Flow node text */
.flow-name { font-size: 21px !important; }
.flow-sub { font-size: 15px !important; }

/* Background block label */
.bg-label { font-size: 13px !important; }

/* ─── GLITCH on description text ─────────────────────────────
   Continuous subtle RGB-split, periodic jitter pulse. Hover the
   parent panel/section/card pauses everything so the reader can
   read.
   ────────────────────────────────────────────────────────── */

/* Index-page selectors */
.work-desc, .lf-body, .hero-tagline, .bg-body, .lf-title, .work-name,
/* Detail-page selectors */
.dv-desc, .hero-sub, .flow-cap, .c-cap, .cmp-cap, .rule-body, .tc-desc,
.flow-name, .flow-sub, .rule-name, .tc-name {
  /* Resting state — minimal RGB ghost. Most of the time the text reads crisply. */
  text-shadow:
    .25px 0 0 rgba(255, 80, 110, .18),
    -.25px 0 0 rgba(80, 220, 255, .18);
  animation: bp-glitch 5.4s steps(1, end) infinite;
  transition: text-shadow 160ms ease, transform 160ms ease, color 160ms ease, filter 160ms ease;
}

/* Hero headlines — bolder, slower variant */
.hero-h1, #hero-hl, .section-h2, .dv-title {
  text-shadow:
    1.5px 0 0 rgba(255, 80, 110, .45),
    -1.5px 0 0 rgba(80, 220, 255, .45);
  animation: bp-glitch-bold 6.2s steps(1, end) infinite;
  transition: text-shadow 160ms ease, transform 160ms ease, color 160ms ease, filter 160ms ease;
}

@keyframes bp-glitch {
  0%, 86%, 100% {
    text-shadow:
      .25px 0 0 rgba(255, 80, 110, .18),
      -.25px 0 0 rgba(80, 220, 255, .18),
      0 1px 2px rgba(0, 0, 0, .55),
      0 0 1px rgba(0, 0, 0, .45);
    transform: translate(0, 0);
  }
  87% {
    text-shadow:
      3px 0 0 rgba(255, 80, 110, .7),
      -3px 0 0 rgba(80, 220, 255, .7),
      0 1px 2px rgba(0, 0, 0, .55);
    transform: translate(-1px, 0);
  }
  88.5% {
    text-shadow:
      -2px 0 0 rgba(255, 80, 110, .6),
      2px 0 0 rgba(80, 220, 255, .6),
      0 1px 2px rgba(0, 0, 0, .55);
    transform: translate(2px, -1px);
  }
  90% {
    text-shadow:
      1px 1px 0 rgba(255, 80, 110, .5),
      -1px -1px 0 rgba(80, 220, 255, .5),
      0 1px 2px rgba(0, 0, 0, .55);
    transform: translate(-1px, 1px);
  }
  91.5% {
    text-shadow:
      .25px 0 0 rgba(255, 80, 110, .18),
      -.25px 0 0 rgba(80, 220, 255, .18),
      0 1px 2px rgba(0, 0, 0, .55),
      0 0 1px rgba(0, 0, 0, .45);
    transform: translate(0);
  }
}

@keyframes bp-glitch-bold {
  0%, 88%, 100% {
    text-shadow:
      .8px 0 0 rgba(255, 80, 110, .3),
      -.8px 0 0 rgba(80, 220, 255, .3),
      0 3px 14px rgba(0, 0, 0, .7),
      0 0 60px rgba(var(--signal-rgb), .15);
    transform: translate(0);
    filter: none;
  }
  89% {
    text-shadow:
      5px 0 0 rgba(255, 80, 110, .85),
      -5px 0 0 rgba(80, 220, 255, .85),
      0 3px 14px rgba(0, 0, 0, .7);
    transform: translate(-2px, 1px) skewX(-1deg);
    filter: brightness(1.15);
  }
  91% {
    text-shadow:
      -4px 0 0 rgba(255, 80, 110, .75),
      4px 0 0 rgba(80, 220, 255, .75),
      0 3px 14px rgba(0, 0, 0, .7);
    transform: translate(3px, -1px);
  }
  93% {
    text-shadow:
      2px 2px 0 rgba(255, 80, 110, .65),
      -2px -2px 0 rgba(80, 220, 255, .65),
      0 3px 14px rgba(0, 0, 0, .7);
    transform: translate(-1px, 2px);
  }
  95% {
    text-shadow:
      .8px 0 0 rgba(255, 80, 110, .3),
      -.8px 0 0 rgba(80, 220, 255, .3),
      0 3px 14px rgba(0, 0, 0, .7),
      0 0 60px rgba(var(--signal-rgb), .15);
    transform: translate(0);
  }
}

/* ─── HOVER PAUSE — hover the PANEL / SECTION / CARD ────────
   Hovering the whole containing region pauses all the glitch
   text inside it. Reading becomes effortless once the cursor
   lands on a region of interest.
   ────────────────────────────────────────────────────────── */

/* Index: hover the deck panel pauses everything in it */
.panel:hover .work-desc,
.panel:hover .work-name,
.panel:hover .lf-body,
.panel:hover .lf-title,
.panel:hover .hero-tagline,
.panel:hover .hero-h1,
.panel:hover .section-h2,
.panel:hover .bg-body,
/* Detail page: hover the dv-section pauses everything in it */
.dv-section:hover .dv-desc,
.dv-section:hover .dv-title,
.dv-section:hover .flow-cap,
.dv-section:hover .c-cap,
.dv-section:hover .cmp-cap,
.dv-section:hover .flow-name,
.dv-section:hover .flow-sub,
.dv-section:hover .tc-desc,
.dv-section:hover .tc-name,
.dv-section:hover .rule-body,
.dv-section:hover .rule-name,
/* Detail page hero: hover the hero pauses everything in it */
#hero:hover #hero-hl,
#hero:hover .hero-sub {
  text-shadow: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none !important; opacity: .1 !important; }
  .work-desc, .lf-body, .hero-tagline, .bg-body, .lf-title, .work-name,
  .dv-desc, .hero-sub, .flow-cap, .c-cap, .cmp-cap, .rule-body, .tc-desc,
  .flow-name, .flow-sub, .rule-name, .tc-name,
  .hero-h1, #hero-hl, .section-h2, .dv-title {
    animation: none !important;
    text-shadow: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ─── ELEVATION + CONTRAST ─────────────────────────────────────
   Cards, panels, and tags get an opaque surface backing plus a
   multi-layer drop shadow so they visibly float above the
   schematic. Body text gets a dark halo so copy reads against the
   busy background. Buttons + arrows get filled cyan + glow so
   they pop as interactive elements.
   ───────────────────────────────────────────────────────────── */

/* Floating panels — every card-like surface */
.lf-card,
.work-card,
.proj-slide,
.tool-card,
.rule,
.c-frame,
.cm-wrap,
.video-frame,
.stack-col,
.tech-stack,
.cmp-table {
  background: var(--surface-bg) !important;
  border: 1px solid var(--hairline-strong) !important;
  box-shadow: var(--lift-md) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Hero project slide gets bigger lift */
.proj-slide.is-active {
  box-shadow: var(--lift-lg) !important;
}

/* Stack columns get inner light edge instead of solid bg if you want */
.stack-col { padding: clamp(18px,2vw,24px); }
.tech-stack { padding: clamp(20px,2.4vw,32px); }

/* Tech rows — subtle band, no double shadow */
.tech-row {
  background: rgba(13, 39, 71, .55);
  padding: 14px 18px;
  box-shadow: inset 0 1px 0 rgba(220,235,255,.08), 0 1px 0 rgba(0,0,0,.25);
}

/* Tags — high-contrast chips that don't blend with the bg */
.tech-tag, .badge, .stack-tag, .r-node, .r-chip, .pv-tag, .rx-kind {
  background: rgba(6, 18, 36, .94) !important;
  color: #ffffff !important;
  border: 1px solid rgba(180, 210, 240, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,235,255,.12),
    0 1px 0 rgba(0,0,0,.4),
    0 2px 6px -1px rgba(0,0,0,.5) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 1px rgba(0,0,0,.5) !important;
}
.tech-tag:hover, .stack-tag:hover {
  border-color: var(--signal) !important;
  color: var(--signal) !important;
  box-shadow:
    inset 0 1px 0 rgba(220,235,255,.18),
    0 0 0 1px var(--signal),
    0 0 18px -4px rgba(var(--signal-rgb),.55),
    0 2px 6px -1px rgba(0,0,0,.5) !important;
}

/* Body text — bright + dark halo for legibility on busy bg */
.work-desc, .lf-body, .bg-body, .dv-desc, .rule-body, .tc-desc,
.flow-cap, .c-cap, .cmp-cap, .proj-desc {
  color: #f5fbff !important;
  text-shadow:
    .35px 0 0 rgba(255, 80, 110, .28),
    -.35px 0 0 rgba(80, 220, 255, .28),
    0 1px 2px rgba(0, 0, 0, .55),
    0 0 1px rgba(0, 0, 0, .4) !important;
}

/* Card titles + section titles — bigger pop */
.lf-title, .work-name, .proj-name, .tc-name, .rule-name,
.section-h2, .dv-title {
  color: #ffffff !important;
  text-shadow:
    1px 0 0 rgba(255, 80, 110, .35),
    -1px 0 0 rgba(80, 220, 255, .35),
    0 2px 6px rgba(0, 0, 0, .55) !important;
}

/* Hero headlines — biggest pop, with subtle backlight */
.hero-h1, #hero-hl {
  color: #ffffff !important;
  text-shadow:
    1.5px 0 0 rgba(255, 80, 110, .4),
    -1.5px 0 0 rgba(80, 220, 255, .4),
    0 3px 14px rgba(0, 0, 0, .7),
    0 0 60px rgba(var(--signal-rgb), .15) !important;
}

/* Labels, eyebrows, meta — short text gets halo too */
.eyebrow, .dv-label, .stack-label, .tech-label, .lf-tag, .work-tag,
.hero-name, .proj-idx, .proj-tag, .bg-label, .h-name, .h-role,
.flow-kicker, .stat-label, .pv-ts, .pv-actor, .rx-step,
.cm-row-head, .cm-col-head, .cm-axes {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .4);
}

/* Primary buttons — filled cyan with glow + lift */
.btn-primary,
.proj-cta {
  background: var(--surface-bg) !important;
  color: var(--signal) !important;
  border: 1px solid var(--signal) !important;
  box-shadow: var(--lift-sm), 0 0 16px -4px rgba(var(--signal-rgb), .35) !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  transition: background var(--m-base), color var(--m-base), box-shadow var(--m-base), transform var(--m-base) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5) !important;
}
.btn-primary:hover, .proj-cta:hover {
  background: var(--signal) !important;
  color: var(--paper) !important;
  box-shadow: var(--glow-signal), 0 8px 18px -4px rgba(0,0,0,.55) !important;
  transform: translateY(-1px);
  text-shadow: none !important;
}

/* Ghost / secondary buttons */
.btn-ghost {
  background: var(--surface-bg) !important;
  border: 1px solid var(--hairline-strong) !important;
  box-shadow: var(--lift-sm) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5) !important;
}
.btn-ghost:hover {
  border-color: var(--signal) !important;
  color: var(--signal) !important;
}

/* Carousel arrows — also lifted */
.proj-arrow, .deck-arrow {
  background: var(--surface-bg-hi) !important;
  box-shadow: var(--lift-md) !important;
}
.proj-arrow:hover:not(:disabled),
.deck-arrow:hover:not(:disabled) {
  box-shadow: var(--lift-md), 0 0 22px -4px rgba(var(--signal-rgb), .55) !important;
}

/* Nav status pill + nav itself float over content */
#nav, #top-nav {
  background: var(--surface-bg-hi) !important;
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, .55), 0 1px 0 rgba(220,235,255,.06) inset;
}

/* Deck tabs strip + side arrow chrome */
.deck-tabs {
  background: var(--surface-bg-hi) !important;
  box-shadow: 0 -6px 24px -8px rgba(0,0,0,.55), 0 -1px 0 rgba(220,235,255,.06) inset !important;
}

/* Audio toggle / sound button */
.sound-toggle {
  background: var(--surface-bg-hi) !important;
  box-shadow: var(--lift-sm) !important;
}

/* Hover on cards bumps the lift to suggest interactivity */
.lf-card:hover, .work-card:hover, .tool-card:hover, .rule:hover, .proj-slide:hover {
  box-shadow: var(--lift-lg), 0 0 22px -8px rgba(var(--signal-rgb), .4) !important;
  border-color: var(--signal) !important;
}