@font-face {
  font-family: 'TakeNoPrisoners-gxm75';
  src: url('../fonts/TakeNoPrisoners-gxm75.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

:root {
  --bg: #050505;        /* Deep Black */
  --card: #121212;      /* Dark Charcoal */
  --text: #c0c0c0;      /* Cool Silver */
  --accent: #a21caf;    /* Electric Purple */
  --border: #2a2a2a;    /* Muted Border */
  --neon-green: #39ff14; /* Toxic Green for accents */
  --danger: #8b0000;    /* Muted Crimson */

  /* Back-compat vars used throughout the existing CSS */
  --muted: #8e8e8e;
  --ring: var(--border);
  --heading: var(--accent);
  --timeline-date: var(--accent);
}
html,body{margin:0;padding:0;background: var(--bg);color: var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.container{max-width:1100px;margin:0 auto;padding:1.25rem}
.site-header{position:sticky;top:0;background: rgba(5,5,5,.78);backdrop-filter:blur(6px);border-bottom: 1px solid var(--danger);z-index:10}
.logo{color:var(--text);text-decoration:none;font-weight:800}
.site-nav{display:flex;gap:1rem;margin:.5rem 0  justify-content: center;
}
.site-nav a{color:var(--text);text-decoration:none;opacity:.85}
.site-nav a:hover{opacity:1}

.hero{border:1px solid var(--border);border-radius:18px;padding:2rem;background:
 radial-gradient(60% 80% at 30% 20%, rgba(162,28,175,.25), transparent 60%),
 radial-gradient(70% 90% at 70% 30%, rgba(14,165,233,.2), transparent 60%),
 radial-gradient(50% 60% at 50% 80%, rgba(255,255,255,.05), transparent 80%);}
.hero img.logo-image{display:block;margin:0 auto;max-width:540px;width:92%;height:auto}

/* Tagline image container */
.hero .tagline{display:block;text-align:center}
.hero .tagline img{display:block;margin:0 auto;max-width:960px;width:100%;height:auto}

.badge{display:inline-block;font-size:.75rem;color:#c7b7ff;border:1px dashed var(--ring);padding:.25rem .5rem;border-radius:999px;margin-bottom:.5rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1.25rem}

.character{display:flex;gap:.9rem;align-items:flex-start}
.character img.thumb{width:96px;height:96px;border-radius:12px;border:1px solid var(--border);object-fit:cover;background:#222;cursor:pointer}
.character .bio p{margin:.25rem 0 0;color:#ccd6dd}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;margin-top:1rem}
.gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:1px solid var(--border);cursor:pointer;background:#222}

/* Modal */

.modal.open{display:flex}




.modal-close{background:transparent;border:1px solid var(--border);color:#fff;border-radius:8px;padding:.3rem .6rem;cursor:pointer}
@media (max-width:720px){}

.site-footer{border-top:1px solid var(--ring);margin-top:2rem}
.site-footer .container{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}


h2 { color: var(--heading); }


/* --- Crackodile Archive Header Centering --- */
.site-header .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo{
  display:flex;
  justify-content:center;
  width:100%;
}
.nav-brand-img{
  margin: 0 auto;
}
.site-nav{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: .75rem 1rem;
  text-align:center;
}
.site-nav a{
  display:inline-block;
}


/* --- Archive Artifacts Grid --- */
.archive-hero{
  display:flex;
  justify-content:center;
  margin: 1.5rem auto 3rem auto;
}
.archive-hero-img{
  width:100%;
  max-width: 900px;
  height:auto;
  display:block;
}

.archive-artifacts{
  margin: 2rem 0 3rem 0;
}
@media (max-width: 1000px){
  }
@media (max-width: 520px){
  }

.artifact-card{
  border:1px solid var(--border);
}

.artifact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.artifact-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  cursor: pointer;
  border-radius: 8px;
  border:1px solid var(--border);
  transition: transform 0.2s;
}
.artifact-card img:hover { transform: scale(1.03); }
.artifact-caption { font-size: 0.85rem; margin-top: 0.5rem; text-align: center; color: var(--muted); }

/* --- Mobile Modal Fix --- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
  overflow-y: auto;
}

.modal-bio {
  line-height: 1.6;
  color: #ccd6dd;
}

/* --- Timeline page --- */
.timeline-entry h2{
  margin: 0 0 .5rem 0;
  line-height: 1.2;
}
.timeline-entry h2 strong{
  font-weight: 800;
}

/* --- Custom Header Font + Colors --- */
h1, h2, h3 {
  font-family: 'TakeNoPrisoners-gxm75', sans-serif;
}
h1, h2 {
  color: var(--heading);
}

/* Timeline dates */
.timeline-entry h2 strong {
  font-family: 'TakeNoPrisoners-gxm75', sans-serif;
  color: var(--timeline-date);
}

/* === Symitri Moody High-Contrast Pass === */
/* --- Headings --- */
h1, h2{
  font-family: 'TakeNoPrisoners-gxm75', sans-serif;
  color: var(--accent);
}
h3{
  font-family: 'TakeNoPrisoners-gxm75', sans-serif;
}

/* --- Nav mood pass --- */
.site-nav a{
  color: var(--text);
  opacity: .9;
}
.site-nav a:hover{
  opacity: 1;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(162, 28, 175, .55);
}
.site-nav a[href*="crackodile"]:hover{
  color: var(--neon-green);
  text-shadow: 0 0 10px rgba(57, 255, 20, .55);
}

/* --- Cards + badges --- */
.card{
  background: var(--card);
  border: 1px solid var(--border);
}
.badge{
  background: var(--danger);
  color: #ffffff;
  border: 1px solid var(--danger);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- Timeline specifics --- */
.timeline-entry h2 strong{
  color: var(--accent);
}

/* If you later add class="records-unavailable" to the hiatus card, this will apply: */
.timeline-entry.records-unavailable{
  border: 1px dashed var(--danger);
}

/* Current build (fixed order): the 6th card is the 1994–2025 block */
.timeline-stack .timeline-entry:nth-of-type(6){
  border: 1px dashed var(--danger);
}

/* === Modal Desktop Layout Pass === */
.modal-card {
  background: var(--card);
  border: 1px solid var(--border);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
background: var(--bg);
border-bottom: 1px solid var(--border);
}

.modal-body {
padding: 2rem;
overflow-y: auto;
display: flex;
flex-direction: column; /* Stacked for mobile */
gap: 2rem;
}

.modal-body img {
width: 100%;
max-width: 300px;
border-radius: 8px;
border: 1px solid var(--border);
}

/* Desktop Side-by-Side Fix */
@media (min-width: 800px) {
.modal-body {
flex-direction: row; /* Horizontal on desktop */
align-items: flex-start;
}
.modal-body img {
position: sticky; /* Keeps the image visible while scrolling long bios */
top: 0;
}
.modal-bio {
flex: 1;
}
}



.footer-nav a:hover{ color: var(--neon-green); }


.site-footer a{ color: var(--text); text-decoration: none; }
.site-footer a:hover{ color: var(--text); text-decoration: none; }