/* ============================================================
   BRANCA — full d'estils
   Disseny original: 1920 × 1616 (Adobe XD)

   Com funciona l'escalat:
   la variable --s val 1px quan la finestra fa 1920px d'ample.
   Tot està escrit com calc(var(--s) * N), on N és el valor
   EXACTE del disseny. Així el web es veu igual a qualsevol
   pantalla gran, i a partir de 1024px canvia a versió mòbil.
   ============================================================ */

@font-face {
  font-family: 'HAL Timezone';
  src: url('../fonts/HALTimezone-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* 1px quan la finestra fa 1920. Sense mínim: sempre escala. */
  --s: min(100vw / 1920, 1.22px);

  --black: #000;
  --white: #fff;
  --grey:  #7f7f7f;          /* peus de foto inactius */
  --sans:  Helvetica, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'HAL Timezone', 'Didot', 'Bodoni 72', Georgia, serif;

  --cover-w: calc(var(--s) * 291.2);
  --cover-h: calc(var(--s) * 414.6);
  --gap:     calc(var(--s) * 27.1);
  --pitch:   calc(var(--s) * 318.3);
  --margin:  calc(var(--s) * 163);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* La pàgina ocupa com a mínim tota l'alçada de la finestra i el contingut
   s'estira, de manera que el peu sempre queda a baix de tot encara que la
   pàgina sigui curta (com la convocatòria). Si la pàgina és llarga, tot
   funciona com abans. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
main { flex: 1 0 auto; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }   /* ha d'anar DESPRÉS de img{display:block} */

/* El contrari de br.opt: un salt de línia que NOMÉS surt a mòbil. Per
   defecte no hi és i s'activa dins del bloc de mòbil — per això ha d'anar
   aquí dalt, ABANS de les media queries, si no les guanyaria. */
br.mob { display: none; }

/* ══════════════════ HEADER ══════════════════ */

.site-header {
  position: relative;
  padding-top: calc(var(--s) * 38.9);
  display: flex;
  justify-content: center;
}

.logo img {
  width: calc(var(--s) * 442.8);
  height: auto;
}

.menu-btn {
  position: absolute;
  top: calc(var(--s) * 38.9);
  right: calc(var(--s) * 59.8);
  width: calc(var(--s) * 112.3);
  height: calc(var(--s) * 33.8);
  background: var(--black);
  color: var(--white);
  border: 0;
  border-radius: 0;
  font-family: var(--sans);
  /* mateixa mida que el TANCA del menú */
  font-size: calc(var(--s) * 20);
  letter-spacing: calc(var(--s) * 0.5);
  cursor: pointer;
  transition: opacity .18s ease;
}
.menu-btn:hover { opacity: .72; }

/* ══════════════════ TAGLINE ══════════════════ */

.tagline {
  margin: 0;
  padding-top: calc(var(--s) * 71.3);
  text-align: center;
  font-weight: 700;
  font-size: calc(var(--s) * 30);
  line-height: 1;
  letter-spacing: 0;
}

/* ══════════════════ CAROUSEL ══════════════════ */

.carousel {
  position: relative;
  /* El carrusel arrencava a 358.9px de dalt al disseny; això el puja un 10%
     (-36px). Tot el que va a sota puja amb ell, així que els espais que ja
     havíem ajustat (carrusel → bloc negre, etc.) es mantenen igual. */
  margin-top: calc(var(--s) * 66.3);
}

.car-viewport {
  overflow: hidden;
  outline: none;
  cursor: grab;
}
.car-viewport.is-dragging { cursor: grabbing; }

.car-track {
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.car-item {
  flex: 0 0 var(--cover-w);
  width: var(--cover-w);
}

.car-item a { display: block; }

.car-item .shot {
  display: block;
  width: var(--cover-w);
  height: var(--cover-h);
  overflow: hidden;
  background: #f4f4f4;
}

.car-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* canvia a "contain" si no vols retallar cap portada */
  object-position: center;
  /* la portada centrada es veu al 100%, la resta al 50% */
  opacity: .5;
  transition: transform .5s cubic-bezier(.22,.61,.36,1),
              opacity   .35s ease;
  -webkit-user-drag: none;
  user-select: none;
}

.car-item figcaption {
  margin-top: calc(var(--s) * 23);
  text-align: center;
  font-family: var(--serif);
  font-size: calc(var(--s) * 19.8);
  letter-spacing: 0;
  color: var(--grey);
  white-space: nowrap;
  cursor: pointer;          /* el peu de foto també obre el número */
  transition: color .35s ease;
}

.car-item.is-active img         { opacity: 1; }
.car-item.is-active figcaption  { color: var(--black); }

/* en passar-hi per sobre, la portada s'aclareix una mica com a pista que és clicable */
.car-item:not(.is-active) a:hover img { transform: scale(1.03); opacity: .75; }
.car-item:not(.is-active) a:hover + figcaption,
.car-item:not(.is-active) a:hover ~ figcaption { color: #3d3d3d; }

/* Fletxes — no són al disseny original, però sense elles no hi ha cap manera
   evident de moure el carrusel: clicar una portada obre el seu número, i
   arrossegar no s'endevina. Com que el bloc negre de sota mostra el número
   centrat, cal poder canviar-lo sense sortir de la portada. */
.car-arrow {
  position: absolute;
  top: calc(var(--cover-h) / 2);
  transform: translateY(-50%);
  z-index: 3;
  width: calc(var(--s) * 56);
  height: calc(var(--s) * 56);
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(2px);
  cursor: pointer;
  opacity: 1;
  transition: background .25s ease, opacity .25s ease;
}
.car-arrow svg { width: 45%; height: 45%; fill: none; stroke: #000; stroke-width: 1.6; }
.car-prev { left: calc(var(--s) * 24); }
.car-next { right: calc(var(--s) * 24); }
.car-arrow:hover { background: #fff; }

/* ══════════════════ FEATURED BAND ══════════════════ */

.band {
  position: relative;
  --art-h: calc(var(--s) * 524.1);
  /* aire entre el carrusel i el bloc negre — puja o baixa aquest número */
  margin-top: calc(var(--s) * 125.5);
  min-height: calc(var(--s) * 482.7);
  background: var(--black);
  color: var(--white);
}

.band-inner {
  position: relative;
  z-index: 2;
  padding: calc(var(--s) * 39.8) var(--margin) calc(var(--s) * 60);
}

/* Títol i text del bloc: mides i posicions preses de design/new banner.pdf
   (marc 1920): títol de 74px alineat a l'esquerra, línies en serif de 34px
   amb un ritme de 54px. */
.band-title {
  margin: 0 0 0 calc(var(--s) * 160);
  text-align: left;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--s) * 59.2);
  letter-spacing: 0;
  line-height: 1.34;
}

.band-body {
  margin-top: calc(var(--s) * 20);
  margin-left: calc(var(--s) * 160);
  max-width: calc(var(--s) * 760);
  font-family: var(--serif);
  font-size: calc(var(--s) * 27.2);
  line-height: calc(var(--s) * 43.2);
}

/* La bafarada "vindràs?" — mides i posició preses de design/new banner.pdf,
   traslladades perquè quedi al costat de la porta amb el mateix aire que
   al disseny. La cueta (::after) apunta a la mà de la noia. */
.band-bubble {
  position: absolute;
  z-index: 3;
  top: calc(var(--s) * 158.9);
  right: calc(var(--s) * 698);
  width: calc(var(--s) * 190);
  height: calc(var(--s) * 77);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--black);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: calc(var(--s) * 26);
  pointer-events: none;
}
.band-bubble::after {
  content: '';
  position: absolute;
  /* la bafarada ha pujat 24.1px però la cueta es queda on era: -27 + 24.1 */
  top: calc(var(--s) * -2.9);
  right: calc(var(--s) * -18.5);
  width: calc(var(--s) * 100);
  height: calc(var(--s) * 2.5);
  background: var(--white);
  transform: rotate(-31deg);
}

/* La il·lustració té el fons transparent, així que se pot col·locar a
   qualsevol lloc. --art-above (el posa el JS des de data.js) diu quina
   proporció de la imatge sobresurt per sobre del bloc negre. */
.band-art {
  position: absolute;
  z-index: 1;
  right: calc(var(--s) * 382.3);
  height: var(--art-h);
  width: auto;
  top: calc(var(--art-h) * var(--art-above, 0.122) * -1);
  pointer-events: none;
}

/* ══════════════════ PÀGINA D'UN NÚMERO ══════════════════
   Mides preses de design/itempage.pdf (marc 1920 × 1825). */

.item-title {
  margin: calc(var(--s) * 94.8) 0 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--s) * 32.6);
  line-height: 1.34;
}

