/* Mobile and small-screen refinements. Loaded last. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { overflow-wrap: break-word; }
img, svg, video { max-width: 100%; }

/* Notch / home-indicator safe areas (layout sets viewport-fit=cover). */
.site-nav {
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(var(--px), env(safe-area-inset-left, 0px));
  padding-right: max(var(--px), env(safe-area-inset-right, 0px));
}
.page {
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: 100vh; height: 100dvh;
  overflow-y: auto; overscroll-behavior: contain;
  align-items: safe center;
}
.mobile-close { top: calc(18px + env(safe-area-inset-top, 0px)); right: max(var(--px), env(safe-area-inset-right, 0px)); }

/* Comfortable touch targets. */
.hamburger, .mobile-close {
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
}
.hamburger { margin-right: -10px; }
.hamburger span { background: var(--text); }
.mobile-close { display: flex; font-size: 20px; }

@media (max-width: 600px) {
  :root { --nav-h: 64px; }

  .nav-name { font-size: 12px; letter-spacing: 0.16em; }
  .mobile-menu { gap: 8px; }
  .mobile-menu a { font-size: 15px; padding: 14px 24px; letter-spacing: 0.22em; }

  .page { padding-left: var(--px); padding-right: var(--px); }
  .quote-text { line-height: 1.45; }
  .page-eyebrow, .about-eyebrow, .contact-label { font-size: 11px; }
  .page-inner { padding: 24px 0; }
  .page-sub, .about-bio { font-size: 14px; line-height: 1.75; }

  /* About: let the whole section scroll instead of an inner box. */
  #page-about { align-items: flex-start; }
  .about-inner { max-height: none; overflow: visible; padding: 24px 0 32px; gap: 20px; }
  .about-photo-col { width: clamp(120px, 38vw, 170px); }
  .about-name { font-size: clamp(26px, 8vw, 34px); }

  .search-btn { width: 100%; justify-content: center; min-height: 48px; }
  .social-link { padding: 18px 0; min-height: 64px; }
  .social-name { font-size: 12px; }
  .social-handle { font-size: 11px; }
  .contact-email { font-size: clamp(16px, 5.4vw, 22px); }
  .contact-note { font-size: 13px; }

  /* Journal */
  .journal { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 28px); padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .journal-item { padding: 22px 0; }
  .journal-item time, .journal-meta, .journal-back { font-size: 11px; }
  .journal-item h2 { font-size: 24px; }
  .journal-item p { font-size: 14px; }
  .journal-body { font-size: 16px; line-height: 1.8; }
  .journal-body h2 { font-size: 24px; }
  .journal-body blockquote { font-size: 20px; padding-left: 16px; }
  .journal-body pre { margin-left: calc(var(--px) * -1); margin-right: calc(var(--px) * -1); padding: 16px var(--px); font-size: 13px; }
}

/* Short screens (landscape phones): tighten vertical rhythm. */
@media (max-height: 520px) {
  .quote-mark { font-size: 48px; margin-bottom: 0; }
  .quote-text { font-size: clamp(18px, 3.2vw, 28px); }
  .divider { margin: 16px auto; }
  .signature { font-size: clamp(28px, 5vw, 40px); }
  .page-inner { padding: 12px 0; }
  .mobile-menu { gap: 0; }
  .mobile-menu a { padding: 8px 24px; }
}

/* Journal pager (Bludit) */
.journal-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; }
.journal-pager a {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: 12px 0; min-height: 44px;
  transition: color 0.3s ease;
}
.journal-pager a:hover { color: var(--accent); }
.journal-pager a[rel="next"] { margin-left: auto; }

/* Touch devices: no sticky hover states, quick press feedback instead. */
@media (hover: none) {
  .social-link:hover .social-left, .journal-item:hover h2 { transform: none; }
  .social-link:active, .journal-item:active, .search-btn:active { opacity: 0.6; }
  .about-photo { filter: none; }
}

/* Menu links read at full contrast on a full-screen overlay. */
.mobile-menu a { color: var(--text); }
.mobile-close { color: var(--text); }