/* «El meu show» — el vídeo principal, la tira de clips i el tancament.
   L'heroi (el títol i el micro) no necessita res a mida: ve sencer de
   «shows.css», igual que quan era a «Dates».

   Aquest apartat el mira un programador o una regidoria de festes. L'ordre
   respon al que ell es pregunta: «és bo?» (el concert sencer), «com és?»
   (la tira) i «com el contracto?» (el tancament). */

/* En saltar-hi des de la fletxa de l'heroi, el títol queia just a sota del
   logo de la capçalera i no es llegia. Aquest coixí és el que l'àncora
   respecta en aturar-se. */
#video, #clips { scroll-margin-top: clamp(96px, 14vh, 150px); }

/* El marge de la dreta. A l'esquerra hi ha el carril de la K («--carril»);
   a la dreta, el que mana es el boto del menu: el mateix coixi de la barra
   mes els seus 46 px. Les dues ratlles que va marcar ella son aquestes. */
:root { --carril-dre: calc(clamp(16px, 4vw, 48px) + 46px); }
/* En estret el boto del menu ja no mana res: el carril de l'esquerra torna a
   ser un marge (shows.css ho fa a 900 px) i aqui el de la dreta, tambe. Si
   no, la tira perdria 62 px per la dreta i cap per l'esquerra. */
@media (max-width: 900px) {
  :root { --carril-dre: clamp(24px, 6vw, 56px); }
}

/* ---------- El cap de la secció ----------
   Aquí no hi va títol: la resta d'apartats tampoc en porten, i el nom de
   l'apartat ja el diu l'heroi. Qui fa de cap és la pregunta, en rosa.
   La frase és llarga, així que el «max-width» va en «em» —el tall segueix
   la lletra i no la pantalla— i el «balance» reparteix les ratlles. */
/* El cap es «contenidor», i aixi la pregunta es pot amidar amb l'ample del
   seu germa de sota —el video— i no amb el de la pantalla. Amb «vw» la frase
   sortia mes ampla que el video i vessava per la dreta: semblava escorada.
   Ara 100cqw ES l'ample del video, i centrada vol dir centrada amb ell. */
.peli__head {
  container-type: inline-size;
  text-align: center; margin-bottom: 5vh;
}
/* Va en una sola ratlla: 3,5cqw es el que mesura aquesta frase justa dins el
   contenidor. Per sota de 760 px no hi cap de cap mida llegible i es parteix. */
.peli__subtitol {
  margin: 0;
  color: var(--pink);
  font-size: min(2.1rem, 3.5cqw);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.12;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .peli__subtitol {
    white-space: normal; max-width: 16em; margin: 0 auto;
    font-size: clamp(1.1rem, 5.2vw, 1.6rem);
    text-wrap: balance;
  }
}

/* el ròtol del vídeo gran, el mateix que porten les peces de la tira */
.peli__nom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 2.6em 1em 1em;
  color: #fff; font-weight: 700; text-align: center;
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  background: linear-gradient(to top, rgba(28, 10, 20, .62), transparent);
  pointer-events: none;
}

/* ---------- El vídeo principal ---------- */
/* El marc era de 1400 px i a pantalla ampla se't tirava a sobre. Ara mana el
   que sigui més petit: 980 px o el que hi cap sense passar de 62vh d'alçada
   —un 16:9 de 62vh fa 110vh d'ample, o sigui que en pantalles baixes i amples
   és l'alçada la que talla, no l'amplada. */
/* El coixi de dalt es el mateix que fan Premsa i Contractacio, que tampoc
   no porten heroi: s'hi entra de dret i el contingut no ha de quedar sota
   el logo de la barra. */
.peli { padding: clamp(96px, 16vh, 180px) var(--gutter) 14vh; max-width: min(980px, 110vh); margin: 0 auto; }

/* El marc és 16:9 i mana ell: el que hi entri —la portada ara, l'<iframe>
   de YouTube després— omple el forat i prou. Així en inserir el reproductor
   no hi ha cap salt d'alçada. */
