:root{
  --sage:#7c8a6e;
  --sage-dark:#5c6850;
  --cream:#faf7f0;
  --terracotta:#c17a5a;
  --ink:#3a382f;
  --muted:#8a8577;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.7;
}
a{color:var(--terracotta)}
header.hero{
  text-align:center;
  padding:64px 20px 48px;
  background:linear-gradient(180deg,#eef0e6,var(--cream));
}
header.hero .mark{
  width:56px;height:56px;
  margin:0 auto 20px;
  border-radius:50%;
  background:var(--sage);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6em;
  font-family:Georgia,serif;
}
header.hero h1{
  font-size:2.2em;
  color:var(--sage-dark);
  margin:0 0 8px;
  font-weight:normal;
  letter-spacing:0.02em;
}
header.hero p.tagline{
  color:var(--muted);
  font-size:1.05em;
  max-width:560px;
  margin:0 auto;
}
nav.onepage{
  display:flex;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  padding:14px;
  background:var(--sage);
}
nav.onepage a{
  color:#fff;
  text-decoration:none;
  font-size:0.95em;
  opacity:0.92;
}
nav.onepage a:hover{opacity:1;text-decoration:underline}
main{
  max-width:760px;
  margin:0 auto;
  padding:8px 20px 60px;
}
section{
  padding:48px 0;
  border-bottom:1px solid #e4e0d3;
}
section:last-of-type{border-bottom:none}
section h2{
  color:var(--sage-dark);
  font-size:1.5em;
  font-weight:normal;
  margin-bottom:0.8em;
}
section p{margin:0 0 1.1em}
.bio-list{
  margin:0;
  padding-left:1.2em;
  color:var(--ink);
}
.bio-list li{margin-bottom:0.4em}
.articles-grid{
  display:grid;
  gap:18px;
}
.article-card{
  background:#fff;
  border:1px solid #e4e0d3;
  border-radius:8px;
  padding:18px 20px;
}
.article-card .tags{
  font-size:0.78em;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--terracotta);
  margin-bottom:6px;
}
.article-card h3{
  margin:0 0 8px;
  font-size:1.1em;
  color:var(--ink);
  font-weight:bold;
}
.article-card p{
  margin:0;
  font-size:0.95em;
  color:#555;
}
footer.site-footer{
  text-align:center;
  padding:24px;
  color:var(--muted);
  font-size:0.85em;
}
@media (max-width:600px){
  header.hero{padding:48px 16px 36px}
  header.hero h1{font-size:1.7em}
  nav.onepage{gap:16px}
}