/* ============================================================
   HUMAN / RESOURCES  —  Triarii Systems terminal
   Author site for Jerry Kansky
   ============================================================ */

:root {
  --bg:        #06080a;
  --bg-2:      #0a0e12;
  --panel:     #0e131a;
  --panel-2:   #12181f;
  --line:      #1e2831;
  --line-2:    #2a3a44;

  --text:      #c3ced3;
  --text-dim:  #7d8b93;
  --text-mute: #4f5c64;

  --teal:      #2ff0dd;   /* Triarii corporate accent */
  --teal-deep: #12a99a;
  --amber:     #ffb02e;   /* the Sprawl / warmth */
  --red:       #ff3b4e;   /* HR / kill flags */
  --echo:      #ff53d8;   /* Pneuma / Echo glitch */

  --mono: 'Share Tech Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
  --disp: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;

  --maxw: 1080px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--disp);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.boot-locked { overflow: hidden; height: 100vh; }

a { color: var(--teal); text-decoration: none; }

::selection { background: var(--teal); color: #001a17; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   ATMOSPHERE OVERLAYS
   ============================================================ */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 9000; }

.fx-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.22) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode: multiply;
  opacity: .55;
}

.fx-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: .05;
  animation: grain 1.1s steps(3) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  33%     { transform: translate(-3px,2px); }
  66%     { transform: translate(2px,-2px); }
}

.fx-vignette {
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.72) 100%);
}

.fx-scanbar {
  background: linear-gradient(to bottom, transparent, rgba(47,240,221,.05), transparent);
  height: 40vh;
  top: -40vh;
  animation: scanbar 7s linear infinite;
  opacity: .6;
}
@keyframes scanbar { to { transform: translateY(160vh); } }

/* ============================================================
   BOOT SEQUENCE
   ============================================================ */
.boot {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .6s var(--ease), visibility .6s;
}
.boot.done { opacity: 0; visibility: hidden; }
.boot-inner { width: min(680px, 88vw); }
.boot-text {
  font-family: var(--mono);
  font-size: clamp(.72rem, 2.4vw, .95rem);
  color: var(--teal);
  line-height: 1.9;
  margin: 0;
  white-space: pre-wrap;
  text-shadow: 0 0 8px rgba(47,240,221,.4);
  min-height: 12em;
}
.boot-text .ok  { color: var(--text-dim); }
.boot-text .grant { color: #fff; text-shadow: 0 0 14px rgba(47,240,221,.9); }
.boot-cursor {
  display: inline-block; width: .6em; height: 1.05em;
  background: var(--teal); vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.boot-skip {
  margin-top: 1.5rem;
  background: none; border: 1px solid var(--line-2); color: var(--text-dim);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  padding: .5rem .9rem; cursor: pointer; transition: all .2s;
}
.boot-skip:hover { color: var(--teal); border-color: var(--teal); }
.boot-logo {
  display: block; width: 72px; height: 72px; margin: 0 auto 1.5rem;
  filter: drop-shadow(0 0 16px rgba(47,240,221,.55));
  animation: bootpulse 1.8s ease-in-out infinite;
}
@keyframes bootpulse { 50% { opacity: .55; } }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 8000;
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem clamp(1rem, 4vw, 2.5rem);
  background: linear-gradient(to bottom, rgba(6,8,10,.92), rgba(6,8,10,.55) 70%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.scrolled {
  background: rgba(6,8,10,.94);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: .6rem; color: var(--teal); }
.brand-mark { width: 30px; height: 30px; color: var(--teal); filter: drop-shadow(0 0 6px rgba(47,240,221,.5)); }
.brand-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--mono); }
.brand-name { font-size: .95rem; letter-spacing: .28em; color: var(--text); }
.brand-sub  { font-size: .58rem; letter-spacing: .42em; color: var(--teal); margin-top: 2px; }

.site-nav { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.6rem); }
.site-nav a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  color: var(--text-dim); position: relative; padding: .3rem 0;
  transition: color .2s;
}
.site-nav a:hover { color: var(--teal); }
.site-nav a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--teal); transition: width .25s var(--ease);
}
.site-nav a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta {
  border: 1px solid var(--teal); color: var(--teal) !important;
  padding: .45rem .85rem !important; letter-spacing: .12em;
  transition: all .2s;
}
.nav-cta:hover { background: var(--teal); color: #001a17 !important; box-shadow: 0 0 18px rgba(47,240,221,.4); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--teal); transition: .25s; }

/* ============================================================
   SHARED LAYOUT / SECTION
   ============================================================ */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 7rem) clamp(1.2rem, 5vw, 2rem);
  position: relative;
}
.section-alt { max-width: none; background: var(--bg-2); border-block: 1px solid var(--line); }
.section-alt > * { max-width: var(--maxw); margin-inline: auto; }
.section-access { border-top: 1px solid var(--line); background:
  radial-gradient(80% 120% at 50% 0%, rgba(255,83,216,.06), transparent 60%); }