.item {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--s) * 52.6);
  padding-left: calc(var(--s) * 325.8);
  margin-top: calc(var(--s) * 67.4);
}

.item-cover {
  flex: 0 0 calc(var(--s) * 413.9);
  width: calc(var(--s) * 413.9);
  aspect-ratio: 413.9 / 592.1;
  overflow: hidden;
  background: #f4f4f4;
}
.item-cover img { width: 100%; height: 100%; object-fit: cover; }

.item-credits {
  flex: 0 1 calc(var(--s) * 792);
  max-width: calc(var(--s) * 792);
  margin-top: calc(var(--s) * 18.7);
  font-size: calc(var(--s) * 25);
  line-height: calc(var(--s) * 30);
}
/* al disseny els paràgrafs se separen amb una línia en blanc */
.item-credits p { margin: 0 0 calc(var(--s) * 30); }
.item-credits p:last-child { margin-bottom: 0; }

/* a la pàgina d'un número el carrusel només serveix per navegar */
.item-page .carousel { margin-top: calc(var(--s) * 163.1); }

/* ══════════════════ PÀGINES DE TEXT (manifest, equip…) ══════════════════
   Mides preses de design/manifest.pdf (marc 1920 × 1640). */

.pg-title {
  margin: calc(var(--s) * 77.1) 0 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--s) * 32.7);
  line-height: 1.34;
}

/* ── entradeta centrada ── */
.mf-intro {
  margin: calc(var(--s) * 31.7) auto 0;
  max-width: calc(var(--s) * 800);
  text-align: center;
  font-size: calc(var(--s) * 25);
  line-height: calc(var(--s) * 30);
}
.mf-intro p { margin: 0 0 calc(var(--s) * 30); }
.mf-intro p:last-child { margin-bottom: 0; }

/* ── els set punts, en dues columnes ── */
.mf-list {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--s) * 546.2));
  column-gap: calc(var(--s) * 99.2);
  row-gap: calc(var(--s) * 77);
  padding-left: calc(var(--s) * 355.1);
  margin-top: calc(var(--s) * 93.1);
}

/* cada punt: número a la dreta de la seva columna, després el text */
.mf-item {
  display: grid;
  grid-template-columns: calc(var(--s) * 60) 1fr;
  column-gap: calc(var(--s) * 12.2);
  align-items: start;
}

.mf-num {
  justify-self: end;
  font-family: var(--serif);
  font-size: calc(var(--s) * 66);
  line-height: 1;
  /* puja el número perquè el seu sostre quedi arran de la primera línia
     de text (HAL Timezone deixa aire per sobre de les xifres) */
  margin-top: calc(var(--s) * 9.8);
}

.mf-item p {
  margin: 0;
  font-size: calc(var(--s) * 25);
  line-height: calc(var(--s) * 30);
}

/* el 6 i el 7 comparteixen cel·la */
.mf-cell {
  display: grid;
  align-content: start;
  row-gap: calc(var(--s) * 46.5);
}

/* ══════════════════ PÀGINA INVERTIDA ══════════════════
   design/convocatoria.pdf: tota la pàgina en negre amb els elements en
   blanc. El logo i la marca són SVG negres, així que s'inverteixen. */

body.invert { background: var(--black); color: var(--white); }
body.invert .logo img      { filter: invert(1); }
body.invert .foot-mark img { filter: invert(1); }
body.invert .menu-btn      { background: var(--white); color: var(--black); }
body.invert .foot-left a:hover,
body.invert .foot-right a:hover { border-bottom-color: var(--white); }
/* el panell del menú també és negre: una línia fina el separa del fons */
body.invert .menu-panel {
  border-left: 1px solid rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(255,255,255,.35);
}
/* mateix espai abans del peu que a les altres pàgines */
body.invert .site-footer { margin-top: calc(var(--s) * 115); }

/* ── mecenatge: text centrat i botó ── */
.mecenatge .mf-intro {
  margin-top: calc(var(--s) * 20.1);
  max-width: calc(var(--s) * 866);
  /* Mida de lletra: la compartida (.mf-intro, 25px). El PDF d'aquesta
     pàgina en dibuixa 20, però es veia molt més petita que la resta del
     web, així que es fa servir la mateixa a tot arreu. El text ocupa una
     línia més per paràgraf que al disseny. */
}
.cta { margin: calc(var(--s) * 64) 0 0; text-align: center; }
/* prou específic per guanyar a body.invert .site-footer */
body.invert.mecenatge .site-footer { margin-top: calc(var(--s) * 148.2); }
/* El botó creix en la mateixa proporció que el text (×1.25 respecte al
   disseny), perquè amb el cos a 25px el botó del PDF quedava petit. */
.cta a,
.cta button {
  display: inline-block;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);

  height: calc(var(--s) * 41);
  line-height: calc(var(--s) * 41);
  padding: 0 calc(var(--s) * 52.5);
  background: var(--white);
  color: var(--black);
  font-size: calc(var(--s) * 22.6);
  letter-spacing: calc(var(--s) * 0.4);
  transition: opacity .18s ease;
}
.cta a:hover,
.cta button:hover { opacity: .78; }

/* ── bases de la convocatòria ──
   design/bases convo.pdf (marc 1920 × 1985). Un sol bloc de text alineat a
   l'esquerra i centrat a la pàgina: 1075px d'ample i cos 25/30, el mateix
   que a la resta del web. Les condicions van una sota l'altra sense aire;
   entre bloc i bloc hi ha exactament una línia en blanc. */
.bases-text {
  max-width: calc(var(--s) * 1075);
  margin: calc(var(--s) * 177.3) auto 0;
  font-size: calc(var(--s) * 25);
  line-height: calc(var(--s) * 30);
}
/* la línia en blanc que separa els blocs */
.bases-sec + .bases-sec { margin-top: calc(var(--s) * 30); }

/* el títol de cada bloc: mateixa mida i mateix interlineat que el text,
   només en negreta i en majúscules (ja van escrites així a l'HTML) */
.bases-text h2 {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
}
.bases-text p { margin: 0; }

/* prou específic per guanyar a body.invert .site-footer */
body.invert.bases .site-footer { margin-top: calc(var(--s) * 265.9); }

/* ── el missatge gran i centrat ── */
.shout {
  margin: calc(var(--s) * 208.9) 0 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--s) * 76.2);
  line-height: calc(var(--s) * 99);
}

/* ══════════════════ PARTICIPA-HI (formulari) ══════════════════
   Mateixa família que les bases: una sola columna centrada, cos 25/30.
   La columna és més estreta (860) perquè un camp de formulari molt ample
   costa de llegir i de clicar.

   Tot el formulari és "negatiu": els camps no són caixes, són una línia
   fina a sota del text, com un full pautat. Així la pàgina segueix sent
   la convocatòria i no sembla un tràmit.  */
