img { max-width: 100%; height: auto; }

@media screen and (max-width: 720px) {
  #wrapper       { padding: 0 10px; margin-top: 12px; }
  .masthead-grid { padding: 24px 20px 8px; }
  #about         { padding: 16px 20px 32px; }

  /* Hero compacts: small portrait beside the name */
  .hero { gap: 18px; }
  #hanypic { flex-basis: 96px; }
  #hanypic img { border-radius: 14px; }
  #hanypic figcaption { display: none; }

  .masthead h1 { font-size: 26px; }
  .pronounce   { font-size: 13px; margin-top: 4px; }
  .masthead-links { margin-top: 8px; }

  hr.rule { margin: 18px 0 14px; }

  /* Index collapses to stacked label-over-content */
  dl.index { display: block; }
  dl.index dt  { text-align: left; margin-top: 16px !important; padding: 0 0 2px; }
  dl.index dd  { margin: 0 0 4px; }
  dl.index dt + dd { margin-top: 0 !important; }

  .sidebar, .left-col { width: 100%; }
  body { font-size: 15px; }
}

@media screen and (max-width: 380px) {
  .masthead h1 { font-size: 22px; }
  #hanypic { flex-basis: 78px; }
  body { font-size: 14.5px; }
}