/**
 * FrancyStore Portfolio — stile di frontend.
 *
 * Estetica da archivio tecnico: fondo quasi nero, testi in argento,
 * monospaziato per i dati e condensato per i titoli, con velo,
 * vignettatura e scanlines sopra le immagini di sfondo.
 *
 * Le pagine del portfolio non caricano header e footer del tema, quindi
 * qui si parte davvero da zero: quello che non è dichiarato in questo
 * file non esiste.
 */

:root {
	--fsp-bg: #08090a;
	--fsp-panel: #15171a;
	--fsp-panel-soft: rgba(21, 23, 26, .82);
	--fsp-silver: #d8dbde;
	--fsp-silver-dim: #9aa0a6;
	--fsp-line: rgba(216, 219, 222, .16);
	--fsp-line-strong: rgba(216, 219, 222, .5);
	--fsp-accent: #e8ebee;
	--fsp-radius: 2px;
}

/*
 * Il fondo scuro va messo anche su html e body: senza, sotto le nostre
 * pagine resterebbe lo sfondo del tema, e Safari su iOS tinge le
 * proprie barre campionando quel colore. Vedi anche il
 * <meta name="theme-color"> nei template, che lo dichiara esplicitamente.
 */
html.fsp-html,
body.fsp-body {
	margin: 0;
	padding: 0;
	background: var(--fsp-bg);
	color: var(--fsp-silver);
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	-webkit-font-smoothing: antialiased;
}

body.fsp-body * {
	box-sizing: border-box;
}

/*
 * Regola di comodo per le immagini dentro ai testi, con specificità
 * azzerata da :where().
 *
 * Scritta come "body.fsp-body img" pesava (0,1,2) e batteva qualsiasi
 * regola a classe singola come ".fsp-card__media img" (0,1,1): il suo
 * height:auto annullava tutti gli height:100% pensati per far riempire
 * il riquadro alle foto, che restavano alte quanto volevano lasciando
 * una banda vuota sotto. Con :where() attorno al body il peso scende a
 * (0,0,1) e basta una classe per avere la meglio.
 */
:where(body.fsp-body) img {
	max-width: 100%;
	height: auto;
}

body.fsp-body a {
	color: var(--fsp-silver);
	text-decoration: none;
}

body.fsp-body a:hover {
	color: #fff;
}

/* Blocca lo scorrimento della pagina mentre una foto è ingrandita. */
body.fsp-no-scroll {
	overflow: hidden;
}

.fsp-display {
	font-family: 'Saira Condensed', 'Arial Narrow', sans-serif;
	letter-spacing: .04em;
}

/* Riga sottile di separazione, usata sotto le intestazioni. */
.fsp-rule {
	height: 1px;
	margin: 18px auto;
	max-width: 640px;
	background: linear-gradient(90deg, transparent, var(--fsp-line-strong), transparent);
}

/*
 * Righe orizzontali finissime sopra a tutto, come un vecchio monitor.
 * pointer-events:none è indispensabile: il livello copre l'intera
 * pagina e senza intercetterebbe ogni click destinato alle schede.
 */
.fsp-scanlines {
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: .35;
	background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px);
}

/* --------------------------------------------------------------------
   BARRA DI NAVIGAZIONE
   -------------------------------------------------------------------- */

.fsp-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 18px;
}

