/* ==========================================================================
   Caratteri del Journal
   Caricati in locale dal plugin: nessuna richiesta a servizi esterni.
   Si dichiarano solo i pesi che il foglio di stile usa davvero. Un peso non
   dichiarato viene sintetizzato dal browser, ed è proprio il difetto che
   aveva Mercury, di cui esisteva il solo tondo.
   Newsreader e Montserrat sono sotto licenza SIL OFL; i testi di licenza
   stanno accanto ai file, in assets/fonts/.
   ========================================================================== */

@font-face {
	font-family: "Newsreader";
	src: url("fonts/newsreader-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Newsreader";
	src: url("fonts/newsreader-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Newsreader";
	src: url("fonts/newsreader-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Newsreader";
	src: url("fonts/newsreader-400-italic.woff2") format("woff2");
	font-weight: 400;
	/* niente corsivo: di Baskerville non si usa. */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Newsreader";
	src: url("fonts/newsreader-500-italic.woff2") format("woff2");
	font-weight: 500;
	/* niente corsivo: di Baskerville non si usa. */
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Libre Baskerville";
	src: url("fonts/librebaskerville-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Libre Baskerville";
	src: url("fonts/librebaskerville-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("fonts/montserrat-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   The CineArts Journal — landing & archivio
   ========================================================================== */

.cj {
	--cj-ink: #0b0b0b;
	--cj-paper: #ffffff;
	--cj-mute: #6a6a6a;
	--cj-rule: #0b0b0b;
	/* I due caratteri del sito. Di Mercury è caricato il solo peso Roman: usare
	   font-weight 700 produce un grassetto sintetico, diverso dal resto del sito.
	   I pesi qui sotto restano quindi entro 400/500, come negli archivi e negli articoli. */
	--cj-serif: "Libre Baskerville", Georgia, serif;
	--cj-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	/* Solo per la testata: di Libre Baskerville è caricato il solo peso 700. */
	--cj-titolo: "Libre Baskerville", Georgia, serif;
	/* Un solo parametro governa la dimensione di tutto: tipografia, miniature,
	   frecce e pulsanti sono espressi in funzione di --cj-scale, così le
	   proporzioni restano quelle di partenza. */
	--cj-scale: 1.35;
	--cj-max: 1560px;
	/* Margini laterali e rientro delle sezioni sotto la hero. Il rientro è un
	   padding aggiuntivo e non una larghezza massima minore: così resta visibile
	   anche sugli schermi larghi, dove entrambe le larghezze sarebbero comunque
	   limitate dal viewport e le sezioni finirebbero per allinearsi. */
	--cj-tint: #f4f4f4;
	--cj-pad: clamp(14px, 2vw, 22px);
	--cj-inset: clamp(24px, 3.4vw, 52px);
	--cj-gap: clamp(28px, 4vw, 56px);
	/* Opacita' del velo scuro sul bordo inferiore della hero. */
	--cj-shade: 0.75;

	color: var(--cj-ink);
	font-family: var(--cj-serif);
	/* Nessuno sfondo: lo imposta il container Elementor che ospita il widget. */
	background: transparent;
}

.cj *,
.cj *::before,
.cj *::after {
	box-sizing: border-box;
}

.cj img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cj a {
	color: inherit;
	text-decoration: none;
}

.cj button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	/* Il tema imposta white-space:nowrap sui button: senza questo reset i titoli
	   nell'elenco laterale non vanno a capo e sbordano dal riquadro. */
	white-space: normal;
	text-align: inherit;
}

/* Il reset del tema colora di fucsia lo sfondo di ogni <button> in hover e focus:
   senza neutralizzarlo comparirebbe dietro le frecce, le miniature e "Load More". */
.cj button:hover,
.cj button:focus,
.cj button:active {
	background: none;
	color: inherit;
}

.cj .cj-noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: #ededed;
}

/* Sezioni: larghezza di lettura centrata --------------------------------- */

.cj-masthead,
.cj-mostread,
.cj-stream,
.cj-filters,
.cj-cats__inner {
	max-width: var(--cj-max);
	margin-inline: auto;
	padding-inline: var(--cj-pad);
}

/* Categorie e flusso articoli: leggermente più stretti della hero. */
.cj-cats__inner,
.cj-stream {
	padding-inline: calc(var(--cj-pad) + var(--cj-inset));
}

/* Hover ------------------------------------------------------------------
   Il sito segnala i link con una barra di 2px che cresce dal centro in 0.4s
   (è il "pointer" del menu di navigazione). Nessun riempimento di sfondo:
   non è usato da nessuna parte. */

/* La utility .hover-darken del sito: al passaggio del mouse i link scendono a
   opacità 0.7 con una transizione lunga. Nessuna sottolineatura — il sito la
   disattiva apposta anche sul menu di navigazione. */
.cj-fade {
	transition:
		color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		fill 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cj-fade:hover,
.cj-fade:focus-visible {
	opacity: 0.45;
}

/* Le immagini si ingrandiscono come nelle card degli archivi. */
.cj-zoom img {
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cj-zoomer:hover .cj-zoom img,
.cj-zoomer:focus-visible .cj-zoom img {
	transform: scale(1.08);
}

/* Occhiello ------------------------------------------------------------- */

.cj-eyebrow {
	margin: 0 0 20px;
	font-family: var(--cj-serif);
	/* niente corsivo: di Baskerville non si usa. */
	font-style: normal;
	/* 700 reale: di Baskerville sono caricati i pesi 400 e 700, quindi non e'
	   un grassetto sintetico. Un 500 o un 600 ripiegherebbero sul 400. */
	font-weight: 700;
	font-size: calc(clamp(13px, 1.1vw, 16px) * var(--cj-scale));
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Occhiello con filetto sotto, sopra l'elenco delle slide. */
.cj-eyebrow--ruled {
	margin-bottom: 0;
	/* Interlinea 1: con il valore ereditato (1,5) la riga di testo si porta dietro
	   ~5px di semi-interlinea sotto le lettere, e il filetto resterebbe staccato
	   anche azzerando il padding. Con 1 la riga aderisce ai glifi e il padding
	   torna a essere l'unica distanza, regolabile fino a zero. */
	line-height: 1;
	padding-bottom: calc(2px * var(--cj-scale));
	border-bottom: 1px solid var(--cj-rule);
}

.cj-eyebrow--center {
	text-align: center;
}

/* Testata --------------------------------------------------------------- */

.cj-masthead {
	padding-top: clamp(32px, 5vw, 64px);
	padding-bottom: clamp(24px, 3.5vw, 44px);
	text-align: center;
}

.cj-masthead__title {
	margin: 0;
	font-family: var(--cj-titolo);
	/* 700 reale: di Libre Baskerville il bold è caricato, non è un finto grassetto. */
	font-weight: 700;
	font-size: calc(clamp(34px, 5.6vw, 68px) * var(--cj-scale));
	line-height: 1.05;
	letter-spacing: -0.01em;
}

/* Filetto sotto la testata, come nel progetto: sta fra titolo e sottotitolo. */
.cj-masthead__title::after {
	content: "";
	display: block;
	width: min(100%, calc(var(--cj-filetto-w, 820px) * var(--cj-scale)));
	height: 1px;
	margin: clamp(1px, 0.15vw, 3px) auto 0;
	background: currentColor;
}

.cj-masthead__sub {
	margin: 14px auto 0;
	max-width: 62ch;
	font-size: calc(clamp(11px, 1vw, 13px) * var(--cj-scale));
	line-height: 1.5;
	color: var(--cj-mute);
}

.cj-masthead--archive {
	padding-bottom: clamp(16px, 2vw, 24px);
}

/* ==========================================================================
   Header del sito
   L'header di cinearts.eu è position:fixed, bianco su trasparente, pensato per
   stare sopra gli hero scuri: sul fondo chiaro del Journal va reso leggibile
   fin dallo stato iniziale (allo scroll ci pensa già lo sticky di Elementor).
   ========================================================================== */

body.cj-journal {
	--cj-header-h: 86px;
	/* Distanza visibile fra il fondo della navbar e il titolo. Il padding
	   complessivo somma anche l'altezza dell'header, che copre il contenuto:
	   tenerli separati fa si' che il controllo Elementor agisca sullo spazio
	   che si vede, non sul totale. */
	--cj-masthead-gap: clamp(10px, 1.6vw, 24px);
}

body.cj-journal .elementor-location-header .main-header {
	/* Solo il fondo bianco, nessuna riga di separazione: sulle altre pagine
	   l'header non ne ha, né in cima né dopo lo scroll. */
	background-color: #fff !important;
}

body.cj-journal .elementor-location-header .main-header,
body.cj-journal .elementor-location-header .main-header a,
body.cj-journal .elementor-location-header .main-header h1,
body.cj-journal .elementor-location-header .main-header h2,
body.cj-journal .elementor-location-header .main-header h3,
body.cj-journal .elementor-location-header .main-header p,
body.cj-journal .elementor-location-header .main-header span,
body.cj-journal .elementor-location-header .main-header li,
body.cj-journal .elementor-location-header .main-header i,
body.cj-journal .elementor-location-header .main-header .elementor-heading-title {
	color: #0b0b0b !important;
}

body.cj-journal .cj .cj-masthead {
	padding-top: calc(var(--cj-header-h) + var(--cj-masthead-gap));
}

@media (max-width: 780px) {
	body.cj-journal {
		--cj-header-h: 70px;
	}
}

/* ==========================================================================
   1. Most Read
   ========================================================================== */

.cj-mostread {
	padding-bottom: clamp(48px, 6vw, 88px);
}

.cj-mostread__grid {
	display: grid;
	/* Immagine 69%, spazio 6%, colonna 25%: le proporzioni del riferimento.
	   Con column-gap al 6% resta il 94% da dividere, e 69:25 su 94 riproduce
	   esattamente quelle quote. */
	grid-template-columns: minmax(0, 71.5fr) minmax(0, 21fr);
	/* Il piede sta nella colonna dell'immagine: estratto e "Explore all" restano
	   sotto l'hero, non sotto l'elenco laterale. */
	grid-template-areas:
		"stage side"
		"foot  side";
	column-gap: 7.5%;
	row-gap: clamp(20px, 2.6vw, 40px);
	align-items: start;
}

.cj-stage {
	grid-area: stage;
}

.cj-mostread__side {
	grid-area: side;
	display: flex;
	flex-direction: column;
	gap: calc(14px * var(--cj-scale));
}

.cj-mostread__foot {
	grid-area: foot;
}

/* Palcoscenico ----------------------------------------------------------- */

.cj-stage {
	position: relative;
	/* 16/9, come l'immagine della hero di riferimento. */
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111;
}

.cj-slides {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

/* Cambio slide: dissolvenza incrociata leggera. La visibilità cambia solo a
   dissolvenza finita, altrimenti la slide uscente sparirebbe di colpo e al posto
   dell'incrocio si vedrebbe il fondo scuro del palcoscenico. */
.cj-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 1.4s ease,
		visibility 0s linear 1.4s;
}

.cj-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 1.4s ease,
		visibility 0s linear 0s;
}

/* Le scritte salgono entrando. Uscendo invece svaniscono e basta, insieme
   all'immagine: il ritorno in basso avviene a dissolvenza conclusa, quindi non
   si vede. */
.cj-slide .cj-kicker,
.cj-slide .cj-t__main,
.cj-slide .cj-t__sub {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition:
		opacity 0.5s ease,
		transform 0s linear 0.5s;
}

.cj-slide.is-active .cj-kicker,
.cj-slide.is-active .cj-t__main,
.cj-slide.is-active .cj-t__sub {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition:
		opacity 1.1s ease-out,
		transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sfalsamento in entrata: occhiello, poi titolo, poi sottotitolo. */
.cj-slide.is-active .cj-kicker {
	transition-delay: 0.26s;
}

.cj-slide.is-active .cj-t__main {
	transition-delay: 0.40s;
}

.cj-slide.is-active .cj-t__sub {
	transition-delay: 0.54s;
}

@media (prefers-reduced-motion: reduce) {
	.cj-slide .cj-kicker,
	.cj-slide .cj-t__main,
	.cj-slide .cj-t__sub {
		transform: none;
	}
}

.cj-slide__link {
	display: block;
	position: relative;
	height: 100%;
}

.cj-slide__media {
	display: block;
	height: 100%;
}

.cj-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	/* --cj-shade e' l'opacita' sul bordo inferiore; le altre tappe la seguono in
	   proporzione. A 0.75 la fascia dove passa il titolo resta appena sopra 4.5:1 di
	   contrasto anche su un fotogramma completamente bianco. */
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, var(--cj-shade)) 0%,
		rgba(0, 0, 0, calc(var(--cj-shade) * 0.72)) 26%,
		rgba(0, 0, 0, calc(var(--cj-shade) * 0.30)) 46%,
		rgba(0, 0, 0, 0) 70%
	);
}

.cj-slide__caption {
	position: absolute;
	left: var(--cj-cap-x, clamp(24px, 6vw, 92px));
	right: clamp(18px, 3vw, 46px);
	bottom: clamp(18px, 3vw, 40px);
	z-index: 1;
	color: #fff;
}

.cj-kicker {
	display: block;
	margin-bottom: 12px;
	font-family: var(--cj-display);
	/* Di Montserrat è caricato il solo 600: chiedere un peso diverso farebbe
	   ripiegare il browser su questa faccia comunque, ma in modo non garantito. */
	font-weight: 600;
	font-size: calc(10px * var(--cj-scale));
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.9;
}

.cj-slide__title {
	display: block;
	/* bersaglio 36px con interlinea 1.1 */
	font-weight: 400;
	font-size: calc(clamp(17px, 2vw, 26.7px) * var(--cj-scale));
	line-height: 1.1;
	text-wrap: balance;
}

.cj-t__main,
.cj-t__sub {
	display: block;
}

/* Sottotitolo in corsivo sotto il titolo: e` il trattamento usato dalle card degli
   archivi e dalle pagine articolo. */
.cj-t__sub,
.cj-pick__title em {
	/* niente corsivo: di Baskerville non si usa. */
	font-style: normal;
	font-weight: 400;
}

/* I sottotitoli sono scritti in minuscolo nel campo ACF: si alza solo l'iniziale,
   "capitalize" maiuscolerebbe anche articoli e preposizioni. */
.cj-t__sub::first-letter,
.cj-pick__title em::first-letter {
	text-transform: uppercase;
}

/* Barra di avanzamento ----------------------------------------------------
   Un filetto chiaro sul bordo inferiore dell'immagine grande: cresce per tutta
   la durata della slide. La larghezza la anima il JavaScript, che conosce la
   durata impostata nel widget. */

.cj-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 2px;
	background: rgba(255, 255, 255, 0.22);
	pointer-events: none;
}

.cj-progress__bar {
	display: block;
	width: 0;
	height: 100%;
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	/* Senza avanzamento automatico la barra non avrebbe significato. */
	.cj-progress {
		display: none;
	}
}

/* Frecce ----------------------------------------------------------------- */

.cj-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: calc(44px * var(--cj-scale));
	height: calc(44px * var(--cj-scale));
	transform: translateY(-50%);
	color: #fff;
}

.cj-nav svg {
	width: 100%;
	height: 100%;
}

/* Più specifico del reset qui sopra, altrimenti le frecce diventerebbero scure. */
.cj .cj-nav,
.cj .cj-nav:hover,
.cj .cj-nav:focus {
	color: #fff;
}

.cj-nav--prev {
	left: clamp(4px, 1vw, 12px);
}

.cj-nav--next {
	right: clamp(4px, 1vw, 12px);
}

/* Elenco laterale --------------------------------------------------------- */

.cj-picks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/* 32px fra una voce e l'altra, come il riferimento */
	gap: clamp(18px, 2.2vw, 32px);
}

.cj-pick__btn {
	display: grid;
	/* 0,4 della colonna, come il riferimento (128 su 320). */
	grid-template-columns: calc(100px * var(--cj-scale)) minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	width: 100%;
	text-align: left;
}

.cj-pick__media {
	display: block;
	/* 16/9 come le miniature della colonna di riferimento, non 4/3: era il
	   motivo per cui la colonna sembrava tutta quadrata. */
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #ededed;
	transition: width 0.35s ease;
}

.cj-pick.is-active .cj-pick__btn {
	grid-template-columns: calc(118px * var(--cj-scale)) minmax(0, 1fr);
}

.cj-pick__title {
	display: block;
	/* bersaglio 14px con interlinea 1,25 */
	font-size: calc(clamp(10px, 0.9vw, 10.4px) * var(--cj-scale));
	line-height: 1.25;
	overflow-wrap: break-word;
}

.cj-pick__title em {
	display: block;
	font-style: normal;
	/* Peso esplicito: la miniatura attiva porta il titolo a 700 e questo
	   corsivo verrebbe sintetizzato. */
	font-weight: 400;
}

.cj-pick.is-active .cj-pick__title {
	font-size: calc(clamp(11px, 1vw, 11.1px) * var(--cj-scale));
}

.cj-pick__date {
	display: block;
	margin-top: 6px;
	font-weight: 500;
	/* bersaglio 10px */
	font-size: calc(7.4px * var(--cj-scale));
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--cj-mute);
}

