/* Writeups: index list and article prose, layered on site.css */

.wr { max-width: 680px; margin: 0 auto; padding: 8vh 0 14vh; }

.wr-back {
  display: inline-block;
  margin-bottom: 30px;
  font: 13px var(--mono);
  color: var(--dim);
  text-decoration: none;
}
.wr-back:hover { color: var(--text); }

.wr h1 {
  margin: 0 0 14px;
  font: 600 clamp(30px, 4.6vw, 44px)/1.08 var(--serif);
  letter-spacing: -0.01em;
}

.wr-meta {
  margin: 0 0 36px;
  color: var(--faint);
  font: 13px var(--mono);
}

.tag {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font: 12px var(--mono);
  color: var(--faint);
}
.wr-meta .tag { margin-left: 6px; }

/* Article body */
.prose { font-size: 17px; }
.prose .lede {
  margin: 0 0 34px;
  font: 400 clamp(19px, 2vw, 22px)/1.5 var(--serif);
  color: var(--text);
}
.prose h2 { margin: 46px 0 14px; font: 600 clamp(22px, 2.4vw, 26px)/1.25 var(--serif); }
.prose h3 { margin: 30px 0 10px; font: 600 17px/1.35 var(--sans); }
.prose p { margin: 0 0 18px; }
.prose ul { margin: 0 0 18px; padding-left: 20px; }
.prose li { margin: 0 0 8px; }
.prose li::marker { color: var(--faint); }
.prose strong { font-weight: 600; }

.prose pre {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--panel);
  overflow-x: auto;
  font: 13px/1.6 var(--mono);
  color: var(--text);
}
.prose pre code { font: inherit; color: inherit; }

/* A labelled diagram block (monospace, like the homepage figures) */
.wr-fig {
  margin: 0 0 26px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.wr-fig pre { margin: 0; border: 0; padding: 0; background: none; color: var(--dim); }
.wr-fig figcaption { margin-top: 10px; font: 13px var(--mono); color: var(--faint); }

.wr hr { margin: 44px 0; border: 0; border-top: 1px solid var(--rule); }

/* Index */
.wr-index { max-width: 680px; margin: 0 auto; padding: 8vh 0 14vh; }
.wr-index h1 { margin: 0 0 14px; font: 600 clamp(30px, 4.6vw, 44px)/1.08 var(--serif); letter-spacing: -0.01em; }
.wr-intro { max-width: 600px; margin: 0 0 8px; color: var(--dim); }

.wr-list { list-style: none; margin: 34px 0 0; padding: 0; }
.wr-item { padding: 26px 0; border-top: 1px solid var(--rule); }
.wr-item:last-child { border-bottom: 1px solid var(--rule); }
.wr-item a { text-decoration: none; }
.wr-item h2 { margin: 0 0 7px; font: 600 clamp(20px, 2.2vw, 23px)/1.3 var(--serif); }
.wr-item-meta { margin: 0 0 9px; font: 13px var(--mono); color: var(--faint); }
.wr-item-meta .tag { margin-left: 6px; }
.wr-item p { margin: 0; max-width: 600px; color: var(--dim); }
.wr-item:hover h2 { color: var(--alarm); }