.fsp-topbar__link {
	display: inline-block;
	padding: 10px 20px;
	background: rgba(14, 16, 18, .9);
	border: 1px solid var(--fsp-line-strong);
	border-radius: var(--fsp-radius);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.fsp-topbar__link:hover,
.fsp-topbar__link:focus-visible {
	background: rgba(216, 219, 222, .1);
	border-color: rgba(216, 219, 222, .85);
	color: #fff;
}

/* --------------------------------------------------------------------
   SFONDO FERMO E FUMO
   -------------------------------------------------------------------- */

/*
 * Sfondo che resta fermo mentre il contenuto scorre.
 *
 * Si usa position:fixed su un elemento e non background-attachment:fixed
 * su uno sfondo CSS: la seconda strada su iOS non funziona da anni, e
 * dove funziona costa di più perché il browser ridipinge lo sfondo ad
 * ogni scorrimento.
 *
 * L'avvertenza da ricordare: position:fixed si aggancia al primo
 * antenato con transform, filter o contain, non al viewport. Qui gli
 * antenati sono solo .fsp-archive / .fsp-single, che non ne hanno — se
 * un domani si aggiunge un transform lì sopra, lo sfondo si sgancia e
 * ricomincia a scorrere.
 */
.fsp-archive--bg-fixed .fsp-archive__bg,
.fsp-archive--bg-smoke .fsp-archive__bg,
.fsp-single--bg-fixed .fsp-single__bg,
.fsp-single--bg-smoke .fsp-single__bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

/* Anche il velo va tenuto fermo, o scorrendo si staccherebbe dalla foto
   che sta scurendo. */
.fsp-archive--bg-fixed .fsp-archive__overlay,
.fsp-archive--bg-smoke .fsp-archive__overlay,
.fsp-single--bg-fixed .fsp-single__overlay,
.fsp-single--bg-smoke .fsp-single__overlay {
	position: fixed;
	inset: 0;
}

/* Contenitore del canvas del fumo: riempie lo schermo e non intercetta
   mai i click, o coprirebbe l'intera griglia. */
.fsp-smoke {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.fsp-smoke canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Il fumo esiste solo dove è stato scelto: altrove il contenitore resta
   in pagina ma vuoto, e questa regola lo toglie di mezzo del tutto. */
.fsp-archive:not(.fsp-archive--bg-smoke) .fsp-smoke,
.fsp-single:not(.fsp-single--bg-smoke) .fsp-smoke {
	display: none;
}

/*
 * Su telefono, quando l'effetto non è stato richiesto: lo sfondo torna a
 * scorrere con la pagina e il fumo sparisce. La regola sta in una media
 * query e non nel JavaScript perché deve valere anche a script bloccato,
 * ed è il caso in cui conta di più — un telefono che non esegue lo
 * script è quasi sempre un telefono lento.
 */
@media (max-width: 700px) {
	.fsp-no-effect-mobile .fsp-archive__bg,
	.fsp-no-effect-mobile .fsp-single__bg {
		position: absolute;
	}

	.fsp-no-effect-mobile .fsp-archive__overlay,
	.fsp-no-effect-mobile .fsp-single__overlay {
		position: absolute;
	}

	.fsp-no-effect-mobile .fsp-smoke,
	.fsp-no-effect-mobile .fsp-brand-smoke {
		display: none;
	}

	/*
	 * Con l'effetto spento su telefono il marchio torna com'era, senza
	 * alone e a piena opacità.
	 *
	 * Bagliore e opacità ridotta esistono per fondere il logo con il
	 * fumo: sono il ripiego che tiene l'aspetto quando il canvas non
	 * parte, ma qui il canvas non deve partire per scelta. Senza fumo
	 * dietro, quell'alone resta appiccicato al logo senza motivo — ed è
	 * proprio quello che si vedeva.
	 */
	.fsp-no-effect-mobile .fsp-brand--smoke .fsp-archive__logo img,
	.fsp-no-effect-mobile .fsp-brand--smoke .fsp-archive__title {
		filter: none;
	}

	.fsp-no-effect-mobile .fsp-brand--smoke .fsp-archive__logo,
	.fsp-no-effect-mobile .fsp-brand--smoke .fsp-archive__title {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------
   ARCHIVIO — sfondo e intestazione
   -------------------------------------------------------------------- */

.fsp-archive {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	background: var(--fsp-bg);
}

/*
 * Il box dello sfondo ha un'altezza propria e l'immagine lo riempie
 * ritagliandosi dal centro.
 *
 * È il punto in cui conta il formato della foto: lasciando decidere
 * all'immagine (height:auto) una verticale si allungherebbe per mezza
 * pagina e una panoramica lascerebbe una striscia. Con un'altezza fissa
 * e "cover" il riquadro è sempre lo stesso, qualunque proporzione abbia
 * il file, e "center" fa sì che il ritaglio mangi in parti uguali dai
 * due lati invece di tagliare via tutto da una parte sola.
 */
.fsp-archive__bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
	overflow: hidden;
	line-height: 0;
	/* lvh: altezza a barre nascoste, che scorrere non cambia. Con vh il
	   box si ridimensionerebbe al ritrarsi della barra del browser. */
	height: 78vh;
	height: 78lvh;
	/*
	 * Dissolvenza sul bordo inferiore. Si usa una maschera sull'immagine
	 * invece di un rettangolo sfumato sovrapposto: la maschera agisce
	 * sulla foto stessa, quindi la sfumatura finisce esattamente dove
	 * finisce l'immagine. Sotto resta il fondo pagina, e il raccordo è
	 * con il colore giusto qualunque sia l'altezza del box.
	 */
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.fsp-archive__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Transizione usata dal cambio sfondo quando si filtra per sezione. */
	transition: opacity .5s ease;
}

/*
 * Durante il cambio le due immagini stanno una sopra l'altra: la nuova
 * entra da trasparente, la vecchia esce.
 */
.fsp-archive__bg img + img {
	position: absolute;
	inset: 0;
}

.fsp-archive__bg-image--in {
	opacity: 0;
}

.fsp-archive__bg-image--out {
	opacity: 0;
}

.fsp-archive__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(8, 9, 10, .74) 0%, rgba(8, 9, 10, .5) 32%, rgba(8, 9, 10, .78) 100%);
}

.fsp-archive__inner {
	position: relative;
	/* Sopra al fumo (z-index 1), che a sua volta sta sopra allo sfondo. */
	z-index: 2;
	max-width: 1280px;
	margin: 0 auto;
	padding: 54px 24px 100px;
}

.fsp-archive__header {
	position: relative;
	/* Sotto al livello del fumo (z-index 2), che disegna il marchio e
	   deve poterlo sovrapporre alle sue volute. */
	z-index: 1;
	text-align: center;
	margin-bottom: 34px;
}

.fsp-archive__title {
	margin: 0;
	font-size: clamp(30px, 6vw, 60px);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
}

/*
 * Contenitore del marchio: nessuno spazio aggiunto per il fumo.
 *
 * Il fumo vive in un livello suo (.fsp-brand-smoke) che si sovrappone
 * alla pagina senza farne parte, quindi accendere o spegnere l'effetto
 * non sposta di un pixel sottotitolo, filtri e griglia.
 */
.fsp-brand {
	position: relative;
}

/*
 * Livello del fumo dell'intestazione.
 *
 * Uno solo, e il marchio viene disegnato dentro al canvas: è l'unico
 * modo per avere l'ordine vero del pen — volute dietro, marchio, volute
 * davanti. Con due livelli sovrapposti quello sopra può solo velare
 * quello sotto, mai passargli dietro.
 *
 * position:fixed, quindi il fumo resta fermo mentre la pagina scorre.
 * Il marchio da solo resterebbe incollato lì: ci pensa il JavaScript,
 * disegnandolo spostato in su di quanto si è scorso e dissolvendolo
 * nello stesso spazio.
 */
.fsp-brand-smoke {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	/*
	 * lvh e non vh, con vh come ripiego per i browser che non lo
	 * conoscono. "vh" su telefono è legato all'altezza della finestra nel
	 * momento presente: quando la barra degli indirizzi si nasconde
	 * scorrendo, quel valore cambia e il livello si ridimensiona sotto.
	 * "lvh" è l'altezza a barre nascoste, un numero che scorrere non
	 * altera.
	 */
	height: 58vh;
	height: 58lvh;
	min-height: 400px;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
	/* Dissolvenza verso il basso: il fumo si perde nella pagina invece di
	   finire con un taglio netto a metà schermo. */
	-webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 42%, transparent 100%);
}

