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

/* ===== Filter tabs ===== */
.filters {
  display: flex; border-bottom: var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.filter-btn {
  appearance: none; border: none; background: transparent;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--sans); font-size: var(--text-xs);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-muted); cursor: pointer;
  border-right: var(--border); white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.filter-btn:last-child { border-right: none; }
.filter-btn:hover { background: var(--fg-ghost); }
.filter-btn.active { color: var(--fg); background: var(--fg-ghost); }

/* ===== 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; }
  .filter-btn { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); }
}

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