/* Dott. Federico Previtera — foglio di stile.
   Linguaggio da tavola anatomica e da laboratorio di analisi del movimento: fondo chiaro clinico, maglia
   millimetrata, linee di quota, marcatori. Geist per il testo, Geist Mono solo per dati, etichette e numerazioni. */

@font-face {
	font-family: 'Geist';
	src: url('fonts/geist-latin-wght-normal.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: 'Geist Mono';
	src: url('fonts/geist-mono-latin-wght-normal.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

/* Token. Palette chiusa: fondo, inchiostro, linea e un solo colore segnale. */
:root {
	--fondo: #f8fafb;
	--fondo-2: #edf2f4;
	--inchiostro: #0e1a22;
	--inchiostro-2: #4b5b66;
	--linea: #d3dde3;
	--linea-2: #e4ebef;
	--segnale: #0b6e78;

	--font-testo: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-dati: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	--margine: 1.25rem;
	--foglio: 78rem;
	--testata: 3.75rem;
	--maglia: 8px;
}
@media (min-width: 48rem) {
	:root {
		--margine: 2.5rem;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--testata) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--fondo);
	color: var(--inchiostro);
	font-family: var(--font-testo);
	font-size: 1.0625rem;
	line-height: 1.6;
	font-feature-settings: 'ss01';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: var(--segnale);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}
a:hover {
	color: var(--segnale);
}
:focus-visible {
	outline: 2px solid var(--segnale);
	outline-offset: 3px;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-wrap: balance;
}
p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

.salta {
	position: absolute;
	left: var(--margine);
	top: -4rem;
	z-index: 20;
	padding: 0.6rem 1rem;
	background: var(--inchiostro);
	color: var(--fondo);
}
.salta:focus {
	top: 0.5rem;
}

/* Dati: Geist Mono, maiuscolo spaziato. Solo per etichette, numerazioni e valori. */
.dato,
.rubrica {
	font-family: var(--font-dati);
	font-size: 0.75rem;
	font-weight: 450;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}
.rubrica {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	color: var(--segnale);
}
.rubrica::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	flex: none;
}

.foglio {
	width: 100%;
	max-width: var(--foglio);
	margin-inline: auto;
	padding-inline: var(--margine);
}

/* Maglia millimetrata: 8 px, rinforzata ogni 40. */
.maglia {
	background-color: var(--fondo);
	background-image:
		linear-gradient(var(--linea) 1px, transparent 1px),
		linear-gradient(90deg, var(--linea) 1px, transparent 1px),
		linear-gradient(var(--linea-2) 1px, transparent 1px),
		linear-gradient(90deg, var(--linea-2) 1px, transparent 1px);
	background-size:
		calc(var(--maglia) * 5) calc(var(--maglia) * 5),
		calc(var(--maglia) * 5) calc(var(--maglia) * 5),
		var(--maglia) var(--maglia),
		var(--maglia) var(--maglia);
	background-position: -1px -1px;
}

/* Testata */
.testata {
	position: sticky;
	top: 0;
	z-index: 10;
	background: color-mix(in srgb, var(--fondo) 92%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--linea);
}
.testata__riga {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--testata);
}
.marchio {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 44px;
	text-decoration: none;
	font-weight: 550;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.marchio__segno {
	width: 1.75rem;
	height: 1.75rem;
	flex: none;
	color: var(--segnale);
}
.marchio .dato {
	color: var(--inchiostro-2);
	font-weight: 400;
}
.menu {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 0.7rem;
	text-decoration: none;
	font-size: 0.9375rem;
	color: var(--inchiostro-2);
}
.menu a:hover,
.menu a[aria-current='page'] {
	color: var(--inchiostro);
}
.menu a[aria-current='page'] {
	text-decoration: underline;
	text-decoration-color: var(--segnale);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.5em;
}
@media (max-width: 40rem) {
	.testata__riga {
		flex-wrap: wrap;
		gap: 0;
	}
	.marchio .dato {
		display: none;
	}
	.menu {
		width: calc(100% + 1.4rem);
		margin-inline: -0.7rem;
		border-top: 1px solid var(--linea-2);
	}
	.menu a {
		font-size: 0.875rem;
	}
}

/* Apertura della home */
.apertura {
	border-bottom: 1px solid var(--linea);
}
.apertura__griglia {
	display: grid;
	gap: 2.5rem;
	padding-block: 3rem 3.5rem;
}
@media (min-width: 62rem) {
	.apertura__griglia {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		align-items: center;
		gap: 4rem;
		padding-block: 5rem;
	}
}
.apertura__titolo {
	font-size: clamp(2.75rem, 8vw, 5.25rem);
	letter-spacing: -0.035em;
	line-height: 0.98;
}
.apertura__titolo .dato {
	display: block;
	margin-bottom: 1rem;
	font-size: 0.8125rem;
	color: var(--inchiostro-2);
	letter-spacing: 0.06em;
	line-height: 1;
}
.apertura__qualifica {
	margin: 1.5rem 0 0;
	font-size: clamp(1.125rem, 2.2vw, 1.375rem);
	line-height: 1.4;
	color: var(--inchiostro-2);
	max-width: 30rem;
}
.apertura__qualifica strong {
	font-weight: 500;
	color: var(--inchiostro);
}
.azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-top: 2.25rem;
}
.pulsante {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 48px;
	padding: 0.75rem 1.25rem;
	background: var(--inchiostro);
	color: var(--fondo);
	text-decoration: none;
	font-weight: 500;
	border: 1px solid var(--inchiostro);
}
.pulsante:hover {
	background: var(--segnale);
	border-color: var(--segnale);
	color: var(--fondo);
}
.freccia {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-weight: 500;
	text-decoration: none;
}
.freccia::after {
	content: '→';
	font-family: var(--font-dati);
	color: var(--segnale);
	transition: transform 0.2s;
}
.freccia:hover::after {
	transform: translateX(3px);
}
.apertura__dati {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	margin: 2.5rem 0 0;
	padding: 1rem 0 0;
	border-top: 1px solid var(--linea);
	color: var(--inchiostro-2);
	list-style: none;
}

