/* Readable forms and comfortable touch controls on phones and tablets. */
.home-photo-preview img { display: block; width: 100%; max-height: 320px; object-fit: contain; border-radius: 6px; background: var(--sage); }
.home-photo-preview figcaption { margin: 10px 0 24px; font-size: 14px; overflow-wrap: anywhere; }
.photo-caption strong { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 1180px), (pointer: coarse) {
  .form-control, .form-select { font-size: 16px; }
  .form-label, .form-check-label, .form-text, .field-error { font-size: 14px; }
  .btn { font-size: 14px; min-height: 44px; }
  .text-link, .back-link { font-size: 14px; min-height: 44px; align-content: center; }
  .plain-button { font-size: 13px; min-height: 44px; }
  .account-menu summary { width: 44px; height: 44px; font-size: 14px; }
  .account-panel a, .account-panel button { font-size: 14px; min-height: 44px; }
  .main-nav a, .filter-tabs > a { font-size: 14px; min-height: 44px; }
  .menu-toggle { font-size: 14px; min-width: 44px; min-height: 44px; white-space: nowrap; }
  .hero-intro, .login-intro > p:not(.eyebrow), .post-card p,
  .empty-state p, .note-body, .media-info .prose, .comment .prose { font-size: 15px; }
  .member-status, .member-username, .comment-meta time,
  .album-card p, .media-card p, .post-date, .login-hint p { font-size: 12px; }
  .member-row .text-link { font-size: 14px; }
  .section-heading > .text-link { font-size: 14px; }
  .section-heading { flex-wrap: wrap; }
  .member-row > div { min-width: 0; overflow-wrap: anywhere; }
  .post-byline, .comment-meta { overflow-wrap: anywhere; }
  .hero-stats { flex-wrap: wrap; gap: 24px; }
  .story-photo-option { min-width: 0; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .header-inner { gap: 14px; }
  .main-nav { gap: 15px; }
  .brand { font-size: 1.6rem; }
  .home-hero { grid-template-columns: 1fr; }
  .hero-copy h1 { max-width: 650px; }
  .hero-intro { max-width: 600px; }
  .hero-art { height: 400px; }
  .login-layout { gap: 30px; }
  .login-card { padding: 26px; }
}

@media (max-width: 767px) {
  .header-inner { gap: 10px; }
  .brand { font-size: 1.5rem; }
  .hero-copy h1 { font-size: clamp(2.2rem, 9.4vw, 3.35rem); }
  .member-row > div { flex: 1; }
  .member-status { margin-left: 0; }
  .member-row > .text-link { margin-left: auto; }
  .media-card h3 { font-size: 15px; }
  .comment-meta { font-size: 14px; }
  .section-heading { gap: 12px; }
  .section-heading h2 { font-size: 29px; }
  .form-column h1 { font-size: clamp(1.9rem, 8vw, 2.3rem); }
  .story-editor-column h1, .folder-column h1 { font-size: clamp(2rem, 8.5vw, 2.4rem); }
  .media-navigation .btn { min-width: 72px; padding: 10px; }
  .media-navigation { gap: 8px; }
  .story-photo-option small { font-size: 12px; }
}

@media (max-width: 374px) {
  .container-xl { padding-left: 16px; padding-right: 16px; }
  .brand { font-size: 1.25rem; gap: 6px; }
  .brand img { width: 26px; height: 26px; }
  .header-inner { gap: 8px; }
  .header-inner > .private-badge { white-space: normal; max-width: 100px; }
  .editor-form, .login-card { padding: 18px; }
  .stats-note { padding-left: 16px; }
  .hero-stats { gap: 20px; }
  .login-intro h1 { font-size: 2.6rem; }
}