.cl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 0.875rem; color: var(--muted); }
.cl-meta time { margin-right: 4px; }
.cl-meta .cl-updated time { margin-right: 0; }
.cl-updated { margin-right: 4px; }
.cl-entry-title { margin-bottom: 14px; }

.chip-breaking { background: var(--fg); color: #fff; }

.btn-black { background: var(--fg); color: #fff; }
.btn-black:hover { background: #000; }
.doc a.btn-secondary { color: var(--fg); }
.doc a.btn:hover { text-decoration: none; }

.cl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }

.cl-month h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; margin: 40px 0 6px; }
.doc .cl-list { list-style: none; margin: 0; padding: 0; }
.doc .cl-list li { margin: 0; }
.cl-item {
  display: grid; grid-template-columns: 96px 1fr; column-gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--hair);
}
.cl-item:last-child { border-bottom: 0; }
.cl-item .cl-date { grid-column: 1; grid-row: 1 / span 3; font-size: 0.875rem; color: var(--muted); padding-top: 3px; }
.cl-item .cl-title, .cl-item .cl-summary, .cl-item .cl-tags { grid-column: 2; }
.doc .cl-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); line-height: 1.4; }
.doc .cl-title:hover { color: var(--primary); text-decoration: none; }
.doc .cl-summary { margin: 6px 0 12px; font-size: 0.9375rem; line-height: 1.6; color: var(--muted); }
.cl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-empty { margin-top: 32px; }

.cl-pager { justify-content: space-between; }
.cl-pager .cl-older { margin-left: auto; text-align: right; }
.doc .cl-all { margin: 28px 0 0; font-size: 0.9375rem; }

.doc .codeblock .code { white-space: pre-wrap; overflow-wrap: anywhere; padding-right: 72px; }

@media (max-width: 640px) {
  .cl-item { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  .cl-item .cl-title, .cl-item .cl-summary { flex: 0 0 100%; }
  .cl-item .cl-date { order: 3; padding-top: 0; }
  .cl-item .cl-tags { order: 4; }
  .cl-pager { flex-direction: column; }
  .cl-pager .cl-older { margin-left: 0; text-align: left; }
}