/* Responsive header: switch to the compact navigation before desktop items collide. */
html[lang="en"] .brand:after{
  content:"Independent cultural foundation · Paris × Mexico City";
}

@media(max-width:1120px){
  .site-header{height:126px}
  .nav{
    position:relative;
    display:flex;
    width:100%;
    max-width:none;
    height:100%;
    padding:0 18px;
    align-items:center;
    gap:0;
  }
  .brand{
    position:static;
    left:auto;
    top:auto;
    width:min(430px,calc(100vw - 110px));
    min-width:0;
    max-width:none;
    margin:0 auto 0 0;
    padding:0;
    gap:0;
    transform:none;
    align-items:flex-start;
    justify-content:center;
  }
  .brand img,
  .brand:after{
    width:min(430px,calc(100vw - 110px));
    max-width:none;
  }
  .brand img{
    height:auto;
    max-height:none;
    object-fit:contain;
    object-position:left center;
  }
  .brand:after{
    margin-top:4px;
    font-size:clamp(7px,1.25vw,9px);
    line-height:1.1;
    letter-spacing:.01em;
    text-align:justify;
    text-align-last:justify;
    white-space:nowrap;
  }
  .links{display:none!important}
  .menu-button{display:none!important}
  .language{
    position:absolute;
    right:18px;
    top:auto;
    bottom:14px;
    margin:0;
    transform:none;
  }
  .lang-toggle{
    width:auto;
    height:30px;
    padding:0 8px;
    border-color:rgba(230,220,235,.28);
    border-radius:4px;
    background:rgba(230,220,235,.05);
    color:rgba(230,220,235,.85);
    font-size:9px;
    letter-spacing:.08em;
  }
  .lang-toggle:after{
    content:"⌄";
    display:inline-block;
    margin-left:4px;
    opacity:.55;
    transform:translateY(-1px);
  }
  .lang-menu{top:36px;min-width:64px}
  .mobile-panel.open{
    position:fixed;
    inset:126px 0 0;
    z-index:49;
    display:flex;
    min-height:calc(100dvh - 126px);
    padding:34px 24px;
    background:#1b1a32;
    color:var(--lav);
    flex-direction:column;
    justify-content:center;
    gap:0;
    border-top:1px solid rgba(230,220,235,.14);
    overflow-y:auto;
  }
  .mobile-panel a{
    display:block;
    padding:14px 0;
    border-bottom:1px solid rgba(230,220,235,.13);
    font-size:clamp(26px,5vw,38px);
    font-weight:800;
    line-height:1;
    letter-spacing:-.035em;
    text-transform:uppercase;
  }
}

@media(max-width:480px){
  .nav{padding:0 12px}
  .brand,
  .brand img,
  .brand:after{width:calc(100vw - 78px)}
  .brand:after{font-size:clamp(6.3px,1.85vw,7.4px)}
  .language{right:10px;bottom:12px}
}