/*
 * v27.1 — Overview opening screen on phones: the whole statistics block
 * (all four figures and their captions) within the first 740px at 360 x 740,
 * on all six designs.
 *
 * Phone widths only (max-width: 800px). Tablet (820px and wider) and desktop
 * layouts are untouched. No content is hidden and no wording changes: hero
 * spacing, the historical-title type, the binding-fan size and the statistic
 * figures are tightened. Builds on v26.8 (styles/phone-stats-v268.css).
 */
@media (max-width: 800px) {
  /* Hero spacing and type (all six designs). */
  body[data-design] #t-overview:checked ~ .hero .hero-inner {
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }

  body[data-design] #t-overview:checked ~ .hero h1.bibliographical-title {
    margin: 0 0 4px !important;
  }

  body[data-design] #t-overview:checked ~ .hero .census-edition {
    margin: 3px 0 8px !important;
  }

  body[data-design] #t-overview:checked ~ .hero .full-historical-title {
    margin: 0 0 8px !important;
    font-size: 13.5px !important;
    line-height: 1.36 !important;
  }

  body[data-design] #t-overview:checked ~ .hero .author-credit {
    font-size: 13px !important;
    line-height: 1.36 !important;
  }

  /* Binding fan: dark designs (index, midnight). */
  body.design-midnight #t-overview:checked ~ .hero .hero-bindings {
    height: 140px !important;
    min-height: 0 !important;
  }

  body.design-midnight #t-overview:checked ~ .hero .hero-bindings .hero-book {
    top: 4px !important;
    width: 86px !important;
  }

  body.design-midnight #t-overview:checked ~ .hero .hero-stage-label,
  body.design-midnight #t-overview:checked ~ .hero .hero-highlight {
    margin-top: 4px !important;
  }

  body.design-midnight #t-overview:checked ~ .hero .hero-highlight {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  /* Egyptian: framed top margin and medallion slightly smaller. */
  body.design-egyptian #t-overview:checked ~ .hero .hero-inner {
    padding-top: 50px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero h1.bibliographical-title {
    font-size: 26px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero h1.bibliographical-title::after {
    margin-top: 10px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-stage {
    min-height: 170px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-stage::before {
    width: 158px !important;
    height: 158px !important;
    border-width: 13px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-book {
    top: 8px !important;
    width: 80px !important;
  }

  /* Statistics: slightly smaller figures and cells. */
  body[data-design] #t-overview:checked ~ .stats .stat {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  body[data-design] #t-overview:checked ~ .stats .stat b {
    font-size: 36px !important;
    line-height: 1 !important;
  }

  body[data-design] #t-overview:checked ~ .stats .stat span {
    margin-top: 5px !important;
  }
}

/* Short phone screens (for example 375 x 667 and 384 x 694). */
@media (max-width: 800px) and (max-height: 700px) {
  body.design-midnight #t-overview:checked ~ .hero .hero-bindings {
    height: 118px !important;
  }

  body.design-midnight #t-overview:checked ~ .hero .hero-bindings .hero-book {
    top: 2px !important;
    width: 78px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-inner {
    padding-top: 48px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero h1.bibliographical-title {
    font-size: 24px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-stage {
    min-height: 152px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-stage::before {
    width: 142px !important;
    height: 142px !important;
    border-width: 12px !important;
  }

  body.design-egyptian #t-overview:checked ~ .hero .hero-book {
    top: 6px !important;
    width: 74px !important;
  }

  body[data-design] #t-overview:checked ~ .stats .stat {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  body[data-design] #t-overview:checked ~ .stats .stat b {
    font-size: 32px !important;
  }
}