/* ============================================================
   DECODING MONGOLIA — scaffold stylesheet
   Design system: build plan v2 (Mongolian flag palette, bright)
   No external fonts, no third-party anything. System stack only.
   ============================================================ */
:root{
  --red:#DA291C;
  --red-dark:#B02115;
  --blue:#003DA5;
  --blue-dark:#002A78;
  --gold:#FFD100;
  --gold-soft:#FFF6D6;
  --ink:#1A1A1A;
  --muted:#5A6470;
  --paper:#FFFFFF;
  --mist:#F4F5F7;
  --line:#E2E6EB;
  --radius:12px;
  --maxw:1120px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--paper);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:var(--blue)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:3px solid var(--blue);
}
.header-inner{display:flex; align-items:center; gap:16px; padding:12px 20px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.seal{
  width:46px; height:46px; border-radius:50%;
  background:var(--red); color:#fff;
  border:3px double var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; letter-spacing:.5px; flex:none;
}
.brand-text{font-weight:800; font-size:20px; letter-spacing:1px; color:var(--ink); line-height:1.1}
.brand-text span{color:var(--blue)}
.mainnav{display:flex; gap:4px; flex-wrap:wrap}
.mainnav a{
  text-decoration:none; color:var(--ink); font-weight:600; font-size:15px;
  padding:10px 12px; border-radius:8px; min-height:44px; display:inline-flex; align-items:center;
}
.mainnav a:hover{background:var(--mist)}
.mainnav a.active{color:var(--blue); box-shadow:inset 0 -3px 0 var(--gold)}
.nav-toggle{
  display:none; background:var(--paper); border:2px solid var(--line);
  border-radius:8px; padding:10px 14px; font-size:16px; font-weight:700; cursor:pointer;
  min-height:44px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; font-weight:700; font-size:16px;
  padding:12px 22px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; min-height:44px; transition:transform .06s ease;
}
.btn:active{transform:scale(.98)}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-blue{background:var(--blue); color:#fff}
.btn-blue:hover{background:var(--blue-dark)}
.btn-ghost{background:var(--paper); color:var(--blue); border-color:var(--blue)}
.btn[disabled], .btn.disabled{opacity:.55; cursor:not-allowed}
.btn-sm{padding:8px 16px; font-size:14px; min-height:40px}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg, var(--gold-soft) 0%, var(--paper) 100%); padding:56px 0 48px; border-bottom:1px solid var(--line)}
.kicker{color:var(--blue); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:13px; margin:0 0 12px}
.hero h1{font-size:clamp(30px,5vw,52px); line-height:1.12; margin:0 0 14px; color:var(--ink)}
.hero h1 .hl{box-shadow:inset 0 -0.35em var(--gold)}
.hero p.lead{font-size:19px; color:var(--muted); max-width:640px; margin:0 0 24px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- sections ---------- */
.section{padding:48px 0}
.section.alt{background:var(--mist)}
.section-title{font-size:26px; margin:0 0 6px; color:var(--blue)}
.section-title::after{content:""; display:block; width:64px; height:5px; background:var(--gold); border-radius:3px; margin-top:8px}
.section-sub{color:var(--muted); margin:0 0 28px; max-width:720px}

/* ---------- cards ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.card-art{
  aspect-ratio:16/9; background:linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  display:flex; align-items:center; justify-content:center; position:relative; color:#fff;
}
.card-art .art-seal{
  width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.14);
  border:3px double var(--gold); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px;
}
.card-art .art-label{position:absolute; bottom:8px; left:10px; font-size:11px; letter-spacing:1px; opacity:.85}
.card-body{padding:18px; display:flex; flex-direction:column; gap:8px; flex:1}
.card-kicker{font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--red)}
.card h3{margin:0; font-size:19px; line-height:1.35}
.card h3 a{color:var(--ink); text-decoration:none}
.card h3 a:hover{color:var(--blue)}
.card p{margin:0; color:var(--muted); font-size:15px; flex:1}
.card-meta{font-size:13px; color:var(--muted)}
.pill-sample{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:1px;
  background:var(--gold-soft); border:1px dashed var(--muted); color:var(--muted);
  border-radius:999px; padding:2px 10px; text-transform:uppercase; align-self:flex-start;
}
.layout-note{
  margin-top:20px; font-size:14px; color:var(--muted); background:var(--gold-soft);
  border-left:4px solid var(--gold); padding:12px 16px; border-radius:0 8px 8px 0;
}

/* ---------- money-watch strip ---------- */
.mw-table{width:100%; border-collapse:collapse; background:var(--paper); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line)}
.mw-table th{background:var(--blue); color:#fff; text-align:left; padding:12px 14px; font-size:14px}
.mw-table td{padding:12px 14px; border-top:1px solid var(--line); font-size:15px; vertical-align:top}
.mw-table tr:hover td{background:var(--mist)}
.status{display:inline-block; font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px; letter-spacing:.5px}
.status.open{background:#E3F2FD; color:var(--blue)}
.status.flagged{background:#FDECEA; color:var(--red)}
.status.cleared{background:#E8F5E9; color:#1B7A3D}

/* ---------- promise tracker ---------- */
.pledge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pledge{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.pledge h3{margin:0 0 4px; font-size:18px}
.pledge .who{font-size:13px; color:var(--muted); margin:0 0 12px}
.progress{height:12px; background:var(--line); border-radius:999px; overflow:hidden; margin:10px 0 8px}
.progress > span{display:block; height:100%; background:linear-gradient(90deg, var(--gold), #FFB300); border-radius:999px}
.verdict{font-size:13px; font-weight:800; letter-spacing:.5px; text-transform:uppercase}
.verdict.kept{color:#1B7A3D} .verdict.broken{color:var(--red)}
.verdict.progressing{color:var(--blue)} .verdict.stalled{color:#8a6d00}

/* ---------- safety box (tip line) ---------- */
.safety-box{
  background:#FFF8E1; border:2px solid var(--gold); border-radius:var(--radius);
  padding:24px; margin:0 0 28px;
}
.safety-box h2{margin:0 0 10px; font-size:20px; color:var(--ink); letter-spacing:1px}
.safety-box ul{margin:0; padding-left:20px}
.safety-box li{margin:6px 0}
.coming-soon{
  background:var(--mist); border:2px dashed var(--muted); border-radius:var(--radius);
  padding:24px; text-align:center; margin:0 0 28px;
}
.coming-soon h2{margin:0 0 8px; color:var(--blue)}
.coming-soon p{margin:0; color:var(--muted)}
form.tipform{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
form.tipform fieldset{border:0; padding:0; margin:0; display:grid; gap:18px}
form.tipform fieldset[disabled]{opacity:.65}
label{display:grid; gap:6px; font-weight:700; font-size:15px}
label .hint{font-weight:400; font-size:13px; color:var(--muted)}
input[type=text], textarea{
  font:inherit; padding:12px 14px; border:2px solid var(--line); border-radius:8px; width:100%;
}
input[type=text]:focus, textarea:focus{outline:none; border-color:var(--blue)}
textarea{min-height:130px; resize:vertical}
.steps{counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:14px}
.steps li{counter-increment:step; display:flex; gap:14px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
.steps li::before{
  content:counter(step); flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--blue); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center;
}

/* panic button */
#panicBtn{
  position:fixed; right:18px; bottom:18px; z-index:100;
  width:64px; height:64px; border-radius:50%; border:3px solid #fff;
  background:var(--red); color:#fff; font-weight:800; font-size:15px; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}

/* ---------- donation band ---------- */
.donate-band{background:var(--blue); color:#fff; border-radius:var(--radius); padding:36px; text-align:center}
.donate-band h2{margin:0 0 8px; color:#fff}
.donate-band h2::after{background:var(--gold)}
.donate-band p{color:#D6E2F7; max-width:600px; margin:0 auto 20px}
.donate-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.crypto-addrs{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:18px; font-size:13px}
.crypto-addrs code{background:rgba(255,255,255,.12); padding:8px 12px; border-radius:8px; color:#fff; word-break:break-all; max-width:320px}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:#C9CFD6; margin-top:0}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:28px; padding:44px 20px 28px; max-width:var(--maxw); margin:0 auto}
.site-footer h4{color:#fff; margin:0 0 12px; font-size:15px; letter-spacing:1px; text-transform:uppercase}
.site-footer a{color:#C9CFD6; text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.footer-nav{list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:15px}
.footer-brand{font-weight:800; color:#fff; font-size:18px; letter-spacing:1px}
.footer-brand span{color:var(--gold)}
.disclaimer{font-size:13px; border-top:1px solid #333; padding-top:16px; margin-top:16px}
.footer-bottom{border-top:1px solid #333; padding:16px 20px; text-align:center; font-size:13px; max-width:var(--maxw); margin:0 auto}

/* ---------- page hero (interior) ---------- */
.page-hero{background:var(--mist); border-bottom:1px solid var(--line); padding:40px 0 32px}
.page-hero h1{margin:0 0 8px; font-size:clamp(28px,4vw,40px); color:var(--blue)}
.page-hero p{margin:0; color:var(--muted); max-width:720px; font-size:18px}

/* ---------- survey ---------- */
.survey-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px; max-width:720px}
.survey-card h2{margin-top:0}

/* ---------- about ---------- */
.about-block{max-width:760px}
.about-block h2{color:var(--blue)}
.motto-line{font-size:22px; font-weight:700; border-left:5px solid var(--gold); padding-left:16px; margin:28px 0}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .card-grid, .pledge-grid{grid-template-columns:1fr 1fr}
  .nav-toggle{display:inline-flex}
  .mainnav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--paper); flex-direction:column; padding:8px 16px 16px;
    border-bottom:3px solid var(--blue); box-shadow:0 12px 24px rgba(0,0,0,.12);
  }
  .mainnav.open{display:flex}
  .header-inner{position:relative; flex-wrap:wrap}
  .header-inner .btn-red{margin-left:auto}
}
@media (max-width: 600px){
  body{font-size:16px}
  .card-grid, .pledge-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero{padding:40px 0 32px}
  .brand-text{font-size:16px}
  .seal{width:40px; height:40px; font-size:13px}
  .mw-table th:nth-child(4), .mw-table td:nth-child(4){display:none}
}