/* Piede: estratto + Explore all ------------------------------------------- */

.cj-mostread__foot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, calc(320px * var(--cj-scale)));
	gap: clamp(16px, 2.4vw, 36px);
	align-items: center;
}

.cj-mostread__foot--noexplore {
	grid-template-columns: minmax(0, 1fr);
}

/* Cambio del testo sotto l'immagine: stesso linguaggio delle scritte sull'hero.
   Escono in dissolvenza, il testo viene sostituito mentre non si vede, e la
   nuova versione sale dal basso. */
.cj-mostread__excerpt,
.cj-btn__line,
.cj-btn__cat {
	transition:
		opacity 0.7s ease-out,
		transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.cj-btn__line,
.cj-btn__cat {
	transition-delay: 0.08s;
}

/* Uscita: solo dissolvenza, nessuno spostamento. */
.cj-mostread__foot.is-out .cj-mostread__excerpt,
.cj-mostread__foot.is-out .cj-btn__line,
.cj-mostread__foot.is-out .cj-btn__cat {
	opacity: 0;
	transition: opacity 0.26s ease;
}

/* Punto di partenza della salita: applicato per un istante, senza transizione. */
.cj-mostread__foot.is-in .cj-mostread__excerpt,
.cj-mostread__foot.is-in .cj-btn__line,
.cj-mostread__foot.is-in .cj-btn__cat {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: none;
}

.cj-mostread__excerpt {
	margin: 0;
	max-width: 52ch;
	/* bersaglio 16px con interlinea 1.5 */
	font-size: calc(clamp(10.5px, 1vw, 11.85px) * var(--cj-scale));
	line-height: 1.5;
}

/* Bottoni ----------------------------------------------------------------- */

.cj-btn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	width: 100%;
	min-height: calc(54px * var(--cj-scale));
	padding: calc(12px * var(--cj-scale)) calc(24px * var(--cj-scale));
	border: 0;
	background: var(--cj-tint);
	color: var(--cj-ink);
	font-family: var(--cj-serif);
	font-size: calc(clamp(11px, 1vw, 13px) * var(--cj-scale));
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
}

