/* The Chuma Institute — design system v1 (chumainstitute.com) */
:root{
  --green:#3F5E1E; --green-deep:#2E4616; --green-soft:#EDF2E4;
  --ink:#121409; --paper:#FFFFFF; --paper-2:#FAFAF6; --line:#E3E2D9;
  --muted:#6E7163; --good:#3E7A4E; --warn:#A3651B; --bad:#A8382E;
  --serif:"Source Serif 4", Georgia, serif;
  --sans:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
*{box-sizing:border-box; margin:0}
body{font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.6}
a{color:inherit; text-decoration:none}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.narrow{max-width:760px}

.bracket{position:relative; display:inline-block; padding:6px 16px 6px 12px}
.bracket::before{content:""; position:absolute; inset:0; border:3px solid var(--ink); border-right:none}
.bracket::after{content:""; position:absolute; right:0; top:0; bottom:0; width:14px;
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink)}
.wordmark{font-weight:600; letter-spacing:.14em; font-size:15px}
.wordmark b{color:var(--green); font-weight:600}

header{border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:10}
.nav{display:flex; align-items:center; gap:24px; padding:14px 0}
.nav nav{display:flex; gap:22px; margin-left:auto; font-size:14px; color:#3B3E31; align-items:center}
.nav nav a:hover{color:var(--green)}
.nav .cta{background:var(--green); color:#fff; padding:8px 16px; border-radius:3px; font-weight:500}
.nav .cta:hover{background:var(--green-deep); color:#fff}
@media(max-width:760px){.nav nav{gap:14px; font-size:13px}}

.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--green); font-weight:500}
h1{font-family:var(--serif); font-weight:700; line-height:1.12}
h2{font-family:var(--serif); font-weight:700}
.rule{width:48px; height:4px; background:var(--green); margin:20px 0}
.btn{display:inline-block; font-size:14px; padding:11px 20px; border-radius:3px; font-weight:500}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:#000}
.btn-line{border:1.5px solid var(--green); color:var(--green)}
.btn-line:hover{background:var(--green); color:#fff}

.hero{background:var(--paper-2); border-bottom:1px solid var(--line)}
.hero-inner{padding:64px 0 44px; max-width:720px}
.hero h1{font-size:clamp(30px,4.6vw,46px); margin:14px 0}
.dek{font-size:17px; color:#43462F; max-width:560px}

.cards{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line)}
.card{padding:26px 22px 30px; border-right:1px solid var(--line)}
.card:last-child{border-right:none}
.card h3{font-family:var(--serif); font-size:18px; line-height:1.3; margin:10px 0 8px; font-weight:600}
.card p{font-size:13.5px; color:#4A4D40}
.card .more{display:inline-block; margin-top:12px; font-size:13px; color:var(--green); font-weight:500}
@media(max-width:760px){.cards{grid-template-columns:1fr}.card{border-right:none; border-bottom:1px solid var(--line)}}

.digest{background:var(--green); color:#EFF3E6}
.digest .wrap{display:flex; align-items:center; gap:18px; padding:20px 24px; flex-wrap:wrap}
.digest p{font-size:14.5px; flex:1; min-width:240px}
.digest form{display:flex; gap:8px; flex-wrap:wrap}
.digest input[type=email]{padding:10px 12px; border:none; border-radius:3px; font-size:14px; min-width:220px; font-family:var(--sans)}
.digest button{background:#fff; color:var(--green-deep); border:none; padding:10px 16px; border-radius:3px; font-weight:600; font-size:14px; cursor:pointer}

footer{padding:22px 0 36px; font-size:12.5px; color:var(--muted)}
footer .wrap{display:flex; gap:22px; flex-wrap:wrap}
footer a{border-bottom:1px solid var(--line)}
footer .co{margin-left:auto}

/* article + gate */
article.post{padding:52px 0 64px}
article.post h1{font-size:clamp(26px,4vw,38px); max-width:640px}
.byline{font-size:13.5px; color:var(--muted); margin:12px 0 0}
.post-body{margin-top:28px}
.post-body p{font-size:16px; margin:0 0 16px; max-width:66ch}
.post-body h2{font-size:24px; margin:30px 0 12px}
.post-body .cite{font-family:var(--mono); font-size:11px; color:var(--green)}
.exhibit{margin:26px 0; border:1px solid var(--line)}
.exhibit-head{display:flex; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--paper-2); font-size:14px; font-weight:600}
.exhibit-head .no{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--green); font-weight:500}
.exhibit-body{padding:16px}
.exhibit-src{padding:8px 16px; font-family:var(--mono); font-size:10.5px; color:var(--muted); border-top:1px solid var(--line); display:flex; justify-content:space-between}

.gate-zone{position:relative}
.gated{filter:blur(6px); user-select:none; pointer-events:none; max-height:520px; overflow:hidden}
.gate{position:absolute; inset:auto 0 0 0; padding:120px 24px 34px; text-align:center;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--paper) 55%)}
.gate .box{max-width:430px; margin:0 auto; border:1px solid var(--line); background:var(--paper); padding:26px 26px 22px; box-shadow:0 2px 10px rgba(18,20,9,.08)}
.gate h3{font-family:var(--serif); font-size:20px; margin-bottom:6px}
.gate p{font-size:13.5px; color:var(--muted); margin-bottom:14px}
.gate form{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.gate input[type=email]{padding:10px 12px; border:1px solid var(--line); border-radius:3px; font-size:14px; min-width:210px; font-family:var(--sans)}
.gate button{background:var(--green); color:#fff; border:none; padding:10px 16px; border-radius:3px; font-weight:600; font-size:14px; cursor:pointer}
.gate small{display:block; margin-top:10px; font-size:11.5px; color:var(--muted)}

.pub-list{padding:40px 0 60px}
.pub-row{display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline; flex-wrap:wrap}
.pub-row .tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--green); border:1px solid var(--green); border-radius:2px; padding:1px 6px; white-space:nowrap}
.pub-row .tag.paid{color:var(--warn); border-color:var(--warn)}
.pub-row h3{font-family:var(--serif); font-size:19px; font-weight:600; flex:1; min-width:260px}
.pub-row .date{font-family:var(--mono); font-size:12px; color:var(--muted)}
:focus-visible{outline:2px solid var(--green); outline-offset:2px}