@media (max-width: 700px) {
  html, body { width: 100%; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  button, textarea, input { font-size: 16px; }
  button { min-height: 44px; touch-action: manipulation; }

  .hero {
    min-height: 720px;
    padding: max(18px, env(safe-area-inset-top)) 18px 28px;
    display: flex;
    flex-direction: column;
  }
  .brand { font-size: 15px; letter-spacing: .04em; }
  .brand span { width: 31px; height: 31px; }
  .hero-copy { margin: 72px 0 0; max-width: 100%; }
  .hero h1 { font-size: clamp(37px, 11vw, 46px); line-height: 1.28; margin: 10px 0 22px; }
  .hero h1 span:after { bottom: -7px; }
  .eyebrow { font-size: 10px; letter-spacing: .22em; }
  .sub { font-size: 14px; line-height: 1.85; max-width: 94%; }
  .primary { width: 100%; padding: 14px 22px; margin-top: 15px; }
  .stats {
    left: 18px;
    right: 18px;
    bottom: 24px;
    gap: 20px;
    padding: 17px 18px;
    border-radius: 18px;
  }
  .stats strong { font-size: 27px; }
  .stats span { font-size: 11px; }
  .stats em { height: 36px; }

  .timeline-wrap { padding: 58px 13px 90px; }
  .section-title { margin-bottom: 43px; padding: 0 14px; }
  .section-title h2 { font-size: 28px; margin: 8px 0; }
  .section-title span { font-size: 13px; line-height: 1.7; }
  .timeline:before { left: 16px; }
  .memory { padding-left: 45px; margin-bottom: 38px; }
  .dot { left: 0; width: 33px; height: 33px; }
  .date { margin: 6px 0 12px; font-size: 11px; }
  .card { border-radius: 17px; box-shadow: 0 10px 32px #9c555318; }
  .card img { width: 100%; aspect-ratio: 4 / 3; max-height: none; object-fit: cover; }
  .card-copy { padding: 18px; }
  .card-copy p { font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
  .card-head { align-items: center; }
  .delete-entry { min-height: 36px; padding: 5px 12px; }

  .backdrop { align-items: end; padding: 0; }
  .composer {
    width: 100%;
    max-height: 92dvh;
    border-radius: 24px 24px 0 0;
    padding: 27px 18px calc(18px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .composer h2 { font-size: 25px; padding-right: 36px; }
  .composer .hint { font-size: 13px; }
  .close { right: 16px; top: 13px; width: 44px; height: 44px; padding: 0; }
  .upload { height: 148px; border-radius: 15px; }
  .upload.has-photo { height: min(230px, 29dvh); }
  .composer label { margin-top: 17px; }
  .moods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .moods button { min-width: 0; padding: 8px 4px; font-size: 13px; }
  textarea { min-height: 112px; border-radius: 13px; line-height: 1.6; }
  .save { position: sticky; bottom: 0; margin-top: 12px; min-height: 50px; }
  .privacy { margin-bottom: 0; }

  .floating { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 55px; height: 55px; }
  .to-top { right: 19px !important; bottom: calc(82px + env(safe-area-inset-bottom)) !important; width: 46px !important; height: 46px !important; }
  .toast { bottom: calc(22px + env(safe-area-inset-bottom)); max-width: calc(100vw - 28px); text-align: center; white-space: normal; }
}

@media (max-width: 380px) {
  .hero { min-height: 690px; }
  .hero-copy { margin-top: 58px; }
  .hero h1 { font-size: 36px; }
  .sub { line-height: 1.72; }
  .moods { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .moods button { font-size: 12px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .composer { max-height: 100dvh; border-radius: 0; }
  .upload { height: 110px; }
}