/* Etichetta su una riga sola, come nel progetto originale. Il riquadro è quindi
   largo e basso, e "nowrap" tiene la misura identica al cambio di categoria:
   è la larghezza della colonna a fissarla, non la lunghezza del testo. */
/* Explore all sopra, categoria sotto. La colonna e il min-height tengono la
   misura costante anche con etichette di lunghezza diversa. */
.cj-btn--explore {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.35em;
	white-space: nowrap;
	letter-spacing: 0.08em;
	min-height: calc(62px * var(--cj-scale));
	padding-block: calc(12px * var(--cj-scale));
	font-weight: 700;
}

.cj-btn__cat {
	/* Su una riga sola: andando a capo lascerebbe un trattino orfano sotto. */
	white-space: nowrap;
}

.cj-btn__cat:empty {
	display: none;
}

/* ==========================================================================
   2. Explore by category
   ========================================================================== */

/* Nessun fondo pieno e nessun full-bleed: sfondo e larghezza sono responsabilità
   del container Elementor che ospita il widget, cosi` restano modificabili dal builder. */
.cj-cats {
	padding-block: clamp(40px, 5vw, 76px);
}

.cj-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 26px);
}

.cj-card {
	display: flex;
	flex-direction: column;
	background: var(--cj-paper);
}