.section-head {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}
.section-index {
  font-family: var(--mono); color: var(--teal); font-size: .8rem;
  border: 1px solid var(--teal); padding: .15rem .5rem; letter-spacing: .1em;
}
.section-title {
  font-family: var(--disp); font-weight: 600; letter-spacing: .04em;
  font-size: clamp(1.25rem, 3.5vw, 1.9rem); margin: 0; color: var(--text); flex: 1;
}
.section-flag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  color: var(--text-dim); border: 1px solid var(--line-2); padding: .25rem .55rem;
  white-space: nowrap;
}
.flag-red  { color: var(--red);  border-color: rgba(255,59,78,.4); text-shadow: 0 0 8px rgba(255,59,78,.4); }
.flag-echo { color: var(--echo); border-color: rgba(255,83,216,.4); }

.section-lede { color: var(--text-dim); max-width: 60ch; font-size: 1.02rem; margin-top: 0; }
/* Ledes that sit over photographic backgrounds need extra contrast */
.world-inner .section-lede { color: #d7dee1; text-shadow: 0 2px 12px rgba(0,0,0,.9); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh; position: relative;
  display: grid; place-items: center; text-align: center;
  padding: 6rem clamp(1.2rem, 5vw, 2rem) 4rem;
  overflow: hidden;
}
/* ---- Mouse-reactive parallax stage ---- */
.hero-parallax { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.p-layer {
  position: absolute; inset: -8%;
  transform: translate3d(0,0,0);
  will-change: transform;   /* movement is smoothed in JS (main.js) */
}
/* Real art layers */
.layer-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%; display: block;
}
.p-fg { inset: 0; }
.layer-emet {
  position: absolute; right: -1%; bottom: 0;
  height: calc(100% - 64px);   /* keep his head clear of the fixed header */
  width: auto; max-width: none; display: block;
  filter: drop-shadow(0 0 40px rgba(0,0,0,.55));
}
/* Animated rain over the hero — tiled short streaks (real rain, subtle) */
.hero-rain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  --rain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cg%20stroke%3D%27%23cfe6ee%27%20stroke-width%3D%271.25%27%20stroke-linecap%3D%27round%27%3E%3Cline%20x1%3D%2718%27%20y1%3D%2712%27%20x2%3D%2715.8%27%20y2%3D%2722%27%20stroke-opacity%3D%270.28%27%2F%3E%3Cline%20x1%3D%2756%27%20y1%3D%2740%27%20x2%3D%2753.1%27%20y2%3D%2753%27%20stroke-opacity%3D%270.4%27%2F%3E%3Cline%20x1%3D%2792%27%20y1%3D%278%27%20x2%3D%2788.5%27%20y2%3D%2724%27%20stroke-opacity%3D%270.34%27%2F%3E%3Cline%20x1%3D%27132%27%20y1%3D%2752%27%20x2%3D%27127.8%27%20y2%3D%2771%27%20stroke-opacity%3D%270.22%27%2F%3E%3Cline%20x1%3D%27168%27%20y1%3D%2728%27%20x2%3D%27165.8%27%20y2%3D%2738%27%20stroke-opacity%3D%270.28%27%2F%3E%3Cline%20x1%3D%2738%27%20y1%3D%2784%27%20x2%3D%2735.1%27%20y2%3D%2797%27%20stroke-opacity%3D%270.4%27%2F%3E%3Cline%20x1%3D%2778%27%20y1%3D%27110%27%20x2%3D%2774.5%27%20y2%3D%27126%27%20stroke-opacity%3D%270.34%27%2F%3E%3Cline%20x1%3D%27120%27%20y1%3D%2790%27%20x2%3D%27115.8%27%20y2%3D%27109%27%20stroke-opacity%3D%270.22%27%2F%3E%3Cline%20x1%3D%27158%27%20y1%3D%27128%27%20x2%3D%27155.8%27%20y2%3D%27138%27%20stroke-opacity%3D%270.28%27%2F%3E%3Cline%20x1%3D%2710%27%20y1%3D%27150%27%20x2%3D%277.1%27%20y2%3D%27163%27%20stroke-opacity%3D%270.4%27%2F%3E%3Cline%20x1%3D%2760%27%20y1%3D%27168%27%20x2%3D%2756.5%27%20y2%3D%27184%27%20stroke-opacity%3D%270.34%27%2F%3E%3Cline%20x1%3D%27102%27%20y1%3D%27140%27%20x2%3D%2797.8%27%20y2%3D%27159%27%20stroke-opacity%3D%270.22%27%2F%3E%3Cline%20x1%3D%27150%27%20y1%3D%27176%27%20x2%3D%27147.8%27%20y2%3D%27186%27%20stroke-opacity%3D%270.28%27%2F%3E%3Cline%20x1%3D%27184%27%20y1%3D%2796%27%20x2%3D%27181.1%27%20y2%3D%27109%27%20stroke-opacity%3D%270.4%27%2F%3E%3Cline%20x1%3D%2728%27%20y1%3D%27120%27%20x2%3D%2724.5%27%20y2%3D%27136%27%20stroke-opacity%3D%270.34%27%2F%3E%3Cline%20x1%3D%2784%27%20y1%3D%2760%27%20x2%3D%2779.8%27%20y2%3D%2779%27%20stroke-opacity%3D%270.22%27%2F%3E%3Cline%20x1%3D%27140%27%20y1%3D%2720%27%20x2%3D%27137.8%27%20y2%3D%2730%27%20stroke-opacity%3D%270.28%27%2F%3E%3Cline%20x1%3D%27190%27%20y1%3D%27150%27%20x2%3D%27187.1%27%20y2%3D%27163%27%20stroke-opacity%3D%270.4%27%2F%3E%3Cline%20x1%3D%2746%27%20y1%3D%27150%27%20x2%3D%2742.5%27%20y2%3D%27166%27%20stroke-opacity%3D%270.34%27%2F%3E%3Cline%20x1%3D%27112%27%20y1%3D%27180%27%20x2%3D%27107.8%27%20y2%3D%27199%27%20stroke-opacity%3D%270.22%27%2F%3E%3Cline%20x1%3D%2772%27%20y1%3D%2720%27%20x2%3D%2769.8%27%20y2%3D%2730%27%20stroke-opacity%3D%270.28%27%2F%3E%3Cline%20x1%3D%2724%27%20y1%3D%2760%27%20x2%3D%2721.1%27%20y2%3D%2773%27%20stroke-opacity%3D%270.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* GPU-only: animate transform (compositor) instead of background-position (repaints).
   Each layer is one tile taller than the hero and slides down exactly one tile — seamless. */
