/* Mobile-first refinements; the base layout in style.css is already fluid. */
@media (max-width: 760px) {
  .site-head { padding: 16px 14px 10px; }
  .site-main { padding: 4px 14px calc(64px + env(safe-area-inset-bottom)); }
  .site-nav { gap: 12px; font-size: 13px; }
  .post-card { padding: 18px 0; }
  .post-card h2 { font-size: 18px; }
  .post-view h1 { font-size: 22px; }
  .post-body { font-size: 16px; }
  .post-body pre { font-size: 12.5px; padding: 12px; }
  .two-col, .editor-grid { grid-template-columns: 1fr; }
  .editor-grid .preview { min-height: 160px; }
  input, select, textarea { font-size: 16px; min-height: 44px; }
  .btn { padding: 10px 16px; }
  .btn.sm { padding: 6px 12px; }
  .media-list li { flex-wrap: wrap; }
  .modal { width: 100%; border-radius: 16px 16px 0 0; align-self: end; }
  .modal-backdrop { align-items: end; padding: 0; }
  .toast { bottom: calc(20px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 24px); }
}

@media (min-width: 761px) {
  .post-body img, .post-body video { margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}