/* ============================================================
   FBI ARCHIVE — a fictional records interface
   Design system, layout, motion
   ============================================================ */

:root{
  --bureau:#6093d6;
  --bureau-hot:#a9caff;
  --bureau-dim:#3c6699;
  --red:#c83238;
  --red-hot:#ff6469;
  --paper:#f0e8d7;
  --paper-soft:#d2c9b6;
  --muted:#a29b8b;
  --faint:#837c6e;
  --ink:#07070a;
  --ink-2:#0b0b0f;
  --panel:#101015;
  --panel-2:#16161c;
  --line:rgba(96,147,214,.18);
  --line-strong:rgba(96,147,214,.36);
  --hair:rgba(255,255,255,.085);
  --hair-2:rgba(255,255,255,.16);
  --accent:var(--bureau);
  --green:#70dd98;
  --blue:#7cc4ff;
  --orange:#ffac5f;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --shadow:0 14px 28px -18px rgba(0,0,0,.8);
  --font-display:'Bebas Neue','Oswald',Impact,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
}

*{box-sizing:border-box;}

[hidden]{display:none !important;}

html{
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.65;
  color:var(--paper);
  background:
    linear-gradient(180deg, rgba(96,147,214,.035) 0%, rgba(96,147,214,0) 22%),
    linear-gradient(180deg, #0b0b0e 0%, #08080b 54%, #060608 100%);
  background-color:#07070a;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.is-locked{overflow:hidden;}

/* film grain across the whole archive */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:300;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/></filter><rect width='150' height='150' filter='url(%23n)'/></svg>");
}

::selection{background:var(--bureau);color:#0a0a0c;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#08080b;}
::-webkit-scrollbar-thumb{
  background:#232b36;
  border:2px solid #08080b;
  border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{background:var(--bureau-dim);}
html{scrollbar-color:#232b36 #08080b;scrollbar-width:thin;}

button{font:inherit;}
a{color:inherit;}

:focus-visible{
  outline:2px solid var(--bureau);
  outline-offset:3px;
}

.svg-sprite{position:absolute;width:0;height:0;overflow:hidden;}

.icon{
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:middle;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
  transition:transform .28s var(--ease);
}

.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:400;
  transform:translateY(-180%);
  padding:10px 14px;
  background:var(--bureau);
  color:#09090b;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:3px;
  transition:transform .25s var(--ease);
}
.skip-link:focus{transform:none;}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:16px;
  min-height:72px;
  padding:12px clamp(16px,3vw,32px);
  border-bottom:1px solid var(--line);
  background:rgba(7,7,10,.76);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(96,147,214,.34),transparent);
}
.topbar.is-scrolled{
  background:rgba(7,7,10,.92);
  border-color:var(--line-strong);
  box-shadow:0 12px 34px -24px #000;
}

.brand{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  text-decoration:none;
  color:inherit;
}
.brand .seal{
  width:44px;
  height:44px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
  transition:transform .5s var(--ease),filter .5s ease;
}
.brand:hover .seal{
  transform:rotate(-4deg) scale(1.04);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.65));
}

.txt{
  font-family:var(--font-display);
  font-size:20px;
  line-height:1;
  letter-spacing:.08em;
  color:var(--bureau);
  text-transform:uppercase;
  white-space:nowrap;
}
.txt small{
  display:block;
  margin-top:5px;
  font-family:var(--font-mono);
  font-size:9px;
  line-height:1.4;
  letter-spacing:.14em;
  color:var(--muted);
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.spacer{flex:1;}

.topbar-status{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 11px;
  border:1px solid var(--hair);
  border-radius:3px;
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.live-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(112,221,152,.1);
}
.clock{
  color:var(--paper-soft);
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}

.back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  border:1px solid var(--hair-2);
  border-radius:3px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.back .icon{width:13px;height:13px;}
.back:hover{
  color:var(--bureau);
  border-color:var(--line-strong);
  background:rgba(96,147,214,.05);
}
.back:hover .icon{transform:translateX(-3px);}

.progress-track{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  overflow:hidden;
  pointer-events:none;
}
.progress-track span{
  display:block;
  height:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,var(--bureau),var(--red));
  transition:transform .12s linear;
}

/* ============================================================
   LANDING — THE IDENTITY GATE
   ============================================================ */
.stage{
  position:relative;
  isolation:isolate;
  min-height:calc(100svh - 73px);
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:clamp(60px,9vh,130px) clamp(18px,4vw,56px) clamp(92px,13vh,150px);
}
.stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,7,10,.48) 0%,rgba(7,7,10,.12) 26%,rgba(7,7,10,.38) 74%,var(--ink) 100%),
    radial-gradient(ellipse at center,transparent 0%,rgba(7,7,10,.3) 48%,rgba(7,7,10,.9) 100%);
}
.stage-media{
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
}
.stage-panel{
  --panel-op:.62;
  position:absolute;
  top:0;
  bottom:0;
  width:43%;
  margin:0;
  overflow:hidden;
  opacity:var(--panel-op);
  animation:panel-in 1.6s var(--ease) both;
}
.stage-panel--gangster{
  left:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.9) 32%,rgba(0,0,0,.32) 72%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.9) 32%,rgba(0,0,0,.32) 72%,transparent 100%);
}
.stage-panel--citizen{
  right:0;
  -webkit-mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.9) 32%,rgba(0,0,0,.32) 72%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.9) 32%,rgba(0,0,0,.32) 72%,transparent 100%);
}
.stage-panel img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translate3d(calc(var(--px,0) * 10px),calc(var(--py,0) * 8px),0) scale(1.06);
  transition:transform .65s var(--ease-soft),filter .65s ease;
}
.stage-panel--gangster img{
  object-position:62% center;
  filter:grayscale(.5) contrast(1.14) brightness(.66) saturate(.9);
}
.stage-panel--citizen img{
  object-position:50% 28%;
  filter:grayscale(1) contrast(1.18) brightness(.7);
}
.stage-panel--gangster::after,
.stage-panel--citizen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.stage-panel--gangster::after{
  background:linear-gradient(90deg,rgba(200,50,56,.5),transparent 68%);
  mix-blend-mode:color;
  opacity:.7;
}
.stage-panel--citizen::after{
  background:linear-gradient(270deg,rgba(96,147,214,.5),transparent 68%);
  mix-blend-mode:color;
  opacity:.55;
}

.stage-glow{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:radial-gradient(620px circle at var(--mx,50%) var(--my,42%),rgba(96,147,214,.09),transparent 66%);
}

.stage-rail{
  position:absolute;
  top:50%;
  z-index:1;
  display:flex;
  gap:28px;
  writing-mode:vertical-rl;
  transform:translateY(-50%);
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(162,155,139,.46);
  pointer-events:none;
}
.stage-rail--left{left:26px;}
.stage-rail--right{right:26px;}

.stage-inner{
  position:relative;
  z-index:2;
  width:min(100%,760px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.stage-inner::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-8% -16%;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,rgba(7,7,10,.52) 0%,rgba(7,7,10,.26) 46%,rgba(7,7,10,0) 72%);
}

