/* ===== Tokens ===== */
:root{
  --ink:#1E1E1C;
  --charcoal:#2F4858;
  --accent:#005B4C;
  --paper:#FFFEFB;
  --edge:#C8C0B1;
  --fog:#E9EEE9;

  --radius:10px;
  --shadow:0 1px 0 rgba(0,0,0,.05), 0 10px 20px -12px rgba(0,0,0,.15);
  --ring:1.5px solid var(--edge);
  --gutter:1.2rem;

  --logo-size:200px; /* you said the seal is 200×200 */
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--charcoal);
  background:var(--paper);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
h1,h2,h3{
  font-family:ui-serif, Georgia, "Times New Roman", serif;
  color:var(--ink);
  margin:0 0 .45rem;
}
h1{font-weight:700; letter-spacing:.15px}
h2{font-weight:700}
h3{font-weight:650}
p{margin:.6rem 0}
a {
  text-underline-offset: 2px;
  color: var(--accent);
}
a:hover {
  color: var(--ink);
}
.container{width:min(1100px,92vw); margin:0 auto}

/* Responsive media */
img, video { max-width: 100%; height: auto; display: block; }

/* ===== Header ===== */
.site-header{background:var(--paper); border-bottom:var(--ring); position:sticky; top:0; z-index:10}
.header-bar{display:flex; align-items:center; gap:.9rem; padding:.65rem 0}
.brand{display:flex; align-items:center; gap:.8rem; text-decoration:none}
.seal{
  width:clamp(56px, 12vw, var(--logo-size));
  height:clamp(56px, 12vw, var(--logo-size));
  display:block; border-radius:50%;
}
.wordmark .org{display:block; font-weight:800; color:var(--ink); font-size:1.02rem}
.wordmark .dept{display:block; font-variant:small-caps; letter-spacing:.08em; color:var(--charcoal); opacity:.8; font-size:.85rem}
.topnav{margin-left:auto; display:flex; gap:.8rem; font-variant:small-caps; letter-spacing:.08em}
.topnav a{color:var(--charcoal); text-decoration:none; padding:.35rem .55rem; border-radius:8px}
.topnav a:hover{background:var(--fog); color:var(--ink)}



.topnav {
  display: flex;
  gap: 1rem;
}

.nav-toggle{ display:none; background:transparent; border:0; padding:.25rem; cursor:pointer }
.header-bar{ position:relative } 

@media (max-width: 960px) {
  .topnav {
    display: none;
    flex-direction: column;
    background: var(--paper);
    position: absolute;
    top: 100%;
    right: 0;
    padding: 1rem;
    border: 1px solid var(--edge);
    box-shadow: var(--shadow);
  }
  .topnav.open {
    display: flex;
  }
  .nav-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
  }
}




/* ===== Hero ===== */
.hero{border-bottom:var(--ring)}
.hero-inner{padding:2rem 0}
.hero h1{font-size:1.9rem}
.cta-row{display:flex; gap:.6rem; margin-top:.9rem}

/* ===== Layout ===== */
.main-grid{
  display:grid;
  grid-template-columns:260px 1fr 260px;
  gap:var(--gutter);
  padding:var(--gutter) 0 calc(var(--gutter)*1.5);
}
.sidebar,.rail{display:flex; flex-direction:column; gap:1rem}

/* ===== Surfaces ===== */
.card, .tile{
  background:var(--paper);
  border:var(--ring);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
}
.card.tight{padding:.8rem}
.kicker{
  font-variant:small-caps;
  letter-spacing:.1em;
  color:var(--accent);
  font-size:.9rem;
  margin-bottom:.4rem;
}

.open-investigations {
  background: var(--paper);
  border-top: 2px solid var(--edge);
  border-bottom: 2px solid var(--edge);
  padding: .8rem 0;
}
.investigations-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .4rem;
}
.investigation {
  flex: 0 0 220px;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: .6rem;
  text-align: center;
}
.investigation img {
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: .5rem;
}


/* Lists */
.list{list-style:none; padding:0; margin:0}
.list li{margin:.25rem 0}
.list a{color:var(--charcoal); text-decoration:none}
.list a:hover{color:var(--ink); text-decoration:underline}
.bullets{margin:.4rem 0 0 1rem}

/* Feature */
.feature .feature-hd{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.dateline{color:#6b6b6b; font-size:.9rem}
.feature-media{
  height:220px; margin:.8rem 0 1rem;
  background:var(--fog);
  border:var(--ring); border-radius:8px;
  display:grid; place-items:center; overflow:hidden;
}
.feature-media img{width:100%; height:100%; object-fit:cover; display:block}
.lede{font-weight:550}

/* Buttons */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  border-radius:10px; padding:.56rem .9rem; font-weight:700;
  border:1.5px solid currentColor; transition:filter .15s ease;
}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent; color:var(--accent)}
.btn-ghost:hover{background:color-mix(in lab, var(--accent) 12%, transparent)}
.btn-rail{display:block; text-align:center; background:var(--accent); color:#fff; border-color:var(--accent); margin-top:.4rem}

/* Footer */
.site-footer{border-top:var(--ring); background:var(--paper)}
.foot-inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.footnav{display:flex; gap:1rem}
.footnav a{color:var(--charcoal); text-decoration:none}
.footnav a:hover{text-decoration:underline}

/* ===== Mobile Layout Overrides ===== */
@media (max-width: 960px){
  .main-grid{ grid-template-columns: 1fr; }
  .sidebar, .rail{ order: 2; }
  .hero-inner{ padding: 1.25rem 0; }
  .cta-row{ flex-wrap: wrap; }
  /* media blocks scale better on phones */
  .feature-media{ height: auto; aspect-ratio: 16 / 9; }
  .investigations-row{ gap: .8rem; }
  .investigation{ flex: 0 0 70vw; max-width: 420px; }
}

/* Checkbox-based mobile menu (pure CSS) */
.header-bar .navbox { margin-left: auto; position: relative; }

/* Hide default list marker style from our “button” label */
.nav-toggle { 
  font-size: 1.6rem; line-height: 1; padding: .25rem .5rem;
  cursor: pointer; background: transparent; border: 0; color: var(--charcoal);
}
.nav-toggle:hover { background: var(--fog); border-radius: var(--radius); }

/* Desktop: always show nav inline; hide hamburger/checkbox */
@media (min-width: 961px){
  .nav-toggle { display: none; }
  .navcheck { display: none; }
  .navbox .topnav {
    display: flex !important;
    position: static; padding: 0; border: 0; box-shadow: none; background: transparent;
  }
}

/* Mobile: collapsed by default; open when checkbox is checked */
@media (max-width: 960px){
  .navcheck { position: absolute; left: -9999px; } /* keep it off-screen */
  .navbox .topnav{
    display: none;
    flex-direction: column;
    position: absolute; top: 100%; right: 0; z-index: 20;
    padding: 1rem; background: var(--paper);
    border: 1px solid var(--edge); box-shadow: var(--shadow);
  }
  .navcheck:checked ~ .topnav { display: flex; }
}