/* Blog-specific type. Loaded only on post pages. */
.post { padding: 2.2rem 0 0; }
.crumbs { font-size: .86rem; color: var(--mist); margin-bottom: 1rem; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--ember); }
.crumbs span { margin: 0 .35rem; }

.post-head { max-width: var(--measure); margin-bottom: 1.8rem; }
.post-head h1 { font-size: clamp(1.9rem, 5.4vw, 2.9rem); margin-bottom: .7rem; }
.post-meta { font-size: .85rem; color: var(--mist); display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; }

.post-body { max-width: var(--measure); font-size: 1.06rem; line-height: 1.72; }
.post-body > * + * { margin-top: 1.15rem; }
.post-body h2 { font-size: clamp(1.35rem, 3.6vw, 1.7rem); margin-top: 2.4rem; }
.post-body h3 { font-size: 1.16rem; margin-top: 1.9rem; }
.post-body ul, .post-body ol { padding-left: 1.3rem; }
.post-body li + li { margin-top: .45rem; }
.post-body blockquote {
  margin: 1.6rem 0; padding: .3rem 0 .3rem 1.2rem;
  border-left: 3px solid var(--ember); color: var(--ink-2); font-style: italic;
}
.post-body code {
  font-family: var(--f-mono); font-size: .88em;
  background: var(--surface-2); padding: .12em .38em; border-radius: 4px;
}
.post-body table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.post-body thead th {
  text-align: left; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mist); font-weight: 500; border-bottom: 1px solid var(--rule); padding: .5rem .7rem;
}
.post-body td { padding: .55rem .7rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.post-body .tw, .post-body figure { overflow-x: auto; }

.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; }
.post-tags a {
  font-size: .82rem; background: var(--surface); border: 1px solid var(--rule);
  padding: .28rem .7rem; border-radius: 999px; text-decoration: none; color: var(--ink-2);
}
.post-tags a:hover { border-color: var(--ember); color: var(--ember); }