/* Unspoken Thoughts - forest green, warm white, soft rose accent */
:root{
  --forest:#1E3D2F; --moss:#43775C; --moss-lite:#6FA083;
  --sage:#E6EEE8; --sage-deep:#CFDFD4;
  --rose:#B0757E; --rose-lite:#F0E2E3;
  --cream:#FCFBF8; --paper:#FFFFFF;
  --ink:#20302A; --muted:#67796F; --line:#DFE6E0;
  --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(30,61,47,.05), 0 8px 28px rgba(30,61,47,.06);
  --wrap:1180px; --narrow:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--moss); text-decoration:none}
a:hover{color:var(--forest)}
:focus-visible{outline:3px solid var(--moss-lite); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--forest); color:#fff; padding:10px 16px; border-radius:8px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:var(--narrow)}

h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.18;
  letter-spacing:-.012em; color:var(--forest); margin:0}

/* masthead */
.masthead{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.masthead-in{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:74px}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{width:30px; height:30px; border-radius:50% 50% 50% 4px;
  background:linear-gradient(150deg,var(--moss),var(--forest)); flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-name{font-family:"Fraunces",serif; font-weight:600; font-size:19px; color:var(--forest)}
.brand-sub{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.nav{display:flex; align-items:center; gap:26px; font-size:14.5px; font-weight:500}
.nav a{color:var(--ink)}
.nav a:hover{color:var(--moss)}
.nav-search{border:1px solid var(--line); padding:7px 16px; border-radius:999px}
.nav-search:hover{background:var(--sage); border-color:var(--sage-deep)}

/* hero */
.hero{padding:78px 0 40px; background:
  radial-gradient(90% 130% at 12% 0%, var(--sage) 0%, rgba(230,238,232,0) 62%), var(--cream)}
.hero-eyebrow{margin:0 0 16px; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rose); font-weight:700}
.hero-title{font-size:clamp(34px,5.4vw,60px); max-width:16ch; margin:0 0 18px}
.hero-title em{font-style:italic; color:var(--moss); font-weight:400}
.hero-sub{margin:0; color:var(--muted); font-size:18px; max-width:52ch}

/* lead article */
.lead-wrap{padding:14px 0 8px}
.lead{display:grid; grid-template-columns:1.05fr .95fr; gap:0; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow)}
.lead-media{display:block; background:var(--sage)}
.lead-media img{width:100%; height:100%; min-height:340px; object-fit:cover}
.lead-body{padding:40px 42px}
.lead-flag{margin:0 0 14px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--moss)}
.lead-title{font-size:clamp(25px,2.7vw,35px); margin:10px 0 14px}
.lead-title a{color:var(--forest)}
.lead-title a:hover{color:var(--moss)}
.lead-ex{color:var(--muted); margin:0 0 18px}

.eyebrow{display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--rose)}
.eyebrow:hover{color:var(--forest)}

.btn{display:inline-block; margin-top:20px; background:var(--forest); color:#fff;
  padding:12px 26px; border-radius:999px; font-weight:600; font-size:14.5px}
