/* =========================================================
   RESPONSIVE — mobile (<=767px) and tablet (768-1279px)
   Shared by index.html and the three Paralelo 34 pages.

   MUST be linked AFTER style.css / p34-base.css / <page>.css.

   --- Desktop guarantee ---------------------------------
   Every rule in this file lives inside a max-width media
   query, with ONE exception: `.hdr__burger{display:none}`,
   whose selector matches nothing in the pre-change DOM.
   The five original stylesheets get zero edits, so >=1280px
   renders byte-identically. Do not add unguarded rules.

   --- Why !important ------------------------------------
   The desktop layer is ~204 `position:absolute` rules written
   with class selectors. A blanket reset (`body section > *`)
   has lower specificity than any `.hero`, and @layer cannot
   help because the original files are unlayered. So the reset
   uses !important on layout properties only; the per-section
   files (*-mobile.css) do the same for the same properties.

   --- Why relative, not static --------------------------
   Absolutely positioned elements paint above in-flow siblings.
   Flattening content to `static` while `.hero__bg` stays
   absolute would bury the text under the photo. `relative`
   with every inset forced to `auto` lays out exactly like
   static but keeps content in the positioned paint layer, so
   paint order follows DOM order again.
   ========================================================= */

.hdr__burger{ display:none; }


/* =========================================================
   1. RESET — everything below 1280px
   ========================================================= */