.stage-file{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 14px;
  border:1px solid var(--hair);
  border-radius:2px;
  background:rgba(9,9,12,.5);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.stage-file-label{color:var(--bureau);}
.stage-file-no{color:var(--muted);}
.stage-file-no::before{
  content:"";
  display:inline-block;
  width:1px;
  height:11px;
  margin-right:14px;
  background:var(--hair-2);
  vertical-align:-1px;
}

.stage-title{
  margin:26px 0 0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(58px,9vw,96px);
  line-height:.82;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-wrap:balance;
  text-shadow:0 24px 60px rgba(0,0,0,.55);
}
.stage-title-line{
  display:block;
  overflow:hidden;
  padding:0 .08em .07em;
}
.stage-title-line > span{
  display:block;
  animation:title-rise 1.1s var(--ease) both;
}
.stage-title-line:nth-child(2) > span{animation-delay:.08s;}
.stage-title-line--outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(96,147,214,.72);
}
@supports not (-webkit-text-stroke:1px #000){
  .stage-title-line--outline{color:var(--paper);}
}

.stage-lede{
  max-width:48ch;
  margin:24px auto 30px;
  font-size:15px;
  line-height:1.78;
  color:#b8b0a0;
  text-wrap:pretty;
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding:17px 26px;
  overflow:hidden;
  border:0;
  border-radius:3px;
  background:var(--bureau);
  color:#09090b;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 14px 28px -20px rgba(0,0,0,.8);
  transition:transform .3s var(--ease),background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.38) 50%,transparent 82%);
  transform:translateX(-120%);
  transition:transform .65s var(--ease);
  pointer-events:none;
}
.btn:hover{
  background:var(--bureau-hot);
  transform:translateY(-2px);
  box-shadow:0 18px 32px -20px rgba(0,0,0,.9);
}
.btn:hover::before{transform:translateX(120%);}
.btn:active{transform:translateY(0);}
.btn .icon{width:18px;height:18px;}
.btn:hover .icon{transform:translateX(4px);}

.stage-options{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:28px;
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.stage-options b{
  margin-right:4px;
  color:var(--paper-soft);
  font-weight:500;
}
.opt-rule{width:1px;height:12px;background:var(--hair-2);}

.stage-bottom{
  position:absolute;
  left:clamp(18px,4vw,48px);
  right:clamp(18px,4vw,48px);
  bottom:22px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(162,155,139,.54);
  pointer-events:none;
}
.stage-bottom-center{color:var(--bureau);opacity:.72;}

.nojs{
  margin:20px 0 0;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--muted);
}
.nojs a{color:var(--bureau);}

/* ============================================================
   IDENTITY MODAL
   ============================================================ */
.overlay{
  position:fixed;
  inset:0;
  z-index:40;
  display:flex;
  overflow-y:auto;
  padding:clamp(16px,3vw,42px);
  background:
    radial-gradient(ellipse at 50% 0%,rgba(96,147,214,.06),transparent 58%),
    rgba(3,3,5,.86);
  backdrop-filter:blur(14px) saturate(110%);
  -webkit-backdrop-filter:blur(14px) saturate(110%);
  opacity:0;
  visibility:hidden;
  transition:opacity .32s var(--ease),visibility .32s;
}
.overlay.is-open{opacity:1;visibility:visible;}
.overlay[hidden]{display:none;}

.modal{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:1020px;
  margin:auto;
  padding:0 clamp(18px,3.2vw,38px) clamp(22px,3vw,32px);
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:linear-gradient(165deg,#141419 0%,#0b0b0f 55%,#08080b 100%);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.045);
  opacity:0;
  transform:translateY(26px) scale(.985);
  transition:opacity .3s var(--ease),transform .5s var(--ease);
}
.overlay.is-open .modal{opacity:1;transform:none;}
.modal::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--bureau),transparent);
  opacity:.85;
}

.modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 48px 14px 0;
  border-bottom:1px solid var(--hair);
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.modal-secure{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--green);
  white-space:nowrap;
}

.close{
  position:sticky;
  top:9px;
  align-self:flex-end;
  z-index:10;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  margin:9px calc(10px - clamp(18px,3.2vw,38px)) -45px 0;
  padding:0;
  border:1px solid var(--hair);
  border-radius:3px;
  background:rgba(8,8,11,.58);
  color:var(--muted);
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:color .22s ease,border-color .22s ease,background .22s ease;
}
.close .icon{width:18px;height:18px;}
.close:hover{color:var(--paper);border-color:var(--hair-2);background:rgba(255,255,255,.03);}

.modal-head{
  display:flex;
  align-items:center;
  gap:18px;
  padding:clamp(22px,3vw,32px) 0 24px;
}
.modal-seal{
  width:64px;
  height:64px;
  object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
}
.modal-heading{min-width:0;}
.modal-heading h2{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-size:clamp(36px,4.5vw,58px);
  font-weight:400;
  line-height:.92;
  letter-spacing:.035em;
  text-transform:uppercase;
  text-wrap:balance;
}
.modal-heading p{
  margin:0;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--muted);
}
.modal-stamp{
  margin-left:auto;
  padding:5px 12px;
  border:2px double var(--red);
  color:var(--red-hot);
  font-family:var(--font-display);
  font-size:20px;
  letter-spacing:.2em;
  text-transform:uppercase;
  transform:rotate(-8deg);
  opacity:.86;
  white-space:nowrap;
}

/* ============================================================
   IDENTITY CARDS
   ============================================================ */
.cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.card{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--hair);
  border-radius:10px;
  background:linear-gradient(180deg,#111116,#0a0a0d);
  color:inherit;
  text-decoration:none;
  transition:transform .35s var(--ease),border-color .35s ease,box-shadow .35s ease;
}
.card--gangster{--accent:var(--red);--accent-hot:var(--red-hot);}
.card--citizen{--accent:var(--bureau);--accent-hot:var(--bureau-hot);}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(96,147,214,.11),transparent 58%);
  opacity:0;
  transition:opacity .35s ease;
}
.card:hover::after,.card:focus-visible::after{opacity:1;}
.card:hover,.card:focus-visible{
  transform:translateY(-5px);
  border-color:var(--accent);
  box-shadow:0 16px 28px -18px rgba(0,0,0,.95);
  outline:none;
}
.card:focus-visible{box-shadow:0 0 0 2px var(--bureau),0 16px 28px -18px #000;}

.card-art{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#050506;
}
.card-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease),filter .65s ease;
}
.card--gangster .card-art img{
  object-position:62% center;
  filter:grayscale(.25) contrast(1.12) brightness(.76) saturate(1.05);
}
.card--citizen .card-art img{
  object-position:50% 28%;
  filter:grayscale(1) contrast(1.18) brightness(.72);
}
.card:hover .card-art img,
.card:focus-visible .card-art img{transform:scale(1.045);}
.card--gangster:hover .card-art img,
.card--gangster:focus-visible .card-art img{filter:grayscale(0) contrast(1.08) brightness(.9) saturate(1.05);}
.card--citizen:hover .card-art img,
.card--citizen:focus-visible .card-art img{filter:grayscale(.5) contrast(1.1) brightness(.88);}

