.blog-list-page{max-width:760px;margin:0 auto;padding:64px 24px 96px}
.blog-list-page h1{margin:0 0 40px;font:700 44px 'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-0.02em}

#post-list{list-style:none;margin:0;padding:0}
.post-list-item{display:flex;align-items:baseline;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.post-list-item:last-child{border-bottom:1px solid var(--line)}
.post-list-tag{flex:0 0 auto;min-width:100px;font:400 13px 'IBM Plex Mono',monospace;color:var(--muted)}
.post-list-item a{flex:1;font:500 20px 'Space Grotesk',sans-serif;color:var(--ink);text-decoration:none}
.post-list-item a:hover{color:var(--red)}
.post-list-item a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.post-list-date{flex:0 0 auto;font:400 13px 'IBM Plex Mono',monospace;color:var(--faint);white-space:nowrap}
.post-list-empty,.post-list-error{padding:20px 0;font:400 14px 'IBM Plex Mono',monospace;color:var(--faint)}

.post{max-width:680px;margin:0 auto;padding:64px 24px 96px}
.post-date{margin:0 0 8px;font:400 13px 'IBM Plex Mono',monospace;color:var(--muted)}
.post-tags{margin:0 0 24px;font:400 13px 'IBM Plex Mono',monospace;color:var(--faint)}
.post-title{margin:0 0 32px;font:700 40px 'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-0.02em}
.post-body{font:400 17px/1.7 'Space Grotesk',sans-serif;color:var(--ink)}
.post-body p{margin:0 0 20px}
.post-body img,.post-body video{display:block;max-width:100%;height:auto;border-radius:var(--radius-md);margin:32px 0}
.post-body iframe{max-width:100%;border-radius:var(--radius-md);margin:32px 0}

.feedback{margin-top:64px;padding-top:32px;border-top:1px solid var(--line)}
.reactions{display:flex;gap:10px;margin-bottom:32px}
.reaction-btn{font:400 14px 'IBM Plex Mono',monospace;padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.reaction-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.reaction-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

#comment-form{display:flex;flex-direction:column;gap:12px;margin-bottom:40px}
#comment-body{font:400 15px 'Space Grotesk',sans-serif;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);min-height:80px;resize:vertical;color:var(--ink)}
#comment-body:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.comment-form-error{margin:0;font:400 13px 'IBM Plex Mono',monospace;color:var(--red)}
.comment-form-error:empty{display:none}
#comment-form button{align-self:flex-start;font:500 14px 'IBM Plex Mono',monospace;padding:10px 20px;background:var(--ink);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:opacity .15s}
#comment-form button:hover{opacity:.85}
#comment-form button:disabled{opacity:.5;cursor:not-allowed}
#comment-form button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

#comment-list{list-style:none;margin:0;padding:0}
#comment-list li{padding:20px 0;border-top:1px solid var(--line)}
#comment-list .comment-date{display:block;margin-bottom:6px;font:400 12px 'IBM Plex Mono',monospace;color:var(--muted)}
#comment-list .comment-body{margin:0;font:400 15px/1.5 'Space Grotesk',sans-serif;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.comment-list-empty{padding:20px 0;font:400 14px 'IBM Plex Mono',monospace;color:var(--faint)}

@media (max-width:560px){
  .post-list-item{flex-wrap:wrap;gap:4px 20px}
  .post-list-tag{order:1}
  .post-list-date{order:2}
  .post-list-item a{order:3;flex:1 1 100%}
}