.writing { padding: 40px 0 48px; }
.writing-heading p { margin-top: 12px; color: var(--muted); font-size: 14px; }
.writing-heading time { display: block; margin-top: 14px; }
.post-list { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--border); }
.post-list li { border-bottom: 1px solid var(--border); }
.post-link { display: flex; align-items: center; gap: 24px; padding: 22px 0; }
.post-title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 15px; font-weight: 500; color: var(--foreground); transition: color 180ms ease; }
.post-arrow { color: var(--faint); transition: color 180ms ease, transform 180ms var(--ease-out); }
.post-link:hover .post-title { color: var(--text); }
.post-link:hover .post-arrow { color: var(--foreground); transform: translateX(3px); }
.writing time, .status { color: var(--muted); font-size: 12px; }
.writing time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.status { margin-top: 32px; }
.back-link { display: inline-block; margin-bottom: 32px; color: var(--muted); font-size: 12px; transition: color 180ms ease; }
.back-link:hover { color: var(--foreground); }
.post { max-width: 680px; overflow-wrap: anywhere; }
.post-content { margin-top: 32px; font-size: 15px; line-height: 1.75; }
.post-content > * + * { margin-top: 22px; }
.post-content h2, .post-content h3, .post-content h4 { margin-top: 36px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--foreground); }
.post-content h2 { font-size: 24px; }
.post-content h3 { font-size: 20px; }
.post-content h4 { font-size: 17px; }
.post-content a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.post-content a:hover { text-decoration-color: var(--foreground); }
.post-content img { max-width: 100%; height: auto; border-radius: 10px; }
.post-content blockquote { margin-left: 0; margin-right: 0; padding-left: 20px; border-left: 2px solid var(--line); color: var(--muted); }
.post-content pre { max-width: 100%; overflow-x: auto; padding: 18px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
.post-content code { padding: 2px 6px; border-radius: 4px; background: var(--surface); font-family: var(--font-mono); font-size: .9em; }
.post-content pre code { padding: 0; background: none; font-size: inherit; }
.post-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.post-content th, .post-content td { padding: 10px 16px; border: 1px solid var(--border); text-align: left; }
.post-content th { background: var(--surface-soft); font-weight: 500; }
.post-content hr { border: 0; border-top: 1px solid var(--border); }

@media (max-width: 699px) {
  .writing { padding: 28px 0 44px; }
  .post-list { margin-top: 28px; }
  .post-link { gap: 16px; padding: 18px 0; }
  .post-content { font-size: 15px; }
}