@media (max-width: 1279px){

  /* The single global scale knob. style.css:30 / p34-base.css:30 set
     0.5050505051vw so that 1rem = 10 design px at 1980px. Pinning it to
     10px makes every existing rem value mean its literal pixel size, so
     the small typography is already right for a phone:
     .body 1.6rem = 16px, .lbl 1.3rem = 13px, .btn 1.57rem = 15.7px,
     .hdr__nav a 1.5rem = 15px, .ft__copy 1.1rem = 11px.
     Only display type above ~3rem needs rescaling. */
  html{ font-size: 10px; }

  :root{ --pad: 4rem; }

  body{ overflow-x: hidden; }

  /* --- flatten the absolute grid --------------------------------- */
  /* every descendant, not just the first levels: .prog__desc and friends
     sit four deep (section > ul > li > span) */
  body section,
  body footer,
  body section *,
  body footer *{
    position: relative !important;
    left: auto !important; top: auto !important;
    right: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Layout transforms go, reveal transforms stay.
     p34-base.css:206 transitions `transform` on [data-rev]. */
  body section *:not([data-rev]),
  body footer *:not([data-rev]){
    transform: none !important;
  }

  /* Deliberate full-bleed backdrops stay absolute and behind. */
  body .hero__bg,
  body .hero__veil,
  body .s-awd__bg,
  body .s-why__wm,
  body .hero__wm{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 0 !important;
  }
  body .s-why__wm,
  body .hero__wm{ display: none !important; }   /* huge faint watermarks — noise on a phone */

  /* --- vertical flow --------------------------------------------- */
  body section{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2rem;
    padding: 9rem var(--pad);
  }
  body section > *{ z-index: 1; }

  body .hero{
    justify-content: flex-end;
    min-height: 100svh !important;
    padding-top: 14rem;
    padding-bottom: 8rem;
  }

  /* --- images ----------------------------------------------------- */
  /* undoes img{max-width:none} at style.css:47 / p34-base.css:47 */
  /* `body img` (0,0,2), not `img` (0,0,1): it has to out-rank the
     !important reset above, which is also (0,0,2) — a later rule of equal
     specificity wins. overflow matters here: the reset sets it to visible
     on every descendant, and on a replaced element that lets an
     object-fit:cover image paint outside its own box — .nw__img spilled
     ~90px across the card text. */
  body img{
    max-width: 100% !important;
    height: auto !important;
    overflow: clip !important;
  }

  /* Hero photos are sized in absolute rem on every page
     (about.css:18 `center top / 198rem 102rem`, and the same shape in
     style.css / festival.css / paralelo.css), so at a 10px root they
     would show a 1980px-wide crop. Let them fill the box instead. */
  .hero__bg{
    background-size: cover !important;
    background-position: center !important;
  }

  /* --- hand-tuned line breaks ------------------------------------- */
  /* 91 <br> in the markup are broken to the 1980px comp. Kill them in
     body copy; leave headings alone, their breaks are the design. */
  p br,
  [class*="__quote"] br,
  .idc__text br, .prog__desc br, .tl__desc br,
  .fmt__desc br, .kd__place br, .aw__d br,
  .s-awd__nt br, .body br, .body-sm br{ display: none; }
  .ft__addr br{ display: revert; }            /* a 3-line postal address */

  /* --- nowrap ------------------------------------------------------ */
  .h2,
  .awards__aside .body-sm,                    /* style.css:326 */
  .aw__d,                                     /* style.css:351 */
  .news-cta__body,                            /* style.css:532 */
  .s-why__places,                             /* festival.css:89  */
  .s-mis__list li,                            /* festival.css:163 */
  .fmt__desc,                                 /* paralelo.css:121 */
  .s-awd__nt{                                 /* paralelo.css:241 */
    white-space: normal !important;
  }

  /* --- full-page background gradients ----------------------------- */
  /* about.css:2 / festival.css:7 / paralelo.css:8 paint a 99x270 field
     sampled from the reference, stretched to the design page height
     (541.4rem etc). Its bands are tied to where the desktop sections
     fall, so after reflow they land in the wrong places — the footer
     ended up under a bright haze. Drop it and use the flat ground; the
     sections that need atmosphere (hero, s-arg, s-awd, s-sub) carry
     their own backdrops. */
  body{ background-image: none !important; background-color: var(--bg) !important; }

  /* --- fixed-track grids and rows --------------------------------- */
  .identity__grid{                            /* style.css:262 repeat(4,50.93rem) */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 3.2rem 2.4rem !important;
  }
  .partners__grid{                            /* style.css:567 repeat(4,28.8rem) */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2.4rem !important;
  }
  .contact__grid{                             /* style.css:594 37.2rem auto */
    grid-template-columns: 1fr !important;
    row-gap: 4rem !important;
  }
  .years,                                     /* style.css:470 */
  .cards{                                     /* paralelo.css:344 */
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
  }
  .years > *, .cards > *{ flex: 1 1 26rem; }

  /* --- pinned scroll sections ------------------------------------- */
  /* mirrors the existing .nopin escape hatch at style.css:722-723 */
  .pin{ height: auto !important; }
  .pin > section{
    position: relative !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .pcset--clone{ display: none !important; }  /* style.css:708, aria-hidden duplicate */

  /* --- lists -------------------------------------------------------- */
  body ul, body li{ width: 100% !important; }

  /* --- display type --------------------------------------------------
     The comp sets the hero title at 12.37rem; at a 10px root that is
     124px, far too wide for a 768px column. Sizes are fluid within the
     tier so the jump at each end of the range stays small. Ordered
     smallest-first: `[class*="__title"]` also matches .hero__title, and
     these all carry !important, so the later rule has to be the bigger
     one. The <=767px block overrides all of this. */
  [class*="__h2"], [class*="__quote"], .hero__title,
  h1, h2, .h2{
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 0, "WONK" 1;
  }
  h3, [class*="__title"], [class*="__name"]{
    font-size: min(3rem, 3.6vw) !important;
    line-height: 1.25 !important;
  }
  [class*="__quote"]{
    font-size: min(4.4rem, 5.4vw) !important;
    line-height: 1.25 !important;
  }
  h1, h2, .h2, [class*="__h2"]{
    font-size: min(5.6rem, 7vw) !important;
    line-height: 1.12 !important;
    letter-spacing: 0;
  }
  .hero__title{
    font-size: min(8.6rem, 9.5vw) !important;
    line-height: 1.04 !important;
    letter-spacing: 0;
  }

  /* --- buttons ------------------------------------------------------ */
  .btn{
    width: auto !important;
    min-width: 22rem;
    height: 4.8rem !important;
    padding: 0 3rem;
  }

  /* --- legibility floor --------------------------------------------- */
  /* The comp tracks micro-labels down to .92rem. At a 10px root that is
     9px, which is unreadable on a phone and poor on a tablet — lift the
     whole family to 11px. `*=` not `$=`: script.js appends `is-in`. */
  .lbl,
  [class*="__lbl"], [class*="__k"],
  [class*="__eyebrow"], [class*="__mark"], [class*="__scroll"],
  [class*="__coord"], [class*="__places"],
  .prog__n, .fmt__n, .kd__n, .tl__n, .aw__n, .idc__num,
  .s-mis__list i, .ft__copy,
  .fmt__sub, .s-off__fsub, .s-awd__nk, .kd__place,
  .pc__films, .meta__cat, .meta__date, .yr__t, .aw__d{
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
  }
}


/* =========================================================
   2. HEADER — burger + full-screen panel (<1280px)

   The panel is the .hdr element itself: .hdr__nav and
   .hdr__right are already inside it, so the six nav links
   are never duplicated in the markup. Only the button is new.
   ========================================================= */

@media (max-width: 1279px){

  .hdr{
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: auto !important;
    width: 100% !important;
    height: 7rem !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad);
    z-index: 100;
  }

  .hdr__logo{
    position: relative !important;
    font-size: 1.5rem;
  }

  .hdr__burger{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .55rem;
    /* !important: the reset above zeroes width/height on every .hdr
       descendant, and a 0-height bar is an invisible button */
    width: 4.4rem !important;           /* 44px touch target */
    height: 4.4rem !important;
    flex: none;
    margin-right: -.8rem;
    padding: 0 .8rem;
    background: none; border: 0;
    color: var(--cream);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hdr__burger span{
    display: block;
    width: 100% !important;
    height: 1.5px !important;
    background: currentColor;
    transition: transform .25s ease, opacity .2s ease;
  }

  .hdr__nav,
  .hdr__right{ display: none !important; }

  /* --- open state --- */
  .hdr.is-open{
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 7rem var(--pad) 4rem;
    background: var(--black);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* the offsets need !important too — the reset forces every inset to auto */
  .hdr.is-open .hdr__logo{
    position: absolute !important;
    top: 2.75rem !important; left: var(--pad) !important;
  }
  .hdr.is-open .hdr__burger{
    position: absolute !important;
    top: 1.3rem !important; right: calc(var(--pad) - .8rem) !important;
  }
  .hdr.is-open .hdr__nav{
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.6rem !important;
    margin-top: 3.6rem;
  }
  .hdr.is-open .hdr__nav a{
    font-size: 2.3rem;
    letter-spacing: .07em;
    padding-bottom: 0;
    color: var(--cream);
  }
  .hdr.is-open .hdr__nav a.is-active{ color: var(--gold); }
  .hdr.is-open .hdr__nav a.is-active::after{ display: none; }

  .hdr.is-open .hdr__right{
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
    margin-top: auto;
    padding-top: 5rem;
  }
  .hdr.is-open .hdr__ico{ display: none !important; }
  .hdr.is-open .hdr__search,
  .hdr.is-open .hdr__lang,
  .hdr.is-open .hdr__mini{
    font-size: 1.4rem;
    color: rgba(239,235,227,.62);
  }
  .hdr.is-open .btn--gold{
    width: 100% !important;
    height: 5rem !important;
    font-size: 1.5rem;
  }

  /* !important: the reset zeroes transform on every section descendant */
  .hdr__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(.7rem) rotate(45deg) !important; }
  .hdr__burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .hdr__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-.7rem) rotate(-45deg) !important; }

  html.nav-open, html.nav-open body{ overflow: hidden; }
}