.participa-wrap {
  max-width: calc(var(--s) * 860);
  margin: calc(var(--s) * 150) auto 0;
  padding: 0 var(--margin);
}
.participa-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--s) * 44);
  line-height: calc(var(--s) * 52);
  letter-spacing: calc(var(--s) * 0.5);
}
.participa-intro {
  margin: calc(var(--s) * 20) 0 0;
  max-width: calc(var(--s) * 720);
  font-family: var(--serif);
  font-size: calc(var(--s) * 25);
  line-height: calc(var(--s) * 30);
}

/* ── els camps ── */
.form { margin-top: calc(var(--s) * 62); }
.field + .field { margin-top: calc(var(--s) * 42); }

/* l'etiqueta: sans, versaletes, com el botó MENU */
.field > label,
.field-legend {
  display: block;
  margin: 0 0 calc(var(--s) * 12);
  font-family: var(--sans);
  font-size: calc(var(--s) * 16);
  letter-spacing: calc(var(--s) * 0.8);
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  display: block;
  width: 100%;
  padding: 0 0 calc(var(--s) * 12);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.4);
  border-radius: 0;
  background: none;
  color: var(--white);
  font-family: var(--serif);
  font-size: calc(var(--s) * 25);
  line-height: calc(var(--s) * 34);
  transition: border-color .18s ease;
}
.field input::placeholder { color: rgba(255,255,255,.26); }

/* ── el prefix del país i el número, un al costat de l'altre ──
   El desplegable es queda l'amplada que demana el seu contingut i el
   número s'emporta la resta. Les dues regles van amb .field al
   davant perquè «.field input[type="tel"]» diu width:100% i, amb
   menys pes, guanyaria ell i el número sortiria de la fila. */
