/* =========================================================
   THEME: WARNING DOSSIER
   - Safety Yellow background (warning sign common)
   - Black ink text
   - Red alert accent
   - Clean “dossier” panels and consistent spacing
========================================================= */

:root{
  /* Core palette */
  --bg: #F7D600;            /* safety/warning yellow */
  --ink: #111111;           /* near-black for readability */
  --paper: rgba(255,255,255,0.80);
  --paper-strong: rgba(255,255,255,0.92);
  --line: rgba(0,0,0,0.22);
  --shadow: #111111;

  /* Accents */
  --red: #E10600;           /* warning red */
  --muted: rgba(0,0,0,0.70);

  /* Layout rhythm */
  --radius: 12px;
  --stroke: 1px;
  --shadow-lg: 10px 10px 0 var(--shadow);
  --shadow-md: 8px 8px 0 var(--shadow);
  --shadow-sm: 6px 6px 0 var(--shadow);

  --space-1: 0.5rem;
  --space-2: 0.85rem;
  --space-3: 1.25rem;
  --space-4: 1.75rem;
  --space-5: 2.5rem;
  --space-6: 3.25rem;

  --container: 760px;
}

/* --------------------
   RESET & BASE
-------------------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ font-size:16px; }
img{ max-width:100%; height:auto; display:block; }

body{
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

/* --------------------
   LAYOUT
-------------------- */
.container{
  width: 80vw;              /* 80% of viewport on desktop */
  max-width: 1200px;        /* safety cap for ultra-wide screens */
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}

/* Consistent vertical rhythm */
header.hero{ margin-bottom: var(--space-5); }
section{ margin-bottom: var(--space-6); }

/* --------------------
   FILE SECTIONS (spacing + order)
-------------------- */

.file-section{
  margin-bottom: var(--space-6);
}

.file-section h3{
  margin-bottom: var(--space-3);
}

.file-section p{
  margin-top: 0;
}

/* Hero warning spacing */
.hero-warning{
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0.9rem 1rem;
}

/* Improve rhythm between list + heading */
.file-section h2{
  margin-bottom: var(--space-4);
}


/* --------------------
   TYPOGRAPHY
-------------------- */
h1, h2, h3{
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

h1{
  font-size: clamp(2rem, 5.2vw, 3.2rem);
  color: var(--ink);
  /* subtle “printed” feel */
  text-shadow: 1px 1px 0 rgba(255,255,255,0.35);
  margin-bottom: var(--space-3);
}

h2{
  font-size: 1rem;
  margin-bottom: var(--space-3);
}

p{
  font-size: 0.98rem;
  color: var(--ink);
}

/* --------------------
   REDACTION TAPE
-------------------- */

.redact{
  position: relative;
  display: inline-block;
  color: transparent;              /* hide text */
  background: var(--red);          /* your warning red */
  padding: 0.15em 0.35em;
   transform: rotate(-1deg);
  border-radius: 2px;
  vertical-align: baseline;
  user-select: none;
}

/* Optional: subtle texture / print feel */
.redact::after{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.15) 2px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
}


/* --------------------
   PANELS / CARDS (single source of truth)
-------------------- */
.panel{
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0.95rem 1rem;
  max-width: 72ch;
}

/* Apply panels to hero + regular section paragraphs */
.hero p,
section p{
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0.95rem 1rem;
  width: 100%;
}


/* FIX: ensure the hero card never sticks to the title image */
.hero p{
  margin-top: var(--space-4);
}

/* --------------------
   TITLE IMAGE (your warning sign image)
-------------------- */
.hero-title-image{
  width: 100%;
  border-radius: var(--radius);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--shadow-lg);
  background: var(--paper-strong);
  /* FIX: consistent space below image */
  margin: 0 auto var(--space-4);
}

/* --------------------
   NOTICE IMAGE (if you still use notice section elsewhere)
-------------------- */
.notice-img img{
  width: 100%;
  border-radius: var(--radius);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--shadow-lg);
  background: var(--paper-strong);
}

/* --------------------
   DIVIDERS
-------------------- */
hr{
  border: none;
  height: 2px;
  background: var(--ink);
  opacity: 0.25;
  margin: var(--space-5) 0 var(--space-6);
}

/* --------------------
   LINKS
-------------------- */
a{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  transition: transform 0.15s ease, background 0.15s ease;
}

a:hover{
  background: rgba(255,255,255,0.55);
  transform: translateY(-1px);
}