.hero-rain::before, .hero-rain::after {
  content: ''; position: absolute; left: 0; right: 0;
  background-image: var(--rain); background-repeat: repeat;
  will-change: transform; transform: translateZ(0); backface-visibility: hidden;
}
.hero-rain::before {
  top: -200px; height: calc(100% + 200px); background-size: 200px 200px; opacity: .34;
  animation: rainfall-a 0.55s linear infinite;
}
.hero-rain::after {
  top: -128px; height: calc(100% + 128px); background-size: 128px 128px; opacity: .2;
  animation: rainfall-b 0.9s linear infinite;
}
@keyframes rainfall-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,200px,0); } }
@keyframes rainfall-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,128px,0); } }

/* Legibility scrim between art and text */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 40%, rgba(6,8,10,.55), transparent 72%),
    linear-gradient(to bottom, rgba(6,8,10,.7) 0%, transparent 22%, transparent 55%, rgba(6,8,10,.96) 100%);
}

.hero-grid {
  position: absolute; inset: -50% 0 0 0;
  background-image:
    linear-gradient(rgba(47,240,221,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,240,221,.06) 1px, transparent 1px);
  background-size: 52px 52px;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: top center;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent 72%);
  opacity: .7;
  animation: gridflow 14s linear infinite;
}
@keyframes gridflow { to { background-position: 0 52px, 52px 0; } }