/* Tavola: cornice con crocini di registro agli angoli. */
.tavola {
	position: relative;
	border: 1px solid var(--linea);
	background: var(--fondo);
}
.tavola::before,
.tavola::after {
	content: '';
	position: absolute;
	width: 13px;
	height: 13px;
	background:
		linear-gradient(var(--inchiostro-2), var(--inchiostro-2)) center / 1px 100% no-repeat,
		linear-gradient(var(--inchiostro-2), var(--inchiostro-2)) center / 100% 1px no-repeat;
}
.tavola::before {
	top: -7px;
	left: -7px;
}
.tavola::after {
	right: -7px;
	bottom: -7px;
}

/* Tavola del cammino */
.cammino {
	margin: 0;
}
.cammino__testa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.9rem;
	padding: 0.6rem 0.9rem;
	border-bottom: 1px solid var(--linea);
	font-size: 0.875rem;
}
.cammino__titolo {
	font-weight: 500;
}
.cammino__titolo span {
	color: var(--inchiostro-2);
	font-weight: 400;
}
@media (max-width: 90rem) {
	.cammino__titolo span {
		display: none;
	}
}
.cammino__ciclo {
	margin-left: auto;
	color: var(--segnale);
	white-space: nowrap;
}
/* Spazio fisso per la fase: «appoggio» e «oscillazione» non devono cambiare l'impaginazione della testa. */
.cammino__fase {
	display: inline-block;
	min-width: 13ch;
}
.cammino__pausa {
	min-height: 32px;
	min-width: 4.5rem;
	padding: 0.2rem 0.6rem;
	border: 1px solid var(--linea);
	background: var(--fondo);
	color: var(--inchiostro-2);
	cursor: pointer;
}
.cammino__pausa:hover {
	color: var(--inchiostro);
	border-color: var(--inchiostro-2);
}
.cammino__figura {
	width: 100%;
	height: auto;
	max-height: 31rem;
	margin-inline: auto;
	overflow: hidden;
}
.cammino__figura .suolo {
	stroke: var(--inchiostro);
	stroke-width: 1;
}
.cammino__figura .nastro line {
	stroke: var(--inchiostro-2);
	stroke-width: 1;
}

/* Pelle: contorno disegnato sotto il pieno, così resta solo il profilo esterno. */
.cammino__figura .pelle__contorno {
	fill: none;
	stroke: var(--linea);
	stroke-width: 2.4;
	stroke-linejoin: round;
}
.cammino__figura .pelle__pieno {
	fill: var(--fondo-2);
}
.cammino__figura .pelle--lontano .pelle__pieno {
	fill: var(--linea-2);
}

