:root{
  --bg:#F6F1EB;
  --paper:#FFFDF9;
  --text:#222;
  --muted:#555;
  --sage:#A8B5A2;
  --terra:#C77B5B;
  --teal:#2F4F4F;
  --line:rgba(0,0,0,.12);
  --focus:#1a73e8;
  --radius:18px;
  --max:1100px;
  --shadow:0 10px 28px rgba(0,0,0,.10);
  --font: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 18px; /* readable default */
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important;}
}

*{box-sizing:border-box}
body{margin:0; font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.55}
a{color:var(--teal); text-decoration-thickness:.12em; text-underline-offset:.2em}
a:focus, button:focus, input:focus{outline:3px solid var(--focus); outline-offset:2px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:28px 0}
.sep{border:0; border-top:1px solid var(--line); margin:28px 0}

.skip-link{
  position:absolute; left:-999px; top:10px; background:#000; color:#fff;
  padding:10px 14px; border-radius:10px; z-index:9999;
}
.skip-link:focus{left:10px}

.site-header{background:var(--paper); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:18px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand-mark{width:44px; height:44px}
.brand-title{font-family:var(--serif); font-weight:700; font-size:1.15rem; display:block}
.brand-tagline{font-size:.9rem; color:var(--muted); display:block}

.site-nav .menu{list-style:none; display:flex; gap:14px; margin:0; padding:0; flex-wrap:wrap}
.site-nav .menu a{padding:10px 10px; border-radius:12px; text-decoration:none}
.site-nav .menu a:hover{background:rgba(168,181,162,.25)}

.hero{background:linear-gradient(180deg, var(--paper), rgba(246,241,235,.4)); border-bottom:1px solid var(--line)}
.hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:stretch; padding:26px 0}
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
}

.kicker{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(199,123,91,.18); color:#5b2f22; font-size:.9rem}
.display{font-family:var(--serif); font-size:2.2rem; margin:.5rem 0 .4rem}
.lead{font-size:1.08rem; color:var(--muted); max-width:55ch}

.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.btn,.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:14px; border:2px solid transparent;
  text-decoration:none; font-weight:650;
}
.btn{background:var(--teal); color:white}
.btn:hover{filter:brightness(1.05)}
.btn-outline{background:transparent; border-color:rgba(47,79,79,.35); color:var(--teal)}
.btn-outline:hover{background:rgba(47,79,79,.08)}
.btn-link{font-weight:650}

.hero-media{
  background:rgba(168,181,162,.18);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  min-height:260px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.media-placeholder{padding:18px; color:var(--muted); text-align:center}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.panel{
  background:var(--paper);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

.cards{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

.card{
  background:var(--paper);
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.h1{font-family:var(--serif); font-size:2rem; margin:.2rem 0 1rem}
.h2{font-family:var(--serif); font-size:1.5rem; margin:.2rem 0 .6rem}
.h3{font-family:var(--serif); font-size:1.15rem; margin:.2rem 0 .4rem}

.muted{color:var(--muted)}
.tiny{font-size:.88rem}
.sr-only{position:absolute; left:-9999px}

.newsletter{display:flex; gap:10px; flex-wrap:wrap}
.newsletter input{
  padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.2);
  min-width:240px; font-size:1rem;
}
.newsletter button{
  padding:10px 14px; border-radius:12px; border:0; background:var(--terra); color:white; font-weight:700;
}

.site-footer{margin-top:30px; background:var(--paper); border-top:1px solid var(--line)}
.footer-inner{display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:18px; padding:22px 0}
@media (max-width:900px){.footer-inner{grid-template-columns:1fr}}
.footer-brand{display:flex; gap:12px; align-items:center}
.footer-meta{padding:10px 0 20px}

.comment-list{padding-left:1.2rem}