/* /css/style.css */
:root{
  --red:#b80606;
  --cream:#ebe2c1;
  --dark:#2a2a2a;
  --ink:#1a1a1a;
  --muted:#666;
  --bg:#f8f8f8;
  --line:#e5e5e5;
  --line2:#f0f0f0;

  --wrap:1400px;
  --pad:32px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:#fff;
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad);
}

/* HEADER */
.hdrTop{background:var(--dark);padding:16px var(--pad)}
.hdrTopIn{display:flex;justify-content:space-between;align-items:center;gap:24px}

.brand{display:flex;align-items:center;gap:20px;min-width:0}
.flagMark{
  width:70px;
  height:70px;
  flex:0 0 auto;
  display:block;
}

.brandTitle{
  font-size:20px;font-weight:900;letter-spacing:2px;color:#fff;line-height:1;
  white-space:nowrap;
}
.brandSub{
  font-size:10px;font-weight:600;letter-spacing:1.5px;
  color:rgba(255,255,255,.6);margin-top:4px;
}

.hdrMeta{font-size:11px;color:rgba(255,255,255,.7);text-align:right}
.hdrMetaA{font-weight:600;margin-bottom:2px}
.hdrMetaB{opacity:.7}

/* NAV BAR */
.hdrNav{background:var(--red);border-bottom:1px solid #8a0404}
.nav{display:flex;gap:0;flex-wrap:wrap}
.navLink{
  color:#fff;text-decoration:none;
  padding:14px 20px;
  font-size:13px;font-weight:700;letter-spacing:.5px;
  border-bottom:3px solid transparent;
  transition:all .2s ease;
}
.navLink:hover{
  border-bottom-color:#fff;
  background:rgba(0,0,0,.1);
}
.introActions{
  display:flex;
  gap:20px;
  margin-bottom:56px;
  flex-wrap:wrap;
}

.btn{
  display:inline-block;
  padding:14px 22px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  text-decoration:none;
  border:2px solid transparent;
  transition:all .2s ease;
}

/* Primary government action */
.btnPrimary{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}

.btnPrimary:hover{
  background:#8a0404;
  border-color:#8a0404;
}

/* Secondary / document action */
.btnGhost{
  background:#fff;
  color:var(--red);
  border-color:var(--red);
}

.btnGhost:hover{
  background:#fff5f5;
}

/* NOTICE */
.notice{
  background:#fffbf0;
  border-bottom:1px solid #f0e68c;
  border-left:4px solid #d4af37;
}
.noticeIn{padding:16px 0;display:flex;gap:12px;align-items:flex-start}
.noticeLabel{
  font-size:11px;font-weight:900;color:#8b6914;letter-spacing:1px;flex:0 0 auto;margin-top:2px;
}
.noticeText{font-size:14px;color:#5a4a0f;line-height:1.6}

/* MAIN BAND */
.mainBand{background:var(--bg);padding:60px 0}
.h1{font-size:36px;font-weight:900;margin-bottom:12px;color:var(--ink)}
.lead{font-size:16px;color:var(--muted);margin-bottom:40px;max-width:800px}

/* SERVICES GRID */
.services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-bottom:60px;
}
.card{
  display:block;
  background:#fff;
  padding:28px;
  cursor:pointer;
  color:inherit;
  text-decoration:none;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card::before{
  content:"";
  position:absolute;inset:0;
  border:1px solid var(--line);
  transition:border-color .2s ease;
}
.card:hover::before{border-color:var(--red)}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(184, 6, 6, .10);
}
.cardTitle{font-size:18px;font-weight:700;margin-bottom:10px;color:var(--ink);position:relative}
.cardDesc{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:16px;position:relative}
.cardCta{font-size:12px;font-weight:700;color:var(--red);letter-spacing:.5px;position:relative}

/* PANELS */
.panel{
  background:#fff;
  padding:40px;
  border:1px solid var(--line);
  margin-bottom:60px;
}
.h2{font-size:24px;font-weight:700;margin-bottom:28px;color:var(--ink)}

/* TIMELINE */
.timeline{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.phase{padding-left:0}
.phaseSep{border-left:1px solid var(--line);padding-left:16px}
.phaseK{font-size:10px;font-weight:900;color:#999;margin-bottom:8px;letter-spacing:1px}
.phaseT{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:4px}
.phaseY{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:12px}
.tag{
  font-size:9px;font-weight:900;
  color:#999;
  margin-bottom:12px;
  letter-spacing:1px;
  padding:4px 8px;
  border:1px solid var(--line);
  display:inline-block;
  background:transparent;
}
.tagActive{
  color:var(--red);
  border-color:var(--red);
  background:#fff5f5;
}
.phaseD{font-size:12px;line-height:1.5;color:var(--muted)}

/* FACTS */
.facts{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.fact{
  display:flex;
  padding-bottom:16px;
  border-bottom:1px solid var(--line2);
  gap:16px;
}
.factL{
  font-size:12px;
  font-weight:600;
  color:#999;
  width:200px;
  flex:0 0 auto;
}
.factV{font-size:14px;color:var(--ink);font-weight:600}

/* ANNOUNCEMENTS */
.ann{margin-top:0}
.feed{border:1px solid var(--line);background:#fff}
.item{padding:24px 28px;border-bottom:1px solid var(--line2)}
.itemLast{border-bottom:none}
.itemTop{display:flex;gap:12px;margin-bottom:10px;align-items:center}
.pillType{
  font-size:10px;font-weight:900;color:var(--red);
  letter-spacing:1px;
  padding:4px 10px;
  border:1px solid var(--red);
  background:#fff5f5;
}
.itemDate{font-size:12px;color:#999;font-weight:600}
.itemTitle{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px}
.itemDesc{font-size:14px;color:var(--muted);line-height:1.6}

/* FOOTER */
.foot{background:var(--dark);color:#fff;padding:48px 0 32px}
.footGrid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:40px;
}
.footBrand{
  font-size:18px;font-weight:900;margin-bottom:12px;letter-spacing:1.5px
}
.footDesc{
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.7);max-width:350px
}
.footH{
  font-size:12px;font-weight:700;margin-bottom:16px;color:var(--cream);letter-spacing:1px
}
.footList{list-style:none}
.footList li{margin-bottom:10px}
.footList a{
  color:rgba(255,255,255,.7);
  text-decoration:none;
  font-size:13px;
  transition:color .2s ease;
}
.footList a:hover{color:#fff}

.footBar{
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:24px;
  font-size:12px;
  color:rgba(255,255,255,.5);
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* CONSTITUTION / DOCUMENT STYLES */

.wrap.narrow{
  max-width:900px;
}

.docHead{
  margin-bottom:48px;
}

.docTitle{
  font-size:34px;
  font-weight:900;
  margin-bottom:12px;
}

.docMeta{
  font-size:13px;
  color:var(--muted);
  font-weight:600;
}

.docSection{
  margin-bottom:56px;
}

.docH{
  font-size:24px;
  font-weight:800;
  margin-bottom:20px;
}

.docSH{
  font-size:16px;
  font-weight:700;
  margin:28px 0 12px;
}

.docSection p{
  font-size:16px;
  line-height:1.75;
  margin-bottom:18px;
}

.docStrong{
  font-weight:700;
}

.docList{
  padding-left:22px;
  margin:16px 0 24px;
}

.docList li{
  margin-bottom:12px;
  line-height:1.6;
}

.docEnd{
  border-top:1px solid var(--line);
  padding-top:32px;
}

/* CONSTITUTION LAYOUT */
.constitutionLayout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:48px;
}

.constitutionBody{
  min-width:0;
}

/* TOC */
.toc{
  position:sticky;
  top:120px;
  align-self:start;
  padding:24px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.tocTitle{
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
  margin-bottom:16px;
  text-transform:uppercase;
  color:#666;
}

.tocNav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tocNav a.active{
  border-left-color:var(--red);
  color:var(--red);
  font-weight:700;
}

.tocNav a{
  font-size:13px;
  text-decoration:none;
  color:#111;
  padding-left:12px;
  border-left:2px solid transparent;
  transition:all .15s ease;
}

.tocNav a:hover{
  border-left-color:#b80606;
  color:#b80606;
}

/* MOBILE */
@media (max-width: 900px){
  .constitutionLayout{
    grid-template-columns:1fr;
  }

  .toc{
    position:relative;
    top:auto;
    border-right:none;
    border-bottom:1px solid #ddd;
    padding-bottom:24px;
    margin-bottom:32px;
  }
}


/* RESPONSIVE */
@media (max-width: 1100px){
  .services{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:1fr;gap:18px}
  .phaseSep{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:16px}
  .facts{grid-template-columns:1fr}
  .factL{width:160px}
  .footGrid{grid-template-columns:1fr 1fr;gap:28px}
}

@media (max-width: 700px){
  :root{--pad:18px}
  .hdrTop{padding:16px 0}
  .brandTitle{font-size:16px;letter-spacing:1.5px}
  .navLink{padding:12px 12px}
  .services{grid-template-columns:1fr}
  .panel{padding:24px}
  .item{padding:18px}
  .foot{padding:36px 0 24px}
  .footGrid{grid-template-columns:1fr}
}