/* Scheletro: linea sottile d'inchiostro; il lato lontano più chiaro. */
.cammino__figura .ossa path,
.cammino__figura .ossa ellipse {
	fill: var(--fondo);
	fill-opacity: 0.55;
	stroke: var(--inchiostro);
	stroke-width: 0.7;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.cammino__figura .ossa .coste {
	fill: none;
	stroke-width: 0.55;
}
.cammino__figura .ossa .vertebre {
	stroke-width: 0.5;
}
.cammino__figura .ossa--lontano path,
.cammino__figura .ossa--lontano ellipse {
	fill: none;
	stroke: var(--inchiostro-2);
	stroke-opacity: 0.55;
	stroke-width: 0.6;
}

/* Muscoli: opacità e spessore seguono l'attivazione (impostati dal JS). */
.cammino__figura .muscolo {
	fill: var(--segnale);
	fill-opacity: 0.1;
	stroke: var(--segnale);
	stroke-width: 0.7;
	stroke-linejoin: round;
}
.cammino__figura .tendine {
	fill: none;
	stroke: var(--segnale);
	stroke-width: 1.1;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-opacity: 0.7;
}
.cammino__figura .richiamo {
	fill: none;
	stroke: var(--segnale);
	stroke-width: 0.8;
}

.cammino__figura .traiettoria {
	fill: none;
	stroke: var(--segnale);
	stroke-width: 1;
	stroke-dasharray: 2 4;
	opacity: 0.55;
}
.cammino__figura .marcatore {
	fill: var(--segnale);
	stroke: var(--fondo);
	stroke-width: 1.2;
}
.cammino__figura .marcatori--lontano .marcatore {
	fill: var(--fondo);
	stroke: var(--segnale);
	stroke-opacity: 0.6;
}
.cammino__figura .reazione {
	stroke: var(--segnale);
	stroke-width: 1.5;
	marker-end: url(#punta-freccia);
}
.cammino__figura .reazione--lontano {
	stroke-dasharray: 3 3;
}
.cammino__figura .arco {
	fill: none;
	stroke: var(--segnale);
	stroke-width: 0.8;
	stroke-dasharray: 2 2;
}
.cammino__figura .etichetta {
	font-family: var(--font-dati);
	font-size: 10px;
	letter-spacing: 0.04em;
	fill: var(--segnale);
	paint-order: stroke;
	stroke: var(--fondo);
	stroke-width: 3px;
	stroke-linejoin: round;
}
.cammino__figura .etichetta--muscolo {
	font-size: 9.5px;
	text-transform: uppercase;
	fill: var(--inchiostro);
}
.cammino__figura .etichetta__valore {
	fill: var(--segnale);
}

/* Strati spenti dai comandi */
.senza-ossa .strato-ossa,
.senza-muscoli .strato-muscoli,
.senza-marcatori .strato-marcatori {
	display: none;
}

.cammino__comandi {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.55rem 0.9rem;
	border-top: 1px solid var(--linea);
}
.cammino__comandi[hidden] {
	display: none;
}
.cammino__gruppo {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--inchiostro-2);
}
.cammino__gruppo > .dato:first-child {
	margin-right: 0.3rem;
}
.cammino__interruttore {
	min-height: 32px;
	padding: 0.2rem 0.55rem;
	border: 1px solid var(--linea);
	background: var(--fondo);
	color: var(--inchiostro-2);
	cursor: pointer;
}
.cammino__interruttore:hover {
	border-color: var(--inchiostro-2);
	color: var(--inchiostro);
}
.cammino__interruttore[aria-pressed='true'] {
	border-color: var(--segnale);
	background: var(--segnale);
	color: var(--fondo);
}

/* Due pannelli di grafici: con JS stanno nella stessa cella, così cambiare scheda non cambia l'altezza. */
.con-schede .cammino__pannelli {
	display: grid;
}
.con-schede .cammino__pannelli > * {
	grid-area: 1 / 1;
}
.cammino__pannelli > .nascosto {
	visibility: hidden;
}
.cammino__legenda {
	margin: 0.2rem 0 0.15rem;
	color: var(--inchiostro-2);
	font-size: 0.6875rem;
}
.cammino__grafici {
	display: grid;
	gap: 0;
	padding: 0.4rem 0.9rem 0.2rem;
	border-top: 1px solid var(--linea);
}
.grafico {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr) 4.25rem;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.2rem;
	font-size: 0.875rem;
}
.grafico + .grafico {
	border-top: 1px solid var(--linea-2);
}
.grafico__tracciato {
	width: 100%;
	height: 2.3rem;
}
.grafico__appoggio {
	fill: var(--fondo-2);
}
.grafico__zero {
	stroke: var(--linea);
	stroke-dasharray: 2 3;
	vector-effect: non-scaling-stroke;
}
.grafico__curva {
	fill: none;
	stroke: var(--inchiostro);
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
}
.grafico__cursore {
	stroke: var(--segnale);
	vector-effect: non-scaling-stroke;
}
.grafico__punto {
	/* Segmento di lunghezza zero con estremità tonde: un punto che resta tondo anche col tracciato deformato. */
	stroke: var(--segnale);
	stroke-width: 7px;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}
