/* ============================================================
   KCI SHARED STYLESHEET - assets/kci.css
   Base styles common to: index, about, programs, research, shapnel.
   (bonds/ is self-contained by design - do not link this there
   without a design pass.) Page-specific rules stay inline on each
   page, AFTER this file, so they win the cascade.
   Extracted 2026-07-14 from the 2026-07-12 MLOI-fix build;
   rendering is unchanged. Rule order preserved from index.html.
   ============================================================ */

:root{
  --red:#C8362B;
  --mustard:#E3A824;
  --ink:#232F48;
  --paper:#F5EDDC;
  --paper-dark:#EAE0C8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:'Libre Franklin',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  /* subtle halftone paper texture */
  background-image:radial-gradient(rgba(35,47,72,.05) 1px, transparent 1px);
  background-size:14px 14px;
}
.display{font-family:'Alfa Slab One',serif;font-weight:400;letter-spacing:.01em}

/* ---------- satire banner ---------- */
.satire-banner{
  background:var(--ink);color:var(--paper);
  text-align:center;padding:.5rem 1rem;
  font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.satire-banner span{color:var(--mustard)}

/* ---------- header ---------- */
header{
  border-bottom:6px double var(--ink);
  padding:1rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;
}
.seal{
  display:flex;align-items:center;gap:.75rem;
}
.seal-badge{
  width:74px;height:74px;border-radius:50%;
  border:4px solid var(--ink);
  display:grid;place-items:center;
  font-family:'Alfa Slab One',serif;font-size:1.9rem;
  background:var(--mustard);
  transform:rotate(-6deg);
  flex-shrink:0;
}
.seal-text{font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:1.05rem;line-height:1.3}
.seal-text small{display:block;font-weight:400;letter-spacing:.05em;text-transform:none;font-style:italic}
nav a{
  color:var(--ink);text-decoration:none;font-weight:800;text-transform:uppercase;
  font-size:.75rem;letter-spacing:.12em;margin-left:1.25rem;
  border-bottom:3px solid transparent;padding-bottom:2px;
}
nav a:hover,nav a:focus-visible{border-bottom-color:var(--red)}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------- hero: the highway sign ---------- */
.hero{padding:3.5rem 1.5rem 3rem;display:grid;place-items:center;text-align:center}
.road-sign{
  background:#1E5B3A; /* interstate green */
  color:#fff;
  border:6px solid #fff;
  box-shadow:0 0 0 6px #1E5B3A, 0 14px 0 -4px rgba(35,47,72,.25);
  border-radius:18px;
  padding:2.2rem 2.5rem 2rem;
  max-width:640px;width:100%;
  position:relative;
  transform:rotate(-1deg);
}
.road-sign .eyebrow{
  font-weight:800;letter-spacing:.25em;text-transform:uppercase;font-size:.8rem;opacity:.9;
}
.road-sign h1{
  font-family:'Alfa Slab One',serif;
  font-size:clamp(1.9rem,5.5vw,3.2rem);
  line-height:1.1;margin:.6rem 0 .4rem;
  text-transform:uppercase;
}
.road-sign .sub{font-size:1.05rem;font-style:italic;opacity:.95}
.stamp{
  position:absolute;top:-1.2rem;right:-1rem;
  border:4px solid var(--red);color:var(--red);
  font-family:'Alfa Slab One',serif;font-size:1rem;
  padding:.3rem .8rem;text-transform:uppercase;letter-spacing:.1em;
  transform:rotate(8deg);
  background:var(--paper);
  border-radius:4px;
}
.hero-tagline{
  max-width:560px;margin-top:2rem;font-size:1.15rem;
}
.hero-tagline strong{color:var(--red)}
.cta-row{margin-top:1.75rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.btn{
  font-family:'Alfa Slab One',serif;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;
  padding:.85rem 1.6rem;border:4px solid var(--ink);cursor:pointer;
  background:var(--red);color:var(--paper);
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn.secondary{background:var(--mustard);color:var(--ink)}

/* ---------- section scaffolding ---------- */
section{padding:3.5rem 1.5rem;max-width:960px;margin:0 auto}
.section-label{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-weight:800;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.35rem .8rem;margin-bottom:1rem;
}
h2{font-family:'Alfa Slab One',serif;font-size:clamp(1.5rem,4vw,2.2rem);text-transform:uppercase;line-height:1.15;margin-bottom:1.2rem}
h2 .accent{color:var(--red)}

/* ---------- threat meter ---------- */
.meter-wrap{border:4px solid var(--ink);background:#fff;padding:1.5rem;box-shadow:8px 8px 0 var(--mustard)}
.meter-title{font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;margin-bottom:.75rem}
.meter{height:38px;border:3px solid var(--ink);display:flex;overflow:hidden}
.meter div{flex:1;display:grid;place-items:center;font-weight:800;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase}
.m1{background:#7BA05B}
.m2{background:var(--mustard)}
.m3{background:#D97D3A}
.m4{background:var(--red);color:#fff;position:relative}
.needle{position:absolute;top:-14px;right:18%;font-size:1.4rem}
.meter-caption{font-size:.85rem;font-style:italic;margin-top:.75rem}

/* ---------- stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-top:1.5rem}
.stat{border:4px solid var(--ink);background:#fff;padding:1.4rem;position:relative}
.stat::after{content:"";position:absolute;inset:6px;border:1px dashed rgba(35,47,72,.35);pointer-events:none}
.stat .num{font-family:'Alfa Slab One',serif;font-size:2.4rem;color:var(--red);line-height:1}
.stat p{font-size:.9rem;margin-top:.5rem}

/* ---------- testimonials ---------- */
.quote{
  border-left:8px solid var(--mustard);background:var(--paper-dark);
  padding:1.25rem 1.5rem;margin-bottom:1.25rem;font-size:1.02rem;
}
.quote em{display:block;margin-top:.6rem;font-style:normal;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}

/* ---------- tiers ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1.5rem}
.tier{border:4px solid var(--ink);background:#fff;padding:1.5rem;display:flex;flex-direction:column}
.tier.featured{background:var(--ink);color:var(--paper)}
.tier .display{font-size:1.15rem;text-transform:uppercase;margin-bottom:.25rem}
.tier .price{font-family:'Alfa Slab One',serif;font-size:2rem;color:var(--red);margin-bottom:.75rem}
.tier.featured .price{color:var(--mustard)}
.tier ul{list-style:none;font-size:.92rem;flex:1}
.tier li{padding:.4rem 0;border-bottom:1px dashed rgba(128,128,128,.4)}
.tier li::before{content:"★ ";color:var(--red)}
.tier.featured li::before{color:var(--mustard)}
.tier button{margin-top:1.25rem;width:100%}

/* ---------- FAQ ---------- */
details{border:3px solid var(--ink);background:#fff;margin-bottom:.75rem}
summary{cursor:pointer;font-weight:800;padding:1rem 1.25rem;text-transform:uppercase;font-size:.85rem;letter-spacing:.06em;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";font-family:'Alfa Slab One',serif;font-size:1.2rem;color:var(--red)}
details[open] summary::after{content:"–"}
details p{padding:0 1.25rem 1.1rem;font-size:.95rem}

/* ---------- modal (the punchline) ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(35,47,72,.75);
  display:none;place-items:center;padding:1.5rem;z-index:50;
}
.modal-backdrop.open{display:grid}
.modal{
  background:var(--paper);border:5px solid var(--ink);max-width:520px;width:100%;
  padding:2.25rem 2rem;text-align:center;position:relative;
  box-shadow:10px 10px 0 var(--red);
}
.modal .big-stamp{
  display:inline-block;border:4px solid var(--red);color:var(--red);
  font-family:'Alfa Slab One',serif;font-size:1.5rem;text-transform:uppercase;
  padding:.4rem 1.2rem;transform:rotate(-5deg);margin-bottom:1.25rem;letter-spacing:.08em;
}
.modal p{margin-bottom:1rem}
.modal .fine{font-size:.85rem;font-style:italic}

/* ---------- footer ---------- */
footer{
  background:var(--ink);color:var(--paper);
  padding:2.5rem 1.5rem;text-align:center;font-size:.85rem;
}
footer .display{color:var(--mustard);text-transform:uppercase;font-size:1rem;margin-bottom:.75rem;letter-spacing:.05em}
footer p{max-width:640px;margin:0 auto .5rem}
.seal-logo{height:72px;width:auto;flex-shrink:0}
@media(max-width:640px){.seal-logo{height:54px}}