.tel-grup {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--s) * 16);
}
.field .tel-grup input[type="tel"] { flex: 1 1 0; width: auto; }
.field .tel-grup select {
  flex: 0 0 auto;
  max-width: 45%;
  padding: 0 0 calc(var(--s) * 12);
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.4);
  border-radius: 0;
  background: none;
  color: var(--white);
  color-scheme: dark;            /* que el desplegable surti fosc */
  font-family: var(--serif);
  font-size: calc(var(--s) * 25);
  line-height: calc(var(--s) * 34);
  cursor: pointer;
  transition: border-color .18s ease;
}
.field .tel-grup select:focus { outline: none; border-bottom-color: var(--white); }
.field.has-error .tel-grup select { border-bottom-color: #ff6b6b; }
.field input:focus {
  outline: none;
  border-bottom-color: var(--white);
}

/* ── la categoria: tres pastilles ── */
.field fieldset { margin: 0; padding: 0; border: 0; }
.pills { display: flex; flex-wrap: wrap; gap: calc(var(--s) * 14); }
.pill { cursor: pointer; }
/* el radio de debò existeix, però no es veu: el que es pinta és el span */
.pill input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.pill span {
  display: inline-block;
  height: calc(var(--s) * 46);
  line-height: calc(var(--s) * 44);
  padding: 0 calc(var(--s) * 34);
  border: 1px solid rgba(255,255,255,.45);
  font-family: var(--sans);
  font-size: calc(var(--s) * 16);
  letter-spacing: calc(var(--s) * 0.8);
  text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pill:hover span { border-color: var(--white); }
.pill input:checked + span {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}
.pill input:focus-visible + span { outline: 2px solid var(--white); outline-offset: 3px; }

/* ── el fitxer ── */
.drop {
  display: block;
  padding: calc(var(--s) * 36) calc(var(--s) * 20);
  border: 1px dashed rgba(255,255,255,.42);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.drop:hover, .drop.is-over { border-color: var(--white); background: rgba(255,255,255,.05); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-txt {
  display: block;
  font-family: var(--serif);
  font-size: calc(var(--s) * 22);
  line-height: calc(var(--s) * 28);
}
.drop-txt u { text-underline-offset: calc(var(--s) * 4); }
.drop-hint {
  display: block;
  margin-top: calc(var(--s) * 10);
  font-family: var(--sans);
  font-size: calc(var(--s) * 15);
  letter-spacing: calc(var(--s) * 0.5);
  color: rgba(255,255,255,.55);
}
.drop.has-file { border-style: solid; border-color: var(--white); }

/* l'avís de l'anonimat: la cosa més important d'aquesta pàgina */
.drop-warn {
  display: block;
  margin-top: calc(var(--s) * 14);
  font-family: var(--sans);
  font-size: calc(var(--s) * 15);
  line-height: calc(var(--s) * 22);
  letter-spacing: calc(var(--s) * 0.3);
  color: rgba(255,255,255,.62);
}
.drop-warn b { font-weight: 700; color: var(--white); }

/* ── les caselles de verificació ── */
.checks { margin-top: calc(var(--s) * 46); }
.checks .check:not(:first-child) { margin-top: calc(var(--s) * 22); }
.check {
  display: grid;
  grid-template-columns: calc(var(--s) * 22) 1fr;
  gap: calc(var(--s) * 16);
  align-items: start;
  cursor: pointer;
  font-family: var(--serif);
  font-size: calc(var(--s) * 20);
  line-height: calc(var(--s) * 28);
}
.check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check .box {
  width: calc(var(--s) * 22);
  height: calc(var(--s) * 22);
  margin-top: calc(var(--s) * 4);
  border: 1px solid rgba(255,255,255,.55);
  position: relative;
  transition: background-color .18s ease, border-color .18s ease;
}
.check:hover .box { border-color: var(--white); }
.check input:checked ~ .box { background: var(--white); border-color: var(--white); }
/* la marca de verificat: dues vores girades 45° */
.check input:checked ~ .box::after {
  content: '';
  position: absolute;
  left: calc(var(--s) * 7); top: calc(var(--s) * 3);
  width: calc(var(--s) * 6); height: calc(var(--s) * 11);
  border: solid var(--black);
  border-width: 0 calc(var(--s) * 2) calc(var(--s) * 2) 0;
  transform: rotate(45deg);
}
.check input:focus-visible ~ .box { outline: 2px solid var(--white); outline-offset: 3px; }
.check a { border-bottom: 1px solid rgba(255,255,255,.55); }
.check a:hover { border-bottom-color: var(--white); }

/* el camp trampa per als robots: no es veu i no es pot tabular */
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── el botó ── */
.form .cta { margin-top: calc(var(--s) * 56); text-align: left; }

/* ── els errors ── */
.field.has-error input { border-bottom-color: #ff6b6b; }
.err {
  display: none;
  margin-top: calc(var(--s) * 8);
  font-family: var(--sans);
  font-size: calc(var(--s) * 15);
  letter-spacing: calc(var(--s) * 0.3);
  color: #ff6b6b;
}
.field.has-error .err, .checks .check.has-error + .err { display: block; }

/* la nota que va sota un camp, per explicar-lo sense fer soroll */
.camp-nota {
  margin: calc(var(--s) * 10) 0 0;
  font-family: var(--sans);
  font-size: calc(var(--s) * 14);
  line-height: 1.5;
  letter-spacing: calc(var(--s) * 0.3);
  color: rgba(255,255,255,.42);
}

/* l'avís de quan l'enviament no ha pogut ser: va just sobre el botó,
   perquè és el darrer lloc on es mira abans de tornar-hi */
.err-envia {
  margin: calc(var(--s) * 28) 0 0;
  padding: calc(var(--s) * 16) calc(var(--s) * 18);
  border: 1px solid #ff6b6b;
  font-family: var(--sans);
  font-size: calc(var(--s) * 15);
  line-height: 1.5;
  letter-spacing: calc(var(--s) * 0.3);
  color: #ff6b6b;
}

/* ── la pantalla de confirmació ── */
.done { margin-top: calc(var(--s) * 40); }
.done-code {
  display: inline-block;
  margin: calc(var(--s) * 26) 0 0;
  padding: calc(var(--s) * 18) calc(var(--s) * 40);
  border: 1px solid var(--white);
  font-family: var(--serif);
  font-size: calc(var(--s) * 40);
  line-height: 1;
  letter-spacing: calc(var(--s) * 2);
}
.done p {
  margin: calc(var(--s) * 26) 0 0;
  max-width: calc(var(--s) * 700);
  font-family: var(--serif);
  font-size: calc(var(--s) * 25);
  line-height: calc(var(--s) * 30);
}

body.invert.participa .site-footer { margin-top: calc(var(--s) * 120); }

/* ══════════════════ L'EQUIP ══════════════════
   Mides preses de design/team.pdf (marc 1920 × 1989). */

/* text només per a lectors de pantalla (els noms van dins de la foto) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Les quatre fotos: amplades lleugerament diferents i escalonades en
   vertical, com al disseny. Cada <figure> porta els seus valors. */
.equip .mf-intro { margin-top: calc(var(--s) * 23.8); }

.team-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: calc(var(--s) * 54.3) auto 0;
  width: calc(var(--s) * 1515.7);
}
.team-p {
  margin: calc(var(--s) * var(--pt, 0)) 0 0;
  width: calc(var(--s) * var(--pw, 300));
  flex: 0 0 auto;
}
.team-p img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── franja negra: nucli fundacional ── */
.team-band {
  background: var(--black);
  color: var(--white);
  margin-top: calc(var(--s) * 82.1);
  padding: calc(var(--s) * 76.6) var(--margin) calc(var(--s) * 62.5);
  text-align: center;
}
.team-band-title { margin-top: 0; }

/* ── col·laboradores ── */
.colab { margin-top: calc(var(--s) * 88.8); text-align: center; }

.team-text {
  margin: calc(var(--s) * 23.5) auto 0;
  max-width: calc(var(--s) * 1000);
  font-size: calc(var(--s) * 25);
  line-height: calc(var(--s) * 30);
}
.team-text p { margin: 0 0 calc(var(--s) * 30); }
.team-text p:last-child { margin-bottom: 0; }

/* ══════════════════ ON TROBAR-LA (mapa) ══════════════════
   Mides preses de design/map.pdf (marc 1920 × 1739). */

.mapa .mf-intro { margin-top: calc(var(--s) * 23.4); }

.map-wrap {
  position: relative;
  margin: calc(var(--s) * 38.9) auto 0;
  width: calc(var(--s) * 988.8);
  height: calc(var(--s) * 758.7);
}
#map {
  width: 100%;
  height: 100%;
  background: #e8e6e1;          /* mentre no carreguen les tessel·les */
}

/* el punxó negre, com al disseny */
.pin svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.pin path { fill: var(--black); }

/* ── cercador, a dins del mapa a dalt a la dreta ── */
.map-search {
  position: absolute;
  z-index: 500;                 /* per sobre de les capes de Leaflet */
  top: calc(var(--s) * 33);
  right: calc(var(--s) * 33);
  width: calc(var(--s) * 355);
}
.map-search-icon {
  position: absolute;
  left: calc(var(--s) * 16);
  /* centrat respecte a l'ALÇADA DE L'INPUT (44), no del contenidor: el
     contenidor creix quan surt la llista de resultats. (44 − 20) / 2 = 12 */
  top: calc(var(--s) * 12);
  width: calc(var(--s) * 20);
  height: calc(var(--s) * 20);
  fill: none;
  stroke: var(--black);
  stroke-width: 2;
  pointer-events: none;
}
.map-search input {
  width: 100%;
  height: calc(var(--s) * 44);
  padding: 0 calc(var(--s) * 18) 0 calc(var(--s) * 46);
  border: 1px solid var(--black);
  border-radius: calc(var(--s) * 22);
  background: var(--white);
  font-family: var(--sans);
  font-size: calc(var(--s) * 17);
  color: var(--black);
}
.map-search input:focus { outline: 2px solid var(--black); outline-offset: 2px; }
.map-search input::-webkit-search-cancel-button { cursor: pointer; }

.map-results {
  list-style: none;
  margin: calc(var(--s) * 6) 0 0;
  padding: calc(var(--s) * 4) 0;
  max-height: calc(var(--s) * 300);
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--black);
  border-radius: calc(var(--s) * 10);
}
.map-results button {
  display: block;
  width: 100%;
  padding: calc(var(--s) * 8) calc(var(--s) * 16);
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--sans);
  font-size: calc(var(--s) * 16);
  cursor: pointer;
}
.map-results button:hover,
.map-results button:focus { background: #f0efec; }
.map-results button span { color: var(--grey); }
.map-none {
  padding: calc(var(--s) * 8) calc(var(--s) * 16);
  font-size: calc(var(--s) * 16);
  color: var(--grey);
}

/* el text de Leaflet, a to amb la resta */
.leaflet-container { font-family: var(--sans); }
.leaflet-popup-content { font-size: calc(var(--s) * 16); line-height: 1.4; }

/* aquesta pàgina té el peu CLAR: la franja negra ja fa de contrast */
.mapa .team-band { margin-top: calc(var(--s) * 84.3); }
.mapa .site-footer { margin-top: calc(var(--s) * 33); }

/* ══════════════════ FOOTER ══════════════════ */

.site-footer {
  position: relative;
  /* Al disseny el peu fa 225.5px i la marca queda a només 41px de la vora
     de baix. Si vols més aire sota el peu, suma-hi píxels aquí
     (p. ex. 225.5 + 60). */
  height: calc(var(--s) * 225.5);
  font-size: calc(var(--s) * 20);
}

.foot-left, .foot-right {
  position: absolute;
  top: calc(var(--s) * 146.4);
  display: flex;
}
.foot-left  { left:  var(--margin); gap: calc(var(--s) * 162); }
.foot-right { right: var(--margin); gap: calc(var(--s) * 144.5);   }

/* Al disseny original els tres enllaços de la dreta no estan repartits
   igual (173 px i 133 px). Això ho reprodueix. Si els vols equidistants,
   esborra aquestes tres línies. */
.foot-right a:nth-child(2) {
  margin-left:  calc(var(--s) * 18);
  margin-right: calc(var(--s) * -18);
}

.foot-left a, .foot-right a {
  padding-bottom: calc(var(--s) * 2);
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color .2s ease;
}
.foot-left a:hover, .foot-right a:hover { border-bottom-color: var(--black); }

.foot-mark {
  position: absolute;
  left: 50%;
  top: calc(var(--s) * 115.2);
  transform: translateX(calc(-50% + var(--s) * 9.5));
}
.foot-mark img { width: calc(var(--s) * 60.5); height: auto; }

/* ── peu fosc ──
   És EXACTAMENT el mateix peu que a la portada: mateixa alçada i mateixes
   posicions. Aquí només s'inverteixen els colors: fons negre i elements
   blancs. No hi afegeixis mides; si cal canviar-les, canvia-les a
   .site-footer i canviaran a totes les pàgines alhora. */
/* Espai abans del peu. Cada pàgina acaba a una alçada diferent, així que
   el forat que dibuixa el disseny també és diferent a cada una. Amb el peu
   enganxat a baix, aquests valors funcionen com a mínim. */
.site-footer--dark {
  color: var(--white);
  margin-top: calc(var(--s) * 25.9);      /* pàgines d'un número */
}
.text-page .site-footer--dark { margin-top: calc(var(--s) * 116.3); }  /* manifest */
body.equip .site-footer--dark { margin-top: calc(var(--s) * 172.8); }  /* l'equip */

/* El negre NO és el peu sencer: és una franja fina que abraça el contingut,
   com al design/itempage.pdf (130.7px d'alt, començant 28.1px per sobre de
   la marca). El peu manté la mateixa alçada i les mateixes posicions que a
   la portada; només hi pintem la franja al darrere. */
.site-footer--dark::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--s) * 87.1);          /* 115.2 (marca) − 28.1 */
  height: calc(var(--s) * 130.7);
  background: var(--black);
}
.site-footer--dark .foot-left,
.site-footer--dark .foot-right,
.site-footer--dark .foot-mark { z-index: 1; }
.site-footer--dark .foot-mark img { filter: invert(1); }   /* la marca és negra */
.site-footer--dark .foot-left a:hover,
.site-footer--dark .foot-right a:hover { border-bottom-color: var(--white); }


