/* ============================================================
   TECHNICAL / GRID skin — additive layer loaded AFTER styles.css
   Dev-tool aesthetic: blueprint grid, mono display type, bracketed
   labels, HUD corner ticks, squared geometry. Content is untouched;
   this file only overrides presentation. Still 0 external requests.
   ============================================================ */

:root {
  --radius: 6px;
  --grid-line: rgba(230, 232, 235, 0.035);
}

/* ---- blueprint grid painted as the page background (no stacking risk) ---- */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  background-attachment: fixed;
}

/* ---- mono, engineered display type ---- */
.hero h1,
.section-title,
.project-body h3,
.nav-brand {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero h1 { line-height: 1.04; }
.section-title { text-transform: uppercase; letter-spacing: 0.03em; }
.nav-brand { font-size: 0.9rem; letter-spacing: 0; }

/* ---- terminal-style section/hero labels ---- */
.eyebrow::before,
.hero-eyebrow::before {
  content: "// ";
  color: var(--muted-2);
}

/* ---- squared, mono controls ---- */
.btn {
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.nav-cta { border-radius: 4px; }
.chip { border-radius: 4px; }

/* ---- HUD corner ticks on media frames + the pipeline viewer ---- */
/* excludes the full-bleed hero bg so ticks don't collide with the nav */
.project-media .media,
.viewer {
  position: relative;
}
.project-media .media::before,
.project-media .media::after,
.viewer::before,
.viewer::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-color: var(--accent);
  pointer-events: none;
  z-index: 3;
}
.project-media .media::before,
.viewer::before {
  top: 8px; left: 8px;
  border-top: 1.5px solid;
  border-left: 1.5px solid;
}
.project-media .media::after,
.viewer::after {
  bottom: 8px; right: 8px;
  border-bottom: 1.5px solid;
  border-right: 1.5px solid;
}

/* ---- stat cards read like instrument readouts ---- */
.stat {
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.stat .num { font-family: var(--font-mono); }

/* ---- hero: subtle HUD frame around the full-bleed video ---- */
.hero::before {
  content: "";
  position: absolute;
  inset: calc(var(--nav-h) + 16px) 20px 20px;
  border: 1px solid rgba(230, 232, 235, 0.08);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}