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

:root{
  --spruce:#0F3B3A;
  --deep-spruce:#0A2B2A;
  --bone:#F2EBDC;
  --ochre:#CB7A2B;
  --ink:#211F1B;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  line-height:1.65;
}
a{color:inherit;text-decoration:none;}

/* ---------- Nav ---------- */
.site-nav{
  background:var(--spruce);
  color:var(--bone);
  padding:22px 6vw;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.site-nav .brand{
  font-family:'Fraunces',serif;
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:0.01em;
}
.site-nav .brand span{
  display:block;
  font-family:'Work Sans',sans-serif;
  font-size:0.7rem;
  font-weight:400;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ochre);
  margin-top:2px;
}
.site-nav .links a{
  margin-left:22px;
  font-size:0.92rem;
  opacity:0.88;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.site-nav .links a:hover{ opacity:1; border-color:var(--ochre); }

/* ---------- Hero ---------- */
.hero{
  background:
    linear-gradient(120deg, rgba(15,59,58,0.94) 0%, rgba(15,59,58,0.75) 55%, rgba(15,59,58,0.55) 100%),
    url('assets/hero.jpg') center/cover no-repeat;
  color:var(--bone);
  padding:64px 6vw 78px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  right:-60px; top:-60px;
  width:260px; height:260px;
  border:1px solid rgba(242,235,220,0.15);
  border-radius:50%;
}
.hero-inner{max-width:640px;position:relative;}
.hero h1{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(2.1rem,5vw,3.1rem);
  margin:0 0 18px;
  line-height:1.15;
}
.hero p{
  font-size:1.05rem;
  color:rgba(242,235,220,0.85);
  max-width:520px;
  margin:0;
}
.hero .signature{
  margin-top:28px;
  font-family:'Fraunces',serif;
  font-style:italic;
  color:var(--ochre);
  font-size:1.05rem;
}

/* ---------- Filters ---------- */
.filter-bar{
  padding:28px 6vw 0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.filter-bar a{
  font-size:0.82rem;
  padding:7px 16px;
  border:1px solid var(--spruce);
  border-radius:999px;
  color:var(--spruce);
  letter-spacing:0.03em;
}
.filter-bar a.active,
.filter-bar a:hover{
  background:var(--spruce);
  color:var(--bone);
}

/* ---------- Post list ---------- */
.post-list{
  padding:36px 6vw 90px;
  max-width:840px;
  margin:0 auto;
}
.post-row{
  display:grid;
  grid-template-columns:110px 1px 1fr;
  gap:26px;
  padding:26px 0;
  border-bottom:1px solid rgba(33,31,27,0.12);
}
.post-row:first-child{padding-top:0;}
.post-row .meta{
  font-size:0.78rem;
  color:var(--spruce);
  letter-spacing:0.03em;
  padding-top:4px;
}
.post-row .rule{
  background:linear-gradient(rgba(203,122,43,0.5),rgba(203,122,43,0.5)) center/1px 100% no-repeat;
}
.post-row h2{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:1.4rem;
  margin:0 0 8px;
}
.post-row h2 a:hover{ color:var(--ochre); }
.post-row .cat{
  display:inline-block;
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ochre);
  margin-bottom:8px;
}
.post-row .excerpt{
  font-size:0.95rem;
  color:rgba(33,31,27,0.75);
  margin:0;
}
.post-row .readmore{
  display:inline-block;
  margin-top:10px;
  font-size:0.85rem;
  color:var(--spruce);
  border-bottom:1px solid var(--ochre);
}

/* ---------- Featured images ---------- */
.post-row .thumb{
  width:100%;
  max-height:360px;
  object-fit:contain;
  border-radius:2px;
  margin-bottom:12px;
  display:block;
}
.post-featured{
  max-width:680px;
  margin:0 auto;
  padding:36px 6vw 0;
}
.post-featured img{
  width:100%;
  height:auto;
  max-height:640px;
  object-fit:contain;
  border-radius:2px;
  display:block;
  margin:0 auto;
}
.post-featured.two-up{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.post-featured.two-up img{ aspect-ratio:4/5; }
.post-featured .credit{
  display:block;
  font-size:0.75rem;
  color:rgba(33,31,27,0.55);
  margin-top:8px;
  text-align:right;
}

/* ---------- Single post ---------- */
.post-hero{
  background:var(--spruce);
  color:var(--bone);
  padding:50px 6vw 60px;
}
.post-hero .cat{
  font-size:0.75rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ochre);
}
.post-hero h1{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:clamp(1.8rem,4vw,2.6rem);
  margin:14px 0 10px;
  max-width:760px;
  line-height:1.2;
}
.post-hero .meta{
  font-size:0.85rem;
  color:rgba(242,235,220,0.7);
}
.post-body{
  max-width:680px;
  margin:0 auto;
  padding:50px 6vw 40px 40px;
  border-left:1px solid rgba(203,122,43,0.35);
}
@media (max-width:720px){
  .post-body{ border-left:none; padding-left:6vw; }
  .post-row{grid-template-columns:1fr;}
  .post-row .meta{padding-top:0;}
  .post-row .rule{display:none;}
}
.post-body p{
  font-size:1.08rem;
  margin:0 0 22px;
}
.post-body h3{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:1.25rem;
  margin:34px 0 14px;
  color:var(--spruce);
}
.post-body em{ color:var(--spruce); }
.post-nav{
  max-width:680px;
  margin:0 auto 80px;
  padding:0 6vw;
  display:flex;
  justify-content:space-between;
  font-size:0.9rem;
}
.post-nav a{
  border-bottom:1px solid var(--ochre);
}

/* ---------- Footer ---------- */
footer{
  background:var(--deep-spruce);
  color:rgba(242,235,220,0.65);
  padding:34px 6vw;
  font-size:0.82rem;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
footer a{ color:var(--bone); }