/* ══════════════════ MENU ══════════════════

   Els z-index són alts a posta. El mapa de Leaflet es pinta amb capes que
   van del 200 al 1000 (les capes del mapa, els globus, els controls…) i
   .map-wrap no fa capsa pròpia, o sigui que competeixen directament amb el
   menú. Amb els 40/50 d'abans, el mapa tapava el menú a la pàgina
   "On trobar-la". D'aquí els 1900/2000: el menú ha de quedar per sobre de
   tot, sempre. */

.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 1900;
  background: rgba(0,0,0,0);
  transition: background .3s ease;
}
/* Al disseny la pàgina de darrere NO s'enfosqueix: el vel només serveix
   per poder tancar el menú fent clic a fora. */
.menu-scrim.is-open { background: rgba(0,0,0,0); }

.menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2000;
  width: 71.1vw;
  height: calc(var(--s) * 868.6);
  background: var(--black);
  color: var(--white);
  padding: calc(var(--s) * 32) calc(var(--s) * 82) calc(var(--s) * 37) calc(var(--s) * 74);
  display: flex;
  flex-direction: column;
  transform: translateY(-101%);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.menu-panel.is-open { transform: translateY(0); }

.menu-close {
  position: absolute;
  top: calc(var(--s) * 44);
  right: calc(var(--s) * 74);
  background: none;
  border: 0;
  color: var(--white);
  font-family: var(--sans);
  font-size: calc(var(--s) * 20);
  letter-spacing: calc(var(--s) * 0.5);
  cursor: pointer;
  opacity: .9;
}
.menu-close:hover { opacity: 1; }

.menu-main, .menu-sec {
  display: flex;
  flex-direction: column;
}
.menu-main a, .menu-sec a {
  font-weight: 700;
  font-size: calc(var(--s) * 46);
  line-height: calc(var(--s) * 53.2);
  width: fit-content;
  opacity: .96;
  transition: opacity .18s ease;
}
.menu-main a:hover, .menu-sec a:hover { opacity: .55; }
.menu-sec { margin-top: auto; }

/* ══════════════════ MOBILE / TABLET ══════════════════ */

