/* Blog archive: the posts migrated from quvor.com (2017–2023) and their listing on blog.html.
   Loaded by blog.html and every archive post page (generated by build-archive.py). */

/* Listing on blog.html: the date takes the thumbnail's column */
.arch-sec .sec-head { margin-bottom: clamp(24px, 3vw, 36px); }
.arch-row .arch-date { width: 120px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .arch-row a { grid-template-columns: minmax(0, 1fr); }
  .arch-row .arch-date { width: auto; }
  .arch-row .side { grid-column: 1; grid-row: auto; }
}

/* Post pages */
.arch-note { display: inline-block; margin: 0; padding: 6px 10px; border-radius: 6px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--edge-2); text-transform: none; letter-spacing: .02em; font-size: 12px; line-height: 1.5; }
.prose.arch figure { margin: 1.6em 0 0; }
.prose.arch figure.feat { margin-top: 0; }
.prose.arch img { display: block; max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px var(--edge); background: var(--well); }
.prose.arch figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.prose.arch p img { display: inline-block; vertical-align: middle; }
.prose.arch h4 { font-size: 18px; line-height: 1.35; margin-top: 1.6em; }
.prose.arch ul, .prose.arch ol { padding-left: 1.3em; }
.prose.arch li + li { margin-top: .35em; }
.prose.arch blockquote { margin: 1.6em 0 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--edge-2); color: var(--head); }
.prose.arch pre { overflow-x: auto; max-width: 100%; padding: 16px 18px; border-radius: 10px; background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); font: 13.5px/1.6 var(--mono); }
.prose.arch pre code { font: inherit; background: none; padding: 0; }
.prose.arch :not(pre) > code { font: .88em var(--mono); padding: 1px 5px; border-radius: 4px; background: var(--well); box-shadow: inset 0 0 0 1px var(--edge); word-break: break-word; }
.prose.arch .tbl { overflow-x: auto; max-width: 100%; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--edge); }
.prose.arch table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; line-height: 1.5; }
.prose.arch th, .prose.arch td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--edge); }
.prose.arch th { color: var(--head); font-weight: 500; }
.prose.arch tr:last-child td { border-bottom: 0; }
.prose.arch td img { max-width: 160px; }