/*
 * Dissolvenza sui lati, tenuta separata da quella verticale.
 *
 * Le due maschere stanno su due elementi annidati invece che su uno solo
 * con mask-composite: quella proprietà è supportata a macchia di
 * leopardo, e dove non c'è il fumo resterebbe tagliato di squadro sui
 * bordi dello schermo.
 */
.fsp-brand-smoke__canvas {
	display: block;
	width: 100%;
	height: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

/*
 * Il marchio originale sparisce solo quando il canvas ha disegnato: la
 * classe la mette il JavaScript a lavoro finito. Si usa opacity e non
 * display:none perché il canvas si dimensiona e si posiziona su questo
 * blocco, e legge da qui quanto è grande il logo — togliendolo dal
 * flusso non ci sarebbe più niente da misurare.
 *
 * Resta leggibile dai lettori di schermo e dai motori di ricerca, che
 * dal canvas non ricaverebbero nulla.
 */
.fsp-brand.is-painted .fsp-archive__logo,
.fsp-brand.is-painted .fsp-archive__title {
	opacity: 0;
}

/*
 * Aspetto del marchio quando il canvas NON è in funzione: effetto
 * spento, JavaScript fermo, immagine non ancora scaricata. Opacità e
 * bagliore dalle impostazioni, così il ripiego somiglia comunque a
 * quello che si sarebbe visto.
 */
.fsp-brand--smoke .fsp-archive__logo,
.fsp-brand--smoke .fsp-archive__title {
	position: relative;
	z-index: 1;
	opacity: var(--fsp-logo-opacity, 1);
}

/*
 * drop-shadow e non box-shadow: la seconda disegnerebbe l'alone attorno
 * al rettangolo dell'immagine, questa lo segue lungo i contorni veri
 * delle forme, rispettando la trasparenza del PNG. Tre ombre a raggio
 * crescente invece di una larga: una sola risulta piatta, tre danno un
 * nucleo denso che si dirada, come fa la luce vera.
 */
.fsp-brand--smoke .fsp-archive__logo img,
.fsp-brand--smoke .fsp-archive__title {
	filter:
		drop-shadow(0 0 calc(var(--fsp-logo-glow, 0px) * .35) var(--fsp-glow-color, #8fb6c8))
		drop-shadow(0 0 var(--fsp-logo-glow, 0px) var(--fsp-glow-color, #8fb6c8))
		drop-shadow(0 0 calc(var(--fsp-logo-glow, 0px) * 2.2) var(--fsp-glow-color, #8fb6c8));
}

/*
 * Logo al posto del titolo. L'altezza arriva dalle impostazioni come
 * variabile inline; su schermo stretto si scende al 70% di quel valore,
 * perché un logo pensato per il desktop occuperebbe altrimenti mezza
 * schermata di un telefono.
 */
.fsp-archive__logo {
	margin: 0;
	line-height: 0;
}

.fsp-archive__logo img {
	display: block;
	width: auto;
	height: var(--fsp-logo-height, 90px);
	max-width: 100%;
	margin: 0 auto;
	object-fit: contain;
}

.fsp-archive__subtitle {
	margin-top: 10px;
	font-size: 13px;
	letter-spacing: .3em;
	color: var(--fsp-silver-dim);
}

.fsp-archive__tag {
	margin-top: 14px;
	font-size: 10px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--fsp-silver-dim);
}

/* --------------------------------------------------------------------
   ARCHIVIO — barra dei filtri
   -------------------------------------------------------------------- */

.fsp-filters {
	margin: 0 auto 38px;
	padding: 14px 22px 16px;
	max-width: 1000px;
	background: var(--fsp-panel-soft);
	border: 1px solid var(--fsp-line);
	border-radius: var(--fsp-radius);
	backdrop-filter: blur(6px);
}

/* Apre e chiude l'elenco dei filtri. */
.fsp-filters__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 6px 0;
	background: none;
	border: 0;
	color: var(--fsp-silver-dim);
	font-family: inherit;
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .15s ease;
}

.fsp-filters__toggle:hover,
.fsp-filters__toggle.is-open {
	color: var(--fsp-silver);
}

/* Numero di filtri attivi: a pannello chiuso è l'unico segnale che la
   griglia non sta mostrando tutto. */
.fsp-filters__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: rgba(216, 219, 222, .16);
	border: 1px solid var(--fsp-line-strong);
	border-radius: 10px;
	font-size: 10px;
	letter-spacing: 0;
	color: #fff;
}

.fsp-filters__badge[hidden] {
	display: none;
}

/* Freccia che ruota all'apertura. */
.fsp-filters__chevron {
	margin-left: auto;
	width: 8px;
	height: 8px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.fsp-filters__toggle.is-open .fsp-filters__chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.fsp-filters__panel {
	padding-top: 16px;
}

.fsp-filters__panel[hidden] {
	display: none;
}

.fsp-filters__group + .fsp-filters__group {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--fsp-line);
}

.fsp-filters__legend {
	margin-bottom: 10px;
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--fsp-silver-dim);
}

.fsp-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fsp-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid var(--fsp-line);
	border-radius: var(--fsp-radius);
	color: var(--fsp-silver-dim);
	font-family: inherit;
	font-size: 12px;
	letter-spacing: .08em;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.fsp-chip:hover {
	border-color: var(--fsp-line-strong);
	color: var(--fsp-silver);
}

.fsp-chip.is-active {
	background: rgba(216, 219, 222, .12);
	border-color: rgba(216, 219, 222, .85);
	color: #fff;
}

.fsp-chip--type {
	font-size: 11px;
}

.fsp-chip__count {
	font-size: 10px;
	opacity: .6;
}

.fsp-filters__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--fsp-line);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fsp-silver-dim);
}