.peli__marc {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: clamp(16px, 2vw, 30px);
  overflow: hidden;
  background: var(--bg-2);
}
.peli__marc > iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* La façana: tota ella és el botó, que és el que ha de ser —s'hi pot anar
   amb el tabulador i s'activa amb la barra o l'intro, sense cap feina. */
.peli__facana {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0; border: 0; background: none;
  cursor: pointer;
}
.peli__portada {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease), filter .4s;
}
/* el botó de play: la mateixa píndola rodona que la resta del lloc */
.peli__play {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: clamp(64px, 7vw, 104px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink); color: #fff;
  box-shadow: 0 10px 34px rgba(96, 44, 72, .34);
  transition: transform .45s var(--spring), background .3s;
}
.peli__play svg { width: 42%; margin-left: 6%; }   /* el triangle, òpticament al mig */
.peli__facana:hover .peli__portada,
.peli__facana:focus-visible .peli__portada { transform: scale(1.04); filter: brightness(.86); }
.peli__facana:hover .peli__play,
.peli__facana:focus-visible .peli__play { transform: scale(1.12); background: var(--pink-deep); }

.peli__avis {
  margin: 1.1em 0 0; text-align: center;
  color: var(--muted); font-size: clamp(.82rem, 1.3vw, .95rem);
}

/* ---------- La tira de clips ----------
   Els clips són verticals (gravats amb el mòbil) i van de costat. El gest és
   el mateix que la galeria de fotos de la portada: la roda vertical mou la
   pista en horitzontal (js/show.js). */
.tira { padding: 0 0 12vh; }

/* El marc nomes hi es per penjar-hi les fletxes: la pista ha de poder vessar
   per la dreta, aixi que el marc no pot retallar res. */
.tira__marc { position: relative; }

/* Les fletxes. Petites i a sobre de la tira, una a cada banda, perque amb el
   ratoli no hi ha cap gest que digui que aixo es mou de costat. El «fora»
   l'hi posa el JS quan ja no es pot anar mes enlla. */
.tira__fl {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  width: clamp(36px, 3.4vw, 46px); height: clamp(36px, 3.4vw, 46px);
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--tinta);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(96, 44, 72, .22);
  transition: opacity .3s, transform .3s var(--spring), background .3s;
}
.tira__fl svg { width: 48%; height: 48%; }
.tira__fl--esq { left: calc(var(--carril) + clamp(10px, 1.4vw, 20px)); }
.tira__fl--dre { right: calc(var(--carril-dre) + clamp(10px, 1.4vw, 20px)); }
.tira__fl:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.tira__fl--fora { opacity: 0; pointer-events: none; }

/* L'encaix va per l'esquerra i no pel centre, i es «proximity» i no
   «mandatory»: amb el centre obligatori, els clips son estrets i n'hi caben
   quatre a la pantalla, aixi que qualsevol salt es menjava mig cami i les
   fletxes no arribaven a moure res. El «scroll-padding» fa que el clip que
   encaixa es planti al carril del lloc i no al cantell. */
/* La tira viu entre les dues ratlles —la K a l'esquerra, el boto del menu a
   la dreta— i es alla on talla, no al cantell de la pantalla. Els clips que
   vessen es veuen tallats just al marge, que es el que diu que alla continua. */