.card-art::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.card--gangster .card-art::before{
  background:linear-gradient(90deg,rgba(200,50,56,.48),transparent 68%);
  mix-blend-mode:color;
}
.card--citizen .card-art::before{
  background:linear-gradient(270deg,rgba(96,147,214,.5),transparent 68%);
  mix-blend-mode:color;
}
.card-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(to top,rgba(10,10,13,.96) 0%,rgba(10,10,13,.2) 52%,rgba(10,10,13,.06) 100%),
    linear-gradient(90deg,rgba(10,10,13,.36),transparent 46%);
}

.card-tag{
  position:absolute;
  top:13px;
  left:13px;
  z-index:4;
  padding:5px 8px;
  border:1px solid currentColor;
  border-radius:2px;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(4px);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.card-stamp{
  position:absolute;
  top:42px;
  right:14px;
  z-index:4;
  padding:3px 8px;
  border:2px double currentColor;
  color:var(--accent);
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:.17em;
  text-transform:uppercase;
  transform:rotate(-9deg);
  opacity:.82;
  white-space:nowrap;
}
.card-index{
  position:absolute;
  right:12px;
  bottom:4px;
  z-index:2;
  font-family:var(--font-display);
  font-size:82px;
  line-height:.7;
  color:rgba(240,232,215,.075);
  letter-spacing:.02em;
  pointer-events:none;
}
.card-scan{
  position:absolute;
  top:-10%;
  bottom:-10%;
  left:-38%;
  z-index:3;
  width:30%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
  transform:skewX(-12deg);
  transition:left .8s var(--ease);
  pointer-events:none;
}
.card:hover .card-scan,.card:focus-visible .card-scan{left:124%;}

.card-body{
  position:relative;
  z-index:4;
  display:flex;
  flex:1;
  flex-direction:column;
  padding:17px 20px 20px;
}
.card-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
}
.card-meta span:first-child{color:var(--accent);}
.card h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:36px;
  font-weight:400;
  line-height:.95;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.card p{
  max-width:38ch;
  margin:0 0 20px;
  font-size:12.5px;
  line-height:1.68;
  color:#b8b0a0;
}
.pick{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding:12px 13px;
  border:1px solid var(--hair-2);
  border-radius:3px;
  color:var(--paper-soft);
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:background .28s ease,color .28s ease,border-color .28s ease;
}
.pick .icon{width:15px;height:15px;}
.card:hover .pick,.card:focus-visible .pick{
  background:var(--accent);
  border-color:var(--accent);
  color:#08080a;
}
.card:hover .pick .icon,.card:focus-visible .pick .icon{transform:translateX(4px);}

.overlay.is-open .card{
  animation:card-rise .65s var(--ease) backwards;
}
.overlay.is-open .card:nth-child(1){animation-delay:.1s;}
.overlay.is-open .card:nth-child(2){animation-delay:.18s;}

.modal-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--hair);
}
.fine{
  margin:0;
  font-family:var(--font-mono);
  font-size:8.5px;
  line-height:1.9;
  letter-spacing:.1em;
  color:var(--faint);
}
.fine-credit{color:var(--faint);opacity:.76;letter-spacing:.04em;}
.esc-hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  white-space:nowrap;
}
kbd{
  display:inline-block;
  padding:3px 6px;
  border:1px solid var(--hair-2);
  border-radius:2px;
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:8px;
  line-height:1;
}

/* ============================================================
   DOSSIER SHELL
   ============================================================ */
.dossier{
  width:min(100%,1220px);
  margin:0 auto;
  padding:clamp(26px,4vw,48px) clamp(16px,3vw,28px) 80px;
}

.file-header{
  position:relative;
  overflow:hidden;
  margin-bottom:30px;
  padding:clamp(24px,3.5vw,44px);
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(160deg,rgba(22,21,27,.96),rgba(9,9,12,.97));
  box-shadow:0 14px 28px -24px #000;
}
.file-header::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 86% 12%,rgba(255,255,255,.035),transparent 38%),
    linear-gradient(120deg,transparent 55%,rgba(0,0,0,.22));
}
.file-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 258px;
  gap:clamp(24px,4vw,56px);
  align-items:start;
}
.file-main{min-width:0;}
.file-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:22px;
}
.file-chip{
  padding:5px 9px;
  border:1px solid var(--hair-2);
  border-radius:2px;
  background:rgba(0,0,0,.18);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.file-chip--accent{
  border-color:var(--accent);
  color:var(--accent);
}
.file-coords{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.14em;
  color:var(--faint);
  white-space:nowrap;
}
.file-header h1{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:clamp(42px,7.2vw,92px);
  font-weight:400;
  line-height:.88;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-wrap:balance;
}
.file-header h1 span{color:var(--accent);}
.file-header p{
  max-width:68ch;
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:#b6ae9f;
  text-wrap:pretty;
}

.file-aside{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-left:22px;
  border-left:1px solid var(--hair);
}
.file-aside-label{
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--faint);
}
.file-ref{
  display:flex;
  flex-direction:column;
  margin:0;
}
.file-ref > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--hair);
}
.file-ref dt{
  font-family:var(--font-mono);
  font-size:7.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
}
.file-ref dd{
  margin:0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--paper);
  text-align:right;
}
.file-ref dd.is-live{color:var(--green);}
.file-ref dd.is-live::before{
  content:"";
  display:inline-block;
  width:4px;
  height:4px;
  margin-right:6px;
  border-radius:50%;
  background:currentColor;
  vertical-align:middle;
}
.stamp{
  align-self:flex-start;
  margin-top:6px;
  padding:5px 11px;
  border:2px double var(--accent);
  color:var(--accent);
  font-family:var(--font-display);
  font-size:21px;
  letter-spacing:.18em;
  line-height:1;
  text-transform:uppercase;
  transform:rotate(-7deg);
  opacity:.88;
}

.summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--hair);
}
.summary > span,
.summary-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 11px;
  border:1px solid var(--hair-2);
  border-radius:2px;
  background:rgba(0,0,0,.12);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
}
.summary b{
  color:var(--paper);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.summary-chip{
  cursor:pointer;
  transition:color .22s ease,border-color .22s ease,background .22s ease,transform .22s var(--ease);
}
.summary-chip:hover{
  color:var(--paper);
  border-color:var(--line-strong);
  background:rgba(96,147,214,.06);
}
.summary-chip.is-active{
  background:var(--bureau);
  border-color:var(--bureau);
  color:#0a0a0c;
}
.summary-chip.is-active b{color:#0a0a0c;}
.summary-chip:active{transform:translateY(1px);}

.filter-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 2px 16px;
}
.filter-status{
  margin:0;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.filter-hint{
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
}

.empty-state{
  margin:28px 0;
  padding:28px;
  border:1px dashed var(--hair-2);
  text-align:center;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ============================================================
   GANG SELECTION
   ============================================================ */
.gangs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;
}

.gang-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid var(--hair);
  border-radius:12px;
  background:linear-gradient(180deg,#111116,#0a0a0d);
  cursor:pointer;
  outline:none;
  transition:transform .35s var(--ease),border-color .35s ease,box-shadow .35s ease;
}
.gang-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.08),transparent 60%);
  opacity:0;
  transition:opacity .35s ease;
}
.gang-card:hover::after,.gang-card:focus-visible::after{opacity:1;}
.gang-card:hover,.gang-card:focus-visible{
  transform:translateY(-5px);
  border-color:var(--gang-color);
  box-shadow:0 16px 30px -20px #000;
}
.gang-card:focus-visible{box-shadow:0 0 0 2px var(--bureau),0 16px 30px -20px #000;}

.gang-art{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#08080a;
}
.gang-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.9) contrast(1.04) brightness(.8);
  transition:transform .7s var(--ease),filter .4s ease;
}
.gang-card:hover .gang-art img,
.gang-card:focus-visible .gang-art img{transform:scale(1.045);filter:saturate(1) contrast(1.06) brightness(.92);}
.gang-art::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to top,rgba(10,10,13,.96) 0%,rgba(10,10,13,.14) 54%,transparent 100%),
    linear-gradient(90deg,rgba(0,0,0,.32),transparent 42%);
}
.gang-index{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  padding:4px 7px;
  border:1px solid currentColor;
  border-radius:2px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  color:var(--gang-color);
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.gang-info{
  position:relative;
  z-index:2;
  padding:20px 20px 22px;
}
.gang-kicker{
  margin:0 0 7px;
  color:var(--gang-color);
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.gang-info h3{
  margin:0 0 9px;
  font-family:var(--font-display);
  font-size:32px;
  font-weight:400;
  line-height:.98;
  letter-spacing:.04em;
  text-transform:uppercase;
  overflow-wrap:break-word;
}
.gang-info p{
  margin:0 0 16px;
  font-size:12.5px;
  line-height:1.7;
  color:#b8b0a0;
}
.gang-meta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--hair);
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}
.gang-meta span b{color:var(--paper);font-weight:600;}
.gang-members-count{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  color:var(--gang-color);
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.gang-members-count .icon{width:14px;height:14px;}
.gang-card:hover .gang-members-count .icon{transform:translateX(4px);}

/* ============================================================
   GANG MEMBERS VIEW
   ============================================================ */
.gang-view[hidden]{display:none;}
.view-enter{animation:view-in .4s var(--ease) both;}

.gang-back-row{margin-bottom:16px;}
.gang-back-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border:1px solid var(--hair-2);
  border-radius:3px;
  background:transparent;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.16em;
  font-weight:600;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.gang-back-btn .icon{width:13px;height:13px;}
.gang-back-btn:hover{
  color:var(--accent,var(--bureau));
  border-color:var(--line-strong);
  background:rgba(96,147,214,.05);
}
.gang-back-btn:hover .icon{transform:translateX(-3px);}

.gang-banner{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:28px;
  align-items:center;
  margin-bottom:26px;
  padding:20px;
  border:1px solid var(--hair);
  border-radius:12px;
  background:linear-gradient(135deg,#121217,#09090c);
}
.gang-banner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 15% 50%,var(--accent),transparent 56%);
  opacity:.1;
}
.gang-banner::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  height:1px;
  background:var(--accent);
  opacity:.5;
}
.gang-banner-art{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid var(--hair-2);
  border-radius:8px;
}
.gang-banner-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.92) contrast(1.04) brightness(.82);}
.gang-banner-content{position:relative;z-index:1;}
.gang-banner-content h2{
  margin:4px 0 10px;
  font-family:var(--font-display);
  font-size:clamp(30px,4.5vw,50px);
  font-weight:400;
  line-height:.94;
  letter-spacing:.035em;
  text-transform:uppercase;
  overflow-wrap:break-word;
}
.gang-banner-content p{
  max-width:60ch;
  margin:0 0 14px;
  font-size:13px;
  line-height:1.72;
  color:#b8b0a0;
}
.gang-banner .gang-kicker{color:var(--accent);}
.gang-banner-meta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}
.gang-banner-meta span b{color:var(--paper);font-weight:600;}

/* ============================================================
   REPORT CARDS
   ============================================================ */
.reports{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:22px;
}
/* four-up civil records on wide screens so the small archive reads as one row */
.dossier[data-kind="citizen"] .reports{
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
}