.fsp-filters__reset {
	padding: 6px 12px;
	background: transparent;
	border: 1px solid var(--fsp-line);
	border-radius: var(--fsp-radius);
	color: var(--fsp-silver-dim);
	font-family: inherit;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
}

.fsp-filters__reset:hover {
	border-color: var(--fsp-line-strong);
	color: #fff;
}

/* --------------------------------------------------------------------
   ARCHIVIO — griglia e schede
   -------------------------------------------------------------------- */

.fsp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
}

.fsp-card {
	position: relative;
	background: var(--fsp-panel);
	border: 1px solid var(--fsp-line);
	border-radius: var(--fsp-radius);
	overflow: hidden;
	/* Il riordino anima transform via JS: qui si dichiara solo
	   l'aspetto, la transizione la imposta lo script per non farla
	   scattare anche sull'hover. */
	will-change: transform;
}

.fsp-card:hover {
	border-color: var(--fsp-line-strong);
}

/*
 * Le schede escluse dai filtri si nascondono con l'attributo hidden. La
 * regola è esplicita e con !important perché basta un reset che dichiari
 * un display su questi elementi per battere il comportamento di default
 * di [hidden], lasciando in griglia schede che dovevano sparire.
 */
.fsp-card[hidden] {
	display: none !important;
}

