/* =========================================================
   archive — per-section mobile rules.
   Loaded after responsive.css.
   ========================================================= */

@media (max-width: 1279px){

  /* No photograph behind this hero, so the full viewport
     responsive.css hands every .hero would be empty black. */
  /* `body .hero` to match the specificity of responsive.css:100, which is
     a later-loaded (0,1,1); a bare `.hero` loses even with !important. */
  body .hero{
    min-height: 0 !important;
    padding-top: 13rem !important;
    padding-bottom: 2rem !important;
    gap: 1.2rem;
  }

  .pg__title{ font-size: 5.6rem !important; line-height: 1 !important; }
  .crumbs{ gap: .8rem; }

  /* ---------- editions ---------- */

  .s-edt{ padding-top: 2rem; }

  .edt{ width: 100% !important; }

  /* The desktop row is a four-column bar. On a phone the year moves up
     beside the edition number and the city takes the line below. */
  .edt__row{
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    column-gap: 1.4rem;
    padding: 2.4rem 0;
  }
  .edt__row--lead{ padding: 3rem 0; }

  .edt__n{ grid-column: 1; grid-row: 1; }
  .edt__cat{ grid-column: 2; grid-row: 1; }
  .edt__y{
    grid-column: 3; grid-row: 1 / span 2;
    align-self: center;
    font-size: 3.6rem !important;
  }
  .edt__city{
    grid-column: 1 / span 2; grid-row: 2;
    margin-top: .6rem;
    font-size: 2rem !important;
  }
  .edt__row--lead .edt__y{ font-size: 4.4rem !important; }
}

@media (max-width: 767px){

  .pg__title{ font-size: 4.4rem !important; }

  .edt__y{ font-size: 3rem !important; }
  .edt__row--lead .edt__y{ font-size: 3.6rem !important; }
  .edt__city{ font-size: 1.8rem !important; }
}