.grafico__valore {
	text-align: right;
	color: var(--segnale);
	font-size: 0.8125rem;
}
.grafico--emg {
	grid-template-columns: 7.75rem minmax(0, 1fr) 2.75rem;
	padding-block: 0.05rem;
	font-size: 0.8125rem;
}
.grafico--emg .grafico__tracciato {
	height: 1.05rem;
}
.grafico__inviluppo {
	fill: var(--segnale);
	fill-opacity: 0.35;
	stroke: var(--segnale);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
.cammino__grafici--emg .grafico--asse {
	grid-template-columns: 7.75rem minmax(0, 1fr) 2.75rem;
}
.grafico--asse {
	border-top: 0 !important;
	padding-top: 0;
	color: var(--inchiostro-2);
}
.grafico--asse .dato {
	display: flex;
	justify-content: space-between;
	font-size: 0.6875rem;
}
.grafico--asse .dato span:nth-child(2) {
	/* 60% del ciclo: fine dell'appoggio */
	position: relative;
	left: 10%;
}
.cammino figcaption {
	padding: 0.7rem 0.9rem 0.8rem;
	border-top: 1px solid var(--linea);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--inchiostro-2);
}

/* Sezioni */
.sezione {
	padding-block: 4.5rem;
	border-bottom: 1px solid var(--linea);
}
@media (min-width: 48rem) {
	.sezione {
		padding-block: 6.5rem;
	}
}
.sezione--fondo {
	background: var(--fondo-2);
}
.sezione__testa {
	display: grid;
	gap: 1rem;
	margin-bottom: 3rem;
}
@media (min-width: 62rem) {
	.sezione__testa {
		grid-template-columns: 14rem minmax(0, 1fr);
		gap: 2rem;
		align-items: baseline;
	}
}
.sezione__numero {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--segnale);
}
.sezione__titolo {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	max-width: 22ch;
}
.sezione__intro {
	margin: 1.25rem 0 0;
	max-width: 40rem;
	color: var(--inchiostro-2);
	font-size: 1.125rem;
}
@media (min-width: 62rem) {
	.sezione__corpo {
		margin-left: 16rem;
	}
	.sezione__corpo--largo {
		margin-left: 0;
	}
}

/* Linea di quota: filetto con tacche alle estremità; si traccia quando entra nello schermo. */
.quota {
	position: relative;
	height: 11px;
	margin-bottom: 1.75rem;
	color: var(--inchiostro-2);
}
.quota::before {
	content: '';
	position: absolute;
	inset: 5px 0 auto;
	height: 1px;
	background: currentColor;
	transform-origin: left;
}
.quota::after {
	content: '';
	position: absolute;
	inset: 0;
	border-inline: 1px solid currentColor;
}
@media (prefers-reduced-motion: no-preference) {
	.js .quota::before {
		transform: scaleX(0);
		transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	.js .quota.in-vista::before {
		transform: scaleX(1);
	}
}

/* Ambiti: griglia di voci con indice. */
.voci {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--linea);
	border-left: 1px solid var(--linea);
}
@media (min-width: 40rem) {
	.voci {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 70rem) {
	.voci--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.voci--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.voce {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.5rem 1.4rem 1.75rem;
	border-right: 1px solid var(--linea);
	border-bottom: 1px solid var(--linea);
	background: var(--fondo);
}
.voce .dato {
	color: var(--segnale);
}
.voce h3 {
	font-size: 1.25rem;
	letter-spacing: -0.015em;
	line-height: 1.2;
}
.voce p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--inchiostro-2);
	line-height: 1.55;
}
/* Tavole degli strumenti: sezione anatomica, schermo dello strumento, testo con legenda numerata. */
.strumenti {
	display: grid;
	gap: 2.5rem;
}
.strumento__testa {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--linea);
}
.strumento__testa .dato {
	flex: none;
	white-space: nowrap;
	color: var(--segnale);
}
.strumento__testa h3 {
	font-size: 1.25rem;
	letter-spacing: -0.015em;
	line-height: 1.25;
}
.strumento__corpo {
	display: grid;
}
.strumento__figura {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-bottom: 1px solid var(--linea);
}
@media (min-width: 40rem) {
	.strumento__figura {
		grid-template-columns: minmax(0, 33fr) minmax(0, 26fr);
	}
}
@media (min-width: 66rem) {
	.strumento__corpo {
		grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
	}
	.strumento__figura {
		border-bottom: 0;
		border-right: 1px solid var(--linea);
	}
}
.strumento__sezione,
.strumento__schermo {
	width: 100%;
	height: auto;
}
.strumento__sezione {
	background: var(--fondo);
}
.strumento__schermo {
	background: var(--fondo);
}
.strumento__testo {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem 1.25rem 1.1rem;
}
.strumento__testo > p:first-child {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
}
.legenda {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0.9rem 0 0;
	list-style: none;
	border-top: 1px solid var(--linea);
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--inchiostro-2);
}
.legenda li {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	align-items: baseline;
}
.legenda .dato {
	display: inline-grid;
	place-items: center;
	width: 1.15rem;
	height: 1.15rem;
	border: 1px solid var(--segnale);
	border-radius: 50%;
	color: var(--segnale);
	font-size: 0.6875rem;
	letter-spacing: 0;
}
.strumento__nota {
	margin: auto 0 0;
	color: var(--inchiostro-2);
	font-size: 0.6875rem;
}

