/* =========================================================
   index.html (MERIDIAN) — per-section mobile rules.
   Loaded after responsive.css.

   This page also carries the pinned scroll engine. responsive.css
   flattens `.pin` and script.js adds `nopin` below 1280px, so the
   three pinned sections behave like ordinary blocks here.
   ========================================================= */

@media (max-width: 1279px){

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

  .hero__eyebrow{ text-align: left !important; }
  .hero__title{ text-align: left !important; }
  .hero__scroll{ display: none !important; }
  .hero__tag{
    font-size: 2.2rem !important;
    line-height: 1.3 !important;
    letter-spacing: .02em;
  }
  .hero__cta{
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    width: 100% !important;
  }
  .hero__cta .btn{ height: 5rem !important; }

  /* ---------- 2. MISSION ---------- */

  .mission__img{ width: 100% !important; }
  .mission__img--b{ opacity: 1 !important; }
  .mission__body{ line-height: 1.72 !important; }

  /* ---------- 3. IDENTITY ---------- */

  .idc{
    border-left: none !important;
    border-top: 1px solid var(--line);
    padding-left: 0 !important;
    padding-top: 2.4rem;
  }

  /* ---------- 4. STORIES ---------- */

  .stories{ gap: 1.6rem; }
  .st{ width: 100% !important; }
  .st--4{ display: none; }              /* four stacked crops is one too many */
  .stories__quote{
    order: -1;
    text-align: left !important;
    margin-bottom: 1.6rem;
  }

  /* ---------- 5. AWARDS ---------- */

  .awards::before{ display: none; }     /* 90x60rem radial wash, way off-canvas */
  .awards__aside{ width: 100% !important; }
  .awards__aside .body-sm{ line-height: 1.6 !important; }
  .awards__aside .link{ display: inline-block; margin-top: 1.6rem !important; }

  .awards__list{ display: flex; flex-direction: column; gap: 2.8rem; }

  /* .aw--1..4 carry the scroll-effect chrome (style.css:355-358) and
     script.js:124-128 writes inline top/font-size on them. The JS is
     guarded below 1280px, but keep !important as a backstop — an inline
     style outranks every plain selector. */
  .aw,
  .aw--1, .aw--2, .aw--3, .aw--4{
    text-align: left !important;
    font-size: 3.2rem !important;
    line-height: 1.1 !important;
    filter: none !important;
    opacity: 1 !important;
    z-index: auto !important;
  }
  .aw__t{ display: block; }
  .aw__n{
    display: block;
    margin: 0 0 .6rem !important;
    color: rgba(239,235,227,.42) !important;
  }
  .aw__d{
    display: block;
    margin-top: .8rem !important;
    line-height: 1.5 !important;
    color: rgba(239,235,227,.48) !important;
  }

  /* ---------- 6. PROGRAMME ---------- */

  .pcards{ display: flex; flex-direction: column; gap: 1.6rem; }
  .pc{ width: 100% !important; }
  .pc img{ width: 100% !important; height: auto !important; }
  .pc--6{ position: relative !important; }
  .pc__cap{
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    bottom: 3rem !important; top: auto !important;
    width: auto !important;
    padding: 0 2rem;
    text-align: center;
  }
  .pc__name{ font-size: 2.6rem !important; }

  /* ---------- 7. JOURNAL ---------- */

  .journal{ gap: 2.4rem; }
  .journal__all{ display: inline-block; }

  .feat, .feat__img, .feat__body, .feat__title{ width: 100% !important; }
  .feat__body{ padding: 2.4rem 2rem 2.8rem !important; }
  .feat__title{
    font-size: 2.1rem !important;
    line-height: 1.3 !important;
  }
  .meta{ flex-wrap: wrap; gap: 1.2rem !important; }

  .news{ display: flex; flex-direction: column; gap: 1.2rem; width: 100% !important; }
  .nw{ display: flex !important; align-items: stretch; }
  .nw__img{
    width: 9.6rem !important;
    height: auto !important;
    align-self: stretch;
    object-fit: cover;
    flex: none;
  }
  .nw__body{ padding: 1.8rem 2rem !important; }
  .nw__title{
    font-size: 1.6rem !important;
    line-height: 1.4 !important;
  }

  /* ---------- 8. ARCHIVE ---------- */

  .archive::before{ display: none; }
  .archive__link{ display: inline-block; }
  .yr{
    width: auto !important;
    height: auto !important;
    aspect-ratio: 312 / 456;
    overflow: hidden !important;
  }
  .yr img{ width: 100% !important; height: 100% !important; object-fit: cover; }
  .yr::after{ inset: 0; }
  .yr__in{
    position: absolute !important;
    left: 2.4rem !important; bottom: 3rem !important;
    z-index: 2;
  }
  .yr__y{ font-size: 4.4rem !important; }

  /* ---------- 9. NEWSLETTER ---------- */

  .news-cta{ padding-left: 0 !important; padding-right: 0 !important; }
  .news-cta__panel{
    display: flex; flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
    width: 100% !important;
    padding: 6rem var(--pad);
  }
  .news-cta__body{ line-height: 1.5 !important; }
  .sub{
    display: flex !important;
    width: 100% !important;
    align-items: flex-end;
    gap: 1.6rem;
  }
  .sub__input{ font-size: 1.6rem; }

  /* ---------- 10. PARTNERS ---------- */

  .partners__link{ display: inline-block; }

  /* ---------- 11. CONTACT ---------- */

  .contact__grid{ display: grid !important; width: 100% !important; }
  .contact__rule{
    width: 100% !important;
    height: 1px !important;
    margin: 1.6rem 0;
    background: var(--line);
  }
  .social{
    display: flex !important;
    flex-wrap: wrap;
    gap: 1.6rem 2.4rem !important;
  }

  /* ---------- 12. FOOTER ---------- */

  .ft{ background: var(--black); }
  .ft__col{ display: flex !important; flex-direction: column; }
}


@media (max-width: 767px){

  .hero__tag{ font-size: 2rem !important; }

  .aw, .aw--1, .aw--2, .aw--3, .aw--4{ font-size: 2.8rem !important; }

  .pc__name{ font-size: 2.2rem !important; }
  .feat__title{ font-size: 1.95rem !important; }
  .yr__y{ font-size: 4rem !important; }

  /* one archive card per row is too tall a scroll; two reads better */
  .years{ display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 1.2rem !important; }
  .years > *{ flex: none; }

  .nw__img{ width: 8.4rem !important; }
}