/* THE GHOST GAZETTE — style.css
   Full design system. Critical layout remains in index.html <style> for first paint.
   This file upgrades components to polished memorial + neon system.
*/

:root{
  --paper: #FDFCF8;
  --paper-dark: #F6F2EB;
  --ink: #11110F;
  --ink-soft: #2B2B28;
  --muted: #6B6560;
  --rule: #E8E2D9;
  --rule-strong: #D6C7A8;
  --ghost: #8A8682;
  --pink: #FF2E7E;
  --pink-soft: #FF5A94;
  --pink-wash: #FFF0F5;
  --pink-ring: rgba(255,46,126,0.18);
  --accent: #B91C1C;
  --col: 720px;
  --col-wide: 920px;
}

/* forensic comparator */
#forensic{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--rule);
  border:1px solid var(--ink);
  margin:1.25rem 0 0;
}
@media(max-width:760px){ #forensic{grid-template-columns:1fr} }
.forensic-col{
  background:#fff;
  padding:1.1rem 1.1rem 1rem;
}
.forensic-col h4{
  font-family:"Source Serif 4", serif;
  font-weight:700;
  font-size:1.02rem;
  margin:0 0 .3rem;
  letter-spacing:-.01em;
}
.forensic-col h4 + p{margin-bottom:.75rem}
.forensic-article{
  border:1px solid var(--rule);
  background:var(--paper);
  padding:1rem;
  font-family:"Source Sans 3", sans-serif;
  font-size:.92rem;
  line-height:1.6;
}
.forensic-article .kicker{
  font-family:"IBM Plex Mono", monospace;
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.4rem;
}
.forensic-article h5{
  font-family:"Source Serif 4", serif;
  font-size:1.08rem;
  line-height:1.25;
  margin:0 0 .5rem;
  letter-spacing:-.01em;
}
.forensic-article .byline{
  font-family:"IBM Plex Mono", monospace;
  font-size:.72rem;
  color:var(--muted);
  border-bottom:1px solid var(--rule);
  padding-bottom:.55rem;
  margin-bottom:.65rem;
}
.forensic-article .dateline{
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.forensic-article blockquote{
  margin:.6rem 0;
  padding:.55rem .75rem;
  border-left:3px solid var(--rule-strong);
  background:#fff;
  font-style:italic;
}
.forensic-article .footer-note{
  margin-top:.7rem;
  padding:.55rem .65rem;
  background:#fff;
  border:1px solid var(--rule);
  font-family:"IBM Plex Mono", monospace;
  font-size:.7rem;
  line-height:1.5;
  color:var(--muted);
}
.forensic-article.pink{
  background:var(--pink-wash);
  border-color:var(--pink-ring);
}
.forensic-article.pink h5{color:#9A0B3A}
.forensic-article .tell{
  background:#fff;
  border:1px solid var(--pink-ring);
  border-left:3px solid var(--pink);
  padding:.5rem .6rem;
  margin:.55rem 0;
  font-family:"IBM Plex Mono", monospace;
  font-size:.72rem;
  line-height:1.5;
}
.forensic-article .tell strong{color:var(--pink)}

/* case cards */
.case-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin:1.25rem 0 0;
}
@media(max-width:640px){ .case-cards{grid-template-columns:1fr} }
.card{
  border:1px solid var(--rule);
  background:#fff;
  padding:1rem 1.05rem;
}
.card h4{
  font-family:"Source Serif 4", serif;
  font-size:.98rem;
  margin:0 0 .3rem;
}
.card p{
  font-family:"Source Sans 3", sans-serif;
  font-size:.88rem;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
}

/* wall grid enhancements */
.wall-controls{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:.9rem 0 1rem;
}
.wall-controls input[type="search"],
.wall-controls select{
  font-family:"Source Sans 3", sans-serif;
  font-size:.88rem;
  padding:.55rem .7rem;
  border:1px solid var(--rule);
  background:#fff;
}
.wall-controls input[type="search"]{flex:1 1 220px; min-width:160px}
.wall-controls select{flex:0 1 160px}
.wall-item{
  position:relative;
}
.wall-item strong{
  font-family:"Source Serif 4", serif;
  font-weight:700;
  font-size:.98rem;
  line-height:1.25;
}
.wall-item .meta{
  font-family:"IBM Plex Mono", monospace;
  font-size:.68rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  margin:.25rem 0 .45rem;
}
.wall-item .note{
  font-size:.82rem;
  line-height:1.45;
  color:var(--ink-soft);
}
.wall-item .badge{
  display:inline-block;
  font-family:"IBM Plex Mono", monospace;
  font-size:.65rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.18rem .4rem;
  border:1px solid var(--rule);
  background:var(--paper-dark);
  color:var(--muted);
  margin-top:.45rem;
}
.wall-item .badge.pink{
  border-color:var(--pink-ring);
  background:var(--pink-wash);
  color:#9A0B3A;
}
.wall-item .years{
  position:absolute;
  top:.9rem;
  right:.9rem;
  font-family:"IBM Plex Mono", monospace;
  font-size:.68rem;
  color:var(--ghost);
}

/* state grid */
#state-grid{
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  gap:6px;
  padding:1rem;
  background:#fff;
  border:1px solid var(--ink);
}
@media(max-width:900px){ #state-grid{grid-template-columns:repeat(8,1fr)} }
@media(max-width:640px){ #state-grid{grid-template-columns:repeat(5,1fr)} }
@media(max-width:420px){ #state-grid{grid-template-columns:repeat(4,1fr)} }
.state-cell{
  aspect-ratio:1 / 0.85;
  border:1px solid var(--rule);
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:.35rem .2rem;
  text-align:center;
  position:relative;
  cursor:default;
}
.state-cell .abbr{
  font-family:"Source Sans 3", sans-serif;
  font-weight:700;
  font-size:.78rem;
  line-height:1;
}
.state-cell .loss{
  font-family:"IBM Plex Mono", monospace;
  font-size:.62rem;
  color:var(--muted);
  margin-top:.15rem;
}
.state-cell .bar{
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:var(--pink);
  opacity:.85;
}
.state-cell:hover{
  border-color:var(--ink);
  background:var(--paper-dark);
}
.state-cell.is-empty{
  background:var(--paper-dark);
  color:var(--ghost);
}

/* map */
#map{
  position:relative;
}
.leaflet-container{
  font-family:"Source Sans 3", sans-serif;
}
.map-tooltip{
  font-family:"IBM Plex Mono", monospace;
  font-size:.72rem;
  line-height:1.45;
}

/* method links */
.method-grid a{ text-decoration:underline; text-underline-offset:3px }
.method-grid ul{ line-height:1.6 }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}

/* print */
@media print{
  .mast, .map-controls, .wall-controls, .lookup-grid button, #map, #state-grid, #forensic, #wall{break-inside:avoid}
  body{background:#fff}
}

/* focus */
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}

/* subtle memorial texture for wall items that are pink-replaced */
.wall-item.has-pink{
  border-left:2px solid var(--pink-ring);
}

/* lookup result enhancements */
.result-card strong{font-weight:700}
.result-card .status{
  display:inline-block;
  font-family:"IBM Plex Mono", monospace;
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.2rem .45rem;
  border:1px solid var(--rule);
  background:#fff;
  margin-bottom:.5rem;
}
.result-card .status.desert{background:var(--ink); color:#fff; border-color:var(--ink)}
.result-card .status.ghost{background:var(--paper-dark); color:var(--ink)}
.result-card .status.served{background:#E8F5E9; color:#1B5E20; border-color:#A5D6A7}
.result-card .status.pink{background:var(--pink-wash); color:#9A0B3A; border-color:var(--pink-ring)}