.tira__pista {
  margin-left: var(--carril);
  margin-right: var(--carril-dre);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tira__pista::-webkit-scrollbar { display: none; }

.tira__llista {
  list-style: none; margin: 0;
  /* el carril ja l'hi posa el marge de la pista: aqui nomes cal que l'ultim
     clip no quedi enganxat al tall de la dreta */
  padding: 0 clamp(12px, 1.6vw, 22px) 0 0;
  display: flex; gap: clamp(12px, 1.6vw, 22px);
  width: max-content;
}

/* Totes les peces, la mateixa ALÇADA i l'amplada que els toqui per la seva
   forma. Així la tira admet verticals, apaisades i barrejades sense cap
   regla nova: ara n'hi ha una de 3:4 (la de La Mercè) i tres de 9:16, i la
   fila no balla. */
.clip {
  position: relative;
  flex: none;
  height: min(64vh, 560px);
  border-radius: clamp(14px, 1.6vw, 24px);
  overflow: hidden;
  background: var(--bg-2);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .5s var(--ease);
}
.clip__video { display: block; height: 100%; width: auto; }
.clip:hover { transform: translateY(-6px); }

/* el nom, a baix, sobre un vel perquè es llegeixi tant si sota hi ha cel com
   si hi ha focus */
.clip__nom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4em 1em .9em;
  color: #fff; font-weight: 700; text-align: center;
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  background: linear-gradient(to top, rgba(28, 10, 20, .62), transparent);
  pointer-events: none;
}

/* ---------- De que va, el show ----------
   Centrat i amidat com el video. Tot el que hi ha en aquesta pagina —la
   pregunta, el video, el tancament— cau sobre el mateix eix, i si aquest
   bloc anava arrambat a l'esquerra feia de sotrac enmig de la pagina.

   Les quatre frases van en una ratlla separades per un punt volat i no pas
   en pastilles roses: eren el que mes cridava i el que menys deia. */
.explica {
  padding: 0 var(--gutter) 13vh;
  max-width: min(980px, 110vh);
  margin: 0 auto;
  text-align: center;
}

.explica__gran {
  margin: 0 auto; max-width: 19em;
  font-size: clamp(1.25rem, 2.9vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1.14;
  text-wrap: balance;
}

/* Els «li» van en linia: aixi les quatre frases fan un sol paragraf i els
   punts queden entremig quan la ratlla es parteix, que es el que passaria si
   fossin caixes amb un separador a part. */
.explica__frases {
  list-style: none;
  margin: 1.3em auto 0; padding: 0;
  max-width: 44em;
  color: var(--pink);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.5;
  font-size: clamp(.92rem, 1.45vw, 1.1rem);
  text-wrap: balance;
}
.explica__frases li { display: inline; }
.explica__frases li + li::before { content: ' · '; opacity: .5; }

.explica__peu {
  margin: 1.7em auto 0; max-width: 34em;
  font-size: clamp(.95rem, 1.45vw, 1.1rem);
  line-height: 1.55;
  opacity: .72;
  text-wrap: pretty;
}

/* ---------- El tancament ---------- */
.crida {
  padding: 0 var(--gutter) 16vh;
  text-align: center;
}
/* El text és de dues ratlles i llarg: a la mida d'abans (4,2vw) se n'anava
   per tots dos costats. Amb el «max-width» en «em» el tall va amb la lletra,
   no amb la pantalla, i les dues ratlles queden sempre equilibrades. */
.crida__text {
  margin: 0 auto 1.2em;
  max-width: 18em;
  font-size: clamp(1.2rem, 2.9vw, 2.3rem);
  line-height: 1.12;
  font-weight: 800; letter-spacing: -0.04em;
  text-wrap: balance;
}
.crida__boto {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .72em 1.5em;
  border-radius: var(--radius);
  background: var(--pink); color: #fff;
  font-weight: 700; text-decoration: none;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  transition: transform .45s var(--spring), background .3s;
}
.crida__boto svg { width: 1em; height: 1em; }
.crida__boto:hover { transform: translateY(-3px) scale(1.03); background: var(--pink-deep); }

/* ---------- El passador, a l'estil dels shorts ----------
   Una pantalla per vídeo, de dalt a baix, i es passa de vídeo sencer: el salt
   el fa el JS i aquí no hi ha scroll lliure. Amb «scroll-snap» el navegador
   només t'encaixava en acabar el gest i mentrestant et quedaven dos mitjos
   vídeos a la pantalla. */
.shorts {
  /* per sobre del capçal, que va a 120 */
  position: fixed; inset: 0; z-index: 130;
  background: #140710;
  overflow: hidden;
  overscroll-behavior: contain;
}
.shorts[hidden] { display: none; }

/* La pista no fa scroll: es mou amb un «transform». El scroll d'un
   contenidor amb «overflow: hidden» no s'anima encara que hi posis
   «scroll-behavior: smooth» —el salt hi era però de cop—, i així, a més,
   el viatge el controlem nosaltres i no se'n pot quedar cap a mitges.
   La posició és «--i», que la posa el JS. */
.shorts__pista {
  list-style: none; margin: 0; padding: 0;
  transform: translateY(calc(var(--i, 0) * -100svh));
  transition: transform .55s var(--ease);
  will-change: transform;
}

.short { position: relative; height: 100svh; }

/* El fons difuminat. En una pantalla ampla un vídeo vertical deixa dues
   franges negres enormes als costats; això les omple amb la mateixa imatge,
   fora de focus i fosca. No costa res: surt de la portada que ja tenim. */
.short::before {
  content: ""; position: absolute; inset: 0;
  background: var(--portada) center/cover no-repeat;
  filter: blur(34px) brightness(.42) saturate(1.2);
  transform: scale(1.14);        /* que el desenfocament no deixi vores clares */
}
.short__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  cursor: pointer;               /* prem per aturar */
}
/* la caixa ha de ser definida: amb l'alçada en percentatge dins d'un
   contenidor sense alçada fixa, mana la proporció del vídeo i se'n surt */

