:root{
  --bg:#faf9f7;
  --ink:#1d1c1a;
  --muted:#6b6862;
  --line:#e5e2dc;
  --accent:#b4532a;
  --card:#ffffff;
  --max:960px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header.site,footer.site{
  max-width:var(--max);
  margin:0 auto;
  padding:1.4rem 1.5rem;
}
header.site{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.brand{
  font-size:1.35rem;
  font-weight:bold;
  letter-spacing:.02em;
  color:var(--ink);
}
.brand span{color:var(--accent)}
header.site nav a{
  color:var(--muted);
  margin-left:1.2rem;
  font-size:.98rem;
}
header.site nav a:hover{color:var(--ink);text-decoration:none}

main{
  max-width:var(--max);
  margin:0 auto;
  padding:0 1.5rem;
}

.hero{padding:3.5rem 0 2.5rem}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  color:var(--accent);
  margin:0 0 .8rem;
  font-family:system-ui,sans-serif;
}
.hero h1{
  font-size:2.4rem;
  line-height:1.2;
  margin:0 0 1rem;
  max-width:22ch;
}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}
.cta{margin-top:1.8rem}
.btn{
  display:inline-block;
  padding:.7rem 1.3rem;
  background:var(--accent);
  color:#fff;
  border-radius:4px;
  margin-right:.7rem;
  font-family:system-ui,sans-serif;
  font-size:.95rem;
}
.btn:hover{text-decoration:none;opacity:.92}
.btn.ghost{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
}

section h2{
  font-size:1.5rem;
  margin:0 0 1.2rem;
  padding-top:2.5rem;
  border-top:1px solid var(--line);
}
.services{padding-bottom:1rem}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1.3rem;
}
.card h3{margin:0 0 .5rem;font-size:1.15rem}
.card p{margin:0;color:var(--muted);font-size:.98rem}

.pitch{padding:1rem 0 3rem}
.pitch p{max-width:65ch;color:var(--muted)}

.page-head{padding:3rem 0 1rem}
.page-head h1{font-size:2rem;margin:0 0 .6rem}

.projects{padding-bottom:3rem}
.project{
  padding:1.6rem 0;
  border-bottom:1px solid var(--line);
}
.project h2{border:0;padding:0;margin:0 0 .3rem;font-size:1.3rem}
.project .meta{
  color:var(--accent);
  font-size:.85rem;
  font-family:system-ui,sans-serif;
  margin:0 0 .6rem;
}
.project p{margin:0;color:var(--muted);max-width:65ch}

.prose{padding:1rem 0 3rem;max-width:65ch}
.prose p{color:var(--muted)}
.prose h2{font-size:1.25rem}
.contact-line{font-size:1.1rem;color:var(--ink)!important}

footer.site{
  border-top:1px solid var(--line);
  margin-top:2rem;
  color:var(--muted);
  font-size:.9rem;
}

@media (max-width:600px){
  .hero h1{font-size:1.9rem}
  header.site{flex-direction:column;gap:.7rem;align-items:flex-start}
}