/*
 * Mobile spacing / rhythm pass.
 *
 * The reference artwork establishes the composition, but production phones need
 * more real CSS-pixel whitespace than the 709px raster-derived coordinate system
 * provides. This layer intentionally leaves the hero artwork geometry intact and
 * opens up the content sections below it.
 */

@media screen and (max-width: 760px) {
  /* Values */
  .values {
    min-height: 0 !important;
    padding: 32px 24px 36px !important;
  }

  .value,
  .value:nth-child(1),
  .value:nth-child(2),
  .value:nth-child(3),
  .value:nth-child(4) {
    width: 100% !important;
    height: auto !important;
    min-height: 118px;
    padding: 24px 0 !important;
    align-items: center !important;
  }

  .value-copy {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-right: 4px;
  }

  .value h3 {
    margin-bottom: 8px !important;
  }

  /* Events */
  .events {
    padding: 42px 24px 48px !important;
  }

  .section-head {
    min-height: 32px;
    margin-bottom: 24px !important;
    align-items: baseline !important;
  }

  .cards {
    display: grid !important;
    gap: 28px !important;
  }

  .card,
  .card:nth-child(1),
  .card:nth-child(2),
  .card:nth-child(3) {
    width: 100% !important;
    height: auto !important;
    min-height: 405px;
    margin: 0 !important;
  }

  .card-photo {
    height: 190px !important;
  }

  .card-body {
    padding: 18px 18px 58px !important;
  }

  .card h3 {
    margin-bottom: 12px !important;
  }

  .meta {
    margin-bottom: 16px !important;
    row-gap: 8px !important;
    flex-wrap: wrap;
  }

  .more {
    left: 18px !important;
    bottom: 18px !important;
  }

  /* The Way */
  .way {
    padding: 44px 24px 48px !important;
  }

  .way-left,
  .stamp-wrap,
  .newsletter {
    width: 100% !important;
    max-width: none !important;
  }

  .way-left {
    margin-bottom: 36px !important;
  }

  .mini-grind {
    width: 100% !important;
    margin: 7px 0 14px !important;
  }

  .rules {
    line-height: 1.6 !important;
  }

  .stamp-wrap {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 0;
    margin-bottom: 38px !important;
  }

  .stamp {
    width: min(270px, 78vw) !important;
    height: auto !important;
  }

  .newsletter {
    padding-top: 0 !important;
  }

  .newsletter h3 {
    margin-bottom: 12px !important;
  }

  .newsletter p {
    margin-bottom: 20px !important;
  }

  .join {
    width: 100% !important;
  }

  .join input {
    width: auto !important;
    min-width: 0;
    flex: 1 1 auto;
  }

  .join button {
    width: 96px !important;
    flex: 0 0 96px;
  }

  .socials {
    margin-top: 20px !important;
  }

  /* Stories */
  .stories {
    padding: 40px 24px 46px !important;
  }

  .story-head {
    margin-bottom: 24px !important;
    align-items: baseline !important;
  }

  .story-grid {
    gap: 26px 16px !important;
  }

  .story img {
    height: 120px !important;
  }

  .story div {
    margin-top: 9px !important;
  }

  /* Footer */
  .footer {
    padding: 42px 24px 50px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 30px 24px !important;
  }

  .footer-desc {
    margin-bottom: 2px;
  }

  .footer h4 {
    margin-bottom: 8px !important;
  }

  .footer-grind {
    width: min(300px, 82vw) !important;
    margin-top: 8px;
  }

  /* Hero refinement: use some of the oversized mobile header as breathing room
     for the content while keeping the complete hero inside the first viewport. */
  .header {
    height: 145rem !important;
  }

  .hamb {
    transform: translateY(7rem) !important;
  }

  .hero {
    height: 1056rem !important;
  }

  .hero-headline-mobile {
    top: 423rem !important;
  }

  .mobile-copy {
    top: 638rem !important;
  }

  .mobile-tag {
    margin-bottom: 32rem !important;
    transform: translateX(2rem) scaleX(1.176) !important;
  }

  .mobile-traits {
    margin-bottom: 31rem !important;
    transform: translateX(3rem) scaleX(1.067) !important;
  }

  .cta {
    margin-bottom: 26rem !important;
    transform: none !important;
  }

  /* The four hero principles are content, not micro-labels. Give them a more
     readable optical weight without making the grid taller than necessary. */
  .mobile-features {
    height: 188rem !important;
    grid-template-rows: repeat(2, 94rem) !important;
  }

  .mf {
    align-items: center !important;
  }

  .mf img {
    width: 68rem !important;
    height: 74rem !important;
    flex-basis: 68rem !important;
    margin-right: 17rem !important;
    transform: none !important;
  }

  .mf:nth-child(2) img,
  .mf:nth-child(4) img {
    width: 74rem !important;
    flex-basis: 74rem !important;
    margin-right: 16rem !important;
  }

  .mf b {
    font-size: max(15px, 26rem) !important;
    line-height: 1.12 !important;
    transform: none !important;
  }

  /* Only the middle horizontal divider belongs in the 2x2 grid. */
  .mf:nth-child(3),
  .mf:nth-child(4) {
    border-bottom: 0 !important;
  }
}