.fsp-card__link {
	display: block;
	height: 100%;
}

.fsp-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #0d0f11;
}

.fsp-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* Le foto partono desaturate e riprendono colore al passaggio del
	   mouse: tiene la griglia coerente anche con scatti fatti in
	   condizioni di luce diverse. */
	filter: grayscale(.55) contrast(1.05);
	transition: transform .5s ease, filter .4s ease;
}

.fsp-card:hover .fsp-card__media img {
	transform: scale(1.05);
	filter: grayscale(0) contrast(1);
}

.fsp-card__placeholder {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #0d0f11 0 10px, #101315 10px 20px);
}

/* Angoli a squadra, come le mire di una scheda tecnica. */
.fsp-card__corner {
	position: absolute;
	width: 12px;
	height: 12px;
	border: 1px solid rgba(216, 219, 222, .55);
	z-index: 2;
	pointer-events: none;
}

.fsp-card__corner--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.fsp-card__corner--tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.fsp-card__corner--bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.fsp-card__corner--br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.fsp-card__body {
	padding: 14px 16px 18px;
	border-top: 1px solid var(--fsp-line);
}

.fsp-card__code {
	font-size: 10px;
	letter-spacing: .24em;
	color: var(--fsp-silver-dim);
}

.fsp-card__title {
	margin: 6px 0 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}

.fsp-card__section {
	margin-top: 8px;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--fsp-silver-dim);
}

/* Entrata di una scheda che rientra nel filtro. */
@keyframes fsp-card-in {
	from { opacity: 0; transform: scale(.94); }
	to   { opacity: 1; transform: none; }
}

.fsp-card--in {
	animation: fsp-card-in .38s cubic-bezier(.22, .61, .36, 1) both;
}

.fsp-empty {
	margin: 60px 0;
	text-align: center;
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--fsp-silver-dim);
}

/* --------------------------------------------------------------------
   SCHEDA SINGOLA
   -------------------------------------------------------------------- */

.fsp-single {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	background: var(--fsp-bg);
	padding-bottom: 80px;
}

/*
 * position:absolute e non fixed: un tema o un plugin che applica
 * transform/filter/contain a un antenato riaggancerebbe un position:
 * fixed a quell'elemento invece che al viewport, spostando lo sfondo.
 */
/* Stesso criterio dello sfondo dell'archivio: altezza fissa del box e
   immagine ritagliata dal centro, così il formato del file non decide
   l'impaginazione della pagina. */
