@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink:#14181D;
  --paper:#EFEBE3;
  --paper-raised:#F7F4EE;
  --slate:#5B6572;
  --verdigris:#3F6E64;
  --verdigris-dark:#2E524A;
  --border:#D8D2C4;
  --warn:#8B4A3E;
  --max-w:760px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:17px;
  line-height:1.55;
}
h1,h2,h3,.masthead-word{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.1;
  margin:0 0 .4em;
}
a{color:var(--verdigris-dark)}
a:hover{color:var(--ink)}
img{max-width:100%;display:block}

/* header */
.site-header{
  border-bottom:1px solid var(--border);
  background:var(--ink);
  color:var(--paper-raised);
}
.header-inner{
  max-width:1040px;margin:0 auto;padding:22px 24px;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.wordmark{
  font-family:'Fraunces', serif;font-size:1.6rem;font-weight:600;color:#fff;text-decoration:none;
}
.wordmark span{color:var(--verdigris)}
nav.primary{display:flex;gap:22px;flex-wrap:wrap}
nav.primary a{color:var(--paper-raised);text-decoration:none;font-size:.94rem;opacity:.85}
nav.primary a:hover{opacity:1}

.age-strip{
  background:var(--verdigris-dark);color:#fff;font-size:.82rem;text-align:center;padding:6px 12px;
}

/* layout */
main{max-width:1040px;margin:0 auto;padding:0 24px}
.hero{
  padding:56px 0 40px;border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:1.3fr .9fr;gap:40px;align-items:end;
}
.hero h1{font-size:2.5rem;max-width:16ch}
.hero p.lede{color:var(--slate);font-size:1.08rem;max-width:46ch}
.hero-side{border-left:1px solid var(--border);padding-left:28px;font-size:.95rem;color:var(--slate)}
.hero-side strong{color:var(--ink);display:block;font-family:'Fraunces',serif;font-size:1.1rem;margin-bottom:6px}

.section-label{
  font-size:.8rem;color:var(--verdigris-dark);margin:48px 0 14px;
  border-top:1px solid var(--border);padding-top:14px;
}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:20px}
.card{border-top:2px solid var(--ink);padding-top:14px}
.card h3{font-size:1.15rem;margin-bottom:6px}
.card p{color:var(--slate);font-size:.95rem;margin:0 0 10px}
.card a.readmore{font-size:.88rem;text-decoration:none;border-bottom:1px solid var(--verdigris)}

.community-band{
  margin:56px 0;padding:34px;background:var(--paper-raised);border:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.community-band h2{font-size:1.4rem;margin-bottom:4px}
.community-band p{color:var(--slate);margin:0;max-width:44ch}
.btn{
  display:inline-block;background:var(--verdigris-dark);color:#fff;text-decoration:none;
  padding:11px 20px;font-size:.92rem;white-space:nowrap;
}
.btn:hover{background:var(--ink);color:#fff}

/* article */
article.post{max-width:var(--max-w);margin:0 auto;padding:50px 0 30px}
article.post .kicker{color:var(--verdigris-dark);font-size:.85rem;margin-bottom:10px}
article.post h1{font-size:2.1rem}
article.post .byline{color:var(--slate);font-size:.9rem;margin-bottom:28px}
article.post p{margin:0 0 1.1em}
article.post h2{font-size:1.35rem;margin-top:1.8em}
.pull{
  border-left:3px solid var(--verdigris);padding-left:18px;color:var(--slate);
  font-family:'Fraunces',serif;font-size:1.2rem;margin:1.8em 0;
}

.disclosure{
  max-width:var(--max-w);margin:0 auto 60px;padding:16px 18px;background:var(--paper-raised);
  border:1px solid var(--border);font-size:.85rem;color:var(--slate);
}

/* footer */
footer{
  border-top:1px solid var(--border);margin-top:60px;padding:30px 24px;color:var(--slate);font-size:.85rem;
}
.footer-inner{max-width:1040px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}

@media (max-width:760px){
  .hero{grid-template-columns:1fr}
  .hero-side{border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:18px}
  .card-grid{grid-template-columns:1fr}
}