@media (max-width: 1023px) {
  :root {
    /* Mida única de portada: la gran d'un número i les dels carrusels
       surten totes d'aquí. */
    --cover-w: min(56vw, 290px);
    --cover-h: calc(var(--cover-w) / 0.7024);
    --gap: 18px;
    --margin: 22px;
    /* aire de dalt de la capçalera. El botó de les tres barres i la X de
       tancar el menú s'hi enganxen tots dos, així que sempre cauen al
       mateix lloc encara que el canviïs. */
    --hdr-pad: 14px;
  }

  /* ── capçalera: tot en una sola línia ──
     A mòbil el botó MENU es converteix en les tres barres de sempre i se'n
     va a dalt a l'esquerra. El logo queda centrat i alineat amb el botó,
     una mica més petit que abans. Així la capçalera ocupa la meitat. */
  .site-header { padding: var(--hdr-pad) var(--margin); }
  .logo img { width: min(54vw, 270px); }

  .menu-btn {
    /* La caixa fa 44×44 perquè el dit hi càpiga bé, però les barres només
       n'ocupen 22 al mig: per això el botó comença 11px abans del marge,
       i les barres queden arran del marge de la pàgina. */
    --bar: var(--black);
    /* L'alçada del botó és la mateixa que la del logo, i les barres van
       centrades a dins (vegeu ::before). Així les tres barres queden a
       l'alçada del mig del logotip en comptes d'arran del capdamunt.
       El 0.2617 és la proporció del SVG: 333.5 / 1274.24. */
    top: var(--hdr-pad);
    left: calc(var(--margin) - 11px);
    right: auto;
    transform: none;
    width: 44px;
    height: max(44px, calc(min(54vw, 270px) * 0.2617));
    padding: 0;
    background: none;
    /* amaga la paraula MENU sense treure-la: els lectors de pantalla la
       continuen llegint */
    text-indent: -999px;
    overflow: hidden;
    white-space: nowrap;
  }
  /* les tres barres: una de sola, i les altres dues fetes amb ombres */
  .menu-btn::before {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    /* Centrades amb les lletres de BRANCA, no amb la imatge sencera.
       Dins del SVG les lletres van de 69 a 298.2 i el marc va de 69 a
       402.5: la resta de sota és l'«HISTÒRIES & VINYETES». El mig de
       les lletres cau, doncs, al 34.36% de l'alçada de la imatge i no
       al 50%. Les tres barres ocupen 16px (2 + 7 + 7): mig és 8. */
    top: calc(34.36% - 8px);
    height: 2px;
    background: var(--bar);
    box-shadow: 0 7px 0 var(--bar), 0 14px 0 var(--bar);
  }
  /* a les pàgines negres les barres són blanques i no hi ha caixa */
  body.invert .menu-btn { background: none; --bar: var(--white); }

  /* el salt de línia del claim, només aquí */
  br.mob { display: inline; }

  .tagline {
    padding: 26px var(--margin) 0;
    font-size: clamp(15px, 4.5vw, 21px);
    line-height: 1.35;
  }

  .carousel { margin-top: 20px; }
  .car-item figcaption { margin-top: 14px; font-size: 15px; }
  .car-arrow { display: none; }

  /* ── bloc negre ──
     A mòbil el bloc és NOMÉS TEXT, centrat: ni la porta ni la bafarada
     "vindràs?" hi surten, perquè a una pantalla estreta s'hi menjaven mitja
     pàgina. A l'escriptori tot continua igual que sempre.

     Si algun dia les vols recuperar a mòbil, esborra la línia del
     display:none i torna a posar el padding-top de .band.has-art. */
  .band {
    margin-top: 40px;
    min-height: 0;
    padding: 38px 0;
  }
  .band-art,
  .band-bubble { display: none; }

  .band-inner { padding: 0 var(--margin); text-align: center; }
  /* ja no cal reservar lloc per a la il·lustració */
  .band.has-art .band-inner { padding-top: 0; }

  .band-title {
    margin-left: 0;
    text-align: center;
    font-size: clamp(20px, 5.6vw, 30px);
    line-height: 1.3;
  }
  .band-body {
    margin: 22px 0 0;
    max-width: none;
    font-size: 15px;
    line-height: 25px;
  }

  /* ── mapa ── */
  .mapa .mf-intro { margin-top: 24px; }
  .map-wrap {
    width: auto;
    height: min(70vh, 460px);
    margin: 26px var(--margin) 0;
  }
  .map-search { top: 12px; right: 12px; left: 12px; width: auto; }
  .map-search-icon { left: 14px; top: 11px; width: 18px; height: 18px; }
  .map-search input { height: 40px; font-size: 15px; padding: 0 14px 0 40px; border-radius: 20px; }
  .map-results button, .map-none { font-size: 15px; }
  /* El + / − se'n va a baix a l'esquerra: a dalt quedava just sota el
     cercador i no es podien fer servir ni l'un ni l'altre. A Leaflet els
     controls viuen dins d'una "cantonada", i el zoom és l'únic que hi ha
     a la de dalt a l'esquerra, així que es mou la cantonada sencera. La
     de baix a l'esquerra és buida (l'atribució va a la dreta). */
  .leaflet-top.leaflet-left { top: auto; bottom: 0; }
  .leaflet-top.leaflet-left .leaflet-control-zoom { margin: 0 0 12px 12px; }
  .mapa .team-band { margin-top: 38px; }
  .mapa .site-footer { margin-top: 0; }

  /* ── l'equip ── */
  .equip .mf-intro { margin-top: 24px; }
  .team-row {
    display: grid;                     /* dues columnes, sense escalonar */
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: auto;
    margin: 30px var(--margin) 0;
  }
  .team-p { width: auto; margin: 0; }
  .team-band { margin-top: 40px; padding: 34px var(--margin) 38px; }
  .colab { margin-top: 44px; }
  .team-text {
    margin-top: 20px;
    max-width: none;
    font-size: 15px;
    line-height: 25px;
  }
  .team-text p { margin-bottom: 25px; }
  body.equip .site-footer--dark { margin-top: 40px; }

  /* ── mecenatge ── */
  .mecenatge .mf-intro { margin-top: 24px; max-width: none; }
  .cta { margin-top: 34px; padding: 0 var(--margin); }
  .cta a,
  .cta button {
    height: auto;
    line-height: 1.35;
    padding: 12px 24px;
    font-size: 15px;
  }

  /* ── bases de la convocatòria ── */
  .bases-text {
    margin-top: 30px;
    padding: 0 var(--margin);
    max-width: none;
    font-size: 15px;
    line-height: 25px;
  }
  .bases-sec + .bases-sec { margin-top: 25px; }
  body.invert.bases .site-footer { margin-top: 60px; }

  /* ── participa-hi (formulari) ── */
  .participa-wrap { margin-top: 30px; max-width: none; }
  .participa-title { font-size: clamp(20px, 5.6vw, 30px); line-height: 1.3; }
  .participa-intro { margin-top: 14px; max-width: none; font-size: 15px; line-height: 25px; }
  .form { margin-top: 32px; }
  .field + .field { margin-top: 26px; }
  .field > label, .field-legend { margin-bottom: 8px; font-size: 12px; letter-spacing: .6px; }
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"] { padding-bottom: 8px; font-size: 16px; line-height: 22px; }
  /* els 16px no són capritx: per sota, l'iPhone fa zoom en tocar el camp */
  .field .tel-grup select { padding-bottom: 8px; font-size: 16px; line-height: 22px; }
  .tel-grup { gap: 10px; }
  .pills { gap: 8px; }
  .pill span { height: 38px; line-height: 36px; padding: 0 18px; font-size: 12px; }
  .drop { padding: 22px 16px; }
  .drop-txt { font-size: 15px; line-height: 22px; }
  .drop-warn { margin-top: 10px; font-size: 12px; line-height: 18px; }
  /* La nota del pseudònim i la del telèfon no tenien mida per a mòbil i
     es quedaven amb el calc(--s * 14) de l'escriptori, que a 390px de
     pantalla són menys de 3px: no es llegien. Van com la del fitxer. */
  .camp-nota { margin-top: 10px; font-size: 12px; line-height: 18px; }
  .drop-hint { margin-top: 6px; font-size: 12px; }
  .checks { margin-top: 28px; }
  .checks .check:not(:first-child) { margin-top: 14px; }
  .check {
    grid-template-columns: 18px 1fr;
    gap: 10px;
    font-size: 14px;
    line-height: 20px;
  }
  .check .box { width: 18px; height: 18px; margin-top: 1px; }
  .check input:checked ~ .box::after {
    left: 5px; top: 2px; width: 5px; height: 9px; border-width: 0 2px 2px 0;
  }
  .form .cta { margin-top: 30px; padding: 0; }
  .done-code { margin-top: 18px; padding: 12px 22px; font-size: 24px; letter-spacing: 1px; }
  .done p { margin-top: 18px; max-width: none; font-size: 15px; line-height: 25px; }
  body.invert.participa .site-footer { margin-top: 60px; }

  /* ── pàgina invertida (convocatòria) ── */
  .shout {
    margin-top: 60px;
    padding: 0 var(--margin);
    font-size: clamp(22px, 6.1vw, 48px);
    line-height: 1.32;
  }
  body.invert .site-footer { margin-top: 60px; }

  /* ── pàgines de text (manifest…) ── */
  .pg-title { margin-top: 26px; font-size: clamp(20px, 5.6vw, 30px); line-height: 1.3; }
  .mf-intro {
    margin: 26px auto 0;
    padding: 0 var(--margin);
    max-width: none;
    font-size: 15px;
    line-height: 25px;
  }
  .mf-intro p { margin-bottom: 25px; }
  .mf-list {
    display: block;
    padding: 0 var(--margin);
    margin-top: 34px;
  }
  .mf-item {
    grid-template-columns: 40px 1fr;
    column-gap: 10px;
    margin-bottom: 28px;
  }
  .mf-num { font-size: 38px; margin-top: 6px; }
  .mf-item p { font-size: 15px; line-height: 25px; }
  .mf-cell { display: block; }
  .text-page .site-footer--dark { margin-top: 20px; }

  /* ── pàgina d'un número ── */
  .item-title { margin-top: 26px; font-size: clamp(20px, 5.6vw, 30px); line-height: 1.3; }
  .item {
    display: block;
    padding: 0 var(--margin);
    margin-top: 26px;
  }
  .item-cover {
    flex: none;
    width: var(--cover-w);
    margin: 0 auto;
  }
  /* A mòbil els crèdits van centrats i una mica més petits: són llistes
     de noms, i centrades fan de peu de foto de la portada que tenen just
     a sobre. */
  .item-credits {
    max-width: none;
    margin-top: 28px;
    text-align: center;
    font-size: 15px;
    line-height: 25px;
  }
  .item-credits p { margin-bottom: 25px; }
  .item-page .carousel { margin-top: 38px; }
  /* a mòbil el contingut s'apila: aquí sí que pintem tot el peu */
  .site-footer--dark::before { display: none; }
  .site-footer--dark { margin-top: 38px; background: var(--black); }

  /* ── peu ──
     A mòbil el peu és una graella de dues columnes: la marca a l'esquerra
     (ocupa les dues files) i TOTS els enllaços a la dreta, en una sola
     columna alineada a l'esquerra. La marca va amunt de tot, com el botó
     de les tres barres amb el logo. */
  .site-footer {
    height: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 22px;
    row-gap: 4px;
    align-items: start;
    padding: 20px var(--margin) 22px;
    font-size: 15px;
  }
  .foot-mark {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 2;      /* al costat dels dos grups d'enllaços */
    top: auto; left: auto;
    transform: none;
    /* El dibuix de mark.svg omple el seu marc de dalt a baix, mentre que
       el text de l'enllaç comença 4px més avall de la seva caixa, que és
       l'aire que hi deixa la tipografia. Sense aquests 4px la marca
       sobresurt per dalt de «Bases de la convocatòria». */
    margin: 4px 0 0;
  }
  .foot-mark img { width: 34px; }

  .foot-left, .foot-right {
    position: static;
    grid-column: 2;
    flex-direction: column;
    align-items: flex-start;   /* tots els enllaços arrenquen al mateix lloc */
    gap: 4px;
    inset: auto;
  }
  .foot-left  { grid-row: 1; }
  .foot-right { grid-row: 2; }
  .foot-right a:nth-child(2) { margin: 0; }

  /* ── menú ── */
  /* El panell ja no ocupa tota la pantalla: fa l'alçada que li demana el
     seu contingut i queda com una franja negra a dalt. L'amplada sí que és
     tota, perquè la X ha de caure exactament on hi havia les tres barres.
     Es continua desplegant amb el mateix translateY(-101%) de sempre. */
  .menu-panel {
    width: 100vw;
    height: auto;
    padding: 26px var(--margin) 30px;
  }
  /* ── la X de tancar ──
     Va al lloc EXACTE de les tres barres. Les barres tenen el centre a
     22px de dalt de tot (14 de marge + 8 fins al mig de les tres); la X
     es dibuixa al centre de la seva caixa de 44px, i per això la caixa
     arrenca 14px més amunt. Així, en obrir i tancar, el dit no s'ha de
     moure gens. */
  .menu-close {
    top: calc(var(--hdr-pad) - 14px);
    left: calc(var(--margin) - 11px);
    right: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    /* amaga la paraula TANCA sense treure-la del document */
    text-indent: -999px;
    overflow: hidden;
    white-space: nowrap;
  }
  /* dues barres creuades: mateixa amplada que les del botó d'obrir */
  .menu-close::before,
  .menu-close::after {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    top: 21px;
    height: 2px;
    background: var(--white);
  }
  .menu-close::before { transform: rotate(45deg); }
  .menu-close::after  { transform: rotate(-45deg); }
  .menu-main { padding-top: 34px; }
  .menu-main a, .menu-sec a {
    font-size: clamp(24px, 7vw, 38px);
    line-height: 1.34;
  }
  /* Abans el segon grup s'empenyia fins a baix de tot (margin-top: auto).
     Ara que el panell fa només el que cal, els dos grups van seguits amb
     un aire normal entre ells. */
  .menu-sec { margin-top: 30px; padding-bottom: 0; }
}

