/* Shorter tablet banner, original character cards, and compact spacing. */
@media (min-width:700px) and (max-width:1400px) {
  .hero picture {display:block;}
  .hero img {width:100%;height:auto;aspect-ratio:16/9;}
  .welcome {padding-bottom:12px;}
  .welcome h1 {margin-bottom:12px;}
  .site-footer {padding-top:12px;padding-bottom:10px;}
  .footer-row {margin:4px 0 8px;}
  .footer-language,.footer-favorites {position:relative;top:4px;}
  .categories {grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
  .categories .card {grid-column:auto;display:flex;flex-direction:column;padding:8px 14px 20px;border-radius:22px;}
  .categories .card .art {width:100%;aspect-ratio:1.2;max-height:none;background-size:contain;flex:none;}
  .categories .card-copy {display:flex;flex:1;flex-direction:column;align-items:center;}
  .categories .card h2 {font-size:clamp(23px,2.7vw,32px);letter-spacing:-.7px;margin:4px 0 8px;}
  .categories .card p {font-size:13px;line-height:1.5;letter-spacing:0;margin:0 0 14px;}
  .categories .pill {font-size:12px;min-height:44px;padding:11px 18px;margin-top:auto;}
}

/* On shorter portrait tablets, reclaim space from cards rather than the banner. */
@media (min-width:700px) and (max-width:900px) and (orientation:portrait) and (max-height:1000px) {
  .categories .card .art {aspect-ratio:1.65;}
  .categories .card {padding-bottom:14px;}
  .categories .card h2 {font-size:23px;}
  .categories .card p {font-size:12px;}
  .site-footer .footer-tagline {font-size:10px;}
  .site-footer {padding-top:8px;padding-bottom:4px;}
}