.fsp-single__bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
	height: 88vh;
	height: 88lvh;
	overflow: hidden;
	line-height: 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.fsp-single__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Velo scuro leggero sopra allo sfondo: circa il 20%, quanto basta a
 * staccare il testo senza spegnere la foto.
 *
 * Sotto resta però una sfumatura verso il fondo pagina. Non è
 * decorazione: l'immagine finisce a una certa altezza e senza raccordo
 * si vedrebbe il taglio netto fra la foto e il nero. La sfumatura parte
 * bassa (dal 55% in giù) così la parte alta, quella che si guarda,
 * resta al 20% pieno.
 */
.fsp-single__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(8, 9, 10, .2) 0%, rgba(8, 9, 10, .2) 100%);
}

.fsp-single__inner {
	position: relative;
	z-index: 2;
	max-width: 1180px;
	margin: 0 auto;
	padding: 28px 24px 0;
}

.fsp-single__header {
	margin: 28px 0 32px;
	text-align: center;
}

/*
 * Con il velo al 20% il titolo può capitare sopra una zona chiara della
 * foto, dove il bianco su bianco sparisce: l'ombra lo tiene leggibile
 * senza dover riscurire tutto lo sfondo.
 */
.fsp-single__title {
	margin: 0;
	font-size: clamp(28px, 5vw, 52px);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .7);
}

.fsp-single__code {
	margin-top: 10px;
	font-size: 11px;
	letter-spacing: .3em;
	color: var(--fsp-silver);
	text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

/*
 * Immagine a sinistra, dati a destra. Su schermi stretti le due colonne
 * si impilano: la foto resta sopra, che è quello che si vuole vedere per
 * primo su un telefono.
 */
.fsp-single__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	align-items: start;
}

@media (min-width: 900px) {
	/*
	 * La colonna dei dati è più larga di quanto servirebbe alla sola
	 * tabella: sotto ci sono anche le note di lavorazione, e su una
	 * colonna stretta un testo di qualche paragrafo diventerebbe una
	 * striscia altissima da leggere tre parole per riga.
	 */
	.fsp-single__cols {
		grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
		gap: 32px;
	}
}

.fsp-single__media {
	position: relative;
	margin: 0;
	background: var(--fsp-panel);
	border: 1px solid var(--fsp-line);
	border-radius: var(--fsp-radius);
	overflow: hidden;
}

.fsp-single__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.fsp-single__zoom img {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity .12s ease;
}

/* Mezzo passaggio dello scambio: la vecchia foto sfuma prima che la
   nuova prenda il suo posto, già caricata. */
.fsp-single__zoom img.is-swapping {
	opacity: 0;
}

/*
 * Miniature volutamente piccole: l'immagine principale sopra deve
 * restare quella che si guarda, queste sono l'indice degli altri
 * scatti.
 */
.fsp-single__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.fsp-single__gallery-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--fsp-line);
	border-radius: var(--fsp-radius);
	background: var(--fsp-panel);
	cursor: zoom-in;
	overflow: hidden;
	transition: border-color .15s ease;
}

.fsp-single__gallery-btn:hover {
	border-color: var(--fsp-line-strong);
}

/* Quale scatto si sta guardando in grande. */
.fsp-single__gallery-btn.is-active {
	border-color: rgba(216, 219, 222, .9);
}

.fsp-single__gallery-btn.is-active img {
	opacity: 1;
}

.fsp-single__gallery-btn img {
	opacity: .55;
	transition: opacity .2s ease;
}

.fsp-single__gallery-btn:hover img {
	opacity: .85;
}

.fsp-single__gallery-btn img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* --------------------------------------------------------------------
   PANNELLO DATI
   -------------------------------------------------------------------- */

.fsp-panel {
	position: relative;
	padding: 24px 22px;
	background: var(--fsp-panel-soft);
	border: 1px solid var(--fsp-line-strong);
	border-radius: var(--fsp-radius);
	backdrop-filter: blur(6px);
}

/* Quattro viti agli angoli: dettaglio da targa avvitata sul pannello. */
.fsp-panel__screw {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(216, 219, 222, .35);
}

.fsp-panel__screw--tl { top: 8px; left: 8px; }
.fsp-panel__screw--tr { top: 8px; right: 8px; }
.fsp-panel__screw--bl { bottom: 8px; left: 8px; }
.fsp-panel__screw--br { bottom: 8px; right: 8px; }

.fsp-panel__heading {
	margin: 0;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--fsp-silver-dim);
}