.hero-inner {
  position: relative; z-index: 2; max-width: 820px;
  display: flex; flex-direction: column; align-items: center;
}
/* Center the oversized title symmetrically (text-align pins overflow to the left). */
.hero-title { max-width: 100vw; }

.kicker {
  font-family: var(--mono); font-size: clamp(.62rem,2vw,.78rem);
  letter-spacing: .3em; color: var(--teal); margin: 0 0 1.6rem;
  display: inline-flex; align-items: center; gap: .6rem;
}
.blip { width: 8px; height: 8px; background: var(--teal); border-radius: 50%;
  box-shadow: 0 0 12px var(--teal); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; transform: scale(.7); } }

.hero-title {
  font-family: var(--disp); font-weight: 700;
  font-size: clamp(1.7rem, 8.5vw, 6.6rem); line-height: .92;
  letter-spacing: -.01em; margin: 0; color: #fff;
  text-shadow: 0 0 40px rgba(47,240,221,.25);
}
.hero-title .slash { color: var(--teal); text-shadow: 0 0 24px var(--teal); }

.hero-tagline {
  font-family: var(--mono); color: #cdd6da;
  font-size: clamp(.85rem, 2.4vw, 1.15rem); letter-spacing: .08em;
  margin: 1.6rem 0 .4rem; text-shadow: 0 2px 12px rgba(0,0,0,.85);
}
.hero-tagline .warn { color: #ff6070; text-shadow: 0 0 16px rgba(255,59,78,.65), 0 2px 8px rgba(0,0,0,.7); }

.hero-meta {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .28em;
  color: #a7b2b8; margin: 1.2rem 0 2.4rem; text-shadow: 0 2px 10px rgba(0,0,0,.85);
}

.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.status-pill {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.6rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; color: var(--amber);
  border: 1px solid rgba(255,176,46,.3); border-radius: 40px; padding: .4rem .95rem;
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 10px var(--amber); animation: pulse 2s ease-in-out infinite; }

.scroll-cue {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .28em; color: var(--text-mute);
  z-index: 2;
}
.scroll-cue svg { width: 22px; height: 22px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em;
  padding: .85rem 1.5rem; border: 1px solid; cursor: pointer;
  transition: all .22s var(--ease); display: inline-block; background: none;
}
.btn-primary { color: #001a17; background: var(--teal); border-color: var(--teal);
  box-shadow: 0 0 22px rgba(47,240,221,.3); }
.btn-primary:hover { background: #fff; border-color: #fff; box-shadow: 0 0 30px rgba(47,240,221,.55); transform: translateY(-2px); }
.btn-ghost { color: var(--teal); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--teal); box-shadow: 0 0 18px rgba(47,240,221,.25); transform: translateY(-2px); }

/* ============================================================
   CASE FILE
   ============================================================ */
.file-body { display: grid; gap: 2.2rem; }
.file-logline p {
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(1.25rem, 3.6vw, 1.9rem); line-height: 1.35; margin: .2rem 0;
  color: #eef3f4;
}
.file-logline p:last-child { color: var(--teal); text-shadow: 0 0 18px rgba(47,240,221,.2); }
.file-synopsis { columns: 2; column-gap: 2.5rem; color: var(--text); max-width: 900px; }
.file-synopsis p { margin: 0 0 1rem; break-inside: avoid; }
.file-synopsis strong { color: #fff; font-weight: 600; }

.file-specs dl { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); }
.file-specs div { flex: 1 1 180px; padding: 1rem 1.2rem; border-right: 1px solid var(--line); }
.file-specs div:last-child { border-right: 0; }
.file-specs dt { font-family: var(--mono); font-size: .6rem; letter-spacing: .2em; color: var(--text-mute); margin-bottom: .35rem; }
.file-specs dd { margin: 0; font-family: var(--mono); font-size: .9rem; color: var(--text); }
.file-specs dd.hl { color: var(--amber); }

/* ============================================================
   WORLD / STRATA
   ============================================================ */
/* --- Scroll-driven descent stage --- */
.world {
  position: relative; min-height: 200vh;
  border-block: 1px solid var(--line); background: var(--bg-2);
  overflow: clip;
}
.world-bg {
  position: sticky; top: 0; height: 100vh; width: 100%;
  overflow: hidden; z-index: 0;
}
.world-plate {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  will-change: opacity;   /* opacity driven by scroll in main.js */
}
.plate-favela {
  background-image: url("assets/city-favela.jpg");
  background-image: image-set(url("assets/city-favela.webp") type("image/webp"), url("assets/city-favela.jpg") type("image/jpeg"));
}
.plate-wall {
  background-image: url("assets/city-wall.jpg");
  background-image: image-set(url("assets/city-wall.webp") type("image/webp"), url("assets/city-wall.jpg") type("image/jpeg"));
}
.plate-arcology {
  background-image: url("assets/city-arcology.jpg");
  background-image: image-set(url("assets/city-arcology.webp") type("image/webp"), url("assets/city-arcology.jpg") type("image/jpeg"));
}
.world-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(6,8,10,.86) 0%, rgba(6,8,10,.5) 26%, rgba(6,8,10,.5) 68%, rgba(6,8,10,.94) 100%);
}
.world-inner {
  position: relative; z-index: 2;
  margin-top: -100vh;                 /* overlay content onto the pinned bg */
  max-width: var(--maxw); margin-inline: auto;
  padding: 12vh clamp(1.2rem, 5vw, 2rem) 16vh;
}