.report{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--hair);
  border-radius:12px;
  background:linear-gradient(175deg,#111116 0%,#09090c 100%);
  cursor:pointer;
  outline:none;
  transition:transform .35s var(--ease),border-color .35s ease,box-shadow .35s ease;
}
.report::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:4;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .5s var(--ease);
}
.report:hover::before,.report:focus-visible::before{transform:scaleX(1);}
.report::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(96,147,214,.075),transparent 62%);
  opacity:0;
  transition:opacity .35s ease;
}
.report:hover::after,.report:focus-visible::after{opacity:1;}
.report:hover,.report:focus-visible{
  transform:translateY(-4px);
  border-color:var(--accent,var(--bureau));
  box-shadow:0 16px 28px -20px #000;
}
.report:focus-visible{box-shadow:0 0 0 2px var(--bureau),0 16px 28px -20px #000;}

.mug{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#070709;
}
.mug::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,var(--accent,var(--bureau)),transparent 62%);
  opacity:.13;
}
.mug-photo{position:absolute;inset:0;}
.mug-photo::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:44px;
  z-index:0;
  background:repeating-linear-gradient(to bottom,transparent 0 30px,rgba(255,255,255,.14) 30px 31px);
  -webkit-mask-image:linear-gradient(to right,#000 0 16px,transparent 44px);
  mask-image:linear-gradient(to right,#000 0 16px,transparent 44px);
  opacity:.72;
}
.mug-photo img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.04) saturate(.95);
  transition:transform .8s var(--ease);
}
.report:hover .mug-photo img{transform:scale(1.035);}
.mug::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,rgba(10,9,12,.96) 0%,rgba(10,9,12,.12) 38%,transparent 62%);
}
.mug-label{
  position:absolute;
  top:11px;
  left:11px;
  z-index:2;
  padding:4px 7px;
  border:1px solid var(--hair-2);
  border-radius:2px;
  background:rgba(0,0,0,.6);
  color:rgba(255,255,255,.68);
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.mug-shots{
  position:absolute;
  top:11px;
  right:11px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border-radius:2px;
  background:var(--accent,var(--bureau));
  color:#0a0a0c;
  font-family:var(--font-mono);
  font-size:8px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.mug-shots::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
}
.mug-open{
  position:absolute;
  right:11px;
  bottom:11px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 9px;
  border-radius:2px;
  background:var(--accent,var(--bureau));
  color:#0a0a0c;
  font-family:var(--font-mono);
  font-size:8px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .28s ease,transform .28s var(--ease);
}
.mug-open .icon{width:11px;height:11px;}
.report:hover .mug-open,.report:focus-visible .mug-open{opacity:1;transform:none;}

.report-body{
  position:relative;
  z-index:2;
  display:flex;
  flex:1;
  flex-direction:column;
  padding:15px 18px 19px;
}
.report-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.case{
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.status{
  padding:4px 8px;
  border:1px solid currentColor;
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:7.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.2;
  white-space:nowrap;
}
.status.high{color:#ff8b8b;border-color:rgba(255,139,139,.55);background:rgba(255,80,80,.05);}
.status.critical{color:#ff6469;border-color:#ff6469;background:rgba(255,45,45,.1);}
.status.medium{color:#ffc27f;border-color:rgba(255,194,127,.55);background:rgba(255,180,80,.05);}
.status.monitored{color:#85cbff;border-color:rgba(133,203,255,.55);background:rgba(100,180,255,.05);}
.status.charged{color:#ffa06a;border-color:rgba(255,160,106,.55);background:rgba(255,130,60,.05);}
.status.cleared{color:#7fe3a2;border-color:rgba(127,227,162,.55);background:rgba(100,230,140,.05);}
.status.active{color:#ff8b8b;border-color:rgba(255,139,139,.55);background:rgba(255,80,80,.05);}

.report-body h2{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-size:26px;
  font-weight:400;
  line-height:.98;
  letter-spacing:.03em;
  text-transform:uppercase;
  overflow-wrap:break-word;
  text-wrap:balance;
}
.alias{
  margin:0 0 12px;
  color:var(--accent,var(--bureau));
  font-family:var(--font-mono);
  font-size:8.5px;
  line-height:1.6;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.brief{
  margin:0;
  font-size:12.5px;
  line-height:1.7;
  color:#b8b0a0;
}
.view-file{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:16px;
  color:var(--accent,var(--bureau));
  font-family:var(--font-mono);
  font-size:8.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.view-file .icon{width:13px;height:13px;}
.report:hover .view-file .icon{transform:translateX(4px);}

/* ============================================================
   CASE FILE MODAL
   ============================================================ */
.file-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  overflow-y:auto;
  padding:clamp(16px,3vw,36px);
  background:rgba(2,2,4,.9);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s;
  --accent:var(--bureau);
}
.file-overlay.is-open{opacity:1;visibility:visible;}
.file-overlay[hidden]{display:none;}

.file-modal{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:1120px;
  margin:auto;
  padding:0 clamp(18px,3.4vw,40px) clamp(22px,4vw,38px);
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:linear-gradient(160deg,#141319,#08080b);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.04);
  opacity:0;
  transform:translateY(26px) scale(.99);
  transition:opacity .3s var(--ease),transform .45s var(--ease);
}
.file-overlay.is-open .file-modal{opacity:1;transform:none;}
.file-modal::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.8;
}
.file-close{
  position:sticky;
  top:10px;
  align-self:flex-end;
  z-index:10;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  margin:10px calc(12px - clamp(18px,3.4vw,40px)) -46px 0;
  padding:0;
  border:1px solid var(--hair);
  border-radius:3px;
  background:rgba(8,8,11,.58);
  color:var(--muted);
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:color .22s ease,border-color .22s ease,background .22s ease;
}
.file-close .icon{width:18px;height:18px;}
.file-close:hover{color:var(--paper);border-color:var(--hair-2);background:rgba(255,255,255,.03);}

.file-body{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:clamp(24px,4vw,48px);
}
.fm-chrome{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:11px;
  padding:14px 46px 14px 0;
  border-bottom:1px solid var(--hair);
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.fm-chrome-file b{color:var(--paper);font-weight:600;}
.fm-chrome-rule{width:1px;height:11px;background:var(--hair-2);}
.fm-chrome-unit{color:var(--faint);}
.fm-chrome-clearance{
  margin-left:auto;
  padding:4px 8px;
  border:1px solid var(--hair-2);
  border-radius:2px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:7.5px;
  letter-spacing:.12em;
  line-height:1.2;
  text-transform:uppercase;
  white-space:nowrap;
}

.fm-photo{
  position:sticky;
  top:24px;
  align-self:start;
  padding-top:8px;
}
.fm-photo-frame{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid var(--hair-2);
  border-radius:8px;
  background:
    radial-gradient(ellipse at 50% 28%,rgba(96,147,214,.12),transparent 58%),
    #060608;
  box-shadow:0 12px 24px -16px #000;
}
.fm-photo-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,rgba(5,5,7,.35),transparent 48%);
  mix-blend-mode:overlay;
}
.fm-photo-frame.is-3d::after{
  background:linear-gradient(to top,rgba(5,5,7,.52),transparent 38%);
  mix-blend-mode:normal;
}
.fm-photo-frame img.fm-face{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.04) saturate(.95);
  transition:opacity .25s ease;
}
.fm-photo-frame img.fm-face.is-hidden{display:none;}
.fm-photo-frame.is-loading img.fm-face{opacity:.42;}
.fm-photo-frame.is-loading::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  z-index:4;
  width:22px;
  height:22px;
  margin:-11px 0 0 -11px;
  border:2px solid var(--hair-2);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:fm-spin .9s linear infinite;
}
@keyframes fm-spin{to{transform:rotate(360deg);}}
.fm-photo-frame .fm-model{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  background:transparent;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.fm-photo-frame.is-3d .fm-model{opacity:1;pointer-events:auto;}
.fm-photo-toggle{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:3px;
  background:rgba(6,6,8,.78);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.fm-photo-toggle:hover,.fm-photo-toggle:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
  outline:none;
}
.fm-photo-toggle[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);}
.fm-photo-toggle:disabled{cursor:wait;opacity:.72;}
.fm-toggle-mark{
  width:6px;
  height:6px;
  border:1px solid currentColor;
  transform:rotate(45deg);
}
.fm-photo-toggle[aria-pressed="true"] .fm-toggle-mark{background:currentColor;}
.fm-photo-label{
  display:block;
  margin-top:10px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.fm-photo-credit{
  display:block;
  margin-top:5px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.72;
}
@media (prefers-reduced-motion:reduce){
  .fm-photo-frame.is-loading::before{animation:none;}
}

.fm-info{min-width:0;padding-top:8px;}
.fm-info h2{
  margin:8px 0 6px;
  font-family:var(--font-display);
  font-size:clamp(34px,5vw,56px);
  font-weight:400;
  line-height:.94;
  letter-spacing:.035em;
  text-transform:uppercase;
  overflow-wrap:break-word;
  text-wrap:balance;
}
.fm-info .alias{
  margin:0 0 20px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.fm-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:28px 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--hair);
  font-family:var(--font-display);
  font-size:19px;
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.fm-h .photo-count{
  padding:3px 7px;
  border:1px solid var(--accent);
  border-radius:2px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:8px;
  font-weight:600;
  letter-spacing:.1em;
  white-space:nowrap;
}
.summary-text{
  max-width:68ch;
  margin:0;
  font-size:13.5px;
  line-height:1.85;
  color:#c6beae;
  text-wrap:pretty;
}

.meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  overflow:hidden;
  margin-top:18px;
  border:1px solid var(--hair);
  border-radius:6px;
  background:var(--hair);
}
.meta > div{background:#0a0a0d;padding:10px 12px;}
.meta .k{
  display:block;
  margin-bottom:3px;
  color:var(--faint);
  font-family:var(--font-mono);
  font-size:7.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.meta .v{font-size:11.5px;font-weight:600;letter-spacing:.01em;color:var(--paper);}

.charges,.assoc,.timeline{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}
.charges li,.assoc li{
  position:relative;
  padding-left:17px;
  font-size:12.5px;
  line-height:1.65;
  color:#b8b0a0;
}
.charges li::before{
  content:"";
  position:absolute;
  top:.62em;
  left:2px;
  width:5px;
  height:5px;
  border:1px solid var(--accent);
  transform:rotate(45deg);
}
.assoc li::before{
  content:"";
  position:absolute;
  top:.68em;
  left:3px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
}

.timeline li{
  position:relative;
  display:grid;
  grid-template-columns:76px 1fr;
  gap:12px;
  padding-left:13px;
  font-size:12px;
  line-height:1.65;
}
.timeline li::before{
  content:"";
  position:absolute;
  top:.58em;
  left:0;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,255,255,.045);
}
.tl-date{
  padding-top:2px;
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.tl-text{color:#b8b0a0;}

.fm-note{
  margin:26px 0 0;
  padding:14px 16px;
  border-left:1px solid var(--accent);
  border-radius:0 4px 4px 0;
  background:rgba(255,255,255,.03);
  font-size:12.5px;
  line-height:1.75;
  color:#c8c0b1;
}
.fm-note strong{color:var(--accent);font-weight:700;}

.photo-strip{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(94px,1fr));
  gap:8px;
  margin-bottom:14px;
}
.photo-thumb{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  padding:0;
  border:1px solid var(--hair-2);
  border-radius:5px;
  background:#08080a;
  cursor:pointer;
  transition:transform .25s var(--ease),border-color .25s ease,box-shadow .25s ease;
}
.photo-thumb svg{display:block;width:100%;height:100%;filter:brightness(1.25) contrast(1.03);transition:transform .5s var(--ease);}
.photo-thumb:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.8);
}
.photo-thumb:hover svg{transform:scale(1.04);}
.photo-thumb .thumb-num{
  position:absolute;
  top:4px;
  left:4px;
  padding:2px 5px;
  border-radius:2px;
  background:rgba(0,0,0,.72);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:8px;
  font-weight:600;
  letter-spacing:.04em;
}
.open-gallery-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border:0;
  border-radius:3px;
  background:var(--accent);
  color:#0a0a0c;
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:filter .22s ease,transform .22s var(--ease);
}
.open-gallery-btn .icon{width:14px;height:14px;}
.open-gallery-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.open-gallery-btn:hover .icon{transform:translateX(4px);}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-y:auto;
  padding:clamp(56px,7vh,82px) clamp(16px,3vw,28px) 22px;
  background:radial-gradient(ellipse at 50% 20%,rgba(96,147,214,.045),transparent 60%),rgba(2,2,4,.965);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s;
  --accent:var(--bureau);
}
.gallery-overlay.is-open{opacity:1;visibility:visible;}
.gallery-overlay[hidden]{display:none;}

.gallery-stage{
  position:relative;
  width:min(100%,1080px);
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:auto;
}
.gallery-close{
  position:absolute;
  top:-44px;
  right:0;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid transparent;
  border-radius:3px;
  background:transparent;
  color:#a8a294;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.gallery-close .icon{width:20px;height:20px;}
.gallery-close:hover{color:#fff;border-color:var(--hair-2);}
.gallery-counter{
  position:absolute;
  top:-40px;
  left:0;
  display:flex;
  align-items:center;
  gap:8px;
  color:#a8a294;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
}
.gallery-counter b{color:var(--accent);font-weight:600;}
.counter-rule{color:var(--faint);}
.gallery-nav{
  position:absolute;
  top:50%;
  z-index:5;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(10,10,12,.8);
  color:#fff;
  cursor:pointer;
  transform:translateY(-50%);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .25s var(--ease);
}
.gallery-nav .icon{width:19px;height:19px;}
.gallery-nav:hover{
  background:var(--accent);
  color:#0a0a0c;
  border-color:var(--accent);
  transform:translateY(-50%) scale(1.06);
}
.gallery-prev{left:-70px;}
.gallery-next{right:-70px;}

.gallery-image{
  width:min(100%,calc((100svh - 270px) * 1.3333));
  aspect-ratio:4/3;
  margin:0 auto;
  overflow:hidden;
  border:1px solid var(--hair-2);
  border-radius:8px;
  background:#000;
  box-shadow:0 16px 30px -20px #000;
}
.gallery-image svg{display:block;width:100%;height:100%;filter:brightness(1.3) contrast(1.03);}
.gallery-caption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:0 3px;
}
.gallery-caption-text{
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.55;
  letter-spacing:.02em;
}
.gallery-caption-text::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:8px;
  border-radius:50%;
  background:var(--accent);
  vertical-align:2px;
}
.gallery-caption-meta{
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:8.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.gallery-strip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 0 8px;
  scrollbar-width:thin;
}
.gallery-strip::-webkit-scrollbar{height:6px;}
.gallery-strip::-webkit-scrollbar-thumb{background:#232b36;border-radius:3px;}
.gallery-thumb{
  flex:0 0 104px;
  aspect-ratio:4/3;
  overflow:hidden;
  padding:0;
  border:2px solid transparent;
  border-radius:4px;
  background:#08080a;
  opacity:.44;
  cursor:pointer;
  transition:opacity .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.gallery-thumb svg{display:block;width:100%;height:100%;filter:brightness(1.28) contrast(1.03);}
.gallery-thumb:hover{opacity:.75;}
.gallery-thumb.active{
  opacity:1;
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}

/* ============================================================
   FOOTER
   ============================================================ */
.dossier-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
  margin-top:52px;
  padding-top:24px;
  border-top:1px solid var(--hair);
  color:var(--faint);
  font-family:var(--font-mono);
  font-size:8.5px;
  line-height:1.9;
  letter-spacing:.12em;
}
.dossier-foot p{margin:0;}
.dossier-foot a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  color:var(--muted);
  text-decoration:none;
  transition:color .25s ease,border-color .25s ease;
}
.dossier-foot .icon{width:13px;height:13px;}
.dossier-foot a:hover{color:var(--bureau);border-color:var(--line-strong);}
.dossier-foot a:hover .icon{transform:translateX(-3px);}

/* ============================================================
   REVEAL + MOTION
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms);
}
.reveal:not(.is-visible){will-change:opacity,transform;}
.reveal.is-visible{opacity:1;transform:none;}

@keyframes title-rise{
  from{transform:translateY(112%);}
  to{transform:translateY(0);}
}
@keyframes panel-in{
  from{opacity:0;}
  to{opacity:var(--panel-op,.62);}
}
@keyframes card-rise{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes view-in{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

/* cross-document page transition where supported */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:vt-out .22s ease both;}
::view-transition-new(root){animation:vt-in .42s var(--ease) both;}
@keyframes vt-out{to{opacity:0;transform:scale(.996);}}
@keyframes vt-in{from{opacity:0;transform:scale(1.004);}to{opacity:1;transform:none;}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .stage-panel{width:39%;}
  .file-grid{grid-template-columns:minmax(0,1fr) 230px;}
  .gallery-prev{left:-48px;}
  .gallery-next{right:-48px;}
}

@media (max-width:920px){
  .stage-panel{width:46%;--panel-op:.42;}
  .stage-rail{display:none;}
  .file-grid{grid-template-columns:1fr;row-gap:0;}
  .file-aside{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:20px;
    margin-top:24px;
    padding:18px 0 0;
    border-left:0;
    border-top:1px solid var(--hair);
  }
  .file-aside-label{width:100%;}
  .file-ref{
    flex:1;
    min-width:240px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 24px;
  }
  .stamp{margin:0;}
}

@media (max-width:820px){
  .file-body{grid-template-columns:1fr;gap:26px;}
  .fm-photo{position:static;max-width:280px;margin:0 auto;}
  .fm-chrome{padding-right:44px;}
  .gallery-prev{left:6px;}
  .gallery-next{right:6px;}
  body.is-gang-view .file-header{display:none;}
}

@media (max-width:760px){
  .topbar{gap:10px;min-height:64px;padding:10px 16px;}
  .brand .seal{width:38px;height:38px;}
  .txt{font-size:18px;}
  .txt small{font-size:8px;max-width:270px;}
  .topbar-status{padding:7px 9px;font-size:8px;}
  .topbar-status .clock{display:none;}
  .back span{display:none;}
  .back{padding:9px;}

  .stage{
    min-height:calc(100svh - 65px);
    padding:56px 18px 92px;
  }
  .stage-panel{width:54%;--panel-op:.3;}
  .stage-title{font-size:clamp(54px,15vw,78px);margin-top:22px;}
  .stage-lede{max-width:42ch;font-size:14px;margin:20px auto 26px;}
  .stage-file{font-size:8px;padding:7px 11px;gap:10px;}
  .stage-file-no::before{margin-right:10px;}
  .stage-options{font-size:8px;margin-top:24px;}
  .stage-bottom{display:none;}
  .btn{padding:15px 21px;font-size:11px;gap:14px;}

  .modal-head{gap:14px;}
  .modal-seal{width:54px;height:54px;}
  .modal-heading h2{font-size:clamp(30px,7vw,42px);}
  .modal-top{font-size:7.5px;}
  .modal-stamp{display:none;}
  .modal-foot{flex-direction:column;align-items:flex-start;gap:12px;}

  .file-header{padding:22px;}
  .file-strip{margin-bottom:18px;}
  .file-coords{width:100%;margin-left:0;}
  .file-header h1{font-size:clamp(40px,9vw,60px);}
  .file-header p{font-size:13px;}
  .filter-hint{display:none;}

  .gang-banner{grid-template-columns:1fr;gap:16px;}
  .gang-banner-content h2{font-size:clamp(28px,6vw,40px);}
  .reports{grid-template-columns:1fr;}
  .gangs{grid-template-columns:1fr;}

  .fm-chrome{gap:8px;font-size:7.5px;}
  .fm-chrome-unit{display:none;}
  .fm-chrome-rule{display:none;}
  .fm-h{margin-top:24px;}
  .summary-text{font-size:13px;}
  .meta{grid-template-columns:1fr 1fr;}
  .timeline li{grid-template-columns:68px 1fr;gap:10px;}
  .gallery-image{width:100%;}
  .gallery-close{top:-36px;}
  .gallery-counter{top:-32px;}
  .gallery-caption-text{font-size:10.5px;}
  .gallery-thumb{flex-basis:88px;}
  .dossier-foot{flex-direction:column;align-items:flex-start;gap:12px;}
}

@media (max-width:560px){
  .txt small{display:none;}
  .topbar-status{display:none;}
  .back{padding:8px;}

  .stage-panel{width:62%;--panel-op:.24;}
  .stage-inner::before{
    inset:-8% -12%;
    background:radial-gradient(ellipse at 50% 48%,rgba(7,7,10,.58) 0%,rgba(7,7,10,.3) 46%,rgba(7,7,10,0) 74%);
  }
  .stage-panel--gangster{left:-8%;}
  .stage-panel--citizen{right:-8%;}
  .stage-title{font-size:clamp(50px,17vw,68px);letter-spacing:.035em;}
  .stage-lede{max-width:36ch;}
  .stage-file{flex-direction:column;gap:5px;padding:8px 12px;text-align:center;}
  .stage-file-no::before{display:none;}
  .stage-file-no{font-size:7.5px;}
  .stage-file-label{font-size:7.5px;}
  .stage-options{gap:10px;font-size:7.5px;}

  .overlay{padding:12px;}
  .modal{padding-left:14px;padding-right:14px;border-radius:10px;}
  .close{margin-right:-4px;}
  .modal-head{align-items:flex-start;}
  .modal-seal{width:44px;height:44px;}
  .modal-heading h2{font-size:clamp(28px,8vw,38px);}
  .modal-heading p{font-size:8px;letter-spacing:.12em;}
  .modal-top{padding-right:40px;}
  .modal-secure{display:none;}
  .cards{grid-template-columns:1fr;gap:14px;}
  .card-art{aspect-ratio:16/9;}
  .card h3{font-size:33px;}
  .card-index{font-size:68px;}
  .card-stamp{font-size:16px;top:38px;}
  .modal-foot{padding-top:14px;}
  .fine{font-size:7.5px;}
  .esc-hint{display:none;}

  .dossier{padding-top:20px;}
  .file-header{padding:18px;}
  .file-header h1{font-size:clamp(36px,10vw,50px);}
  .file-header p{font-size:12.5px;line-height:1.75;}
  .file-strip{gap:6px;margin-bottom:18px;}
  .file-chip{padding:5px 8px;letter-spacing:.13em;}
  .file-aside{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:20px;
    padding:16px 0 0;
    border-top:1px solid var(--hair);
  }
  .file-aside-label{display:block;margin:0;}
  .file-ref{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--hair);
    border-radius:6px;
    background:var(--hair);
  }
  .file-ref > div{
    display:block;
    padding:9px 11px;
    border:0;
    background:#0b0b0f;
  }
  .file-ref dt{font-size:7px;letter-spacing:.12em;}
  .file-ref dd{margin-top:2px;text-align:left;font-size:10.5px;}
  .stamp{display:none;}
  .summary{gap:6px;margin-top:22px;}
  .summary > span,.summary-chip{padding:7px 8px;font-size:8px;}
  .filter-bar{margin-bottom:12px;}
  .filter-status{font-size:8px;}

  .report-body{padding:14px 16px 18px;}
  .report-body h2{font-size:24px;}
  .mug-open{opacity:1;transform:none;}

  .file-modal{padding-left:14px;padding-right:14px;border-radius:10px;}
  .file-close{top:8px;margin-right:-2px;}
  .fm-chrome{padding:12px 40px 12px 0;}
  .fm-photo{max-width:240px;}
  .fm-photo.is-3d{max-width:min(320px,100%);width:100%;}
  .fm-info h2{font-size:clamp(30px,8vw,42px);}
  .meta .v{font-size:10.5px;}
  .fm-h{font-size:17px;letter-spacing:.1em;}
  .photo-strip{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));}
  .open-gallery-btn{width:100%;justify-content:center;}
  .gallery-overlay{padding:62px 10px 14px;align-items:flex-start;}
  .gallery-stage{margin:0 auto;}
  .gallery-nav{width:40px;height:40px;}
  .gallery-nav .icon{width:16px;height:16px;}
  .gallery-close{top:-34px;}
  .gallery-counter{top:-30px;font-size:9px;}
  .gallery-caption{flex-direction:column;align-items:flex-start;gap:5px;}
  .gallery-thumb{flex-basis:76px;}
}

/* ============================================================
   LEGIBILITY PASS — keep the archive microtype, raise the floor
   ============================================================ */
.topbar-status,.txt small{font-size:10px;}
.back{font-size:10.5px;}
.stage-file,.stage-options,.stage-bottom{font-size:9.5px;}
.card-meta,.card-tag,.modal-top,.kbd{font-size:9.5px;}
.case,.status,.mug-label,.mug-shots,.mug-open,.gang-index,.gang-kicker,
.gang-meta,.gang-banner-meta,.file-chip,.file-coords,
.file-aside-label,.meta .k,.fm-chrome,.fm-photo-label,
.fm-h .photo-count,.photo-thumb .thumb-num{font-size:10px;}
.alias,.view-file{font-size:10px;}
.summary > span,.summary-chip{font-size:10px;}
.file-ref dt{font-size:9.5px;}
.file-ref dd{font-size:11.5px;}
.filter-status,.filter-hint,.gang-back-btn,.gang-members-count,
.open-gallery-btn,.esc-hint,.fine,kbd{font-size:10.5px;}
.fine{letter-spacing:.04em;line-height:1.8;}
.fm-chrome-clearance{font-size:9px;}
.gallery-counter{font-size:11px;}
.gallery-caption-meta{font-size:10px;}
.dossier-foot{font-size:10px;letter-spacing:.04em;color:var(--muted);}
.dossier-foot p,.dossier-foot a{line-height:1.75;}

@media (max-width:760px){
  .topbar-status{font-size:9px;}
  .stage-file,.stage-options{font-size:9px;}
  .modal-top{font-size:9px;}
  .fm-chrome{font-size:8.5px;}
  .fm-chrome-clearance{font-size:8.5px;}
  .gallery-caption-text{font-size:11px;}
}

@media (max-width:560px){
  .summary > span,.summary-chip{font-size:9.5px;}
  .filter-status{font-size:10px;}
  .file-ref dt{font-size:9px;}
  .file-ref dd{font-size:11.5px;}
  .meta .v{font-size:11px;}
  .gallery-counter{font-size:10.5px;}
  .fine{font-size:9.5px;}
  .stage-file-no,.stage-file-label,.stage-options{font-size:8.5px;}
}

@media (hover:none){
  .mug-open{opacity:1;transform:none;}
  .card-scan{display:none;}
}

@media (max-width:380px){
  .topbar{padding:10px 12px;gap:8px;}
  .brand{gap:9px;}
  .brand .seal{width:32px;height:32px;}
  .txt{font-size:16px;letter-spacing:.06em;}
  .back{padding:7px;}
  .dossier{padding-left:12px;padding-right:12px;}
  .file-header{padding:15px;}
  .file-header h1{font-size:clamp(32px,10.5vw,46px);}
  .summary > span,.summary-chip{padding:6px 7px;font-size:9px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none;}
  .stage-panel img{transform:none;}
  .stage-title-line > span{transform:none;}
}

@media (prefers-contrast:more){
  :root{
    --muted:#c6bfb0;
    --faint:#a8a091;
    --hair:rgba(255,255,255,.18);
    --hair-2:rgba(255,255,255,.3);
  }
  .file-header p,.brief,.gang-info p,.gang-banner-content p{color:#d3cbbd;}
}

/* ============================================================
   ADMIN-PUBLISHED RECORDS
   Uploaded portraits and evidence photos keep the dossier frame.
   ============================================================ */
.status.watch{
  color:#85cbff;
  border-color:rgba(133,203,255,.55);
  background:rgba(100,180,255,.05);
}
.status.wanted{
  color:#ff6469;
  border-color:#ff6469;
  background:rgba(255,45,45,.1);
}
.filter-loading{
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:7px 10px;
  border:1px solid var(--hair);
  border-radius:2px;
  color:var(--faint);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.foot-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px 18px;
}
.foot-links > a:first-child{
  color:var(--faint);
  font-size:8px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.photo-thumb img,
.gallery-thumb img,
.gallery-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.98) contrast(1.05) saturate(.9);
  transition:transform .5s var(--ease);
}
.photo-thumb:hover img{transform:scale(1.04);}
.gallery-thumb:hover img{opacity:.82;}
.gallery-image{position:relative;}
.gallery-image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(to top,rgba(5,5,7,.38),transparent 42%),
    repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.022) 3px 4px);
  mix-blend-mode:screen;
  opacity:.45;
}
.photo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:120px;
  background:
    radial-gradient(ellipse at 50% 35%,rgba(96,147,214,.12),transparent 65%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px),
    #08080b;
  color:var(--faint);
  font-family:var(--font-mono);
  font-size:7px;
  letter-spacing:.12em;
  text-align:center;
  text-transform:uppercase;
}
.mug-photo .photo-placeholder{position:absolute;inset:0;}
.fm-photo-frame .photo-placeholder{position:absolute;inset:0;}

.admin-link{
  color:var(--faint);
  font-family:var(--font-mono);
  font-size:8px;
  letter-spacing:.1em;
  text-decoration:none;
  text-transform:uppercase;
  transition:color .25s ease;
}
.admin-link:hover{color:var(--bureau);}
.modal-foot .admin-link{
  order:2;
  margin-left:auto;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.modal-foot .admin-link:hover{border-color:var(--line-strong);}
.modal-foot .esc-hint{order:3;}

@media (max-width:640px){
  .foot-links{justify-content:flex-start;}
  .dossier-foot{flex-direction:column;align-items:flex-start;gap:12px;}
  .modal-foot .admin-link{margin-left:0;}
}