/* Disegno: tratti in pixel di schermo, qualunque sia la scala della tavola. */
.strumento svg * {
	vector-effect: non-scaling-stroke;
}
.strumento .tessuto--sottocute {
	fill: var(--fondo);
}
.strumento .tessuto--derma {
	fill: var(--fondo-2);
	stroke: var(--linea);
	stroke-width: 0.6;
}
.strumento .lobuli {
	fill: none;
	stroke: var(--linea);
	stroke-width: 0.7;
}
.strumento .tessuto--muscolo {
	fill: #eef1f3;
}
.strumento .tessuto--tendine {
	fill: var(--fondo);
}
.strumento .tessuto--osso {
	fill: var(--fondo-2);
}
.strumento .trabecole {
	fill: none;
	stroke: var(--linea);
	stroke-width: 0.6;
	stroke-opacity: 0.7;
}
.strumento .corticale {
	fill: var(--inchiostro-2);
}
.strumento .fibre {
	fill: none;
	stroke: var(--inchiostro-2);
	stroke-width: 0.6;
	stroke-opacity: 0.8;
}
.strumento .fibre--muscolo {
	stroke-opacity: 0.35;
}
.strumento .fibre--fascicoli {
	stroke-opacity: 0.6;
	stroke-width: 0.7;
}
.strumento .aponeurosi {
	fill: var(--fondo);
	stroke: var(--inchiostro-2);
	stroke-width: 0.6;
}
.strumento .contorno {
	fill: none;
	stroke: var(--inchiostro);
	stroke-width: 0.9;
}
.strumento .cute {
	stroke: var(--inchiostro);
	stroke-width: 1.4;
}
.strumento .taglio {
	stroke: var(--inchiostro-2);
	stroke-width: 0.8;
	stroke-dasharray: 3 3;
}
.strumento .fascio rect {
	fill: var(--segnale);
	fill-opacity: 0.06;
}
.strumento .fascio path {
	stroke: var(--segnale);
	stroke-width: 0.8;
	stroke-dasharray: 2 3;
}
.strumento .anima--scansione {
	stroke: var(--segnale);
	stroke-width: 1.2;
}
.strumento .sonda__corpo {
	fill: var(--fondo);
	stroke: var(--inchiostro);
	stroke-width: 1.1;
	stroke-linejoin: round;
}
.strumento .sonda__lente {
	fill: var(--segnale);
	fill-opacity: 0.35;
}
.strumento .sonda__presa,
.strumento .siringa__tacche,
.strumento .manipolo__righe {
	stroke: var(--inchiostro-2);
	stroke-width: 0.7;
	fill: none;
}
.strumento .sonda__cavo,
.strumento .cavo {
	fill: none;
	stroke: var(--inchiostro);
	stroke-width: 1.6;
	stroke-linecap: round;
}
.strumento .zona {
	fill: var(--segnale);
}
.strumento .bolo circle {
	fill: var(--segnale);
	fill-opacity: 0.16;
	stroke: var(--segnale);
	stroke-width: 0.6;
	stroke-opacity: 0.5;
}
.strumento .siringa {
	fill: var(--fondo);
	stroke: var(--inchiostro);
	stroke-width: 1;
}
.strumento .cono-ago {
	fill: var(--inchiostro-2);
}
.strumento .ago {
	stroke: var(--inchiostro);
	stroke-width: 1.5;
	stroke-linecap: round;
}
.strumento .ago--punta {
	stroke: var(--segnale);
	stroke-width: 1.8;
}
.strumento .suolo-tav {
	stroke: var(--inchiostro);
	stroke-width: 1;
}
.strumento .pelle-tav {
	fill: var(--fondo-2);
	stroke: var(--linea);
	stroke-width: 1;
}
.strumento .ossa-tav path {
	fill: var(--fondo);
	stroke: var(--inchiostro);
	stroke-width: 0.8;
	stroke-linejoin: round;
}
.strumento .tendine-tav {
	fill: var(--fondo);
	stroke: var(--inchiostro-2);
	stroke-width: 0.8;
}
.strumento .muscolo-tav {
	fill: var(--segnale);
	fill-opacity: 0.12;
	stroke: var(--segnale);
	stroke-width: 0.6;
}
.strumento .fascia-plantare {
	fill: var(--segnale);
	fill-opacity: 0.55;
	stroke: var(--segnale);
	stroke-width: 0.6;
}
.strumento .manipolo {
	fill: var(--fondo);
	stroke: var(--inchiostro);
	stroke-width: 1.1;
}
.strumento .manipolo__testina {
	fill: var(--segnale);
	fill-opacity: 0.45;
	stroke: var(--inchiostro);
	stroke-width: 1;
}
.strumento .onda {
	fill: none;
	stroke: var(--segnale);
	stroke-width: 1.3;
	stroke-linecap: round;
}
.strumento .onda--ferma {
	stroke-opacity: 0.35;
	stroke-dasharray: 2 3;
}

