.app-blog { max-width: 52rem; }
.app-blog .blog-head { margin: 2.5rem 0 2rem; }
.app-blog .blog-head .eyebrow { display: inline-block; }
.app-blog .blog-head .eyebrow { font-size: .78rem; }
.app-blog .blog-head .eyebrow { font-weight: 600; }
.app-blog .blog-head .eyebrow { text-transform: uppercase; }
.app-blog .blog-head .eyebrow { letter-spacing: .12em; }
.app-blog .blog-head .eyebrow { color: var(--accent); }
.app-blog .blog-head .eyebrow { margin-bottom: .6rem; }
.app-blog .blog-head h1 { margin: .2rem 0 .8rem; }
.app-blog .blog-head h1 { line-height: 1.1; }
.app-blog .blog-head p { color: var(--muted); }
.app-blog .blog-head p { max-width: 38rem; }
.app-blog .post-list { display: flex; }
.app-blog .post-list { flex-direction: column; }
.app-blog .post-list { gap: 1.1rem; }
.app-blog .post-list { margin: 2rem 0; }
.app-blog .post-card { background: var(--panel); }
.app-blog .post-card { border: 1px solid var(--line); }
.app-blog .post-card { border-radius: var(--radius-lg); }
.app-blog .post-card { padding: 1.5rem 1.6rem; }
.app-blog .post-card { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.app-blog .post-card:hover { border-color: var(--accent); }
.app-blog .post-card:hover { transform: translateY(-2px); }
.app-blog .post-card:hover { box-shadow: 0 8px 24px -16px var(--accent-deep); }
.app-blog .post-meta { display: flex; }
.app-blog .post-meta { align-items: center; }
.app-blog .post-meta { flex-wrap: wrap; }
.app-blog .post-meta { gap: .55rem; }
.app-blog .post-meta { margin-bottom: .55rem; }
.app-blog .post-meta p { margin: 0; }
.app-blog .post-meta p { display: inline-flex; }
.app-blog .post-meta time { font-size: .82rem; }
.app-blog .post-meta time { font-weight: 600; }
.app-blog .post-meta time { color: var(--muted); }
.app-blog .post-meta time { font-variant-numeric: tabular-nums; }
.app-blog .tag { font-size: .72rem; }
.app-blog .tag { font-weight: 600; }
.app-blog .tag { text-transform: uppercase; }
.app-blog .tag { letter-spacing: .06em; }
.app-blog .tag { color: var(--accent-deep); }
.app-blog .tag { background: var(--accent-soft); }
.app-blog .tag { border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.app-blog .tag { padding: .15rem .5rem; }
.app-blog .tag { border-radius: 999px; }
.app-blog .post-card h3 { margin: .1rem 0 .5rem; }
.app-blog .post-card h3 { font-size: 1.4rem; }
.app-blog .post-card h3 { line-height: 1.2; }
.app-blog .post-card h3 a { color: var(--ink); }
.app-blog .post-card h3 a { text-decoration: none; }
.app-blog .post-card h3 a:hover { color: var(--accent); }
.app-blog .post-excerpt { color: var(--ink-soft); }
.app-blog .post-excerpt { margin: 0 0 .8rem; }
.app-blog .post-excerpt { line-height: 1.55; }
.app-blog .post-more a { font-size: .88rem; }
.app-blog .post-more a { font-weight: 600; }
.app-blog .post-more a { color: var(--accent); }
.app-blog .post-more a { text-decoration: none; }
.app-blog .post-more a:hover { text-decoration: underline; }
.app-blog .empty-note { color: var(--muted); }
.app-blog .empty-note { font-style: italic; }
.app-blog .empty-note { padding: 2rem; }
.app-blog .empty-note { text-align: center; }
.app-blog .empty-note { border: 1px dashed var(--line); }
.app-blog .empty-note { border-radius: var(--radius); }
.app-blog .pager { display: flex; }
.app-blog .pager { align-items: center; }
.app-blog .pager { justify-content: space-between; }
.app-blog .pager { gap: 1rem; }
.app-blog .pager { margin: 2.5rem 0 3rem; }
.app-blog .pager { padding-top: 1.4rem; }
.app-blog .pager { border-top: 1px solid var(--line); }
.app-blog .pager-side { flex: 1; }
.app-blog .pager-side { min-width: 0; }
.app-blog .pager-side p { margin: 0; }
.app-blog .pager-side--end { text-align: right; }
.app-blog .pager-now { font-size: .85rem; }
.app-blog .pager-now { font-weight: 600; }
.app-blog .pager-now { color: var(--muted); }
.app-blog .pager-now { white-space: nowrap; }
.app-blog .pager-now { font-variant-numeric: tabular-nums; }
.app-blog .pager-link { font-weight: 600; }
.app-blog .pager-link { color: var(--accent); }
.app-blog .pager-link { text-decoration: none; }
.app-blog .pager-link:hover { text-decoration: underline; }