*, *::before, *::after { box-sizing: border-box; }
*:not(dialog) { margin: 0; }

html {
  --c-text: #000;
  --c-wine: #b00505;
  --c-mint: #d6f0da;
  --c-pale: #fffafd;
  --c-mud: #800;
  --c-border: #b7c6d9;
  --d-s: 10px;
  --d-m: 20px;
  --old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  --monospace: 'Nimbus Mono PS', 'Courier New', monospace;
}

body {
  color: var(--c-text);
  font-family: var(--old-style);
  line-height: 1.55;
  max-width: 8.5in;
  margin-inline: auto;
  padding: var(--d-m);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  background-color: #e6ddd4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Crect width='32' height='16' fill='%23E0D5C7'/%3E%3Cpath d='M0 0h32v1H0zM0 8h32v1H0zM16 1v7h1V1zM0 9v7h1V9zM31 9v7h1V9z' fill='%23ECE5DC'/%3E%3Cpath d='M0 7h32v1H0zM0 15h32v1H0zM15 1v7h1V1zM30 9v7h1V9z' fill='%23C8BBAA' fill-opacity='.4'/%3E%3C/svg%3E");
}

.site-header { margin-bottom: var(--d-m); }
.site-header h1 a, .post h2 a { color: var(--c-mud); text-decoration: none; }
.site-header h1 a:hover, .post h2 a:hover { text-decoration: underline; }
main { display: flex; flex-direction: column; gap: var(--d-m); }

.post {
  background: var(--c-mint);
  border: 1px solid var(--c-border);
  outline: var(--d-s) solid var(--c-mint);
  margin: var(--d-s);
  padding: var(--d-m);
  text-align: left;
  min-width: 0;
}

.post > header { border-bottom: 1px solid var(--c-border); margin-bottom: 1em; padding-bottom: .55em; }
.post h2 { color: var(--c-mud); font-size: 1.35rem; line-height: 1.2; }
.post h2::before { content: ">> "; }
.post time { display: block; font-size: .85rem; margin-top: .3rem; }
.content > * + * { margin-top: 1em; }
.content h2, .content h3, .content h4 { color: var(--c-mud); margin-top: 1.3em; }
.content ul, .content ol { padding-left: 1.6em; }
.content a, .pagination a, .home-link a { color: var(--c-wine); }
.content img { display: block; height: auto; max-width: 100%; margin-inline: auto; }
.content blockquote { border-left: 4px solid var(--c-border); padding-left: 1em; }
.content code { font-family: var(--monospace); font-size: .9em; }
.content pre { background: var(--c-pale); border: 1px solid var(--c-border); overflow-x: auto; padding: var(--d-s); }
.content pre code { font-size: .85rem; }
.content hr { border: 0; border-top: 1px solid var(--c-border); }

.pagination {
  align-items: center;
  background: var(--c-pale);
  border: 1px solid var(--c-border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin: var(--d-s);
  outline: var(--d-s) solid var(--c-pale);
  padding: var(--d-s);
}
.pagination span:first-child { text-align: left; }
.pagination span:last-child { text-align: right; }
.home-link { text-align: left; margin: 0 var(--d-s); }
.site-footer { margin-top: calc(2 * var(--d-m)); }

@media (max-width: 600px) {
  body { padding: var(--d-s); }
  .post { padding: var(--d-s); }
  .pagination { grid-template-columns: 1fr 1fr; }
  .pagination span:nth-child(2) { grid-column: 1 / -1; grid-row: 1; margin-bottom: .4em; text-align: center; }
}