/* ---------- Home (js/home.js): the hero's own rules; the title block it shares with a title's page is in app.css ---------- */
.hero-none { height: 80px; }
/* The hero keeps a short synopsis (3 lines on phones); a detail page shows all of it. */
.hero .overview { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 720px) {
  .hero-none { height: calc(80px + env(safe-area-inset-top)); }
  .hero .overview { -webkit-line-clamp: 3; }
}