.fsp-panel__rule {
	height: 1px;
	margin: 14px 0;
	background: var(--fsp-line);
}

.fsp-panel__specs {
	margin: 0;
}

.fsp-panel__spec {
	display: grid;
	grid-template-columns: minmax(96px, 38%) 1fr;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px dashed rgba(216, 219, 222, .1);
	font-size: 13px;
}

.fsp-panel__spec:last-child {
	border-bottom: 0;
}

.fsp-panel__spec dt {
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fsp-silver-dim);
	padding-top: 2px;
}

.fsp-panel__spec dd {
	margin: 0;
	color: var(--fsp-silver);
}

.fsp-panel__empty {
	margin: 0;
	font-size: 12px;
	color: var(--fsp-silver-dim);
}

.fsp-panel__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/*
 * Etichette e non link: niente cursore a manina né stato hover, così non
 * promettono un click che non c'è.
 */
.fsp-term {
	display: inline-block;
	padding: 5px 10px;
	border: 1px solid var(--fsp-line);
	border-radius: var(--fsp-radius);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fsp-silver-dim);
}

.fsp-term--section {
	border-color: rgba(216, 219, 222, .4);
	color: var(--fsp-silver);
}

/* --------------------------------------------------------------------
   CONTATTO
   -------------------------------------------------------------------- */

/*
 * Riquadro a sé, sotto la scheda tecnica: prima era in coda al pannello
 * e il pulsante si leggeva come l'ultima riga dei dati invece che come
 * l'invito ad agire che è.
 */
.fsp-contact {
	margin: 16px 0 0;
	padding: 22px;
	background: var(--fsp-panel-soft);
	border: 1px solid var(--fsp-line-strong);
	border-radius: var(--fsp-radius);
	backdrop-filter: blur(6px);
}

.fsp-contact__title {
	margin-bottom: 12px;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--fsp-silver-dim);
}

.fsp-contact__btn {
	display: block;
	width: 100%;
	padding: 13px 16px;
	margin-bottom: 8px;
	background: rgba(216, 219, 222, .1);
	border: 1px solid rgba(216, 219, 222, .6);
	border-radius: var(--fsp-radius);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: center;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.fsp-contact__btn:last-of-type {
	margin-bottom: 0;
}

.fsp-contact__btn:hover {
	background: rgba(216, 219, 222, .2);
	border-color: #fff;
	color: #fff;
}

/* Rimanda al post del pezzo, non al profilo: si distingue dagli altri
   perché è un invito a guardare, non a scrivere. */
.fsp-contact__btn--post {
	background: transparent;
	border-color: var(--fsp-line-strong);
}

.fsp-contact__btn--post:hover {
	background: rgba(216, 219, 222, .12);
}

.fsp-contact__btn--wa {
	background: rgba(37, 211, 102, .12);
	border-color: rgba(37, 211, 102, .55);
}

.fsp-contact__btn--wa:hover {
	background: rgba(37, 211, 102, .22);
	border-color: rgba(37, 211, 102, .9);
}

.fsp-contact__hint {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: var(--fsp-silver-dim);
}

.fsp-contact__hint strong {
	color: var(--fsp-silver);
	font-weight: 500;
}

/* --------------------------------------------------------------------
   NOTE DI LAVORAZIONE
   -------------------------------------------------------------------- */

/* Segue la scheda tecnica nella stessa colonna: stesso fondo e stesso
   bordo del pannello, così le due parti si leggono come un blocco solo. */
.fsp-note {
	margin: 16px 0 0;
	padding: 22px;
	background: var(--fsp-panel-soft);
	border: 1px solid var(--fsp-line);
	border-radius: var(--fsp-radius);
	backdrop-filter: blur(6px);
}

.fsp-note__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
	font-size: 10px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--fsp-silver-dim);
	white-space: nowrap;
}

.fsp-note__rule {
	flex: 1;
	height: 1px;
	background: var(--fsp-line);
}

/*
 * Stesso corpo e stesso colore dei valori della scheda tecnica: le due
 * parti si leggono di seguito e devono sembrare lo stesso documento,
 * non due blocchi impaginati da persone diverse.
 */
.fsp-note__text {
	font-size: 13px;
	line-height: 1.8;
	color: var(--fsp-silver);
}

.fsp-note__text p:first-child { margin-top: 0; }
.fsp-note__text p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------
   PEZZO PRECEDENTE / SUCCESSIVO
   -------------------------------------------------------------------- */

