@media (max-width: 820px) {
  .app-view {
    width: min(100% - 28px, 680px);
  }

  .hero {
    display: block;
    padding: 65px 0 48px;
  }

  .hero h1 {
    font-size: clamp(42px, 11vw, 68px);
  }

  .hero > p:last-child {
    max-width: 480px;
    margin-top: 26px;
  }

  .composer-grid {
    grid-template-columns: 1fr;
  }

  .timeline-item {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .item-actions {
    grid-column: 2;
  }
}

@media (max-width: 560px) {
  .login-view {
    padding: 20px;
  }

  .login-card {
    padding: 34px 25px;
    border-radius: 20px 7px 20px 7px;
    box-shadow: 7px 7px 0 var(--ink);
  }

  .login-card .eyebrow {
    margin-top: 43px;
  }

  .login-card h1 {
    font-size: 40px;
    letter-spacing: -2.4px;
  }

  .topbar {
    min-height: 74px;
  }

  .sync-status,
  .text-button span {
    display: none;
  }

  .topbar-actions {
    gap: 15px;
  }

  .text-button {
    font-size: 0;
  }

  .text-button svg {
    width: 20px;
    height: 20px;
  }

  .hero {
    padding-top: 52px;
  }

  .hero h1 {
    font-size: 43px;
    letter-spacing: -2.8px;
  }

  .composer-panel {
    padding: 20px;
  }

  .timeline-section {
    padding-top: 65px;
  }

  .timeline-item {
    grid-template-columns: 1fr auto;
    gap: 14px;
  }

  .item-meta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
  }

  .item-actions {
    grid-column: 2;
    grid-row: 2;
  }

  footer {
    gap: 15px;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}