.short__nom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3.2em 1.2em 1.6em;
  color: #fff; font-weight: 700; text-align: center;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
  background: linear-gradient(to top, rgba(10,4,8,.55), transparent);
  pointer-events: none;
}

/* la barra del temps, fina, a baix de tot */
.short__barra {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255,255,255,.22);
}
.short__barra i { display: block; height: 100%; width: 0; background: var(--pink); }

/* ---- els botons ---- */
.shorts__tanca, .shorts__so, .shorts__fletxa {
  position: fixed; z-index: 2;
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--ink);
  cursor: pointer;
  transition: transform .35s var(--spring), background .25s, opacity .3s;
}
.shorts__tanca:hover, .shorts__so:hover, .shorts__fletxa:hover { transform: scale(1.1); }
.shorts__tanca svg, .shorts__so svg, .shorts__fletxa svg { width: 20px; height: 20px; }
.shorts__tanca { top: clamp(14px, 2vw, 26px); right: clamp(14px, 2vw, 26px); }
.shorts__so    { top: clamp(14px, 2vw, 26px); right: clamp(70px, 2vw + 46px, 84px); }
.shorts__so .shorts__so-off { display: none; }
.shorts.es-mut .shorts__so .shorts__so-on  { display: none; }
.shorts.es-mut .shorts__so .shorts__so-off { display: block; }

/* les fletxes al costat dret, com a l'aplicació */
.shorts__fletxes { position: fixed; z-index: 2; inset: 0; pointer-events: none; }
.shorts__fletxa { right: clamp(14px, 2vw, 26px); pointer-events: auto; }
.shorts__fletxa--amunt { top: 50%; margin-top: -58px; }
.shorts__fletxa--avall { top: 50%; margin-top: 12px; animation: shortsBot 2.4s ease-in-out infinite; }
/* cadascuna marxa quan ja no hi ha on anar */
.shorts.es-primer .shorts__fletxa--amunt,
.shorts.es-ultim  .shorts__fletxa--avall { opacity: 0; pointer-events: none; }
@keyframes shortsBot {
  0%, 64%, 100% { transform: translateY(0); }
  78%           { transform: translateY(7px); }
}

/* en estret les fletxes fan nosa: allà el dit ja sap què ha de fer */
@media (max-width: 640px) {
  .shorts__fletxes { display: none; }
  .shorts__so { right: clamp(70px, 2vw + 46px, 84px); }
}
@media (prefers-reduced-motion: reduce) {
  .shorts__pista { transition: none; }
  .shorts__fletxa--avall { animation: none; }
}