@media (prefers-reduced-motion: reduce){
  .hdr__burger span{ transition: none; }
}


/* =========================================================
   3. FOOTER (<1280px)
   ========================================================= */

@media (max-width: 1279px){

  .ft{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 3rem;
    padding: 6rem var(--pad) 4rem;
    height: auto !important;
  }
  .ft__brand{ grid-column: 1 / -1; }        /* index.html wraps the two below */
  .ft__logo{ grid-column: 1 / -1; font-size: 1.5rem; }
  .ft__addr{
    grid-column: 1 / -1; margin-top: -2.4rem;
    font-size: 1.3rem; line-height: 2.1rem;
  }
  .ft__brand .ft__addr{ grid-column: auto; margin-top: 1.6rem; }
  .ft__k{ font-size: 1.1rem !important; }
  .ft__col a:first-of-type{ margin-top: 1.4rem !important; }
  .ft__col a{ line-height: 2.8rem !important; }
  .ft__rule{
    grid-column: 1 / -1;
    height: 1px !important;
    margin-top: 1rem;
    background: rgba(239,235,227,.07);
  }
  .ft__copy{ grid-column: 1 / -1; font-size: 1.05rem; line-height: 1.6; }
  .ft__lang{
    grid-column: 1 / -1;
    display: flex !important;
    gap: 2.1rem;
    margin-top: -2rem;
  }
}


