
:root{--ink:#313337;--muted:#6c6f72;--cream:#f7f2ec;--rose:#cfa8a2;--sage:#98a59a;--paper:#fff;--line:#e8dfd7;--serif:Georgia,'Times New Roman',serif;--sans:system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.75 var(--sans)}
a{color:inherit}
img{max-width:100%;height:auto}
header{background:#d1e9e6;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{max-width:1180px;margin:auto;padding:10px 24px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 24px/1.1 var(--serif);letter-spacing:.02em}
.brand img{display:block;width:58px;height:58px;object-fit:contain}
.brand-copy{display:block}
.brand small{display:block;font:10px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
nav{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
nav a{text-decoration:none;font-size:13px;text-transform:uppercase;letter-spacing:.09em}
.hero{min-height:72vh;display:grid;place-items:center;text-align:center;color:white;background:linear-gradient(#30343a66,#30343a88),var(--hero) center/cover}
.hero-inner{max-width:850px;padding:80px 24px}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:12px}
.hero h1{font:64px/1.05 var(--serif);margin:.2em 0}
.hero p{font:22px/1.5 var(--serif)}
.button{display:inline-block;padding:12px 22px;margin:8px 4px;background:var(--ink);color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:12px;border:0}
.button.alt{background:var(--rose)}
main{min-height:60vh}
.section{max-width:1120px;margin:auto;padding:80px 24px}
.section.narrow{max-width:800px}
.section h1,.section h2,.section h3{font-family:var(--serif);line-height:1.15}
.section h1{font-size:48px}
.section h2{font-size:36px}
.intro{text-align:center;background:var(--cream)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{border:1px solid var(--line);background:#fff;padding:28px}
.card h3{font-size:25px;margin-top:0}
.quote{font:20px/1.55 var(--serif)}
.quote cite{display:block;margin-top:15px;font:12px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.content{max-width:820px}
.content>p:first-child{font-size:18px}
.content h2{margin-top:1.6em}
.content img{margin:24px auto;display:block}
.post-list article{padding:30px 0;border-bottom:1px solid var(--line)}
.meta{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.contact{background:var(--sage);color:white;text-align:center}
.contact a{font-size:20px}
footer{background:var(--ink);color:#eee;text-align:center;padding:34px 20px;font-size:13px}
.gallery{columns:3 260px;column-gap:16px}
.gallery img{width:100%;margin:0 0 16px;break-inside:avoid}
.mobile{display:none}
@media(max-width:780px){.nav{align-items:center}
.brand{font-size:18px}
.brand img{width:48px;height:48px}
.brand small{font-size:8px}
.mobile{display:block;margin-left:auto}
nav{display:none;width:100%;order:3}
.nav.open{flex-wrap:wrap}
.nav.open nav{display:flex;flex-direction:column}
.grid{grid-template-columns:1fr}
.hero h1{font-size:44px}
.section{padding:55px 20px}
.section h1{font-size:38px}
}
