:root{
  --cream:#F7F1E1;
  --paper:#FBF7EC;
  --ink:#231C14;
  --ink-soft:#5B4E3E;
  --rule:#231C14;
  --rule-soft:rgba(35,28,20,0.16);
  --gold:#B8912E;
  --oxblood:#7A2E27;
  --emerald:#1F5C4E;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Source Serif 4','Georgia',serif;
  font-size:17px;
  line-height:1.6;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

/* -------- Masthead -------- */
.topbar{
  font-family:'Inter',sans-serif;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--ink-soft);
  border-bottom:1px solid var(--rule-soft);
  padding:8px 0;
}
.topbar .wrap{display:flex; justify-content:space-between;}

.masthead{
  text-align:center;
  padding:30px 0 18px;
}
.masthead .kicker{
  font-family:'Inter',sans-serif;
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--oxblood);
  margin-bottom:10px;
}
.masthead h1{
  font-family:'Fraunces','Playfair Display',serif;
  font-weight:700;
  font-size:clamp(46px,7vw,84px);
  letter-spacing:.01em;
  margin:0 0 8px;
}
.masthead .sub{
  font-style:italic;
  color:var(--ink-soft);
  font-size:15.5px;
}
.rule-thick{border:none; border-top:3px solid var(--rule); margin:18px 0 3px;}
.rule-thin{border:none; border-top:1px solid var(--rule); margin:0 0 22px;}

/* -------- Filter pills -------- */
.filters{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
  padding-bottom:26px;
  font-family:'Inter',sans-serif;
}
.filters button{
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  padding:7px 14px;
  border:1px solid var(--rule);
  background:transparent;
  color:var(--ink);
  border-radius:999px;
  cursor:pointer;
  transition:all .15s ease;
}
.filters button:hover{background:var(--ink); color:var(--paper);}
.filters button.active{background:var(--oxblood); border-color:var(--oxblood); color:var(--paper);}

/* -------- Article grid -------- */
.feed-status{
  text-align:center;
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  color:var(--ink-soft);
  padding-bottom:24px;
}
.feed-status a{color:var(--emerald); font-weight:600;}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--rule-soft);
}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.grid{grid-template-columns:1fr;}}

article.story{
  padding:22px 22px 24px;
  border-right:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}
.grid > article.story:nth-child(3n){border-right:none;}
@media(max-width:900px){.grid > article.story:nth-child(3n){border-right:1px solid var(--rule-soft);} .grid > article.story:nth-child(2n){border-right:none;}}
@media(max-width:620px){.grid > article.story{border-right:none !important;}}

article.story .src{
  font-family:'Inter',sans-serif;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--emerald);
  margin-bottom:8px;
  display:block;
}
article.story h2{
  font-family:'Fraunces',serif;
  font-size:21px;
  line-height:1.28;
  font-weight:600;
  margin:0 0 8px;
}
article.story h2 a:hover{color:var(--oxblood);}
article.story p{
  font-size:14.5px;
  color:var(--ink-soft);
  margin:0 0 10px;
}
article.story time{
  font-family:'Inter',sans-serif;
  font-size:11.5px;
  color:var(--ink-soft);
}

/* -------- Footer -------- */
footer{
  margin-top:20px;
  border-top:3px solid var(--rule);
  padding:28px 0 34px;
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:var(--ink-soft);
}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; align-items:center;}
footer a{color:var(--emerald); font-weight:600;}

.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--ink-soft);
  font-family:'Inter',sans-serif;
  font-size:14px;
}