/* Richiami numerati */
.strumento .ric line {
	stroke: var(--inchiostro);
	stroke-width: 0.7;
}
.strumento .ric circle {
	fill: var(--fondo);
	stroke: var(--segnale);
	stroke-width: 1;
}
.strumento .ric .ric__punto {
	fill: var(--inchiostro);
	stroke: none;
}
.strumento .ric text {
	font-family: var(--font-dati);
	font-size: 9.5px;
	text-anchor: middle;
	fill: var(--segnale);
}
.strumento .ric--scuro line {
	stroke: #c9d3d9;
}
.strumento .ric--scuro circle {
	fill: var(--inchiostro);
	stroke: #5fb3bb;
}
.strumento .ric--scuro .ric__punto {
	fill: #c9d3d9;
}
.strumento .ric--scuro text {
	fill: #9fd6dc;
}

/* Schermi: unica superficie scura oltre al piè di pagina; colori chiari presi dal piè di pagina. */
.strumento .schermo__fondo {
	fill: var(--inchiostro);
}
.strumento .schermo__titolo,
.strumento .schermo__asse,
.strumento .scala text {
	font-family: var(--font-dati);
	font-size: 8px;
	letter-spacing: 0.06em;
	fill: #8fa2ad;
}
.strumento .schermo__asse {
	font-size: 9px;
}
.strumento .schermo__nota {
	font-family: var(--font-dati);
	font-size: 8.5px;
	fill: #9fd6dc;
}
.strumento .schermo__led {
	fill: #5fb3bb;
}
.strumento .schermo__separatore,
.strumento .scala line {
	stroke: #2a3a45;
	stroke-width: 1;
}
.strumento .scala line {
	stroke: #8fa2ad;
}
.strumento .griglia {
	fill: none;
	stroke: #1f2d36;
	stroke-width: 0.8;
}
.strumento .assi {
	fill: none;
	stroke: #8fa2ad;
	stroke-width: 1;
}
.strumento .traccia {
	fill: none;
	stroke: #9fd6dc;
	stroke-width: 1.2;
	stroke-linejoin: round;
}
.strumento .area--compressione {
	fill: #5fb3bb;
	fill-opacity: 0.28;
}
.strumento .area--trazione {
	fill: #5fb3bb;
	fill-opacity: 0.12;
}
.strumento .speckle {
	opacity: 0.55;
}
.strumento .speckle--fine {
	opacity: 0.3;
}
.strumento .eco {
	fill: none;
	stroke: #e6eef2;
	stroke-linecap: round;
}
.strumento .eco--tenue {
	stroke-width: 0.6;
	stroke-opacity: 0.35;
}
.strumento .eco--setti {
	stroke-width: 0.9;
	stroke-opacity: 0.55;
}
.strumento .eco--fibre {
	stroke-width: 1;
	stroke-opacity: 0.8;
}
.strumento .eco--cute {
	stroke-width: 1.6;
	stroke-opacity: 0.85;
}
.strumento .eco--osso {
	stroke: #fff;
	stroke-width: 3;
}
.strumento .eco--ago {
	stroke: #fff;
	stroke-width: 1.8;
}
.strumento .eco--punta {
	fill: #fff;
}
.strumento .eco--bolo {
	fill: var(--inchiostro);
	fill-opacity: 0.8;
}
.strumento .calibri path {
	fill: none;
	stroke: #9fd6dc;
	stroke-width: 1;
}
.strumento .calibri__linea {
	stroke-dasharray: 2 2;
}
.strumento .calibri text {
	font-family: var(--font-dati);
	font-size: 8px;
	fill: #9fd6dc;
}
.strumento .anima--aggiorna {
	fill: #9fd6dc;
	fill-opacity: 0;
}
.strumento .anima--cursore {
	fill: #9fd6dc;
	fill-opacity: 0;
}