.cj-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--cj-rule);
	background: #ededed;
}

.cj-card__title {
	display: block;
	padding: 18px 16px 10px;
	/* niente corsivo: di Baskerville non si usa. */
	font-style: normal;
	font-size: calc(clamp(13px, 1.15vw, 16px) * var(--cj-scale));
	text-align: center;
}

.cj-card__text {
	display: block;
	padding: 0 clamp(14px, 1.6vw, 22px) clamp(18px, 2vw, 26px);
	font-size: calc(clamp(10px, 0.85vw, 12px) * var(--cj-scale));
	line-height: 1.55;
	text-align: center;
	color: var(--cj-mute);
}

/* ==========================================================================
   3. Flusso cronologico
   ========================================================================== */

.cj-stream {
	padding-block: clamp(48px, 6vw, 90px);
}

.cj-stream__list {
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 5vw, 78px);
}

.cj-row {
	display: grid;
	/* 1.304 : 1 = 0,566 della riga all'immagine, la proporzione del riferimento */
	grid-template-columns: minmax(0, 1.304fr) minmax(0, 1fr);
	align-items: stretch;
}

.cj-row__media {
	display: block;
	/* Più alta della hero: le righe degli articoli devono avere più presenza. */
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #ededed;
}

.cj-row__body {
	/* Due fasce: il testo occupa quella flessibile e resta centrato, categoria e
	   data stanno in quella bassa, ancorate al piede del blocco. */
	display: grid;
	grid-template-rows: 1fr auto;
	/* Padding laterale ridotto: il titolo e il sottotitolo hanno bisogno di
	   larghezza, altrimenti vanno a capo troppo presto. */
	padding: clamp(28px, 3.4vw, 56px) clamp(16px, 2vw, 30px);
	text-align: center;
	background: var(--cj-paper);
}