.btn:hover{background:var(--moss); color:#fff}

/* chips */
.chips-wrap{padding:44px 0 22px}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{border:1px solid var(--line); background:var(--paper); padding:8px 16px; border-radius:999px;
  font-size:14px; font-weight:500; color:var(--ink)}
.chip span{color:var(--muted); font-size:12.5px; margin-left:5px}
.chip:hover{background:var(--sage); border-color:var(--sage-deep); color:var(--forest)}

/* grid + cards */
.grid-wrap{padding:8px 0 56px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card-media{background:var(--sage); aspect-ratio:16/10; overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover}
.card-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.card-title{font-size:20px; margin:9px 0 10px; line-height:1.28}
.card-title a{color:var(--forest)}
.card-title a:hover{color:var(--moss)}
.card-ex{color:var(--muted); font-size:15px; margin:0 0 16px; flex:1}
.card-meta{margin:0; font-size:13px; color:var(--muted); display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.dot{width:3px; height:3px; border-radius:50%; background:var(--sage-deep); display:inline-block}

/* page heads */
.pagehead{padding:60px 0 6px}
.pagehead-title{font-size:clamp(30px,4vw,44px)}
.pagehead-sub{color:var(--muted); margin:10px 0 0}

/* post */
.post-head{padding:56px 0 26px; background:
  radial-gradient(80% 120% at 20% 0%, var(--sage) 0%, rgba(230,238,232,0) 60%)}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:18px}
.crumbs a{color:var(--moss)}
.crumbs span{margin:0 7px; color:var(--sage-deep)}
.post-title{font-size:clamp(30px,4.4vw,50px); margin:0 0 20px; letter-spacing:-.018em}
.post-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  color:var(--muted); font-size:14.5px; margin:0}
.post-meta .by{color:var(--forest); font-weight:600}
.post-hero{padding-top:14px}
.post-hero img{width:100%; max-height:520px; object-fit:cover; border-radius:var(--r-lg)}

.post-body{padding:40px 24px 70px; font-size:18.5px; line-height:1.8}
.post-body p{margin:0 0 1.35em}
.post-body h2{font-size:30px; margin:2em 0 .6em}
.post-body h3{font-size:23px; margin:1.7em 0 .5em}
.post-body ul,.post-body ol{margin:0 0 1.35em; padding-left:1.4em}
.post-body li{margin-bottom:.55em}
.post-body a{color:var(--moss); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:var(--moss-lite)}
.post-body a:hover{color:var(--forest); text-decoration-color:var(--forest)}
.post-body img{border-radius:var(--r); margin:2em auto}
.post-body figure{margin:2.2em 0}
.post-body figcaption{font-size:14px; color:var(--muted); text-align:center; margin-top:12px; font-style:italic}
.post-body blockquote{margin:2em 0; padding:6px 0 6px 26px; border-left:3px solid var(--rose);
  font-family:"Fraunces",serif; font-size:22px; line-height:1.5; color:var(--forest); font-style:italic}
.post-body blockquote p:last-child{margin-bottom:0}
.post-body strong{color:var(--forest)}
.post-body hr{border:0; border-top:1px solid var(--line); margin:2.6em 0}
.post-body table{width:100%; border-collapse:collapse; margin:2em 0; font-size:16px}
.post-body th,.post-body td{border:1px solid var(--line); padding:11px 14px; text-align:left}
.post-body th{background:var(--sage); color:var(--forest)}

.related{background:var(--sage); padding:66px 0 74px; border-top:1px solid var(--sage-deep)}
.sec-title{font-size:27px; margin:0 0 30px}
.related .card{border-color:var(--sage-deep)}

/* pager */
.pager{display:flex; align-items:center; justify-content:center; gap:22px; padding:14px 24px 76px;
  font-weight:600; font-size:15px}
.pager-now{color:var(--muted); font-weight:400}
.pager a{border:1px solid var(--line); background:var(--paper); padding:11px 24px; border-radius:999px}
.pager a:hover{background:var(--sage); border-color:var(--sage-deep)}

/* search */
.search-box{width:100%; padding:16px 22px; font-size:17px; font-family:inherit;
  border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink)}
.search-box:focus{outline:none; border-color:var(--moss-lite); box-shadow:0 0 0 4px var(--sage)}
.search-count{color:var(--muted); font-size:14.5px; margin:20px 0 0}
.res{border-bottom:1px solid var(--line); padding:22px 0}
.res h3{font-size:21px; margin:7px 0 7px}
.res p{color:var(--muted); font-size:15px; margin:0}

/* footer */
.foot{background:var(--forest); color:#CFE0D5; padding:64px 0 0; margin-top:0}
.foot-in{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:44px; padding-bottom:44px}
.foot-name{font-family:"Fraunces",serif; font-size:20px; color:#fff; margin:0 0 12px}
.foot-note{font-size:14.5px; line-height:1.65; margin:0; color:#A9C4B4; max-width:44ch}
.foot-h{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#8FB39D;
  margin:0 0 14px; font-weight:700}
.foot-col a{display:block; color:#CFE0D5; font-size:14.5px; padding:5px 0}
.foot-col a:hover{color:#fff}
.foot-bar{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px; padding-bottom:26px;
  font-size:13px; color:#8FB39D}

@media (max-width:960px){
  .lead{grid-template-columns:1fr}
  .lead-media img{min-height:250px}
  .lead-body{padding:32px 28px}
  .grid,.grid-3{grid-template-columns:repeat(2,1fr); gap:24px}
  .foot-in{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .wrap{padding:0 18px}
  .nav{gap:15px; font-size:13.5px}
  .brand-sub{display:none}
  .nav a:not(.nav-search){display:none}
  .hero{padding:52px 0 30px}
  .grid,.grid-3{grid-template-columns:1fr}
  .post-body{padding:32px 18px 56px; font-size:17.5px}
  .foot-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}