/* Blog index and every /blog/posts/.../ article, in both iPad orientations */
@media screen and (min-width: 700px) and (max-width: 1199px) {
  .wrap { width: min(100% - 64px, 1040px); }
  .header-inner { gap: 20px; }
  .journal-hero .hero-grid { padding-top: 75px; padding-bottom: 77px; }
  .journal-hero h1 { font-size: clamp(43px, 5vw, 62px); }
  .hero-lead { font-size: 15px; }
  .posts-section { padding-top: 70px; padding-bottom: 90px; }
  .content-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .post-card { padding: 31px 32px; }
  .post-card h3 { font-size: clamp(21px, 2.7vw, 27px); }
  .side-panel { width: 100%; max-width: none; padding: 32px; }
  .topic-list { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .archive-toolbar { flex-wrap: wrap; gap: 12px; }
  .pagination { flex-wrap: wrap; }
  .article-wrap { width: min(100% - 84px, 790px); padding-top: 40px; padding-bottom: 90px; }
  .article-header h1 { font-size: clamp(35px, 4.15vw, 50px); }
  .article-body { max-width: 100%; }
  .article-body img, .article-body video { max-width: 100%; height: auto; }
  .article-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .article-body pre { white-space: pre; overflow-x: auto; }
  .article-body iframe { max-width: 100%; }
  .footer-inner { gap: 16px; }
}
@media screen and (min-width: 700px) and (max-width: 850px) {
  .wrap { width: calc(100% - 48px); }
  .hero-mark { width: 160px; height: 160px; }
  .hero-mark > span:first-child { font-size: 100px; }
  .journal-hero .hero-grid { gap: 12px; padding-top: 68px; padding-bottom: 72px; }
  .journal-hero h1 { font-size: 44px; }
  .post-card { padding: 26px 25px; }
  .article-wrap { width: calc(100% - 64px); }
  .article-header h1 { font-size: 36px; }
}
@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .article-wrap { width: min(810px, calc(100% - 96px)); }
  .article-body img, .article-body video { max-width: 100%; height: auto; }
}