.cj-row__lead {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Distanza minima fra titolo e descrizione: sono la stessa cosa. Il titolo ha
	   già la sua interlinea sotto l'ultima riga, quindi il bianco percepito è
	   maggiore del valore qui. */
	gap: clamp(6px, 0.85vw, 12px);
}

.cj-row__title {
	margin: 0;
	/* bersaglio 36px con interlinea 1.11 */
	font-weight: 400;
	font-size: calc(clamp(18px, 1.9vw, 26.7px) * var(--cj-scale));
	line-height: 1.11;
	text-wrap: balance;
}

/* Al passaggio sulla riga il titolo segue l'immagine invece di restare inerte:
   stessa opacita' e stessa curva di .cj-fade, cosi' la riga reagisce come un
   blocco solo. Vale anche da tastiera, con :focus-within. */
.cj-row__title a {
	transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cj-row.cj-zoomer:hover .cj-row__title a,
.cj-row.cj-zoomer:focus-within .cj-row__title a {
	opacity: 0.45;
}

.cj-row__excerpt {
	margin: 0 auto;
	max-width: 44ch;
	/* bersaglio 16px con interlinea 1.4 */
	font-size: calc(clamp(11px, 1vw, 11.85px) * var(--cj-scale));
	line-height: 1.4;
	color: var(--cj-mute);
}

.cj-row__meta {
	display: flex;
	flex-direction: column;
	align-self: end;
	gap: 6px;
	/* Molto più respiro qui che fra titolo e descrizione: è un piede, non la
	   continuazione del testo. */
	padding-top: clamp(40px, 5vw, 84px);
	font-size: calc(clamp(10px, 0.9vw, 12px) * var(--cj-scale));
}

.cj-row__cat {
	/* niente corsivo: di Baskerville non si usa. */
	font-style: normal;
	/* Flex item in colonna: senza questo occuperebbe tutta la larghezza e la
	   barra dell'hover sarebbe larga quanto la riga invece che quanto il testo. */
	align-self: center;
}

.cj-row__date {
	color: var(--cj-mute);
	font-weight: 500;
	font-size: 0.85em;
	letter-spacing: 0.04em;
}

/* Ordine invertito a righe alterne */

.cj-row--flip {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.304fr);
}

