:root{
  --paper:#EEEAE2;
  --ink:#211D1A;
  --oxblood:#4A1D1D;
  --oxblood-dark:#381515;
  --moss:#52604A;
  --stone:#8D8577;
  --line:#D8D2C4;
  --sans:"Trebuchet MS", Verdana, var(--sans-stack);
  --sans-stack:Arial, Helvetica, 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(--sans);
  font-size:1.25rem;
  font-weight:bold;
  color:var(--ink);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.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-frame img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  object-fit:contain;
  background:var(--ink);
}
.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{
  max-width:1400px;
  margin:0 auto;
}

.content{padding:2.5rem 2rem 3rem;}
.content h1{
  font-family:var(--sans);
  font-weight:bold;
  font-size:1.9rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
  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;}
.caption-photo{
  margin:2.2rem 0 0;
  max-width:420px;
}
.caption-photo img{width:100%; height:auto; display:block;}
.caption-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);
}

.quote{
  border-left:3px solid var(--oxblood);
  margin:0 0 1.8rem;
  padding:0.2rem 0 0.2rem 1.2rem;
  max-width:52ch;
}
.quote p{
  margin:0;
  font-size:1.15rem;
  font-style:italic;
  color:var(--ink);
}
.quote cite{
  display:block;
  margin-top:0.5rem;
  font-size:0.85rem;
  font-style:normal;
  color:var(--stone);
}

.linklist{
  list-style:none;
  padding:0;
  margin:1.6rem 0;
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem 1.4rem;
}
.linklist a{font-size:0.95rem;}

.fediverse{margin-top:1.8rem;}
.fediverse h2{
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--stone);
  margin:0 0 0.5rem;
}
.fediverse ul{list-style:none; padding:0; margin:0;}
.fediverse li{margin-bottom:0.3rem;}

.portrait-grid{
  display:flex;
  flex-wrap:wrap;
  gap:1.2rem;
  margin:2rem 0;
}
.portrait-grid figure{margin:0; text-align:center;}
.portrait-grid img{
  height:130px;
  width:auto;
  display:block;
  border-radius:2px;
}
.portrait-grid figcaption{
  font-size:0.8rem;
  color:var(--stone);
  margin-top:0.3rem;
}

/* ---- 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);}
.sitefoot .fediverse-row{
  display:flex;
  justify-content:center;
  gap:1rem;
  font-size:0.85rem;
  margin-bottom:0.6rem;
}
.sitefoot .fediverse-row a{text-decoration:none; color:var(--stone);}
.sitefoot .fediverse-row a:hover{color:var(--oxblood);}