/* Movimento delle tavole: scansione della sonda, tracciato che scorre, diffusione, fronti d'onda. */
@media (prefers-reduced-motion: no-preference) {
	.strumento .anima {
		transform-box: view-box;
	}
	.strumento .anima--scansione {
		animation: scansione 2.6s linear infinite;
	}
	.strumento .anima--corta {
		animation-name: scansione-corta;
	}
	.strumento .anima--aggiorna {
		fill-opacity: 0.16;
		animation: aggiorna 2.6s linear infinite;
	}
	.strumento .anima--scorri {
		animation: scorri 3.2s linear infinite;
	}
	.strumento .anima--bolo {
		transform-origin: 150px 142px;
		animation: bolo 3.2s ease-out infinite;
	}
	.strumento .anima--ritardo {
		animation-delay: 1.6s;
	}
	.strumento .anima--onda {
		animation: onda 1.8s ease-out infinite;
	}
	.strumento .anima--cursore {
		fill-opacity: 0.3;
		animation: cursore 3s linear infinite;
	}
}
@keyframes scansione {
	from { transform: translateX(0); }
	to { transform: translateX(80px); }
}
@keyframes scansione-corta {
	from { transform: translateX(0); }
	to { transform: translateX(64px); }
}
@keyframes aggiorna {
	from { transform: translateX(0); }
	to { transform: translateX(204px); }
}
@keyframes scorri {
	from { transform: translateX(0); }
	to { transform: translateX(-224px); }
}
@keyframes bolo {
	0% { transform: scale(0.2); opacity: 0.9; }
	100% { transform: scale(1.4); opacity: 0; }
}
@keyframes onda {
	0% { transform: scale(0.25); opacity: 1; }
	100% { transform: scale(1.25); opacity: 0; }
}
@keyframes cursore {
	from { transform: translateX(0); }
	to { transform: translateX(206px); }
}
@media (prefers-reduced-motion: reduce) {
	.strumento .anima--onda,
	.strumento .anima--bolo {
		display: none;
	}
}

/* Profilo in breve */
.profilo {
	display: grid;
	gap: 2.5rem;
}
@media (min-width: 52rem) {
	.profilo {
		grid-template-columns: 20rem minmax(0, 1fr);
		gap: 4rem;
		align-items: start;
	}
}
.ritratto {
	margin: 0;
	max-width: 22rem;
}
.ritratto img {
	width: 100%;
	height: auto;
	aspect-ratio: 900 / 885;
	object-fit: cover;
	filter: grayscale(1) contrast(1.04);
}
.ritratto figcaption {
	display: flex;
	justify-content: space-between;
	padding: 0.6rem 0.75rem;
	border-top: 1px solid var(--linea);
	color: var(--inchiostro-2);
}
.profilo__testo {
	font-size: 1.1875rem;
	line-height: 1.55;
	max-width: 40rem;
}
.profilo__testo p:first-child {
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	line-height: 1.4;
	letter-spacing: -0.01em;
}

/* Scheda: righe voce / valore, come una legenda di tavola. */
.scheda {
	margin: 0;
	border-top: 1px solid var(--inchiostro);
}
.scheda div {
	display: grid;
	gap: 0.2rem 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--linea);
}
@media (min-width: 40rem) {
	.scheda div {
		grid-template-columns: 12rem minmax(0, 1fr);
	}
}
.scheda dt {
	color: var(--inchiostro-2);
	padding-top: 0.2rem;
}
.scheda dd {
	margin: 0;
}
.scheda dd p:last-child {
	margin-bottom: 0;
}
.scheda dd small {
	display: block;
	margin-top: 0.15rem;
	color: var(--inchiostro-2);
	font-size: 0.9375rem;
}

/* Elenco delle strutture */
.sedi {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--inchiostro);
}
@media (min-width: 48rem) {
	.sedi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2.5rem;
	}
}
.sedi li {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--linea);
}
.sedi .dato {
	color: var(--segnale);
}
.sedi strong {
	font-weight: 500;
	font-size: 1.125rem;
}
.sedi span:last-child {
	color: var(--inchiostro-2);
}

/* Contatti */
.contatto {
	display: grid;
	gap: 2rem;
}
@media (min-width: 62rem) {
	.contatto {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 4rem;
		align-items: end;
	}
}
.contatto__email {
	display: inline-block;
	font-size: clamp(1.375rem, 5.4vw, 2.25rem);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.15;
	word-break: break-word;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}
