/* Cascade Data Center Information - shared styles
   Civic "public reading room" aesthetic: calm, document-like, trustworthy.
   Palette: ink slate text, cool paper, deep river-teal accent. */

:root{
  --paper:#f6f8f7;
  --surface:#ffffff;
  --ink:#1b2a33;
  --muted:#5c6b73;
  --faint:#88959c;
  --river:#13616b;       /* deep teal accent (water / civic utility) */
  --river-dk:#0d474f;
  --tint:#e7f0ef;
  --line:#dde4e2;
  --line-soft:#e9eeec;
  --max:54rem;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem;}
a{color:var(--river);}
a:hover{color:var(--river-dk);}

.skip{position:absolute;left:-999px;top:auto;background:var(--ink);color:#fff;padding:.6rem 1rem;}
.skip:focus{left:1rem;top:1rem;z-index:50;border-radius:4px;}

/* Header */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;flex-direction:column;gap:.4rem;padding-top:.9rem;padding-bottom:.6rem;}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);}
.brand-mark{
  width:14px;height:22px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,var(--river) 0%,var(--river) 33%,#3a8b94 33%,#3a8b94 66%,#7fb6bb 66%);
}
.brand-text{font-family:"Spectral",Georgia,serif;font-weight:700;font-size:1.18rem;letter-spacing:.1px;}
.site-nav{display:flex;flex-wrap:wrap;gap:.15rem .35rem;}
.site-nav a{
  text-decoration:none;color:var(--muted);
  font-size:.86rem;font-weight:500;
  padding:.28rem .55rem;border-radius:5px;
}
.site-nav a:hover{background:var(--tint);color:var(--river-dk);}
.site-nav a.active{background:var(--river);color:#fff;}

/* Page head */
.page-head{padding:2.2rem 0 1.1rem;border-bottom:1px solid var(--line-soft);margin-bottom:1.6rem;}
h1{
  font-family:"Spectral",Georgia,serif;font-weight:700;
  font-size:2.15rem;line-height:1.12;margin:0 0 .5rem;letter-spacing:-.3px;
}
.lede{font-size:1.12rem;color:var(--muted);margin:0;max-width:42rem;}

/* Sections */
.block{margin:0 0 2.4rem;}
.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--river);margin:0 0 .25rem;
}
h2{
  font-family:"Spectral",Georgia,serif;font-weight:600;
  font-size:1.5rem;margin:0 0 .5rem;line-height:1.2;
}
.section-intro{color:var(--muted);margin:.2rem 0 1.1rem;}
h3{font-family:"Spectral",Georgia,serif;font-weight:600;font-size:1.18rem;margin:1.4rem 0 .4rem;}

/* Callout / framing box */
.callout{
  background:var(--tint);
  border:1px solid #cfe0de;
  border-left:4px solid var(--river);
  border-radius:8px;
  padding:1rem 1.15rem;
  margin:0 0 1.8rem;
}
.callout h2,.callout h3{margin-top:0;}
.callout p{margin:.4rem 0;}
.callout p:last-child{margin-bottom:0;}

/* Resource lists */
.resource-list{list-style:none;margin:0;padding:0;}
.resource{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:.85rem 1rem;
  margin:0 0 .65rem;
}
.resource-title{
  font-weight:600;font-size:1.03rem;text-decoration:none;
  display:inline-block;line-height:1.3;
}
.resource-title:hover{text-decoration:underline;}
.resource-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:.35rem 0 .15rem;}
.resource-source{font-size:.82rem;color:var(--muted);}
.resource-note{margin:.25rem 0 0;font-size:.95rem;color:#3f4f57;}

/* Source-type tags */
.tag{
  font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:.12rem .45rem;border-radius:20px;white-space:nowrap;
  border:1px solid transparent;
}
.tag-primary  {background:#e6eef6;color:#26475f;border-color:#cfe0ee;}
.tag-official {background:#e6eef6;color:#26475f;border-color:#cfe0ee;}
.tag-gov      {background:#eceaf6;color:#473f6b;border-color:#d9d4ec;}
.tag-peer     {background:#e4f0e8;color:#27583a;border-color:#cbe5d3;}
.tag-research {background:#e7f0ef;color:#1f5057;border-color:#cfe2e0;}
.tag-news     {background:#f1efe9;color:#5a513c;border-color:#e2ddd0;}
.tag-industry {background:#f6ecdf;color:#6b4e2a;border-color:#ecdcc4;}
.tag-advocacy {background:#f6e7ea;color:#6e2f3c;border-color:#eccdd4;}
.tag-opinion  {background:#efe9f0;color:#5b3f63;border-color:#e0d2e3;}
.tag-reference{background:#eef0f1;color:#4a565c;border-color:#dde2e4;}
.tag-factcheck{background:#e3eff1;color:#1f5560;border-color:#c9e3e6;}

/* FAQ / dropdowns (native details) */
.faq{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  margin:0 0 .65rem;
  overflow:hidden;
}
.faq>summary{
  cursor:pointer;list-style:none;
  padding:.8rem 1rem;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq>summary::-webkit-details-marker{display:none;}
.faq>summary::after{
  content:"+";color:var(--river);font-weight:700;font-size:1.25rem;line-height:1;flex:none;
}
.faq[open]>summary::after{content:"\2212";}
.faq>summary:hover{background:var(--tint);}
.faq-body{padding:.2rem 1rem 1rem;border-top:1px solid var(--line-soft);}
.faq-body p:first-child{margin-top:.7rem;}
.faq-body .resource-list{margin-top:.7rem;}

/* Home grid of section links */
.index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.7rem;margin:1.2rem 0 0;}
.index-card{
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:.8rem .95rem;text-decoration:none;color:var(--ink);display:block;
}
.index-card:hover{border-color:var(--river);background:var(--tint);}
.index-card strong{display:block;font-family:"Spectral",serif;font-size:1.05rem;}
.index-card span{font-size:.86rem;color:var(--muted);}

/* Footer */
.site-footer{border-top:1px solid var(--line);background:var(--surface);margin-top:2.5rem;}
.site-footer .wrap{padding-top:1.4rem;padding-bottom:2rem;}
.footer-note{font-size:.9rem;color:var(--muted);max-width:46rem;}
.footer-meta{font-size:.82rem;color:var(--faint);margin-bottom:0;}

@media (max-width:640px){
  body{font-size:16px;}
  h1{font-size:1.8rem;}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}