:root{
  --paper:#EEEAE2;
  --ink:#211D1A;
  --oxblood:#4A1D1D;
  --oxblood-dark:#381515;
  --moss:#52604A;
  --stone:#8D8577;
  --line:#D8D2C4;
  --display:'Acme', var(--sans-stack);
  --sans:'Work Sans', var(--sans-stack);
  --sans-stack:-apple-system, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
}

a{color:var(--oxblood);}
a:hover{color:var(--moss);}

/* ---- Top bar ---- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem 2rem;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
  gap:0.75rem;
}
.wordmark{
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:400;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:0.01em;
}
.mainnav{display:flex; gap:1.6rem;}
.mainnav a{
  font-size:0.95rem;
  text-decoration:none;
  color:var(--ink);
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.mainnav a.active{border-bottom-color:var(--oxblood); color:var(--oxblood);}
.mainnav a:hover{border-bottom-color:var(--moss); color:var(--moss);}

/* ---- Hero ---- */
.hero{padding:0; background:var(--ink);}
.hero-frame{
  position:relative;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  aspect-ratio:4/3;
  overflow:hidden;
}
@media(min-width:700px){ .hero-frame{aspect-ratio:16/7;} }
.hero-frame iframe{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  border:0;
}
.hero-caption{
  max-width:1400px;
  margin:0 auto;
  padding:0.6rem 2rem;
  font-size:0.85rem;
  color:var(--stone);
  background:var(--ink);
}
.hero-caption a{color:#C9A0A0;}

/* ---- Layout ---- */
.layout{
  display:grid;
  grid-template-columns:200px 1fr;
  max-width:1400px;
  margin:0 auto;
}
@media(max-width:700px){
  .layout{grid-template-columns:1fr;}
}

.sidecol{
  background:var(--oxblood);
  padding:2rem 1.2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
}
.side-photo{
  width:100%;
  max-width:150px;
  height:auto;
  border-radius:2px;
}
.side-contact{margin-top:auto;}

.content{padding:2.5rem 2rem 3rem;}
.content h1{
  font-family:var(--display);
  font-weight:400;
  font-size:2.4rem;
  letter-spacing:0.01em;
  margin:0 0 0.3rem;
}
.lede{
  color:var(--stone);
  margin:0 0 1.8rem;
  font-size:1.05rem;
}
.bio p{max-width:52ch; margin:0 0 1rem;}
.family-photo{
  margin:2.2rem 0 0;
  max-width:420px;
}
.family-photo img{width:100%; height:auto; display:block;}
.family-photo figcaption{
  font-family:var(--sans);
  font-style:italic;
  color:var(--stone);
  font-size:0.9rem;
  margin-top:0.5rem;
}
.archive-link{
  margin-top:2rem;
  font-size:0.9rem;
  color:var(--stone);
}

/* ---- Footer ---- */
.sitefoot{
  border-top:1px solid var(--line);
  padding:1.4rem 2rem 2rem;
  text-align:center;
}
.sitefoot nav{
  display:flex;
  justify-content:center;
  gap:1.2rem;
  flex-wrap:wrap;
  font-size:0.9rem;
  margin-bottom:0.6rem;
}
.sitefoot nav a{text-decoration:none; color:var(--stone);}
.sitefoot nav a:hover{color:var(--oxblood);}
.sitefoot p{
  margin:0;
  font-size:0.8rem;
  color:var(--stone);
}
.sitefoot p a{color:var(--stone);}