/* QUARANTINE-9 // Incident Dossier — page styles. Fonts live in fonts.css. */

:root{
  --navy-black:#161d27;
  --navy:#1a232f;
  --navy-mid:#212c3a;
  --paper:#e7eaf0;
  --paper-dim:#a6afbd;
  --steel:#5b6472;
  --steel-bright:#8993a3;
  --amber:#e0a13c;
  --amber-bright:#f4bc55;
  --red:#b7362b;
  --red-bright:#e0453a;
  --fungal-brown:#b39066;
  --fungal-brown-bright:#cdb188;
  --mil-green:#3f5636;
  --mil-green-bright:#71915a;
  --black-fc:#0c0e12;
  --line:#303c4d;
  --shadow: 0 10px 30px rgba(0,0,0,0.55);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--navy);
  background-image:
    radial-gradient(ellipse at top left, rgba(224,161,60,0.035), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(183,54,43,0.04), transparent 55%);
  color:var(--paper);
  font-family:'Source Serif 4', Georgia, serif;
  line-height:1.6;
}

/* faint scanline / grain */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
  z-index:2;
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--amber);
  opacity:0.9;
}

h1,h2,h3{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin:0;
  color:var(--paper);
}

a{color:var(--amber);}

/* ===== NAV ===== */
nav{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:0.6rem;
  background:var(--navy-black);
  border-bottom:2px solid var(--line);
  padding:0 1.2rem;
  overflow-x:auto;
}
nav .brand{
  display:flex; align-items:center; gap:0.55rem;
  padding:0.5rem 0.8rem 0.5rem 0;
  border-right:1px solid var(--line);
  margin-right:0.3rem;
  white-space:nowrap;
}
nav .brand img{ height:30px; width:auto; display:block; }
nav .brand span{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.14em;
  color:var(--steel-bright);
  text-transform:uppercase;
}
nav a.navlink{
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--paper-dim);
  text-decoration:none;
  padding:0.9rem 1rem;
  border-bottom:3px solid transparent;
  white-space:nowrap;
  transition:color 0.2s, border-color 0.2s, background 0.2s;
}
nav a.navlink:hover{ color:var(--amber-bright); border-bottom-color:var(--amber); background:rgba(224,161,60,0.06);}

/* ===== HERO ===== */
header.hero{
  position:relative;
  z-index:3;
  padding:5.5rem 1.5rem 3rem;
  max-width:1000px; margin:0 auto;
  text-align:left;
  overflow:hidden;
}
.hero-logo-wm{
  position:absolute;
  top:-6%; right:12%;
  width:520px; max-width:60vw;
  opacity:0.07;
  z-index:-1;
  pointer-events:none;
}
.file-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  color:var(--red-bright);
  letter-spacing:0.15em;
  border:1px solid var(--red);
  display:inline-block;
  padding:0.25rem 0.6rem;
  margin-bottom:1.4rem;
}
h1.title{
  font-size:clamp(3rem, 9vw, 6.2rem);
  line-height:0.92;
  font-weight:700;
  color:var(--paper);
  text-shadow: 0 0 40px rgba(224,161,60,0.14);
}
h1.title span{ color:var(--red-bright); }
.subtitle{
  font-family:'Oswald', sans-serif;
  font-size:1.1rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--amber);
  margin-top:0.6rem;
}
.old-name{
  margin-top:1.6rem;
  font-family:'Source Serif 4', serif;
  font-style:italic;
  color:var(--paper-dim);
  max-width:640px;
  border-left:2px solid var(--line);
  padding-left:1rem;
}

/* stamp */
.stamp{
  position:absolute;
  top:3rem; right:2rem;
  width:170px; height:170px;
  border:4px solid var(--red-bright);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-16deg);
  opacity:0.9;
  mix-blend-mode:screen;
}
.stamp-inner{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.1em;
  color:var(--red-bright);
  text-align:center;
  line-height:1.5;
  text-transform:uppercase;
}
@media (max-width:720px){ .stamp{ display:none; } }

/* ===== SECTION SHELL ===== */
section{
  max-width:1000px;
  margin:0 auto;
  padding:4rem 1.5rem;
  position:relative;
  z-index:3;
}
section + section{ border-top:1px solid rgba(231,234,240,0.08); }

.section-head{ margin-bottom:2.2rem; }
.section-head h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-top:0.3rem; }

p{ color:var(--paper-dim); max-width:70ch; }
p strong{ color:var(--paper); }

/* ===== RECON PHOTOS ===== */
.recon-photo{
  margin:2rem 0;
  border:1px solid var(--line);
  background:var(--navy);
  box-shadow:var(--shadow);
  max-width:70ch;
}
.recon-photo img{
  width:100%; display:block;
  /* The width/height attributes reserve the right space before load; height
     must be reset here or the attribute stretches the image vertically. */
  height:auto;
  filter:saturate(0.92) contrast(1.06);
}
.recon-photo.wide{ max-width:none; }
.photo-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1.2rem;
  margin:2rem 0;
}
.photo-row .recon-photo{ margin:0; max-width:none; }