.cj-row--flip .cj-row__media {
	order: 2;
}

.cj-stream__more {
	display: flex;
	justify-content: center;
	margin-top: clamp(40px, 5vw, 70px);
}

.cj-btn--more {
	width: auto;
	min-width: calc(220px * var(--cj-scale));
}

.cj-btn--more[disabled] {
	opacity: 0.45;
	cursor: default;
}

.cj-empty {
	padding: 60px 0;
	text-align: center;
	color: var(--cj-mute);
}

/* ==========================================================================
   Archivio "View All"
   ========================================================================== */

.cj-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(12px, 1.6vw, 26px);
	padding-bottom: clamp(8px, 1vw, 16px);
}

.cj-filter {
	/* niente corsivo: di Baskerville non si usa. */
	font-style: normal;
	font-size: calc(clamp(12px, 1.05vw, 14px) * var(--cj-scale));
	letter-spacing: 0.04em;
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
}

.cj-filter.is-active {
	border-bottom-color: var(--cj-rule);
	/* 500 e non 700: del corsivo esistono i pesi 400 e 500, il 700 sarebbe finto. */
	font-weight: 500;
}

.cj--archive .cj-stream {
	padding-top: clamp(30px, 4vw, 50px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.cj-mostread__grid {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		grid-template-areas:
			"stage"
			"side"
			"foot";
	}

	.cj-picks {
		flex-direction: row;
		overflow-x: auto;
		padding-bottom: 8px;
		scrollbar-width: thin;
	}

	.cj-pick {
		/* min-width:0 è necessario: senza, il flex item non si lascia comprimere
		   e il titolo esce dal riquadro invece di andare a capo. */
		flex: 0 0 calc(220px * var(--cj-scale));
		min-width: 0;
	}

	.cj-pick__btn,
	.cj-pick.is-active .cj-pick__btn {
		grid-template-columns: calc(64px * var(--cj-scale)) minmax(0, 1fr);
	}

	.cj-pick.is-active .cj-pick__title {
		font-weight: 700;
	}

	.cj-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 780px) {
	.cj {
		/* A schermo stretto ogni pixel serve: niente rientro. */
		--cj-inset: 0px;
	}

	.cj-mostread__foot {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Su schermo stretto "Explore all — Auteur Critique —" non entra in una riga:
	   torna incolonnato invece di sbordare. */
	.cj-btn--explore {
		flex-wrap: wrap;
		white-space: normal;
	}

	.cj-row,
	.cj-row--flip {
		grid-template-columns: minmax(0, 1fr);
	}

	.cj-row--flip .cj-row__media {
		order: 0;
	}
}

@media (max-width: 780px) {
	/* Con il formato più alto la didascalia occupa tre righe e arriverebbe sotto
	   le frecce: queste salgono sopra il blocco di testo. */
	.cj-nav {
		top: 34%;
	}
}

@media (max-width: 520px) {
	.cj-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.cj-stage {
		aspect-ratio: 4 / 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cj *,
	.cj *::before,
	.cj *::after {
		transition-duration: 0.01ms !important;
	}
}