.contatto p {
	color: var(--inchiostro-2);
	max-width: 34rem;
}

/* Pagine interne: frontespizio */
.frontespizio {
	border-bottom: 1px solid var(--linea);
}
.frontespizio .foglio {
	padding-block: 3.5rem 3rem;
}
@media (min-width: 48rem) {
	.frontespizio .foglio {
		padding-block: 5.5rem 4.5rem;
	}
}
.frontespizio h1 {
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	letter-spacing: -0.035em;
	max-width: 16ch;
}
.frontespizio__sommario {
	margin: 1.5rem 0 0;
	max-width: 40rem;
	font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
	line-height: 1.5;
	color: var(--inchiostro-2);
}

/* Percorso: voci di curriculum lungo una linea, ognuna con il suo marcatore. */
.percorso {
	margin: 0;
	padding: 0;
	list-style: none;
}
.percorso li {
	position: relative;
	display: grid;
	gap: 0.3rem 2rem;
	padding: 0 0 2.25rem 1.75rem;
	border-left: 1px solid var(--linea);
}
.percorso li:last-child {
	padding-bottom: 0.5rem;
}
.percorso li::before {
	content: '';
	position: absolute;
	left: -5px;
	top: 0.35rem;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--fondo);
	border: 1.5px solid var(--segnale);
}
.percorso li.in-corso::before {
	background: var(--segnale);
}
@media (min-width: 48rem) {
	.percorso li {
		grid-template-columns: 11rem minmax(0, 1fr);
	}
}
.percorso .dato {
	color: var(--inchiostro-2);
	padding-top: 0.2rem;
}
.percorso h3 {
	font-size: 1.1875rem;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin-bottom: 0.35rem;
}
.percorso p {
	margin: 0;
	color: var(--inchiostro-2);
	max-width: 42rem;
}
.percorso p + p {
	margin-top: 0.5rem;
}

.etichette {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.etichette li {
	padding: 0.45rem 0.75rem;
	border: 1px solid var(--linea);
	background: var(--fondo);
	font-size: 0.9375rem;
}

.testo {
	max-width: 42rem;
}
.testo h2 {
	font-size: 1.5rem;
	margin: 2.5rem 0 0.75rem;
}
.testo h2:first-child {
	margin-top: 0;
}
.testo ul {
	padding-left: 1.1rem;
}
.testo li + li {
	margin-top: 0.35rem;
}

.nota {
	margin-top: 2rem;
	padding: 1rem 1.25rem;
	border-left: 2px solid var(--segnale);
	background: var(--fondo);
	color: var(--inchiostro-2);
	font-size: 0.9375rem;
}

/* Piè di pagina */
.piede {
	padding-block: 3.5rem 2.5rem;
	background: var(--inchiostro);
	color: #c9d3d9;
	font-size: 0.9375rem;
}
.piede a {
	color: #fff;
	text-decoration-color: #5fb3bb;
}
.piede a:hover {
	color: #9fd6dc;
}
.piede__griglia {
	display: grid;
	gap: 2rem;
}
@media (min-width: 52rem) {
	.piede__griglia {
		grid-template-columns: 1.3fr 1fr 1fr;
		gap: 3rem;
	}
}
.piede__nome {
	margin: 0 0 0.5rem;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}
.piede .dato {
	display: block;
	margin-bottom: 0.75rem;
	color: #8fa2ad;
}
.piede ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.piede li + li {
	margin-top: 0.35rem;
}
.piede__fondo {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: 1px solid #2a3a45;
	color: #8fa2ad;
	font-size: 0.8125rem;
}
.piede__fondo p {
	margin: 0;
	max-width: 46rem;
}

/* Entrata del testo nelle sezioni (solo con JS e senza riduzione del movimento). */
@media (prefers-reduced-motion: no-preference) {
	.js .posa {
		opacity: 0;
		transform: translateY(0.75rem);
		transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	.js .posa.in-vista {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.testata,
	.cammino__pausa,
	.salta {
		display: none;
	}
	.maglia {
		background: none;
	}
	.piede {
		background: none;
		color: #000;
	}
	.piede a,
	.piede .dato,
	.piede__fondo {
		color: #000;
	}
	.sezione {
		padding-block: 2rem;
		break-inside: avoid-page;
	}
}

.dopo-voci {
	margin: 2rem 0 0;
}
.contatto__etichetta {
	margin-bottom: 0.5rem;
	color: var(--inchiostro-2);
}
.nota p:last-child {
	margin-bottom: 0;
}
@media (max-width: 40rem) {
	.testata nav {
		flex-basis: 100%;
	}
	.menu {
		width: auto;
	}
}