@media (prefers-reduced-motion: reduce) { .shorts__avall { animation: none; } }

.shorts__tanca {
  position: fixed; z-index: 2;
  top: clamp(14px, 2vw, 26px); right: clamp(14px, 2vw, 26px);
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%;
  background: #fff; color: var(--ink);
  cursor: pointer;
}
.shorts__tanca svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .clip, .peli__portada, .peli__play, .crida__boto { transition: none; }
}

/* ---------- Contractació ----------
   Dos correus i prou. El lloc no demana cap dada a ningú —ho diu la pàgina de
   privacitat— i no és aquí que començarem: un formulari voldria dir recollir
   dades i caldria reescriure les tres legals.

   Sense títol i sense píndoles: la pregunta ja fa de títol i els logos van
   directes damunt del rosa.

   EL RITME és una sola escala, «--pas», i tots els buits en són múltiples:
   el que separa la pregunta dels logos, el logo del nom i el bloc del peu.
   Amb mides triades una per una no hi havia manera que quadrés. */
.contracta {
  --pas: clamp(14px, 1.8vw, 22px);
  padding: clamp(96px, 16vh, 180px) 0 14vh;
  max-width: min(900px, 100% - var(--carril) * 2);
  margin: 0 auto;
  text-align: center;
}
.contracta__head { margin-bottom: calc(var(--pas) * 4); }
/* La pregunta va en UNA ratlla. El que la partia era el «max-width: 16em»
   —640 px a la mida grossa—, no pas que no hi cabés: la frase fa uns 795 px
   i el carril en dóna 820. Sense aquell topall hi cap de sobres.

   En pantalla estreta sí que es parteix, i ha de ser així: forçar-la amb un
   «nowrap» la faria sortir per la vora. */
