:root{
  --terracotta:#B5633A;
  --dark:#2C1F14;
  --cream:#FAF6F0;
  --accent:#E8A87C;
  --mid:#7A5C44;
  --white:#FFFFFF;
  --line:#E3D8C9;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--dark);line-height:1.72;font-size:17px}
h1,h2,h3{font-family:'Playfair Display',serif;line-height:1.2}
a{color:var(--terracotta)}
.container{max-width:1080px;margin:0 auto;padding:0 24px}
nav{background:var(--cream);border-bottom:1px solid rgba(44,31,20,.08);position:sticky;top:0;z-index:10}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1080px;margin:0 auto}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--dark)}
.nav-logo img{width:42px;height:42px;border-radius:9px;display:block}
.nav-logo strong{font-family:'Playfair Display',serif;font-size:1.15rem;display:block}
.nav-logo span.sub{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);display:block}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{text-decoration:none;color:var(--dark);font-size:.95rem}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--terracotta)}
.nav-links a.btn-small{background:var(--terracotta);color:var(--white);padding:9px 18px;border-radius:999px}
.nav-links a.btn-small:hover{background:#9d5330;color:var(--white)}
.article-hero{padding:76px 0 46px;border-bottom:1px solid var(--line)}
.back-link{display:inline-block;margin-bottom:22px;text-decoration:none;font-weight:600;font-size:.9rem}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);font-weight:700;margin-bottom:16px}
.article-hero h1{font-size:clamp(2.25rem,5vw,3.65rem);max-width:22ch;margin-bottom:20px}
.article-intro{font-size:1.2rem;line-height:1.6;color:var(--mid);max-width:68ch}
.article-meta{margin-top:20px;color:var(--mid);font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
.article-layout{display:grid;grid-template-columns:minmax(0,720px) 240px;gap:64px;align-items:start;padding:64px 24px 76px}
.article-body p{margin-bottom:20px}
.article-body h2{font-size:clamp(1.7rem,3vw,2.15rem);margin:50px 0 18px;max-width:28ch}
.article-body h3{font-size:1.25rem;margin:30px 0 10px}
.article-body ol,.article-body ul{margin:0 0 24px 24px}
.article-body li{margin-bottom:12px;padding-left:5px}
.pullquote{border-left:4px solid var(--terracotta);padding:8px 0 8px 22px;margin:34px 0;font-family:'Playfair Display',serif;font-size:1.35rem;line-height:1.45}
.article-aside{position:sticky;top:112px;background:var(--white);padding:24px;border-top:4px solid var(--terracotta)}
.article-aside h2{font-size:1.25rem;margin-bottom:12px}
.article-aside p{font-size:.92rem;color:var(--mid);margin-bottom:16px}
.btn{display:inline-block;background:var(--terracotta);color:var(--white);text-decoration:none;padding:12px 21px;border-radius:999px;font-weight:600;font-size:.92rem}
.btn:hover{background:#9d5330}
.sources{border-top:1px solid var(--line);margin-top:54px;padding-top:28px}
.sources h2{margin:0 0 16px;font-size:1.35rem}
.sources ol{font-size:.88rem;color:var(--mid);margin-left:20px}
.sources a{word-break:break-word}
.author{background:var(--white);padding:34px;margin-top:46px}
.author strong{font-family:'Playfair Display',serif;font-size:1.25rem;display:block;margin-bottom:8px}
.author p{color:var(--mid);font-size:.95rem;margin:0}
.more{background:var(--dark);color:var(--cream);padding:56px 0}
.more h2{font-size:clamp(1.6rem,3vw,2rem);margin-bottom:14px}
.more p{color:rgba(250,246,240,.82);max-width:62ch;margin-bottom:22px}
footer{background:var(--dark);color:rgba(250,246,240,.75);padding:44px 0;font-size:.92rem;border-top:1px solid rgba(250,246,240,.12)}
footer .foot-title{font-family:'Playfair Display',serif;color:var(--cream);font-size:1.25rem;margin-bottom:14px}
footer p{margin-bottom:10px}
footer a{color:var(--accent);text-decoration:none}
footer a:hover{text-decoration:underline}
@media(max-width:860px){
  .article-layout{grid-template-columns:1fr;gap:34px}
  .article-aside{position:static}
}
@media(max-width:700px){
  .nav-inner{align-items:flex-start;gap:12px;flex-direction:column}
  .nav-links{gap:14px;flex-wrap:wrap}
  .nav-links a{font-size:.84rem}
  .article-hero{padding:50px 0 36px}
  .article-layout{padding-top:42px}
}