:root{
  --plaster:#F4EFE6;
  --plaster-deep:#EAE2D4;
  --ink:#26221D;
  --walnut:#3F3024;
  --walnut-deep:#2A2019;
  --brass:#A9895A;
  --brass-light:#CDB48B;
  --lilac:#CBBBC7;
  --clay:#9C4B3B;
  --line: rgba(38,34,29,0.14);
  --line-light: rgba(244,239,230,0.22);
}

*{margin:0;padding:0;box-sizing:border-box;}

:focus-visible{
  outline:2px solid var(--brass-light);
  outline-offset:3px;
  border-radius:2px;
}
.skip-link{
  position:fixed;
  top:-60px;
  left:1rem;
  z-index:10000;
  background:var(--ink);
  color:var(--plaster);
  padding:0.8rem 1.4rem;
  font-family:'Inter',sans-serif;
  font-size:0.85rem;
  letter-spacing:0.04em;
  border-radius:4px;
  transition:top .25s ease;
}
.skip-link:focus{top:1rem;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  background:var(--plaster);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background-image:url("../images/grain.jpg");
  background-size:320px 320px;
  opacity:0.05;
  mix-blend-mode:overlay;
}

img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}

.display{font-family:'Fraunces', serif; font-weight:400; letter-spacing:-0.01em;}
.eyebrow{
  font-family:'Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.72rem;
  font-weight:500;
  color:var(--brass);
}

.wrap{max-width:1240px; margin:0 auto; padding:0 6vw;}
.narrow{max-width:760px; margin:0 auto; padding:0 6vw;}

/* ---------- NAV (matches main site) ---------- */
header.site-nav{
  position:relative;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem 6vw;
  background:var(--plaster);
  border-bottom:1px solid var(--line);
}
.nav-mark{display:flex; align-items:center;}
.logo-mark{
  display:inline-block;
  width:230px;
  height:32px;
}
.logo-mark img{width:100%; height:100%; object-fit:contain; object-position:left center;}
nav.links{display:flex; gap:2.4rem;}
nav.links a{
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  position:relative;
  padding-bottom:3px;
}
nav.links a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:0%;height:1px;
  background:currentColor;
  transition:width .35s ease;
}
nav.links a:hover::after{width:100%;}

.nav-toggle{
  display:none;
  background:none;
  border:0;
  cursor:pointer;
  color:var(--ink);
  position:relative;
  width:34px;
  height:34px;
}
.nav-toggle .bar{
  position:absolute;
  left:6px;right:6px;
  height:1.4px;
  background:currentColor;
  transition:transform .35s ease, top .35s ease;
}
.nav-toggle .bar1{top:13px;}
.nav-toggle .bar2{top:20px;}
.nav-toggle.active .bar1{top:16.5px; transform:rotate(45deg);}
.nav-toggle.active .bar2{top:16.5px; transform:rotate(-45deg);}
body.nav-open{overflow:hidden;}

@media(max-width:880px){
  nav.links{
    position:fixed;
    inset:0;
    background:var(--walnut-deep);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2.2rem;
    transform:translateY(-100%);
    transition:transform .5s cubic-bezier(.65,0,.35,1);
    z-index:99;
  }
  nav.links.open{transform:translateY(0);}
  nav.links a{color:var(--plaster); font-size:1.1rem;}
  .nav-toggle{display:block; z-index:101;}
}
@media(max-width:520px){
  .logo-mark{width:190px; height:27px;}
}

/* ---------- ARTICLE ---------- */
.article-hero{
  padding:3.2rem 0 2.2rem;
}
.article-hero .eyebrow{margin-bottom:1rem;}
.article-hero h1{
  font-size:clamp(2rem,4.5vw,3.2rem);
  font-weight:400;
  line-height:1.12;
  max-width:18ch;
}
.article-byline{
  margin-top:1.4rem;
  font-size:0.85rem;
  color:rgba(38,34,29,0.55);
  letter-spacing:0.02em;
}
.article-hero-img{
  margin:2.4rem 0 0;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:2px;
}
.article-hero-img img{width:100%; height:100%; object-fit:cover;}

.article-body{
  padding:3rem 0 5rem;
  font-size:1.08rem;
  font-weight:300;
  color:rgba(38,34,29,0.86);
}
.article-body h2{
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:1.6rem;
  margin:2.4rem 0 1rem;
  color:var(--walnut);
}
.article-body p{margin-bottom:1.3rem;}
.article-body ul{margin:0 0 1.5rem 1.3rem;}
.article-body li{margin-bottom:0.6rem;}
.pull-quote{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:1.5rem;
  color:var(--walnut);
  border-left:2px solid var(--brass);
  padding-left:1.4rem;
  margin:2.2rem 0;
  line-height:1.4;
}

.article-cta{
  background:var(--walnut-deep);
  color:var(--plaster);
  padding:3.6rem 0;
  text-align:center;
}
.article-cta h3{
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:clamp(1.6rem,3vw,2.2rem);
  margin-bottom:1.2rem;
}
.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:0.8rem;
  padding:0.95rem 1.7rem;
  border:1px solid var(--brass-light);
  color:var(--plaster);
  font-size:0.8rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border-radius:100px;
  transition:background .4s ease, color .4s ease;
}
.cta-btn:hover{background:var(--brass-light); color:var(--walnut-deep);}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.8rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:1.6rem;
}

footer.simple-foot{
  padding:2.4rem 0;
  text-align:center;
  font-size:0.78rem;
  color:rgba(38,34,29,0.5);
}
footer.simple-foot a{color:var(--brass); text-decoration:underline;}