/* =========================================================
   3b. TABLET ONLY (768-1279px)
   ========================================================= */

@media (min-width: 768px) and (max-width: 1279px){

  /* One column of prose across 1279px is an unreadable measure. The comp
     is left-aligned throughout, so cap the measure rather than centring. */
  body section > *{ max-width: 78rem !important; }
  body section > img,
  body section > ul,
  body .hero__bg, body .hero__veil{ max-width: 100% !important; }

  .ft{ grid-template-columns: repeat(3, 1fr); }
  .ft__logo, .ft__addr{ grid-column: 1 / -1; }
}


/* =========================================================
   4. MOBILE ONLY (<=767px)
   ========================================================= */

@media (max-width: 767px){

  :root{ --pad: 2rem; }

  body section{ padding: 7rem var(--pad); gap: 2.4rem; }
  body .hero{ padding-top: 12rem; padding-bottom: 6rem; }

  .identity__grid,
  .partners__grid{ grid-template-columns: 1fr !important; }
  .years > *, .cards > *{ flex: 1 1 100%; }

  .ft{ grid-template-columns: 1fr; gap: 3.2rem; }
  .ft__addr{ margin-top: -1.8rem; }

  /* --- display type ---------------------------------------------- */
  /* Fraunces pins opsz 144 on desktop to match Figma. At 26-42px that
     axis renders far too thin and narrow, so let it resolve from the
     size instead. Phone-only; desktop keeps its pinned axis. */
  .hero__title,
  h1, h2, .h2,
  /* NB `*=` not `$=`: script.js appends `is-in` to every [data-rev]
     element, so the class attribute rarely ends with the BEM block. */
  [class*="__h2"], [class*="__quote"], [class*="__outro__h"]{
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 0, "WONK" 1;
  }

  /* smallest first, so the more specific headings below win the
     later-rule tie — `[class*="__title"]` also matches .hero__title */
  h3, [class*="__title"], [class*="__name"]{
    font-size: 1.9rem !important;
    line-height: 1.3 !important;
  }
  [class*="__quote"]{
    font-size: 2.6rem !important;
    line-height: 1.3 !important;
  }
  h1, h2, .h2, [class*="__h2"]{
    font-size: 3.1rem !important;
    line-height: 1.16 !important;
    letter-spacing: 0;
  }
  .hero__title{
    font-size: 4.2rem !important;
    line-height: 1.06 !important;
    letter-spacing: .005em;
  }

  /* --- tap targets ------------------------------------------------ */
  .btn{
    width: 100% !important;
    max-width: none;
    height: 5rem !important;
    padding: 0 2rem;
  }
  .hdr__nav a, .ft__col a{ padding-block: .3rem; }
}