/* ── a tauleta el peu torna a ser una fila ── */
@media (min-width: 600px) and (max-width: 1023px) {
  /* Hi ha prou espai: una mica més d'aire a dalt i a baix. La capçalera
     (tres barres a l'esquerra i logo centrat i alineat) ja ve del bloc de
     mòbil; aquí només se'n canvia l'aire, en vertical i simètric, perquè
     el botó continuï quedant centrat amb el logo. */
  :root { --hdr-pad: 22px; }

  .site-footer { flex-direction: row; justify-content: space-between; align-items: center; }
  .foot-left, .foot-right { flex-direction: row; gap: 34px; }
  .foot-mark { order: 0; margin: 0; }
}

/* ══════════════ 1024–1399px: escriptori compacte ══════════════
   Aquí la GEOMETRIA continua escalant amb --s (igual que el disseny),
   però el TEXT deixa de reduir-se perquè es pugui llegir. Els valors
   estan calculats per coincidir exactament a 1400px, així no hi ha
   cap salt quan redimensiones la finestra. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .menu-btn {
    right:       clamp(22px,   3.115vw, 59.8px);
    width:       clamp(72px,   5.849vw, 112.3px);
    height:      clamp(26px,   1.760vw, 33.8px);
    font-size:   clamp(12px, 1.042vw, 20px);
  }

  .tagline { font-size: clamp(19px, 1.5625vw, 30px); line-height: 1.24; }

  /* amb el text ja no reduint-se, els peus llargs necessiten poder partir-se */
  .car-item figcaption {
    font-size: clamp(12.5px, 1.031vw, 19.8px);
    white-space: normal;
    min-height: 2.5em;
    padding: 0 2px;
  }

  .band-title { font-size: clamp(24px, 3.083vw, 59.2px); }
  .band-body  { font-size: clamp(13px, 1.417vw, 27.2px); line-height: 1.6; }
  .band-bubble { font-size: clamp(14px, 1.354vw, 26px); }

  .site-footer { font-size: clamp(13px, 1.042vw, 20px); }

  .item-title  { font-size: clamp(20px, 1.698vw, 32.6px); }
  .item-credits {
    font-size: clamp(15px, 1.302vw, 25px);
    line-height: 1.6;
  }
  .item-credits p { margin-bottom: 1.6em; }

  .pg-title { font-size: clamp(20px, 1.703vw, 32.7px); }
  .mf-intro {
    max-width: min(88vw, 760px);
    font-size: clamp(15px, 1.302vw, 25px);
    line-height: 1.6;
  }
  .mf-intro p { margin-bottom: 1.6em; }
  .mf-item p {
    font-size: clamp(15px, 1.302vw, 25px);
    line-height: 1.6;
  }
  .mf-num { font-size: clamp(40px, 3.44vw, 66px); }

  /* Quan la lletra deixa de reduir-se (mínim 15px), la columna tampoc no
     ha de créixer: 43em són els 1075/25 del disseny, així la línia manté
     sempre la mateixa llargada en caràcters. */
  .bases-text {
    max-width: 43em;
    font-size: clamp(15px, 1.302vw, 25px);
    line-height: 1.6;
  }
  .bases-sec + .bases-sec { margin-top: 1.6em; }

  .team-text {
    font-size: clamp(15px, 1.302vw, 25px);
    line-height: 1.6;
  }
  .team-text p { margin-bottom: 1.6em; }

  /* el mapa: el text de la cerca i dels globus també té un mínim */
  .map-search input      { font-size: clamp(13px, 0.885vw, 17px); }
  .map-results button,
  .map-none              { font-size: clamp(13px, 0.833vw, 16px); }
  .leaflet-popup-content { font-size: clamp(13px, 0.833vw, 16px); }
  .cta a {
    height: auto;
    line-height: 1.35;
    padding: 9px 22px;
    font-size: clamp(13px, 1.179vw, 22.6px);
  }

  .menu-close { font-size: clamp(12px, 1.042vw, 20px); }
  .menu-main a, .menu-sec a {
    font-size: clamp(28px, 2.396vw, 46px);
    line-height: 1.157;
  }
}

/* Els <br class="opt"> són els salts de línia del disseny. Per sota de
   1400px el text deixa de reduir-se i ja no hi caben, així que els
   desactivem i el paràgraf es reajusta sol. */
@media (max-width: 1399px) {
  br.opt { display: none; }
}

/* ══════════════════ TRANSICIONS ENTRE PÀGINES ══════════════════
   En canviar de pàgina, el navegador fa una foto de la que marxa i una de
   la que arriba i les fon. No hi ha gens de JavaScript: només aquest bloc.

   El logo i el botó MENU tenen nom propi, o sigui que queden FORA del fos
   i es queden quiets al seu lloc mentre la resta canvia: la capçalera no
   es mou mai. A les pàgines negres el logo és blanc, i llavors el que es
   fon és el color del logo.

   Per canviar la velocitat, toca els .26s i .42s de sota. Els navegadors
   que no ho entenen canvien de pàgina com sempre: no es trenca res. */

@view-transition { navigation: auto; }

/* la pàgina que marxa: s'esvaeix */
::view-transition-old(root) {
  animation: branca-out .26s cubic-bezier(.4, 0, 1, 1) both;
}
/* la que arriba: entra pujant una mica */
::view-transition-new(root) {
  animation: branca-in .42s cubic-bezier(0, 0, .2, 1) both;
}
@keyframes branca-out { to   { opacity: 0; } }
@keyframes branca-in  { from { opacity: 0; transform: translateY(12px); } }

/* la capçalera es queda quieta */
.logo     { view-transition-name: branca-logo; }
.menu-btn { view-transition-name: branca-menu; }

/* i es fon més de pressa, perquè el canvi de color no es noti */
::view-transition-old(branca-logo),
::view-transition-new(branca-logo),
::view-transition-old(branca-menu),
::view-transition-new(branca-menu) {
  animation-duration: .3s;
}

/* Navegadors sense View Transitions: almenys el contingut entra suau.
   Només el <main>, perquè la capçalera i el peu no facin pampallugues. */
