:root{
  --bg:#f0e9d9;
  --ink:#1a1508;
  --ink-2:#5a4f38;
  --ink-3:#8a7d62;
  --rule:#cfc4a8;
  --accent:#7a3b1f;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem;
  --measure:34rem;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);}
body{
  font-family:"EB Garamond",Georgia,serif;
  font-size:20px;
  line-height:1.55;
  font-feature-settings:"liga","kern","onum";
  -webkit-font-smoothing:antialiased;
}
.page{
  max-width:72rem;
  margin:0 auto;
  padding:var(--s5) var(--s4);
}
header.mast{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  padding-bottom:var(--s2);
  border-bottom:1px solid var(--rule);
  margin-bottom:var(--s4);
}
header.mast .title-group{
  display:flex;
  align-items:center;
  gap:var(--s2);
}
header.mast .logo{
  display:inline-flex;
  width:52px;
  height:52px;
  color:var(--accent);
  flex-shrink:0;
  transition:color .2s ease, transform .2s ease;
}
header.mast .logo:hover{color:var(--ink);transform:rotate(-2deg)}
header.mast .logo svg{width:100%;height:100%}
header.mast h1{
  font-size:2.25rem;
  font-weight:700;
  letter-spacing:-.005em;
  margin:0;
}
header.mast h1 a{color:var(--ink);text-decoration:none}
header.mast .meta{
  font-size:.95rem;
  color:var(--ink-2);
  font-family:"EB Garamond",Georgia,serif;
  font-style:italic;
  text-align:right;
  line-height:1.4;
}
header.mast .meta .meta-sub{
  font-style:normal;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
nav.top{
  margin-top:var(--s1);
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-family:"JetBrains Mono",ui-monospace,monospace;
}
nav.top a{color:var(--ink-2);text-decoration:none;margin-right:var(--s2)}
nav.top a:hover{color:var(--accent)}
nav.top a.active{color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:2px}
.grid{
  display:grid;
  grid-template-columns:14rem 1fr;
  gap:var(--s4);
}
@media (max-width:760px){
  .grid{grid-template-columns:1fr;gap:var(--s3)}
  .page{padding:var(--s4) var(--s3)}
  header.mast{grid-template-columns:1fr}
}
aside .label{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  margin-bottom:var(--s1);
  margin-top:var(--s3);
}
aside .label:first-child{margin-top:0}
aside p{margin:0 0 var(--s2);font-size:.92rem;color:var(--ink-2)}
section{margin-bottom:var(--s4);max-width:var(--measure);scroll-margin-top:var(--s3)}
aside .toc a{display:inline-block;padding:.1rem 0;color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
aside .toc a:hover{color:var(--accent);border-bottom-color:var(--accent)}
section h2{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-3);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  margin:0 0 var(--s2);
  padding-bottom:.4rem;
  border-bottom:1px solid var(--rule);
}
.lede{
  font-size:1.32rem;
  line-height:1.5;
  color:var(--ink);
  margin-top:0;
}
.lede em{color:var(--accent);font-weight:600;font-style:italic}
.tagline{
  margin-top:var(--s3);
  font-style:italic;
  color:var(--ink-2);
  font-size:1.05rem;
  letter-spacing:.01em;
}
p{margin:0 0 var(--s2)}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent);color:var(--accent)}
ul.list{list-style:none;padding:0;margin:0}
ul.list li{
  display:grid;
  grid-template-columns:6rem 1fr;
  gap:var(--s2);
  padding:.6rem 0;
  border-bottom:1px dashed var(--rule);
}
ul.list li:last-child{border-bottom:none}
ul.list .when{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--ink-3);
  padding-top:.3rem;
}
ul.list .what{font-weight:600;color:var(--ink);font-size:1.05rem;line-height:1.35}
ul.list .what a{text-decoration:none;border-bottom:1px solid var(--rule)}
ul.list .what a:hover{border-bottom-color:var(--accent)}
ul.list .what small{display:block;color:var(--ink-2);font-size:.86rem;font-style:italic;margin-top:.2rem;font-weight:400}
ul.pubs{list-style:none;padding:0;margin:0;font-size:.92rem}
ul.pubs li{padding:.45rem 0;border-bottom:1px dashed var(--rule);color:var(--ink-2)}
ul.pubs li:last-child{border-bottom:none}
ul.pubs em{color:var(--ink)}
blockquote{
  margin:var(--s2) 0;
  padding-left:var(--s2);
  border-left:2px solid var(--rule);
  font-style:italic;
  color:var(--ink-2);
}
footer{
  margin-top:var(--s5);
  padding-top:var(--s2);
  border-top:1px solid var(--rule);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--ink-3);
  display:flex;justify-content:space-between;
}
.gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s2);
  margin-top:var(--s2);
}
.gallery img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--rule);
  filter:saturate(.92);
  transition:filter .3s ease;
}
.gallery img:hover{filter:saturate(1.05)}
@media (max-width:760px){.gallery{grid-template-columns:1fr}}
.drop::first-letter{
  font-size:3.2rem;
  float:left;
  line-height:.9;
  padding:.2rem .5rem 0 0;
  color:var(--accent);
  font-weight:500;
}