.fsp-pager {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: 30px;
}

@media (min-width: 700px) {
	.fsp-pager {
		grid-template-columns: 1fr 1fr;
	}
}

.fsp-pager__link {
	display: block;
	padding: 16px 18px;
	background: rgba(13, 15, 17, .8);
	border: 1px solid var(--fsp-line);
	border-radius: var(--fsp-radius);
	transition: border-color .15s ease;
}

.fsp-pager__link:hover {
	border-color: var(--fsp-line-strong);
}

.fsp-pager__link--next {
	text-align: right;
}

.fsp-pager__dir {
	display: block;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--fsp-silver-dim);
}

.fsp-pager__title {
	display: block;
	margin-top: 6px;
	font-family: 'Saira Condensed', 'Arial Narrow', sans-serif;
	font-size: 17px;
	text-transform: uppercase;
	color: var(--fsp-silver);
}

/* --------------------------------------------------------------------
   INGRANDIMENTO FOTO
   -------------------------------------------------------------------- */

.fsp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background: rgba(4, 5, 6, .94);
	cursor: zoom-out;
}

.fsp-lightbox[hidden] {
	display: none;
}

.fsp-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: default;
}

.fsp-lightbox__close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 42px;
	height: 42px;
	background: transparent;
	border: 1px solid var(--fsp-line);
	border-radius: var(--fsp-radius);
	color: var(--fsp-silver);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.fsp-lightbox__close:hover {
	border-color: #fff;
	color: #fff;
}

/* --------------------------------------------------------------------
   SCHERMI STRETTI
   -------------------------------------------------------------------- */

@media (max-width: 700px) {
	.fsp-archive__inner {
		padding: 34px 16px 70px;
	}

	.fsp-single__inner {
		padding: 20px 16px 0;
	}

	.fsp-filters {
		padding: 12px 16px 14px;
	}

	.fsp-archive__logo img {
		height: calc(var(--fsp-logo-height, 90px) * .7);
	}

	.fsp-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}

	.fsp-card__title {
		font-size: 15px;
	}

	/* Su una colonna sola le etichette vanno sopra al valore: due
	   colonne in 320px lascerebbero ai valori lunghi tre caratteri per
	   riga. */
	.fsp-panel__spec {
		grid-template-columns: 1fr;
		gap: 3px;
	}
}

/*
 * Chi ha chiesto meno animazioni al sistema operativo le vede sparire
 * tutte: il JS salta già il riordino animato, qui si azzerano anche
 * transizioni e keyframe dichiarati in CSS.
 */
@media (prefers-reduced-motion: reduce) {
	body.fsp-body *,
	body.fsp-body *::before,
	body.fsp-body *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------
   RIGA IN FONDO ALLA PAGINA
   -------------------------------------------------------------------- */

/*
 * Una riga sola, centrata, volutamente in sordina: sono informazioni
 * che devono esserci ma non chiedere attenzione. Il colore è appena
 * staccato dallo sfondo, quel tanto che basta per leggerle cercandole.
 *
 * Vive fuori dai contenitori con lo sfondo fotografico, quindi non ha
 * bisogno di alcun z-index: appoggiata sul fondo pagina non incontra i
 * livelli dello sfondo, che sono fissi e coprono lo schermo.
 */
.fsp-footer {
	padding: 26px 20px 30px;
	background: var(--fsp-bg);
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	line-height: 1.9;
	letter-spacing: .06em;
	text-align: center;
	color: rgba(216, 219, 222, .3);
}

/*
 * I link si distinguono appena, e si accendono solo al passaggio: una
 * sottolineatura permanente su una riga così piccola farebbe più rumore
 * del testo stesso.
 */
.fsp-footer a {
	color: rgba(216, 219, 222, .42);
	text-decoration: none;
}

.fsp-footer a:hover,
.fsp-footer a:focus-visible {
	color: rgba(216, 219, 222, .8);
	text-decoration: underline;
}

.fsp-footer__sep {
	opacity: .55;
}

@media (max-width: 700px) {
	/* Su schermo stretto la riga va a capo da sola: si allarga solo
	   l'interlinea, perché le righe spezzate non si tocchino. */
	.fsp-footer {
		padding: 22px 16px 26px;
		line-height: 2.1;
	}
}