/* --------------------
   LISTS
-------------------- */
ul{
  list-style: none;
  margin-top: var(--space-3);
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

li{
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}

li:last-child{ border-bottom: none; }

li::before{
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background: var(--red);
  border: 1px solid var(--ink);
  vertical-align: middle;
}

/* --------------------
   SMALL META LABELS
-------------------- */
.system-label,
.meta,
.file-meta,
.case-meta,
.attribution,
.cover-caption{
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------
   FOOTER
-------------------- */
footer{
  margin-top: var(--space-6);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.footer-card{
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 0;
}

.footer-card p{
  margin: 0.4rem 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --------------------
   NAV (simple)
-------------------- */
.nav{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: var(--space-4) 0 var(--space-5);
}

/* --------------------
   LIGHTBOX (evidence expansion)
-------------------- */

.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.92); /* near-black ink */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 9999;
}

.lightbox.active{
  opacity: 1;
  pointer-events: all;
}

.lightbox img{
  max-width: 92vw;
  max-height: 92vh;
  border-radius: var(--radius);
  border: var(--stroke) solid var(--ink);
  box-shadow: 14px 14px 0 var(--shadow);
  background: var(--paper-strong);
}


/* --------------------
   MASONRY GALLERY (CSS columns)
-------------------- */
/* --------------------
   MOSAIC GALLERY (CSS grid)
   - consistent tile sizing
   - images not too big
   - cinematic crop without distortion
-------------------- */

.gallery{
  display: grid;
  gap: 1rem;
  /* small tiles by default */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3 columns on tablets */
@media (min-width: 700px){
  .gallery{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

/* 4 columns on wide screens */
@media (min-width: 980px){
  .gallery{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

/* Cards become compact tiles */
.card{
  margin: 0;                  /* IMPORTANT: grid handles spacing */
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--shadow-sm); /* smaller shadow = less “huge” feeling */
  border-radius: var(--radius);
  overflow: hidden;
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Make tiles feel mosaic: fixed visual height, cropped nicely */
.card img{
  width: 100%;
  height: 180px;              /* controls “not too big” */
  object-fit: cover;          /* crops without stretching */
  display: block;
  filter: contrast(1.02);
   transition: transform 0.25s ease;
  will-change: transform;
}

/* Hover / focus */
.card:hover{
  transform: translateY(-4px) scale(1.015);
  box-shadow: 10px 10px 0 var(--shadow);
}

.card:hover img{
  transform: scale(1.04);
}

@media (hover: none){
  .card:hover{
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  .card:hover img{
    transform: none;
  }
}

/* Slightly taller tiles on larger screens */
@media (min-width: 700px){
  .card img{ height: 210px; }
}
@media (min-width: 980px){
  .card img{ height: 230px; }
}

/* Optional: let every 5th card be a “feature” tile */
@media (min-width: 700px){
  .gallery .card:nth-child(5n){
    grid-column: span 2;
  }
  .gallery .card:nth-child(5n) img{
    height: 260px;
  }
}

.card figcaption{
  padding: 0.65rem 0.75rem;     /* tighter */
  font-size: 0.85rem;           /* smaller */
  line-height: 1.35;
  color: var(--ink);
  background: var(--paper-strong);
  border-top: 1px solid rgba(0,0,0,0.14);
}

/* --------------------
   LYRICS
-------------------- */
.lyric-block{ margin-bottom: var(--space-6); }

.lyric-block h2{
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}

.lyrics{
  white-space: pre-wrap;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.lyric-cover{
  margin: var(--space-3) 0 var(--space-4);
}

.lyric-cover img{
  width: 100%;
  max-width: 360px;
  border-radius: var(--radius);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--shadow-md);
  background: var(--paper-strong);
}

.credit{
  margin-top: var(--space-3);
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.65);
  border: var(--stroke) solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  padding: 0.45rem 0.6rem;
}

/* --------------------
   PROSE
-------------------- */
.prose-entry{
  margin-bottom: var(--space-6);
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
}

.prose-entry h2{
  font-size: 0.95rem;
  margin-bottom: var(--space-2);
}

.prose-entry p{
  margin-bottom: var(--space-3);
}

/* --------------------
   RELEVANT CASES (case file feel)
-------------------- */
.case-file{
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  box-shadow: var(--shadow-lg);
  border-radius: calc(var(--radius) + 2px);
  padding: 1.4rem 1.5rem;
  margin-bottom: var(--space-6);
}

.file-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: var(--space-4);
}

.file-stamp{
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: 0.55rem 0.7rem;
  border: var(--stroke) solid var(--ink);
  box-shadow: 4px 4px 0 var(--shadow);
  transform: rotate(-2deg);
  white-space: nowrap;
}

.quote{
  margin: 0 0 var(--space-3);
  padding: 0.95rem 1rem;
  border: 1px dashed rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.65);
  border-radius: var(--radius);
  font-size: 0.98rem;
  line-height: 1.55;
}

.case-divider{
  border: none;
  border-top: 1px dashed rgba(0,0,0,0.35);
  margin: var(--space-4) 0;
}

.file-footer{
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(0,0,0,0.18);
}

.disclaimer{
  font-size: 0.84rem;
  color: var(--muted);
  margin-bottom: var(--space-3);
}

/* --------------------
   RESPONSIVE
-------------------- */
@media (max-width: 600px){
  .container{
    width: 100%;
    padding: 3rem 1.15rem;
  }

  h1{ letter-spacing: 0.10em; }

  .hero p,
  section p{ max-width: 100%; }
}