.contracta__subtitol {
  margin: 0 auto;
  color: var(--pink);
  font-size: clamp(1.15rem, 3vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1.14;
}
/* la segona ratlla és la indicació, no la pregunta: en tinta i més petita,
   que si va igual de grossa i de rosa competeixen les dues */
.contracta__segona {
  display: block;
  margin-top: 1.9em;       /* l’aire entre la pregunta i la indicació */
  color: var(--ink);
  font-size: .62em;
  letter-spacing: -0.04em;
}

/* els dos junts al mig, no repartits a banda i banda: amb columnes d'1fr
   cadascun se n'anava al seu costàt i quedava un forat al mig */
.agencies {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(40px, 6vw, 90px);
  flex-wrap: wrap;
}
/* Les dues columnes, EXACTAMENT iguals. Amb «flex: 0 1» s'arronsaven al seu
   contingut i quedaven de 159 i 170 px: cadascuna estava centrada per dins i
   el parell estava centrat a la pàgina, però a la vista no quadrava perquè
   els dos costats no mesuraven el mateix. Amb una amplada fixa, sí. */
.agencia { flex: 0 0 clamp(190px, 24vw, 240px); min-width: 0; }
/* El mínim és de 190 px i no de 168 perquè el correu més llarg
   (info@creamultimedia.net) en demana uns 175: amb la columna més estreta es
   partia a mitja paraula i quedava un «ne / t» lleig. Per sota de dues
   columnes, la fila es parteix tota sola i cadascuna té l'ample sencer. */

.agencia {
  display: grid; justify-items: center;
  padding: 0; background: none; box-shadow: none; border-radius: 0;
}

/* La caixa del logo és la MATEIXA per als dos —així els noms queden a la
   mateixa ratlla—, però cada logo hi va a la seva escala: un de quadrat i un
   de llarg a la mateixa alçada no pesen igual, i el llarg es menja l'altre.
   El coixí de dins és el que els iguala a la vista.

   I la caixa ha de tenir alçada definida: amb un percentatge dins d'un
   contenidor sense alçada fixa, mana la proporció de la imatge i se'n surt. */
.agencia__logo {
  width: 100%;
  height: clamp(62px, 7.2vw, 88px);
  margin-bottom: calc(var(--pas) * 1.4);
}
/* el logo porta a la web de l'agència; el correu, al programa de correu */
.agencia__logo a { display: block; width: 100%; height: 100%; transition: transform .45s var(--ease), opacity .25s; }
.agencia__logo a:hover { transform: scale(1.05); opacity: .82; }
.agencia__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* El segon és el logòtip llarg (CREA). De bon principi anava un 13% més
   petit per compensar que un ròtol ample pesa més que una marca quadrada,
   però es veia massa petit: ara només se li treu un 3%. */
.agencies > .agencia:nth-child(2) .agencia__logo a { padding: 3% 0; }

.agencia__nom {
  margin: 0 0 calc(var(--pas) * .35);
  font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
}
.agencia__correu {
  color: var(--pink); font-weight: 700; text-decoration: none;
  font-size: clamp(.88rem, 1.45vw, 1rem);
  border-bottom: 2px solid transparent;
  transition: border-color .25s;
}
.agencia__correu:hover { border-bottom-color: var(--pink); }

.contracta__peu {
  margin: calc(var(--pas) * 4) 0 0; color: var(--muted);
  font-size: clamp(.88rem, 1.45vw, 1rem);
}
.contracta__peu a { color: var(--pink); font-weight: 700; }

/* ---------- Premsa ----------
   Sense fons blanc, sense diari a sota i sense cap rètol gris a dalt: el
   titular, la frase, el mitjà i la data, a columnes, damunt del rosa del
   lloc i amb la seva lletra. */
/* El marge és el del lloc, no un de propi: «--carril» és on acaba la K del
   capçal més l'aire, i és el que fan servir la llista de dates i l'iPod. Amb
   un marge inventat, aquesta pàgina s'eixamplava més que la resta i es menjava
   les vores. */
.premsa {
  padding: clamp(80px, 13vh, 150px) 0 14vh;
  max-width: min(1240px, 100% - var(--carril) * 2);
  margin: 0 auto;
}
.diari, .diari__full { background: none; padding: 0; box-shadow: none; border-radius: 0; }

/* ---- la capçalera ---- */
.diari__cap {
  text-align: center;
  margin-bottom: clamp(22px, 3vw, 36px);
}
.diari__nom {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, 7rem);
  font-weight: 800; letter-spacing: -0.05em; line-height: .9;
  text-wrap: balance;
}
.diari__data {
  margin: .9em 0 0;
  text-transform: uppercase; letter-spacing: .2em;
  font-size: clamp(.6rem, 1vw, .74rem); font-weight: 700;
  color: var(--muted);
}

/* ---- les notícies ----
   Una per ratlla i a tot l'ample, en tres columnes: a l'esquerra el mitjà amb
   la data a sota, al mig el titular i la cita, i a la dreta l'enllaç.

   LA LLETRA, i aquí hi ha la gràcia de l'apartat:
     · Georgia per al titular i la cita —la serifa fa que això sembli premsa;
     · Courier New per al mitjà, la data i l'enllaç —la màquina d'escriure,
       que és el que posa el to de retall de diari.
   Totes dues són del sistema: no es baixa cap fitxer de lletra per això. */
.retalls { list-style: none; margin: 0; padding: 0; }

.retall { border-top: 1px solid var(--line); }
.retall:last-child { border-bottom: 1px solid var(--line); }
.retall > a {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr) 9.5rem;
  gap: clamp(20px, 3vw, 50px);
  align-items: start;
  padding: clamp(26px, 3.4vw, 46px) 0;
  text-decoration: none; color: var(--ink);
}

/* ---- l'esquerra: el mitjà i la data ---- */
.retall__meta { padding-top: .45em; }
.retall__mitja {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pink);
}
.retall__data {
  margin: .7em 0 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px; font-weight: 400;
  letter-spacing: .1em;
  color: var(--muted);
}