@supports not (view-transition-name: none) {
  main { animation: branca-in .42s cubic-bezier(0, 0, .2, 1) both; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  /* qui demana menys moviment canvia de pàgina de cop, sense fos */
  @view-transition { navigation: none; }
  main { animation: none !important; }
}

/* ══════════════════ CONVOCATÒRIA — BRANCA 10: FESTA ══════════════════
   design/convo_10.pdf (marc 1920 × 1985).

   A diferència de la resta de pàgines, aquesta no és text que flueix:
   és una composició fixa. Les vuit fotos van col·locades amb les
   coordenades que surten del PDF, i per això —només aquí— tot va
   posicionat en absolut dins de .c10.

   COM ES CONVERTEIXEN LES COORDENADES DEL DISSENY
   La capçalera fa 154.8px d'alt: 38.9 de padding més 115.9 del
   logotip (442.8 d'ample, amb la proporció del SVG). Com que .c10
   comença just a sota, qualsevol «top» del PDF es converteix
   restant-li 154.8. Les «left» no canvien.

   L'escenari fa 1569.2 d'alt = 1724 (on acaba el botó de les bases)
   menys els 154.8 de la capçalera.
   ══════════════════════════════════════════════════════════════════ */

.c10 {
  position: relative;
  height: calc(var(--s) * 1569.2);
}

/* ── el collage ──
   Una capa que ocupa tot l'escenari. Les imatges s'apilen en l'ordre
   del HTML: la primera a sota, l'última a dalt. */
.c10-collage {
  position: absolute;
  inset: 0;
}
/* Sense width/height aquí: les mides de cada foto són a .c10-im1…8.
   Si les hi tornes a posar, guanyen per especificitat (classe+etiqueta
   contra classe sola) i totes les fotos s'inflen fins a omplir
   l'escenari. */
.c10-collage img {
  position: absolute;
  display: block;
  object-fit: cover;
}

/* Les vuit posicions, tal com surten del PDF (el «top» ja porta
   restats els 154.8 de la capçalera). Si has de moure una foto,
   és aquí i enlloc més. */
.c10-im1 { left: calc(var(--s) * 1033); top: calc(var(--s) *  320.2); width: calc(var(--s) * 568); height: calc(var(--s) * 1004); }
.c10-im2 { left: calc(var(--s) *  122); top: calc(var(--s) *  363.2); width: calc(var(--s) * 564); height: calc(var(--s) *  716); }
.c10-im3 { left: calc(var(--s) *   40); top: calc(var(--s) *  875.2); width: calc(var(--s) * 403); height: calc(var(--s) *  423); }
.c10-im4 { left: calc(var(--s) *  630); top: calc(var(--s) *  401.2); width: calc(var(--s) * 360); height: calc(var(--s) *  320); }
.c10-im5 { left: calc(var(--s) *  191); top: calc(var(--s) *  119.2); width: calc(var(--s) * 334); height: calc(var(--s) *  442); }
.c10-im6 { left: calc(var(--s) *  735); top: calc(var(--s) *  789.2); width: calc(var(--s) * 390); height: calc(var(--s) *  458); }
.c10-im7 { left: calc(var(--s) * 1363); top: calc(var(--s) *  211.2); width: calc(var(--s) * 541); height: calc(var(--s) *  350); }
.c10-im8 { left: calc(var(--s) * 1561); top: calc(var(--s) *  698.2); width: calc(var(--s) * 324); height: calc(var(--s) *  320); }

/* La còpia de la senyora només existeix a mòbil.
   Va amb .c10-collage al davant perquè «.c10-collage img» ja diu
   display:block i, amb una classe sola, guanyaria ell. */
.c10-collage .c10-im1-bis { display: none; }

/* ── el títol ──
   Centrat a la pàgina. La línia de base del PDF és a 337; amb
   line-height 1 el «top» cau 0.75 del cos més amunt. */
.c10-title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--s) * 124.5);
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--s) * 77);
  line-height: 1;
}

/* ── «convocatòria oberta» ──
   Dues línies, com al disseny: el PDF les separa exactament 36px. */
.c10-obert {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--s) * 1388.2);
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: calc(var(--s) * 28);
  line-height: calc(var(--s) * 36);
}

/* ── els tres botons ──
   Els rectangles negres surten tal qual del PDF, així que aquí les
   mides són exactes i no aproximades. */
.c10-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .18s ease;
}
.c10-btn:hover { opacity: .72; }

/* EL COS DE LLETRA DELS BOTONS, I PER QUÈ NO ÉS EL DEL PDF
   Al PDF aquests rètols van amb una tipografia que l'Adobe XD hi va
   deixar com a contorns (Type3), no com una font amb nom. És una
   estreta: fa el 0.825 de l'amplada de la Helvetica, que és la sans
   de tot el web. Amb el cos del PDF (24 i 27) la Helvetica se'n
   sortiria del requadre —«BASES DE LA CONVOCATÒRIA» demana 364px
   dins d'una caixa de 329— així que el cos va multiplicat per 0.825:
   24 → 19.8 i 27 → 22.3. Amb això el text ocupa exactament la mateixa
   amplada que al disseny i els requadres són els del PDF, clavats.
   Si algun dia poseu la tipografia de debò, torneu-hi a posar 24 i 27.

   El botó de dalt: al PDF va de 893 a 1047, és a dir centrat a 970,
   10px a la dreta del centre de la pàgina. Els altres dos sí que hi
   van centrats, i el títol també, així que aquest s'ha centrat també
   (left 883). Si el volies descentrat a posta, torna-hi a posar 893. */
.c10-btn--dalt      { left: calc(var(--s) * 883); top: calc(var(--s) *  232.2); width: calc(var(--s) * 154); height: calc(var(--s) * 39); font-size: calc(var(--s) * 22.3); }
.c10-btn--participa { left: calc(var(--s) * 893); top: calc(var(--s) * 1477.2); width: calc(var(--s) * 135); height: calc(var(--s) * 34); font-size: calc(var(--s) * 19.8); }
.c10-btn--bases     { left: calc(var(--s) * 796); top: calc(var(--s) * 1535.2); width: calc(var(--s) * 329); height: calc(var(--s) * 34); font-size: calc(var(--s) * 19.8); }

/* El forat abans del peu: el disseny acaba el botó de les bases a
   1724 i el peu comença a 1760. */
body.convo10 .site-footer--dark { margin-top: calc(var(--s) * 36); }

/* ── al mòbil ──
   Una composició de 1920px no es pot encongir a 360 i continuar sent
   llegible: el títol quedaria a 14px. Així que per sota de 1024 es
   desmunta i passa a una columna, amb el collage fet graella de dues.
   L'ordre visual el posa «order», perquè al HTML el collage va primer
   (és el que el deixa sota el text a l'escriptori). */
@media (max-width: 1023px) {
  .c10 {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
  }

  .c10-title     { order: 1; }
  .c10-btn--dalt { order: 2; }
  .c10-collage   { order: 3; }
  .c10-obert     { order: 4; }
  .c10-btn--participa { order: 5; }
  .c10-btn--bases     { order: 6; }

  .c10-title,
  .c10-obert,
  .c10-btn {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  .c10-title {
    margin: 24px 0 0;
    font-size: 34px;
    line-height: 1.1;
  }

  .c10-obert {
    margin: 28px 0 0;
    font-size: 17px;
    line-height: 24px;
  }

  .c10-btn {
    margin-top: 18px;
    padding: 11px 22px;
    font-size: 14px;
  }
  .c10-btn--dalt { margin-top: 22px; }

  .c10-collage {
    position: static;
    inset: auto;
    width: 100%;
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
  }
  .c10-collage img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* A mòbil el collage sencer no es llegeix: vuit fotos en una graella
     de dues columnes queden massa petites perquè s'hi vegi res. Es
     queda només la senyora de les espelmes, dues vegades, que omple
     l'amplada i es veu de debò. Les altres set no es perden: hi són al
     HTML i tornen a sortir a partir de 1024px. */
  .c10-collage .c10-im2, .c10-collage .c10-im3,
  .c10-collage .c10-im4, .c10-collage .c10-im5,
  .c10-collage .c10-im6, .c10-collage .c10-im7,
  .c10-collage .c10-im8 { display: none; }

  .c10-collage .c10-im1-bis { display: block; }

  body.convo10 .site-footer--dark { margin-top: 36px; }
}