/* ===== FACTION CARDS ===== */
.factions{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1.4rem;
  margin-top:1rem;
}
.faction-card{
  background:rgba(17,23,34,0.65);
  border:1px solid var(--line);
  border-left:5px solid var(--fc, var(--steel));
  padding:1.6rem 1.5rem;
  position:relative;
}
.faction-card h3{
  font-size:1.15rem;
  color:var(--fc, var(--steel-bright));
  margin-bottom:0.7rem;
}
.faction-card p{ font-size:0.95rem; color:var(--paper-dim); }
.faction-card .tag{
  font-family:'JetBrains Mono', monospace;
  font-size:0.65rem;
  letter-spacing:0.1em;
  color:var(--fc, var(--steel-bright));
  text-transform:uppercase;
  display:block;
  margin-bottom:0.5rem;
}
.faction-card .tag{
  background:var(--fc);
  color:var(--tag-ink, var(--navy-black));
  padding:0.22rem 0.6rem;
  border-radius:2px;
}
.fc-infected{ --fc:var(--fungal-brown); --tag-ink:#241a0e; }
.fc-infected h3{ color:var(--fungal-brown-bright); }
.fc-russia{ --fc:var(--mil-green); --tag-ink:#eaf1e4; }
.fc-russia h3{ color:var(--mil-green-bright); }
.fc-umbrella{
  --fc:var(--black-fc);
  --tag-ink:var(--paper);
  border-left-color:#000;
  background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(12,14,18,0.75));
  border-color:var(--steel);
}
.fc-umbrella h3{ color:var(--paper); }

/* ===== LOCATIONS ===== */
.location{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:1.5rem;
  padding:1.6rem 0;
  border-top:1px dashed var(--line);
}
.location:first-of-type{ border-top:none; }
.loc-code{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  color:var(--amber);
  letter-spacing:0.05em;
}
.loc-code strong{
  display:block;
  font-family:'Oswald', sans-serif;
  font-size:1.05rem;
  color:var(--paper);
  letter-spacing:0.02em;
  margin-top:0.3rem;
  text-transform:uppercase;
}
.location p{ font-size:0.97rem; }
.location .recon-photo{
  margin-top:1rem;
  max-width:none;
  grid-column:1 / -1;
}
@media (max-width:600px){
  .location{ grid-template-columns:1fr; gap:0.5rem; }
}

/* ===== TIMELINE ===== */
.timeline{
  border-left:2px solid var(--line);
  margin-left:0.4rem;
  padding-left:1.6rem;
}
.t-entry{ position:relative; padding-bottom:1.9rem; }
.t-entry:last-child{ padding-bottom:0; }
.t-entry::before{
  content:"";
  position:absolute; left:-1.86rem; top:0.3rem;
  width:10px; height:10px;
  background:var(--red-bright);
  border-radius:50%;
  box-shadow:0 0 0 3px var(--navy-black);
}
.t-date{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  color:var(--amber);
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.t-entry p{ margin-top:0.35rem; font-size:0.96rem; }

/* redaction accent bars used sparingly for texture */
.redact{
  display:inline-block;
  background:var(--navy-black);
  color:var(--navy-black);
  padding:0 0.35em;
  border-radius:2px;
  user-select:none;
}

footer{
  text-align:center;
  padding:3rem 1.5rem 4rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.1em;
  color:var(--line);
  text-transform:uppercase;
}

::selection{ background:var(--red); color:var(--paper); }

/* ===== LIGHTBOX ===== */
.photo-row .recon-photo{
  cursor:zoom-in;
  position:relative;
  transition:border-color 0.15s ease, transform 0.15s ease;
}
.photo-row .recon-photo:hover,
.photo-row .recon-photo:focus-visible{
  border-color:var(--amber);
  transform:translateY(-2px);
  outline:none;
}
.photo-row .recon-photo::after{
  content:"ENLARGE";
  position:absolute; right:0.5rem; bottom:0.5rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.6rem; letter-spacing:0.14em;
  color:var(--amber);
  background:rgba(12,14,18,0.8);
  border:1px solid var(--line);
  padding:0.2rem 0.45rem;
  opacity:0; transition:opacity 0.15s ease;
  pointer-events:none;
}
.photo-row .recon-photo:hover::after,
.photo-row .recon-photo:focus-visible::after{ opacity:1; }

.lightbox{
  position:fixed; inset:0; z-index:100;
  display:none;
  align-items:center; justify-content:center;
  padding:3.5rem 1rem 2.5rem;
  background:rgba(8,10,14,0.94);
}
.lightbox.open{ display:flex; }
.lightbox figure{
  margin:0;
  max-width:min(1600px, 100%);
  max-height:100%;
  display:flex; flex-direction:column;
}
.lightbox img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 9rem);
  width:auto; height:auto;
  object-fit:contain;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:var(--navy);
}
.lightbox figcaption{
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem; letter-spacing:0.08em;
  color:var(--paper-dim);
  text-align:center;
  margin-top:0.7rem;
}
.lightbox figcaption .lb-count{ color:var(--amber); margin-right:0.6rem; }
.lightbox.loading figcaption::after{ content:" · LOADING…"; color:var(--amber); }
.lb-btn{
  position:absolute;
  background:rgba(26,35,47,0.9);
  border:1px solid var(--line);
  color:var(--paper);
  font-family:'JetBrains Mono', monospace;
  font-size:1.1rem; line-height:1;
  padding:0.65rem 0.85rem;
  cursor:pointer;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.lb-btn:hover, .lb-btn:focus-visible{ border-color:var(--amber); color:var(--amber-bright); outline:none; }
.lb-close{ top:1rem; right:1rem; }
.lb-prev{ left:1rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1rem; top:50%; transform:translateY(-50%); }
@media (max-width:600px){
  .lb-prev{ left:0.4rem; }
  .lb-next{ right:0.4rem; }
  .photo-row .recon-photo::after{ display:none; }
}