:root{
  color-scheme: only light;
  --parchment:#e8dabb;
  --ink:#38291d;
  --soft:#6f5a43;
  --folium:#6b4a86;
  --rule:#d3c09a;
  --visited:#665674;
  --contour:186,163,120;
  --contour-alpha:.3;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
html{ background-color:#e8dabb; -webkit-text-size-adjust:100%; }
body{
  background:transparent;
  color:var(--ink);
  font-family:var(--mono);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  display:flex;
  justify-content:center;
  padding:44px 20px 60px;
}
#field{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
}
main{ width:100%; max-width:600px; }

.namemark{
  margin:0 0 34px;
  font-size:1.75rem;
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--folium);
}

.rows,.talks{
  display:grid;
  grid-template-columns:max-content max-content 1fr;
  column-gap:1.1em;
}
.rows{ row-gap:2px; }
.talks{ row-gap:9px; }
.k,.date,.d{ color:var(--soft); }
.v{ color:var(--ink); }

hr{
  border:none;
  border-top:1px solid var(--rule);
  margin:30px 0;
}

.rubric{
  color:var(--folium);
  letter-spacing:.2em;
  margin:0 0 16px;
}

a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px dotted var(--soft);
  padding-bottom:1px;
  transition:color .12s, border-color .12s;
}
a:visited{ color:var(--visited); border-bottom-color:var(--visited); }
a:hover{ color:var(--folium); border-bottom-color:var(--folium); }
a:focus-visible{ outline:1px dashed var(--folium); outline-offset:3px; }
.sep{ color:var(--rule); padding:0 .5em; }

.colophon{
  margin-top:40px;
  padding-top:18px;
  border-top:1px solid var(--rule);
  font-size:.85rem;
  color:var(--soft);
}
.colophon p{ margin:0 0 4px; }
.colophon p:last-child{ margin-bottom:0; }
.colophon .v{ color:var(--soft); overflow-wrap:anywhere; }
.colophon a{ color:var(--soft); border-bottom-color:var(--rule); }
.colophon a:visited{ color:var(--soft); }
.colophon a:hover{ color:var(--folium); border-bottom-color:var(--folium); }

.lacuna {
  display: inline-block;
  width: 10ch;
  height: .85em;
  vertical-align: baseline;
  margin: 0 .2em;
  background-color: var(--soft);
}

#curse {
  font-size: 0.5em;
  opacity: 0.6;
}

@media (max-width:520px){
  body{ padding:36px 18px 48px; }
  .namemark{ font-size:1.5rem; }

  .writing{
    grid-template-columns:1fr;
    row-gap:0;
  }
  .writing .d{ display:none; }
  .writing .date{
    font-size:.72rem;
    letter-spacing:.1em;
    line-height:1.4;
  }
  .writing .v{ margin-bottom:20px; }
  .writing .v:last-of-type{ margin-bottom:0; }
}