@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap');

:root {
  --cream:#f5f0e7;
  --paper:#fbf8f2;
  --green:#304b3a;
  --green-soft:#73806e;
  --burgundy:#6b2e3a;
  --ink:#2f302d;
  --line:#d9d0c2;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif;line-height:1.7}
a{color:inherit}
.site-header{max-width:var(--max);margin:auto;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{font-family:"Libre Caslon Display",serif;font-size:1.6rem;text-decoration:none}
.site-nav{display:flex;gap:24px}
.site-nav a{text-decoration:none;font-size:.92rem}
.menu-button{display:none}
main{max-width:var(--max);margin:auto;padding:0 28px}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;min-height:76vh;padding:72px 0}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:600;color:var(--green-soft)}
h1,h2,h3{font-family:"Libre Caslon Display",serif;font-weight:400;line-height:1.04;margin-top:0}
h1{font-size:clamp(3rem,7vw,6.2rem);letter-spacing:-.03em}
h2{font-size:clamp(2.25rem,5vw,4.4rem)}
h3{font-size:2rem}
.lede,.article-intro{font-size:1.16rem;max-width:720px}
.button{display:inline-block;background:var(--green);color:white;text-decoration:none;padding:13px 20px;border-radius:999px;margin-top:18px}
.hero-art svg{width:100%;display:block;box-shadow:0 18px 50px rgba(47,48,45,.13)}
.section{padding:92px 0;border-top:1px solid var(--line)}
.section-heading{max-width:760px;margin-bottom:42px}
.story-card{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid var(--line)}
.story-image{min-height:430px;text-decoration:none}
.image-placeholder{height:100%;min-height:430px;display:grid;place-items:center;padding:20px;text-align:center;background:linear-gradient(135deg,#d7c8b5,#809076);color:white;font-size:.9rem}
.story-card-copy{padding:52px}
.meta{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--green-soft)}
.story-card h3 a{text-decoration:none}
.text-link{font-weight:600;text-decoration:none;color:var(--burgundy)}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.project-grid article{background:var(--paper);border:1px solid var(--line);padding:28px;min-height:220px}
.project-grid h3{font-size:1.65rem}
.about{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.about>p{font-size:1.2rem}
footer{max-width:var(--max);margin:auto;padding:30px 28px 50px;border-top:1px solid var(--line);font-size:.85rem}
.article-page{max-width:860px;padding-top:70px;padding-bottom:100px}
.article-page h1{font-size:clamp(3.3rem,8vw,6.5rem)}
.article-photo{margin:48px 0}
.article-body{font-family:Georgia,serif;font-size:1.18rem;line-height:1.85}
.article-body p{margin:0 0 1.35em}
.back-link{display:inline-block;margin-top:28px}
@media (max-width:800px){
  .hero,.story-card,.about{grid-template-columns:1fr}
  .hero{gap:38px;padding:52px 0}
  .hero-art{order:-1}
  .project-grid{grid-template-columns:1fr}
  .site-nav{display:none}
  .menu-button{display:block;border:1px solid var(--line);background:transparent;padding:8px 12px}
  .site-nav.open{display:flex;position:absolute;top:76px;right:20px;background:var(--paper);padding:20px;border:1px solid var(--line);flex-direction:column;z-index:5}
  .story-card-copy{padding:30px}
  main{padding:0 20px}
}