/* space the three strata so each aligns with its own background plate */
.strata { display: grid; gap: 42vh; margin-top: 24vh; }
.strata-row {
  border: 1px solid var(--line-2); border-left: 3px solid var(--teal);
  background: rgba(8,11,16,.72); backdrop-filter: blur(5px);
  padding: 1.8rem clamp(1.2rem, 4vw, 2.2rem);
}
.strata-row[data-side="street"] { border-left-color: var(--amber);
  background: rgba(14,9,4,.72); }
.strata-row[data-side="wall"] {
  border-left-color: var(--red); background: rgba(16,7,9,.74);
  border-top: 3px solid transparent;
  border-image: repeating-linear-gradient(45deg, rgba(255,59,78,.55) 0 14px, rgba(6,8,10,.7) 14px 28px) 3;
}
.strata-tag.tag-red { color: var(--red); border-color: rgba(255,59,78,.4); text-shadow: 0 0 8px rgba(255,59,78,.4); }
.wall-list li::before { color: var(--red); }
.strata-tag {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; color: var(--teal);
  border: 1px solid rgba(47,240,221,.35); display: inline-block; padding: .2rem .6rem; margin-bottom: .8rem;
}
.strata-tag.tag-amber { color: var(--amber); border-color: rgba(255,176,46,.35); }
.strata-row h3 { font-family: var(--disp); font-weight: 600; font-size: 1.5rem; margin: 0 0 .7rem; color: #fff; }
.strata-row p { margin: 0 0 .6rem; color: var(--text-dim); }
.strata-row em { color: var(--text); font-style: normal; border-bottom: 1px dotted var(--line-2); }

.strata-wall {
  text-align: center; padding: .8rem; font-family: var(--mono);
  font-size: .66rem; letter-spacing: .18em; color: var(--red);
  text-shadow: 0 0 10px rgba(255,59,78,.5);
  background:
    repeating-linear-gradient(45deg, rgba(255,59,78,.12) 0 12px, transparent 12px 24px),
    rgba(6,8,10,.72);
  border-inline: 1px solid var(--line-2); backdrop-filter: blur(5px);
}
.district-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; }
.district-list li { padding-left: 1.2rem; position: relative; color: var(--text-dim); font-size: .95rem; }
.district-list li::before { content: '▸'; position: absolute; left: 0; color: var(--amber); }

/* District gallery cards */
.district-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.3rem; }
.district-card {
  border: 1px solid var(--line-2); background: rgba(6,8,10,.55); overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.district-card:hover { border-color: var(--amber); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.45); }
