/* ===== Page desc override — writing max-width ===== */
.page-desc { max-width: 480px; }

/* Filter tabs moved to components.css — shared between writing and ecosystem pages */

/* ===== Post list ===== */
.post-list { display: flex; flex-direction: column; }
.post-row {
  display: grid; grid-template-columns: 100px 1fr auto;
  align-items: baseline; gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: var(--border);
  text-decoration: none; color: var(--fg);
  transition: background 0.2s, padding-left 0.2s;
}
.post-row:hover { background: var(--fg-ghost); padding-left: var(--space-lg); }
.post-row.hidden { display: none; }
.post-date {
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--fg-muted); font-weight: 500;
}
.post-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.post-title {
  font-family: var(--serif); font-size: 1.25rem;
  font-weight: 400; line-height: 1.3;
}
.post-excerpt {
  font-size: var(--text-sm); color: var(--fg-muted);
  line-height: 1.45; max-width: 600px;
}
.post-tag {
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--fg-faint);
  font-weight: 600; white-space: nowrap;
}

/* ===== Writing responsive — 768px ===== */
@media (max-width: 768px) {
  .post-row { grid-template-columns: 1fr; gap: var(--space-xs); }
  .post-date { order: 2; }
  .post-info { order: 1; }
  .post-tag { order: 3; }
}

/* ===== Writing responsive — 420px ===== */
@media (max-width: 420px) {
  .page-title { font-size: clamp(2rem, 10vw, 3rem); }
}