/*
 * Mobile continuation and spacing corrections.
 * Loaded after responsive.css so it can remove the remaining raster-QA-only
 * assumptions without changing the canonical reference-authored index.html.
 */

@media screen and (max-width: 760px) {
  /* The reference has no rule above the first feature row. */
  .mobile-features {
    border-top: 0 !important;
  }

  /* Re-centre the 2x2 feature content. Earlier optical offsets pulled the
     first row too far upward and made the spacing look broken on real phones. */
  .mf {
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .mf:nth-child(1) img,
  .mf:nth-child(2) img {
    transform: translateY(-7rem) !important;
  }

  .mf:nth-child(1) b,
  .mf:nth-child(2) b {
    transform: translateY(-8rem) !important;
  }

  .mf:nth-child(3) img,
  .mf:nth-child(4) img {
    transform: translateY(2rem) !important;
  }

  .mf:nth-child(3) b,
  .mf:nth-child(4) b {
    transform: translateY(3rem) !important;
  }

  /* Keep the values section in normal document flow. The previous absolute
     positioning matched the cropped 1536px QA frame but made the real page
     brittle and disconnected everything below it. */
  .values {
    position: static !important;
    height: auto !important;
    min-height: 549rem;
    padding: 25rem 53rem 0 !important;
  }

  .value {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 603rem !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  .value:nth-child(1) {
    height: 147rem !important;
  }

  .value:nth-child(2) {
    height: 125rem !important;
  }

  .value:nth-child(3),
  .value:nth-child(4) {
    height: 126rem !important;
  }

  /* The supplied mobile screenshot ends inside the values section. The rest
     of the actual website must nevertheless remain available below it. */
  .events,
  .way,
  .stories,
  .footer {
    display: block !important;
  }

  /* Events */
  .events {
    height: auto !important;
    padding: 34rem 54rem 42rem !important;
  }

  .section-head {
    height: auto !important;
    min-height: 40rem;
    margin-bottom: 20rem !important;
    align-items: center !important;
  }

  .section-head h2 {
    width: auto !important;
    font-size: 34rem !important;
    transform: none !important;
  }

  .section-head .rule {
    display: none !important;
  }

  .section-head a {
    margin-left: auto;
    font-size: 18rem !important;
    transform: none !important;
  }

  .cards {
    display: block !important;
  }

  .card,
  .card:nth-child(1),
  .card:nth-child(2),
  .card:nth-child(3) {
    width: 603rem !important;
    height: 510rem !important;
    margin: 0 0 24rem !important;
    flex: none !important;
  }

  .card:last-child {
    margin-bottom: 0 !important;
  }

  .card-photo {
    height: 296rem !important;
  }

  .date {
    width: 82rem !important;
    height: 116rem !important;
    padding-top: 10rem !important;
  }

  .date .mon {
    font-size: 20rem !important;
  }

  .date .day {
    font-size: 43rem !important;
    transform: none !important;
  }

  .date .span {
    font-size: 18rem !important;
    transform: none !important;
  }

  .card-body {
    padding: 16rem 18rem 16rem !important;
  }

  .card h3 {
    font-size: 31rem !important;
    transform: none !important;
    margin-bottom: 12rem !important;
  }

  .meta {
    position: static !important;
    display: flex !important;
    height: auto !important;
    gap: 20rem !important;
    margin-bottom: 14rem !important;
    transform: none !important;
    font-size: 16rem !important;
  }

  .meta span {
    position: static !important;
    display: flex !important;
    gap: 6rem !important;
  }

  .meta img {
    width: 18rem !important;
    height: 18rem !important;
  }

  .meta-text {
    font-size: 16rem !important;
    transform: none !important;
  }

  .card p {
    font-size: 16rem !important;
    line-height: 1.45 !important;
    transform: none !important;
  }

  .more {
    left: 18rem !important;
    bottom: 17rem !important;
    font-size: 19rem !important;
    transform: none !important;
  }

  /* The Way */
  .way {
    height: auto !important;
    padding: 34rem 54rem 40rem !important;
  }

  .way-left,
  .stamp-wrap,
  .newsletter {
    width: 603rem !important;
    max-width: 603rem !important;
  }

  .way-left {
    margin-bottom: 24rem;
  }

  .way h2,
  .newsletter h3 {
    font-size: 34rem !important;
    transform: none !important;
  }

  .mini-grind {
    width: 603rem !important;
    height: 25rem !important;
    margin: 5rem 0 10rem !important;
  }

  .rules {
    font-size: 17rem !important;
    line-height: 1.55 !important;
    transform: none !important;
  }

  .rule-x {
    width: 32rem !important;
    flex-basis: 32rem !important;
    font-size: 24rem !important;
  }

  .stamp-wrap {
    height: 250rem !important;
    margin-bottom: 22rem;
  }

  .stamp {
    width: 390rem !important;
    height: 230rem !important;
    transform: none !important;
  }

  .newsletter {
    transform: none !important;
  }

  .newsletter p {
    font-size: 16rem !important;
    line-height: 1.5 !important;
    transform: none !important;
    margin-bottom: 16rem !important;
  }

  .join {
    width: 603rem !important;
  }

  .join input {
    width: 438rem !important;
    height: 48rem !important;
    padding: 0 15rem !important;
    font-size: 15rem !important;
  }

  .join button {
    width: 165rem !important;
    height: 48rem !important;
    font-size: 18rem !important;
  }

  .socials {
    height: 42rem !important;
    gap: 26rem !important;
    margin-top: 18rem !important;
  }

  .socials img {
    width: 32rem !important;
    height: 32rem !important;
  }

  /* Stories */
  .stories {
    height: auto !important;
    padding: 30rem 54rem 38rem !important;
  }

  .story-head {
    height: auto !important;
    margin-bottom: 18rem !important;
  }

  .story-head h2 {
    font-size: 32rem !important;
    transform: none !important;
  }

  .story-head a {
    font-size: 17rem !important;
    transform: none !important;
  }

  .story-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 22rem 18rem !important;
  }

  .story,
  .story:nth-child(1),
  .story:nth-child(2),
  .story:nth-child(3),
  .story:nth-child(4) {
    width: auto !important;
  }

  .story img {
    height: 170rem !important;
  }

  .story div {
    margin-top: 7rem !important;
    font-size: 17rem !important;
    line-height: 1.1 !important;
    transform: none !important;
  }

  /* Footer */
  .footer {
    height: auto !important;
    padding: 30rem 54rem 38rem !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24rem 22rem !important;
    font-size: 14rem !important;
    line-height: 1.45 !important;
  }

  .footer-logo-space {
    display: none !important;
  }

  .footer-desc {
    grid-column: 1 / -1;
    width: auto !important;
    transform: none !important;
    font-size: 14rem !important;
    line-height: 1.45 !important;
  }

  .footer-col,
  .footer .footer-col:nth-of-type(3),
  .footer .footer-col:nth-of-type(4),
  .footer .footer-col:nth-of-type(5) {
    width: auto !important;
    transform: none !important;
  }

  .footer h4 {
    font-size: 17rem !important;
    margin-bottom: 6rem !important;
  }

  .footer-grind {
    grid-column: 1 / -1;
    justify-self: end;
    width: 300rem !important;
    height: 76rem !important;
    transform: none !important;
  }
}