.district-img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.district-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease); }
.district-card:hover .district-img img { transform: scale(1.05); }
.district-img::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,8,10,.8), transparent 55%); }
.district-cap { padding: .7rem .9rem 1rem; }
.district-cap h4 { font-family: var(--disp); font-weight: 600; font-size: 1.05rem; margin: 0 0 .3rem; color: #fff; }
.district-cap p { margin: 0; font-size: .85rem; color: var(--text-dim); line-height: 1.45; }
@media (max-width: 560px) { .district-grid { grid-template-columns: 1fr; } }

/* Pneuma's baked redaction image — frame the CLASSIFIED stamp */
.redacted-img { object-position: 50% 32%; }
.district-list strong { color: var(--text); font-weight: 600; }

/* ============================================================
   PERSONNEL / DOSSIERS
   ============================================================ */
.dossier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.dossier {
  display: grid; grid-template-columns: 108px 1fr; gap: 1.1rem;
  border: 1px solid var(--line); background: var(--panel);
  padding: 1.3rem; transition: border-color .25s, transform .25s, box-shadow .25s;
}
.dossier:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.dossier-photo {
  width: 108px; height: 140px; border: 1px solid var(--line-2);
  background: linear-gradient(135deg, var(--panel-2), #05070a);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.dossier-photo picture { display: block; width: 100%; height: 100%; }
.dossier-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
/* scanline "screen" sheen over the portrait */
.dossier-photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(47,240,221,.045) 3px 4px);
}
/* placeholder card (no photo yet) */
.dossier-photo.no-photo {
  background:
    repeating-linear-gradient(45deg, rgba(255,176,46,.06) 0 10px, transparent 10px 20px),
    linear-gradient(135deg, var(--panel-2), #05070a);
}
.dossier-photo.no-photo::before {
  content: attr(data-initials);
  position: absolute; font-family: var(--disp); font-weight: 700;
  font-size: 2.4rem; color: rgba(255,255,255,.06);
}
.redacted {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
  text-align: center; line-height: 1.5; color: var(--amber);
  border: 1px solid rgba(255,176,46,.4); padding: .3rem .45rem; background: rgba(6,8,10,.5);
}

/* --- Corp-redacted dossier (Pneuma) --- */
.photo-redacted .dossier-img { filter: blur(10px) grayscale(.4) brightness(.78); transform: scale(1.15); }
.redact-overlay {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(0,0,0,.22) 5px 6px),
    linear-gradient(rgba(6,8,10,.30), rgba(6,8,10,.46));
}
.redact-overlay::before {   /* censor bar across the eyes */
  content: ''; position: absolute; left: 6%; right: 6%; top: 34%; height: 15%;
  background: #04060a; box-shadow: 0 0 0 1px rgba(255,59,78,.35);
}
.redact-stamp {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em; color: #ff5060;
  border: 2px solid rgba(255,59,78,.8); padding: .22rem .5rem; transform: rotate(-13deg);
  background: rgba(6,8,10,.55); text-shadow: 0 0 8px rgba(255,59,78,.5);
}
.redact-bar {
  background: #04060a; color: transparent; user-select: none; border-radius: 1px;
  padding: 0 3px; box-shadow: inset 0 0 0 1px rgba(255,59,78,.18);
}
.redact-bar.block { display: block; width: fit-content; max-width: 100%; margin: .42rem 0; overflow: hidden; }
.redact-note {
  display: block; margin-top: .55rem; color: var(--echo);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .05em;
}

/* Favela warmth continues faintly behind the Personnel files */
#personnel { position: relative; }
#personnel::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(150% 80% at 50% 0%, rgba(255,176,46,.055), transparent 52%);
}
#personnel > * { position: relative; z-index: 1; }
.dossier-body { min-width: 0; }
.dossier-role {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; color: var(--text-dim);
  display: inline-block; margin-bottom: .5rem;
}
.dossier h3 { font-family: var(--disp); font-weight: 600; font-size: 1.25rem; margin: 0 0 .1rem; color: #fff; }
.dossier h3 .muted { color: var(--text-mute); font-weight: 400; }
.dossier-alias { font-family: var(--mono); font-size: .74rem; color: var(--teal); margin: 0 0 .7rem; letter-spacing: .04em; }
.dossier p:last-child { margin: 0; color: var(--text-dim); font-size: .92rem; }
.flag-echo { color: var(--echo) !important; }

/* ============================================================
   TRANSMISSIONS / CHAPTERS
   ============================================================ */
.chapter-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; }
.chapter {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  border: 1px solid var(--line); background: var(--panel); padding: 1rem 1.3rem;
  font-family: var(--mono);
}
.chapter.locked { color: var(--text-mute); }
.chapter-no { color: var(--teal); font-size: .82rem; letter-spacing: .1em; }
.chapter-name { font-size: .82rem; letter-spacing: .16em; }
.chapter-status { font-size: .66rem; letter-spacing: .12em; color: var(--red); }

/* ============================================================
   ABOUT
   ============================================================ */