/* ---- el mig: el titular i la cita ---- */
.retall__titular {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px; font-weight: 400;
  line-height: 1.24; letter-spacing: 0;
  text-wrap: pretty;
}
.retall > a:hover .retall__titular { text-decoration: underline; text-underline-offset: .12em; }

/* la cita, amb la barra rosa al costat */
.retall__frase {
  margin: 1em 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--pink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px; font-style: italic; font-weight: 400;
  line-height: 1.42;
  text-wrap: pretty;
}
.retall__frase::before { content: "“"; }
.retall__frase::after  { content: "”"; }

/* ---- la dreta: l'enllaç ---- */
.retall__anar {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .6em;
  padding: .3em 0 .55em;
  border-bottom: 1px solid var(--ink);
  font-family: "Courier New", Courier, monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.4; color: var(--ink);
  transition: color .25s, border-color .25s;
}
.retall__anar svg { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.retall > a:hover .retall__anar { color: var(--pink); border-color: var(--pink); }
.retall > a:hover .retall__anar svg { transform: translate(3px, -3px); }

/* ---- el passador de pàgines ----
   Dotze notícies de sis en sis. Les fletxes van a les dues bandes del
   comptador; la que no porta enlloc hi és igualment, apagada, perquè el
   bloc no es mogui de lloc en canviar de pàgina. */
.passa {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(30px, 4vw, 54px);
}
.passa__fl {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--pill); color: var(--ink);
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(96, 44, 72, .12);
  transition: transform .4s var(--spring), background .25s, color .25s;
}
.passa__fl svg { width: 19px; height: 19px; }
.passa__fl:hover { transform: scale(1.1); background: var(--pink); color: #fff; }
.passa__fl--off { opacity: .32; box-shadow: none; pointer-events: none; }
.passa__compte {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: var(--ink);
}
.passa__compte span { color: var(--muted); margin: 0 .25em; }

/* ---- en estret ---- */
@media (max-width: 860px) {
  .retall > a { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 0; }
  .retall__meta { display: flex; gap: 1.4em; align-items: baseline; padding-top: 0; }
  .retall__data { margin: 0; }
  .retall__titular { font-size: 22px; }
  .retall__frase { font-size: 17px; }
  .retall__anar { justify-self: start; min-width: 12rem; }
}

/* ---------- El cap d'ell amb la bafarada ----------
   La bafarada és una imatge amb el text ja dibuixat a dins
   (assets/premsa/bafarada-text.webp): paper de diari, la seva cua i la frase.
   Va dins d'un <h1> amb l'«alt» posat, o sigui que per a Google i per a un
   lector de pantalla segueix sent el títol de la pàgina encara que sigui una
   imatge.

   No hi ha text de CSS a sobre: dibuixar-hi la frase per sobre d'una imatge
   que ja la porta seria demanar que no quadressin mai. */
.xerrada {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 1.4vw, 20px);
  margin: clamp(14px, 3vh, 36px) 0 clamp(34px, 5vw, 60px);
}
.xerrada__globus {
  margin: 0;
  width: clamp(230px, 32vw, 460px);
  transform: rotate(-1deg);
  filter: drop-shadow(0 12px 26px rgba(96, 44, 72, .2));
}
.xerrada__globus img { display: block; width: 100%; height: auto; }

.xerrada__cap {
  width: clamp(104px, 14vw, 196px); height: auto;
  margin-left: -3%;
  transform: rotate(5deg);
  /* La vora blanca d'adhesiu. Les ombres s'encadenen —cadascuna s'aplica al
     resultat de l'anterior—, o sigui que quatre de 4 px ja donen un contorn
     gruixut. Amb vuit el navegador es planta i no pinta res. */
  filter:
    drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff)
    drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff)
    drop-shadow(0 14px 22px rgba(96, 44, 72, .28));
}
@media (max-width: 560px) {
  .xerrada { flex-direction: column; gap: 0; }
  .xerrada__cap { margin: -6% 0 0 26%; }
}