/* =========================================================
   about.html — per-section mobile rules.
   Loaded after responsive.css, which has already flattened the
   absolute grid; this file only rebuilds the pieces that need
   a shape of their own.
   ========================================================= */

@media (max-width: 1279px){

  /* ---------- 1. HERO ---------- */

  .hero__lead{
    font-size: 2.1rem !important;
    line-height: 1.25 !important;
    color: var(--cream);
  }
  .hero__para{ line-height: 2.4rem !important; }
  .hero__meta{ color: var(--gold); }
  .hero__scroll{ display: none !important; }   /* the rule + label read as a stray tick */

  /* ---------- 2. WHAT WE ARE ---------- */

  .s-what__img--l{ width: 100% !important; }

  /* empty span, all of it is a background image (about.css:89, 37.9 x 42.4) */
  .s-what__img--r{
    display: block;
    width: 100% !important;
    aspect-ratio: 379 / 424;
    background-position: center !important;
    background-size: cover !important;
  }

  .s-what__sub{
    font-size: 1.9rem !important;
    line-height: 1.3 !important;
    color: #a5a29c;
  }
  .s-what__p1, .s-what__p2{ line-height: 2.6rem !important; }

  /* ---------- 3. PROGRAMME ---------- */

  /* about.css:135, 63.5 x 55.6 */
  .s-prog__img{
    display: block;
    width: 100% !important;
    aspect-ratio: 635 / 556;
    background-position: center 20% !important;
    background-size: cover !important;
  }

  .prog{ display: flex; flex-direction: column; }

  .prog__row{
    display: grid !important;
    grid-template-columns: 3.4rem 1fr;
    align-items: baseline;
    gap: .8rem 0;
    padding: 2.4rem 0;
    border-top: 1px solid rgba(239,235,227,.075);
  }
  .prog__row--5{ border-bottom: 1px solid rgba(239,235,227,.075); }

  .prog__n{
    grid-column: 1; grid-row: 1;
    color: rgba(239,235,227,.30) !important;
  }
  .prog__name{
    grid-column: 2; grid-row: 1;
    font-size: 2.4rem !important;
    line-height: 1.15 !important;
  }
  /* about.css:173-177 target .prog__row--N .prog__desc — two classes, so
     one class is not enough to win here */
  .prog__row .prog__desc{
    grid-column: 2; grid-row: 2;
    font-size: 1.5rem !important;
    line-height: 2.3rem !important;
  }

  /* ---------- 4. FIRST EDITION ---------- */

  .s-first__p1, .s-first__p2{ line-height: 2.6rem !important; }

  .s-first__panel{
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    width: 100% !important;
    margin-top: 1.6rem;
  }
  .s-first__rule{
    width: 100% !important;
    height: 1px !important;
    margin: 2.4rem 0 2rem;
    background: rgba(239,235,227,.09);
  }
  .s-first__k{ color: rgba(239,235,227,.38) !important; }
  .s-first__v{
    margin-top: .9rem;
    font-size: 1.9rem !important;
    line-height: 1.3 !important;
  }
  .s-first__btn{ margin-top: 3.2rem; }

  /* ---------- 5. MORE THAN A FESTIVAL ---------- */

  .s-more__h2 span{ margin-left: 0 !important; }
  .s-more__p1, .s-more__p2{ line-height: 2.6rem !important; }

  /* ---------- 6. SUBMISSIONS ---------- */

  /* the panel is a real card: keep its artwork, drop the fixed 63.2rem box */
  .s-sub{ padding-left: 0 !important; padding-right: 0 !important; }
  .s-sub__panel{
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    width: 100% !important;
    padding: 5rem var(--pad);
  }
  /* about.css:277 — pseudo-elements are not reached by the reset */
  .s-sub__panel::before{
    inset: 0 !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .s-sub__panel > *{ position: relative; z-index: 1; }

  .s-sub__h2c{
    font-size: 3.4rem !important;
    line-height: 1.1 !important;
    margin-top: -1rem;
  }
  .s-sub__p1, .s-sub__p2{ line-height: 2.6rem !important; }
  .s-sub__note{ color: rgba(239,235,227,.45) !important; }

  /* ---------- 7. OUTRO ---------- */

  .s-outro__h{
    font-size: 3.4rem !important;
    line-height: 1.14 !important;
  }
  .s-outro__mark{ color: rgba(239,235,227,.30) !important; }
}


@media (max-width: 767px){

  .hero__lead{ font-size: 1.95rem !important; }

  .prog__row{ grid-template-columns: 3rem 1fr; }
  .prog__name{ font-size: 2.1rem !important; }

  .s-sub__h2c{ font-size: 3rem !important; }
  .s-outro__h{ font-size: 3rem !important; }
}