.about { display: grid; grid-template-columns: 184px 1fr; gap: 2rem; align-items: start; }
.about-photo {
  width: 184px; height: 230px; border: 1px solid var(--line-2);
  background: linear-gradient(135deg, var(--panel-2), #05070a); position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.about-photo picture { display: block; width: 100%; height: 100%; }
.about-img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 20%; display: block; }
.about-photo::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(47,240,221,.05) 3px 4px); }
.about-body h3 { font-family: var(--disp); font-weight: 600; font-size: 1.6rem; margin: 0 0 .8rem; color: #fff; }
.about-body p { color: var(--text-dim); max-width: 62ch; }
.placeholder-note {
  font-family: var(--mono); font-size: .74rem; color: var(--amber);
  border: 1px dashed rgba(255,176,46,.35); padding: .7rem .9rem; margin-top: 1.2rem;
}
.placeholder-note code { color: var(--teal); }

/* ============================================================
   ACCESS / SIGNUP
   ============================================================ */
.access-inner { max-width: 620px; }
.access-lede { color: var(--text-dim); font-size: 1.05rem; }
.signup { display: flex; gap: .7rem; margin-top: 1.4rem; flex-wrap: wrap; }
.signup input {
  flex: 1 1 240px; background: var(--panel); border: 1px solid var(--line-2);
  color: var(--text); font-family: var(--mono); font-size: .9rem; padding: .85rem 1rem;
  letter-spacing: .04em; transition: border-color .2s, box-shadow .2s;
}
.signup input::placeholder { color: var(--text-mute); }
.signup input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 16px rgba(47,240,221,.2); }
.signup-msg { font-family: var(--mono); font-size: .78rem; margin-top: .9rem; min-height: 1.2em; letter-spacing: .06em; }
.signup-msg.ok { color: var(--teal); }
.signup-msg.err { color: var(--red); }

.social { margin-top: 2.4rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding-top: 1.6rem; border-top: 1px solid var(--line); }
.social-label { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; color: var(--text-mute); }
.social a { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--text-dim); transition: color .2s; }
.social a:hover { color: var(--echo); text-shadow: 0 0 12px rgba(255,83,216,.4); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line); background: var(--bg-2);
  padding: 2.4rem clamp(1.2rem, 5vw, 2rem);
  display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center;
}
.footer-brand { display: flex; align-items: center; gap: .6rem; color: var(--teal);
  font-family: var(--mono); letter-spacing: .2em; font-size: .8rem; }
.footer-brand .brand-mark { width: 24px; height: 24px; }
.footer-copy { font-family: var(--mono); font-size: .68rem; color: var(--text-mute); max-width: 60ch; margin: 0; line-height: 1.7; }
.footer-top { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--text-dim); }
.footer-top:hover { color: var(--teal); }

/* ============================================================
   GLITCH (hero title)
   ============================================================ */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0;
  clip-path: inset(0 0 0 0);
}
.glitch::before { color: var(--echo); z-index: -1; animation: glitch1 4s infinite steps(2); }
.glitch::after  { color: var(--teal); z-index: -1; animation: glitch2 5.5s infinite steps(2); }
@keyframes glitch1 {
  0%, 92%, 100% { transform: translate(0); opacity: 0; }
  93% { transform: translate(-3px,1px); opacity: .8; }
  96% { transform: translate(2px,-1px); opacity: .8; }
}
@keyframes glitch2 {
  0%, 90%, 100% { transform: translate(0); opacity: 0; }
  91% { transform: translate(3px,-1px); opacity: .7; }
  95% { transform: translate(-2px,2px); opacity: .7; }
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .site-nav {
    position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column;
    background: rgba(6,8,10,.98); padding: 5rem 2rem 2rem; gap: 1.4rem;
    transform: translateY(-100%); transition: transform .35s var(--ease); align-items: flex-start;
    border-bottom: 1px solid var(--line);
  }
  .site-nav.open { transform: none; }
  .site-nav a { font-size: .9rem; }
  .nav-toggle { display: flex; z-index: 8100; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .file-synopsis { columns: 1; }
  .about { grid-template-columns: 1fr; }
  .about-photo { width: 120px; }
  /* Emet crowds the title on phones — let the city carry the hero instead. */
  .p-fg { display: none; }
  .layer-bg { object-position: 60% 45%; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .fx-scanbar, .hero-grid { display: none; }
}