/* =========================================================
   MC Dialogo — stili
   1. Caratteri e variabili
   2. Base
   3. Intestazione, lingua
   4. Home: palco, dialogo, scelte, campi
   5. Schermo
   6. Dock, barra di avanzamento
   7. Indice
   8. Pannello (CV, stampa)
   9. Contenuti (progetti, pagine)
   10. Archivi, card
   11. Stampa
   ========================================================= */

/* 1. Caratteri e variabili ------------------------------- */
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/space-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/space-mono-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/space-mono-latin-700-normal.woff2") format("woff2"); }

:root {
	--y: #F6EB80;          /* giallo: fondo */
	--b: #000AFF;          /* blu: inchiostro */
	--paper: #FCF6C6;      /* carta più chiara: fogli e pannelli */
	--ink-2: #4B50D6;      /* blu attenuato per testi secondari (contrasto AA) */
	--rule: 1.5px;
	--sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--gutter: clamp(16px, 2.4vw, 32px);
	--head: 64px;
	--ease: cubic-bezier(.2, .7, .1, 1);
	color-scheme: light;
}

/* 2. Base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.has-overlay { overflow: hidden; }
body {
	margin: 0;
	background: var(--y);
	color: var(--b);
	font: 400 17px/1.55 var(--sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, video, svg, iframe { max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; }
::selection { background: var(--b); color: var(--y); }
:focus-visible { outline: 2px solid var(--b); outline-offset: 3px; }

.vh {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html[data-lang="it"] .l10n[lang="en"],
html[data-lang="en"] .l10n[lang="it"] { display: none; }

.mc-skip { position: absolute; left: 8px; top: -100px; z-index: 100; background: var(--b); color: var(--y); padding: 8px 14px; border-radius: 999px; font: 700 13px var(--mono); }
.mc-skip:focus { top: 8px; }

.mc-kicker { font: 400 12px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .75rem; }
.mc-crumb { display: inline-block; font: 400 13px/1 var(--mono); text-decoration: none; margin-bottom: 2rem; }
.mc-crumb:hover { text-decoration: underline; }

/* Pulsanti a pillola: scelte del dialogo e azioni */
.mc-chip {
	display: inline-flex; align-items: center; gap: .45em;
	min-height: 44px; padding: 10px 18px;
	border: var(--rule) solid var(--b); border-radius: 999px;
	background: var(--b); color: var(--y);
	font: 500 15px/1.15 var(--sans); letter-spacing: -.005em;
	text-decoration: none; cursor: pointer; text-align: left;
	transition: background-color .18s, color .18s, transform .18s var(--ease);
}
.mc-chip:hover, .mc-chip:focus-visible { background: var(--y); color: var(--b); text-decoration: none; }
.mc-chip:active { transform: scale(.97); }
.mc-chip small { font: 400 11px/1 var(--mono); opacity: .75; }
.mc-chip u { text-underline-offset: .18em; }
.mc-chip--ghost { background: transparent; color: var(--b); }
.mc-chip--ghost:hover, .mc-chip--ghost:focus-visible { background: var(--b); color: var(--y); }
.mc-chip--solid::after { content: "→"; font-family: var(--mono); }

/* 3. Intestazione ---------------------------------------- */
.mc-header {
	position: fixed; inset: 0 0 auto 0; z-index: 30;
	height: var(--head);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
	padding: 0 var(--gutter);
	background: linear-gradient(var(--y) 70%, rgba(246, 235, 128, 0));
	pointer-events: none;
}
.mc-header > * { pointer-events: auto; }
.mc-header__name { font: 700 15px/1 var(--mono); text-decoration: none; letter-spacing: -.02em; justify-self: start; }
.mc-header__role { margin: 0; font: 400 12px/1.3 var(--mono); color: var(--ink-2); text-align: center; }
.mc-header__tools { justify-self: end; display: flex; align-items: center; gap: 14px; }
.mc-langs { display: flex; gap: 2px; }
.mc-lang {
	border: 0; background: none; padding: 6px 6px; cursor: pointer;
	font: 400 13px/1 var(--mono); color: var(--ink-2);
}
.mc-lang[aria-pressed="true"] { color: var(--b); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.mc-index-btn {
	border: var(--rule) solid var(--b); border-radius: 999px; background: transparent;
	padding: 8px 16px; min-height: 36px; cursor: pointer; font: 500 15px/1 var(--sans);
}
.mc-index-btn:hover, .mc-index-btn[aria-expanded="true"] { background: var(--b); color: var(--y); }

/* 4. Home: palco e dialogo ------------------------------- */
.mc-stage {
	min-height: 100vh; min-height: 100svh;
	display: grid;
	grid-template-columns: minmax(330px, 5fr) 7fr;
	align-items: center;
	gap: clamp(24px, 4vw, 72px);
	padding: calc(var(--head) + 16px) var(--gutter) 84px;
}
.mc-dialog { position: relative; z-index: 2; align-self: center; cursor: default; }
.mc-dialog__inner { max-width: 33rem; }

.mc-prev {
	margin: 0 0 1.4rem;
	font: 500 clamp(1rem, .9rem + .45vw, 1.25rem)/1.3 var(--sans);
	color: var(--b); opacity: .38; filter: blur(1.4px);
	transition: opacity .3s;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mc-prev.is-empty { display: none; }
.mc-prev strong { font-weight: 500; }
.mc-prev br { display: none; }

.mc-line {
	font: 500 clamp(1.375rem, 1rem + 1.25vw, 2.125rem)/1.16 var(--sans);
	letter-spacing: -.018em;
	text-wrap: pretty;
}
.mc-line[data-size="l"] { font-size: clamp(1.75rem, 1rem + 2.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.03em; }
.mc-line[data-size="s"] { font-size: clamp(1.125rem, .95rem + .6vw, 1.5rem); line-height: 1.3; letter-spacing: -.01em; }
.mc-line[data-size="s"] strong { display: inline-block; font-size: 1.45em; line-height: 1.05; letter-spacing: -.025em; margin-bottom: .35em; text-wrap: balance; }
.mc-line strong { font-weight: 500; }
.mc-line em { font-style: normal; text-decoration: underline; text-decoration-thickness: 2px; }
.mc-ch { opacity: 0; }
.mc-ch.on { opacity: 1; }
.mc-cursor {
	display: inline-block; width: .48em; height: .92em; margin-left: .08em;
	vertical-align: -.1em; background: currentColor;
	animation: mc-blink 1.05s steps(1) infinite;
}
@keyframes mc-blink { 50% { opacity: 0; } }

.mc-actions { margin-top: 1.6rem; }
.mc-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-choices .mc-chip { opacity: 0; transform: translateY(8px); animation: mc-in .38s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes mc-in { to { opacity: 1; transform: none; } }
.mc-actions.is-compact .mc-chip { min-height: 38px; padding: 7px 14px; font-size: 14px; }

.mc-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 14px; max-width: 30rem; animation: mc-in .38s var(--ease) both; }
.mc-form input, .mc-form textarea {
	width: 100%; border: 0; border-bottom: var(--rule) solid var(--b); border-radius: 0;
	background: transparent; color: var(--b);
	font: 400 1.25rem/1.35 var(--sans); padding: 10px 0; outline: 0;
	-webkit-appearance: none; appearance: none;
}
.mc-form textarea { min-height: 7.5rem; resize: vertical; border: var(--rule) solid var(--b); border-radius: 14px; padding: 12px 14px; font-size: 1.0625rem; }
.mc-form--textarea { align-items: end; }
.mc-form input::placeholder, .mc-form textarea::placeholder { color: var(--ink-2); opacity: .8; }
.mc-form input:focus, .mc-form textarea:focus { border-color: var(--b); box-shadow: 0 2px 0 0 var(--b); }
.mc-form textarea:focus { box-shadow: 0 0 0 1px var(--b); }
.mc-submit {
	width: 48px; height: 48px; border-radius: 50%; border: var(--rule) solid var(--b);
	background: var(--b); color: var(--y); cursor: pointer; font: 400 20px/1 var(--mono);
	display: grid; place-items: center; transition: transform .18s var(--ease), background-color .18s, color .18s;
}
.mc-submit:hover { background: var(--y); color: var(--b); }
.mc-submit:active { transform: scale(.94); }
.mc-err { grid-column: 1 / -1; margin: 0; min-height: 1.2em; font: 400 12px/1.4 var(--mono); }
.mc-err:not(:empty)::before { content: "↳ "; }
.mc-note { margin: 1.25rem 0 0; font: 400 12px/1.5 var(--mono); color: var(--ink-2); max-width: 30rem; }
.mc-note:empty { display: none; }

/* 5. Schermo --------------------------------------------- */
.mc-screen { margin: 0; position: relative; }
.mc-screen__frame {
	position: relative; overflow: hidden;
	aspect-ratio: var(--ar, 16 / 10);
	background: var(--y);
	outline: var(--rule) solid var(--b); outline-offset: 0;
	cursor: pointer;
	-webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
	touch-action: pan-y;
}
.mc-screen__media { position: absolute; inset: 0; }
.mc-screen__media > img, .mc-screen__media > video {
	display: block; width: 100%; height: 100%; object-fit: cover;
	pointer-events: none;
}
.fx-fotocopia .mc-screen__media > *, .fx-fotocopia .mc-fx-static img { filter: url(#mc-xerox); }
.fx-duotone .mc-screen__media > *, .fx-duotone .mc-fx-static img { filter: url(#mc-duo); }
.mc-screen.is-clean .mc-screen__media > * { filter: none; }
.mc-screen.is-clean .mc-screen__frame { outline-style: dashed; }

.mc-screen__text {
	position: absolute; inset: 0; display: grid; place-items: center;
	background: var(--y); color: var(--b);
	font: 500 18vw/.9 var(--sans); letter-spacing: -.035em; text-align: center;
}
.mc-screen__text span { display: block; max-width: 90%; overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }

.mc-screen__hint {
	position: absolute; right: 10px; bottom: 10px;
	background: var(--b); color: var(--y);
	font: 400 11px/1 var(--mono); padding: 6px 9px; border-radius: 999px;
	opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s;
	pointer-events: none;
}
.mc-screen:hover .mc-screen__hint, .mc-screen:focus-visible .mc-screen__hint { opacity: 1; transform: none; }
.mc-screen.is-clean .mc-screen__hint { opacity: 0; }
.mc-screen:focus-visible { outline: none; }
.mc-screen:focus-visible .mc-screen__frame { outline-width: 3px; }
@media (hover: none) { .mc-screen__hint { opacity: .92; transform: none; animation: mc-hint-out .5s 5s forwards; } }
@keyframes mc-hint-out { to { opacity: 0; } }

.mc-screen__cap { margin-top: 12px; min-height: 1.5em; font: 400 12px/1.4 var(--mono); }
.mc-cap__link { display: flex; flex-wrap: wrap; gap: 0 14px; text-decoration: none; }
.mc-cap__link:hover .mc-cap__t { text-decoration: underline; }
.mc-cap__n { color: var(--ink-2); }
.mc-cap__b { font-weight: 700; }
.mc-cap__y { color: var(--ink-2); margin-left: auto; }
.mc-cap__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }

/* 5b. Avatar: Michele con un televisore a tubo catodico al posto della testa --- */
.mc-avatar {
	--bw: clamp(520px, min(70vw, 113svh), 1100px);   /* larghezza della foto del corpo */
	--tw: calc(var(--bw) * .52);                      /* larghezza del televisore */
	--th: calc(var(--tw) * .74);                      /* altezza del frontale */
	--d: calc(var(--tw) * .6);                        /* profondità del tubo */
	--dot25: repeating-conic-gradient(var(--b) 0 25%, var(--y) 0 100%) 0 0 / 2px 2px;
	--dot50: repeating-conic-gradient(var(--b) 0 25%, var(--y) 0 50%) 0 0 / 2px 2px;
	--dot75: repeating-conic-gradient(var(--y) 0 25%, var(--b) 0 100%) 0 0 / 2px 2px;
	position: sticky; top: 0; align-self: stretch;
	height: 100vh; height: 100svh;
	margin-top: calc(-1 * (var(--head) + 16px)); margin-bottom: -84px;
	overflow: hidden;
	pointer-events: none;
}
.mc-avatar__rig {
	position: absolute; left: 50%; top: calc(var(--head) - var(--bw) * .045);
	width: var(--bw);
	padding-top: calc(var(--bw) * .453);             /* spazio per televisore e antenne */
	transform: translateX(-50%);
}
.mc-avatar__body {
	display: block; width: 100%; height: auto; position: relative; z-index: 1;
	-webkit-user-select: none; user-select: none; pointer-events: none;
}
.fx-fotocopia .mc-avatar__body { filter: url(#mc-body); }
.fx-duotone .mc-avatar__body, .fx-nessuno .mc-avatar__body { filter: url(#mc-duo-alpha); }

/* Il televisore poggia sul collo: il fondo combacia con il mento nella foto. */
.mc-avatar__persp {
	position: absolute; z-index: 2; pointer-events: auto;
	left: 50.4%; top: calc(var(--bw) * .509 - var(--th));
	width: var(--tw); height: var(--th);
	transform: translateX(-50%);
	perspective: calc(var(--tw) * 3.4); perspective-origin: 50% 70%;
}
.mc-tv {
	position: relative; width: 100%; height: 100%;
	transform-style: preserve-3d;
	transform-origin: 50% 92% 0;
	will-change: transform;
}
.mc-tv > * { position: absolute; }
.mc-tv__side, .mc-tv__front { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* Lati e retro rastremati del tubo, retinati a mano, con le feritoie di aerazione */
.mc-tv__side { background: var(--dot50); }
.mc-tv__side--l, .mc-tv__side--r { top: 0; height: 100%; width: var(--d); left: calc(50% - var(--d) / 2); }
.mc-tv__side--l {
	transform: rotateY(-90deg) translateZ(calc(var(--tw) / 2));
	clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 84%);
	background:
		repeating-linear-gradient(90deg, transparent 0 calc(var(--d) * .06), var(--b) calc(var(--d) * .06) calc(var(--d) * .075)) 12% 30% / 34% 40% no-repeat,
		var(--dot25);
}
.mc-tv__side--r {
	transform: rotateY(90deg) translateZ(calc(var(--tw) / 2));
	clip-path: polygon(0 0, 100% 16%, 100% 84%, 0 100%);
	background:
		repeating-linear-gradient(90deg, transparent 0 calc(var(--d) * .06), var(--y) calc(var(--d) * .06) calc(var(--d) * .075)) 88% 30% / 34% 40% no-repeat,
		var(--dot75);
}
.mc-tv__side--t, .mc-tv__side--b { left: 0; width: 100%; height: var(--d); top: calc(50% - var(--d) / 2); }
.mc-tv__side--t {
	transform: rotateX(90deg) translateZ(calc(var(--th) / 2));
	clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
	background:
		repeating-linear-gradient(0deg, transparent 0 calc(var(--d) * .05), var(--b) calc(var(--d) * .05) calc(var(--d) * .065)) 50% 22% / 46% 30% no-repeat,
		var(--dot25);
}
.mc-tv__side--b {
	transform: rotateX(-90deg) translateZ(calc(var(--th) / 2));
	clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
	background: var(--b);
}

/* Antenne a V */
.mc-tv__antenna {
	left: 50%; bottom: 100%; width: 0; height: calc(var(--tw) * .22);
	transform: translateZ(calc(var(--d) * -.18));
}
.mc-tv__antenna::before {
	content: ""; position: absolute; left: calc(var(--tw) * -.06); bottom: 0;
	width: calc(var(--tw) * .12); height: calc(var(--tw) * .045);
	background: var(--b); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.mc-tv__antenna span {
	position: absolute; left: calc(var(--tw) * -.004); bottom: calc(var(--tw) * .03);
	width: calc(var(--tw) * .008); height: calc(var(--tw) * .22);
	background: var(--b); transform-origin: 50% 100%;
}
.mc-tv__antenna span::after {
	content: ""; position: absolute; left: 50%; top: 0; width: calc(var(--tw) * .022); aspect-ratio: 1;
	border-radius: 50%; background: var(--b); transform: translate(-50%, -50%);
}
.mc-tv__antenna span:first-child { transform: rotate(-28deg); }
.mc-tv__antenna span:last-child { transform: rotate(34deg); height: calc(var(--tw) * .19); }

/* Frontale: plastica chiara retinata, schermo bombato a sinistra, comandi a destra */
.mc-tv__front {
	inset: 0; transform: translateZ(calc(var(--d) / 2));
	background: var(--dot25);
	border: calc(var(--tw) * .012) solid var(--b);
	border-radius: calc(var(--tw) * .045);
	box-shadow: inset 0 calc(var(--tw) * -.02) 0 var(--b);
}
.mc-tv__bezel {
	position: absolute; left: 5%; top: 7%; width: 69%; height: 73%;
	background: var(--b);
	border-radius: calc(var(--tw) * .05);
	padding: calc(var(--tw) * .028);
}
.mc-tv__screen { position: relative; width: 100%; height: 100%; margin: 0; }
.mc-tv__screen .mc-screen__frame {
	position: relative; width: 100%; height: 100%; aspect-ratio: auto; outline: 0;
	border-radius: 13% / 16%;
	isolation: isolate;
}
/* Vetro del tubo: righe di scansione, angoli scuri, un riflesso */
.mc-tv__screen .mc-screen__frame::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
	background:
		radial-gradient(120% 70% at 28% 12%, rgba(252, 246, 198, .28), rgba(252, 246, 198, 0) 42%),
		repeating-linear-gradient(to bottom, rgba(0, 10, 255, 0) 0 2px, rgba(0, 10, 255, .2) 2px 3px);
	box-shadow: inset 0 0 calc(var(--tw) * .05) calc(var(--tw) * .01) rgba(0, 10, 255, .7);
}
.mc-tv__screen.is-clean .mc-screen__frame::after { opacity: .35; }
.mc-tv__screen:focus-visible { outline: none; }
.mc-tv__screen:focus-visible .mc-screen__frame { outline: 3px solid var(--y); outline-offset: -6px; }
.mc-tv__screen .mc-screen__hint { top: 9%; bottom: auto; right: 7%; z-index: 3; }
.mc-tv__screen .mc-osd { z-index: 2; border-radius: 0 0 40% 40% / 0 0 30% 30%; padding-left: 10%; padding-right: 10%; }

.mc-tv__panel {
	position: absolute; left: 77%; top: 7%; width: 17.5%; height: 73%;
	display: flex; flex-direction: column; align-items: center; gap: 9%;
}
.mc-tv__grille {
	width: 100%; height: 40%;
	background: repeating-linear-gradient(to bottom, var(--b) 0 calc(var(--tw) * .012), transparent calc(var(--tw) * .012) calc(var(--tw) * .026));
	border-radius: calc(var(--tw) * .01);
}
.mc-tv__knob {
	position: relative; width: 62%; aspect-ratio: 1; border-radius: 50%;
	border: calc(var(--tw) * .012) solid var(--b); background: var(--y);
	box-shadow: calc(var(--tw) * .008) calc(var(--tw) * .01) 0 var(--b);
}
.mc-tv__knob::after {
	content: ""; position: absolute; left: 50%; top: 8%; width: calc(var(--tw) * .01); height: 38%;
	background: var(--b); transform: translateX(-50%) rotate(var(--k, 25deg)); transform-origin: 50% 110%;
}
.mc-tv__knob--2 { --k: -60deg; width: 48%; }
.mc-tv__brand {
	position: absolute; left: 6%; bottom: 6.5%;
	font: 700 calc(var(--tw) * .028)/1 var(--mono); letter-spacing: .14em; color: var(--b);
}

/* Cambio canale: il tubo collassa in una riga e si riaccende */
.mc-screen__media.is-tuning { animation: mc-tune .3s steps(6, end); }
@keyframes mc-tune { 0% { transform: none; } 45%, 55% { transform: scale(1.04, .03); } 100% { transform: none; } }

/* Faccia a pixel: niente filtro, pixel netti */
.mc-screen__media > .mc-face { filter: none !important; display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }

/* Didascalia come menu a schermo (OSD) */
.mc-osd {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; min-height: 0;
	background: var(--b); color: var(--y);
	font: 400 11px/1.3 var(--mono); padding: 5px 10px 4px;
}
.mc-osd:empty { display: none; }
.mc-osd .mc-cap__n, .mc-osd .mc-cap__y { color: var(--y); opacity: .75; }
.mc-osd .mc-cap__link { flex-wrap: nowrap; gap: 0 10px; }

/* 6. Dock e barra ---------------------------------------- */
.mc-dock {
	position: fixed; left: var(--gutter); right: var(--gutter); bottom: 22px; z-index: 20;
	display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}
.mc-dock > * { pointer-events: auto; }
.mc-back {
	width: 48px; height: 48px; border-radius: 50%; border: var(--rule) solid var(--b);
	background: var(--b); color: var(--y); font: 400 20px/1 var(--mono); cursor: pointer;
	display: grid; place-items: center; transition: opacity .2s, background-color .18s, color .18s;
}
.mc-back:hover { background: var(--y); color: var(--b); }
.mc-back:disabled { opacity: 0; pointer-events: none; }
.mc-grain {
	display: inline-flex; align-items: center; gap: 8px;
	border: var(--rule) solid var(--b); border-radius: 999px; background: var(--y);
	padding: 8px 14px; min-height: 36px; cursor: pointer; font: 400 12px/1 var(--mono);
}
.mc-grain__dot { width: 10px; height: 10px; border-radius: 50%; border: var(--rule) solid var(--b); }
.mc-grain[aria-pressed="true"] .mc-grain__dot { background: var(--b); }
.mc-progress { position: fixed; left: 0; right: 0; bottom: 0; height: 4px; z-index: 21; }
.mc-progress span { display: block; height: 100%; background: var(--b); transform: scaleX(.02); transform-origin: 0 50%; transition: transform .7s var(--ease); }

/* 7. Indice ---------------------------------------------- */
.mc-index {
	position: fixed; inset: 0; z-index: 60;
	background: var(--b); color: var(--y);
	overflow-y: auto; overscroll-behavior: contain;
	padding: 0 var(--gutter) 64px;
	visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s;
}
.mc-index.is-open { visibility: visible; opacity: 1; transition: opacity .25s; }
.mc-index ::selection { background: var(--y); color: var(--b); }
.mc-index :focus-visible { outline-color: var(--y); }
.mc-index__bar { position: sticky; top: 0; height: var(--head); display: flex; align-items: center; justify-content: space-between; background: var(--b); z-index: 1; }
.mc-index__title { font: 700 15px/1 var(--mono); }
.mc-index__close { border: var(--rule) solid var(--y); border-radius: 999px; background: transparent; color: var(--y); padding: 8px 16px; min-height: 36px; cursor: pointer; font: 500 15px/1 var(--sans); }
.mc-index__close:hover { background: var(--y); color: var(--b); }
.mc-index__grid { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(32px, 6vw, 96px); padding-top: 24px; }
.mc-index h2 { font: 400 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; }
.mc-index h2 small { font-size: 1em; opacity: .7; margin-left: 6px; }
.mc-index__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(246, 235, 128, .35); }
.mc-index__list a {
	display: grid; grid-template-columns: 3.5rem 9rem 1fr; gap: 12px; align-items: baseline;
	padding: 14px 8px; margin: 0 -8px; border-top: 1px solid rgba(246, 235, 128, .35);
	text-decoration: none; transition: background-color .15s, color .15s;
}
.mc-index__list a:hover, .mc-index__list a:focus-visible { background: var(--y); color: var(--b); outline: none; }
.mc-index__y, .mc-index__b { font: 400 12px/1.3 var(--mono); }
.mc-index__t { font: 500 clamp(1.125rem, 1rem + .7vw, 1.625rem)/1.15 var(--sans); letter-spacing: -.015em; }
.mc-index__links { list-style: none; margin: 0 0 40px; padding: 0; }
.mc-index__links li { border-top: 1px solid rgba(246, 235, 128, .35); }
.mc-index__links a { display: block; padding: 12px 0; font: 500 1.25rem/1.2 var(--sans); text-decoration: none; overflow-wrap: anywhere; }
.mc-index__links a:hover { text-decoration: underline; }
.mc-index__foot { font: 400 12px/1.5 var(--mono); opacity: .8; }
html.no-js .mc-index { position: static; visibility: visible; opacity: 1; margin-top: 64px; }
html.no-js .mc-index__close, html.no-js .mc-index-btn, html.no-js .mc-langs { display: none; }

/* 8. Pannello -------------------------------------------- */
.mc-panel { position: fixed; inset: 0; z-index: 50; background: rgba(246, 235, 128, .72); opacity: 0; transition: opacity .3s; }
.mc-panel.is-open { opacity: 1; }
.mc-panel__sheet {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(760px, 100%);
	background: var(--paper); border-left: var(--rule) solid var(--b);
	overflow-y: auto; overscroll-behavior: contain;
	transform: translateX(100%); transition: transform .32s var(--ease);
}
.mc-panel.is-open .mc-panel__sheet { transform: none; }
.mc-panel__bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: 14px var(--gutter); background: linear-gradient(var(--paper) 75%, rgba(252, 246, 198, 0)); }
.mc-panel__close { border: var(--rule) solid var(--b); border-radius: 999px; background: var(--paper); padding: 8px 16px; min-height: 36px; cursor: pointer; font: 500 15px/1 var(--sans); }
.mc-panel__close:hover { background: var(--b); color: var(--y); }
.mc-panel__body { padding: 0 clamp(20px, 4vw, 48px) 72px; }
.mc-panel__head h2 { font: 500 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--sans); letter-spacing: -.03em; margin: 0 0 1.25rem; }
.mc-panel__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 2.5rem; }

/* 9. Contenuti ------------------------------------------- */
.mc-case, .mc-page, .mc-archive { padding: calc(var(--head) + 32px) var(--gutter) 96px; }
.mc-case__head { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: clamp(24px, 4vw, 72px); align-items: start; margin-bottom: clamp(40px, 6vw, 88px); }
.mc-case__title, .mc-page__title { font: 500 clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem)/.98 var(--sans); letter-spacing: -.035em; margin: 0 0 2rem; text-wrap: balance; }
.mc-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.mc-facts > div { border-top: var(--rule) solid var(--b); padding: 10px 0 14px; }
.mc-facts__wide { grid-column: 1 / -1; }
.mc-facts dt { font: 400 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin-bottom: 4px; }
.mc-facts dd { margin: 0; font-size: 15px; line-height: 1.4; }
.mc-facts ul { margin: 0; padding: 0; list-style: none; }
.mc-facts li + li { margin-top: 2px; }
.mc-screen--hero { position: sticky; top: calc(var(--head) + 16px); }
.mc-screen--hero .mc-screen__frame { --ar: 16 / 10; }
.mc-screen--hero .mc-screen__media > img, .mc-screen--hero .mc-screen__media > video { object-fit: cover; }

.mc-entry { max-width: 46rem; margin: 0 auto; font-size: 1.0625rem; line-height: 1.6; }
.mc-entry > * { margin-top: 0; margin-bottom: 1.25rem; }
.mc-entry h2, .mc-entry h3, .mc-entry h4 { font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin-top: 2.5rem; }
.mc-entry h2 { font-size: 1.75rem; }
.mc-entry h3 { font-size: 1.375rem; }
.mc-entry strong { font-weight: 500; }
.mc-entry hr, .mc-entry .wp-block-separator { border: 0; border-top: var(--rule) solid var(--b); margin: 2.5rem 0; opacity: 1; }
.mc-entry .alignwide { max-width: 1180px; width: calc(100vw - 2 * var(--gutter)); margin-left: 50%; transform: translateX(-50%); }
.mc-entry .alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
.mc-entry figure { margin-left: 0; margin-right: 0; }
.mc-entry figcaption { font: 400 12px/1.4 var(--mono); color: var(--ink-2); margin-top: 8px; }
.mc-entry img, .mc-entry video { display: block; }
.mc-entry video { width: 100%; background: var(--b); }
.mc-entry iframe { display: block; width: 100%; border: 0; }
.mc-entry .wp-block-embed__wrapper { position: relative; }
/* Le citazioni nei casi sono usate come titoletti di sezione ("Video Case", "Results"). */
.mc-entry blockquote, .mc-entry .wp-block-quote {
	margin: 3rem 0 1rem; padding: 10px 0 0; border: 0; border-top: var(--rule) solid var(--b);
	font: 400 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em;
}
.mc-entry blockquote p { margin: 0; }
.mc-entry blockquote strong { font-weight: 400; }
.mc-entry .wp-block-gallery { gap: 8px; }
.mc-entry ul, .mc-entry ol { padding-left: 1.2em; }

.mc-entry--cv { max-width: 44rem; margin: 0; }
.mc-entry--cv p { margin-bottom: 1rem; }
.mc-page--cv .mc-entry--cv { margin: 0 auto; }

.mc-case__foot { max-width: 1180px; margin: clamp(56px, 8vw, 120px) auto 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: end; border-top: var(--rule) solid var(--b); padding-top: 20px; }
.mc-case__nav { text-decoration: none; display: block; }
.mc-case__nav--next { text-align: right; grid-column: 3; }
.mc-case__nav--prev { grid-column: 1; }
.mc-case__navt { display: block; font: 500 clamp(1.125rem, 1rem + .8vw, 1.75rem)/1.1 var(--sans); letter-spacing: -.02em; }
.mc-case__nav:hover .mc-case__navt { text-decoration: underline; }
.mc-case__talk { grid-column: 2; grid-row: 1; justify-self: center; }
.mc-case__talk { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: var(--b); color: var(--y); text-decoration: none; font: 500 15px/1 var(--sans); border: var(--rule) solid var(--b); }
.mc-case__talk:hover { background: var(--y); color: var(--b); }

.mc-page__head { max-width: 46rem; margin: 0 auto 2.5rem; }
.mc-page--cv .mc-page__head { max-width: 44rem; }
.mc-page__sub { font: 400 14px/1.4 var(--mono); margin: -1rem 0 1.5rem; }
.mc-page__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-printonly { display: none; }

.mc-sources { margin-top: 3rem; border-top: var(--rule) solid var(--b); padding-top: 10px; }
.mc-sources ul { list-style: none; padding: 0; margin: 0; }
.mc-sources li { padding: 6px 0; }
.mc-sources a { text-decoration: none; }
.mc-sources a:hover { text-decoration: underline; }

/* Rassegna stampa (output del plugin MC Rassegna Stampa nel pannello) */
.mc-entry--press { max-width: none; font-size: 15px; }
.mc-entry--press h2, .mc-entry--press h3 { font: 400 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .04em; margin: 2rem 0 .75rem; }
.mc-entry--press ul, .mc-entry--press ol { list-style: none; padding: 0; margin: 0; }
.mc-entry--press li, .mc-entry--press > div > div, .mc-entry--press article { border-top: 1px solid rgba(0, 10, 255, .35); padding: 12px 0; margin: 0; }
.mc-entry--press a { text-decoration: none; }
.mc-entry--press a:hover { text-decoration: underline; }
.mc-entry--press p { margin: 0 0 .25rem; }
.mc-entry--press small, .mc-entry--press time { font: 400 12px/1.4 var(--mono); color: var(--ink-2); }
.mc-entry--press details { margin-top: 1rem; }
.mc-entry--press summary, .mc-entry--press button, .mc-entry--press .button, .mc-entry--press .wp-element-button {
	display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; cursor: pointer;
	border: var(--rule) solid var(--b); border-radius: 999px; background: transparent; color: var(--b);
	font: 500 14px/1 var(--sans); list-style: none;
}
.mc-entry--press summary::-webkit-details-marker { display: none; }
.mc-entry--press summary:hover, .mc-entry--press button:hover { background: var(--b); color: var(--y); }

/* 10. Archivi -------------------------------------------- */
.mc-archive .mc-page__head { max-width: none; margin-left: 0; }
.mc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px 20px; }
.mc-card a { display: block; text-decoration: none; }
.mc-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; outline: var(--rule) solid var(--b); margin-bottom: 12px; background: var(--y); }
.mc-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-card a:hover .mc-card__img img { filter: none; }
.mc-card .mc-kicker { margin-bottom: 4px; }
.mc-card__t { display: block; font: 500 1.25rem/1.15 var(--sans); letter-spacing: -.015em; }
.mc-card a:hover .mc-card__t { text-decoration: underline; }
.mc-empty { font: 500 1.5rem/1.3 var(--sans); max-width: 30rem; }
.nav-links { display: flex; gap: 12px; margin-top: 48px; font: 400 14px var(--mono); }

/* Avviso breve */
.mc-toast {
	position: fixed; left: 50%; bottom: 72px; z-index: 80; transform: translate(-50%, 12px);
	background: var(--b); color: var(--y); padding: 10px 16px; border-radius: 999px;
	font: 400 13px/1.2 var(--mono); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.mc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Senza JavaScript la home mostra direttamente l'indice */
html.no-js .mc-home .mc-index { margin-top: 0; padding-top: var(--head); }

/* ------- Tablet e telefono ------- */
@media (max-width: 1100px) {
	.mc-header__role { display: none; }
	.mc-header { grid-template-columns: 1fr auto; }
}

@media (max-width: 899px) {
	:root { --head: 56px; }
	body { font-size: 16px; }
	.mc-stage {
		display: flex; flex-direction: column; gap: 0;
		padding: var(--head) 0 0; min-height: 100svh;
	}
	.mc-dialog {
		flex: 1; margin-top: -36px; padding: 24px var(--gutter) 104px;
		background: var(--paper); border-top: var(--rule) solid var(--b);
		border-radius: 18px 18px 0 0;
	}
	.mc-avatar {
		--bw: min(160vw, 640px);
		position: relative; order: -1; flex: none;
		height: calc(var(--bw) * .68);
		margin: 0;
	}
	.mc-avatar__rig { top: calc(2px - var(--bw) * .01); }
	.mc-osd { font-size: 9px; padding: 3px 6px 2px; }
	.mc-osd .mc-cap__n, .mc-osd .mc-cap__y { display: none; }
	.mc-tv__screen .mc-screen__hint { font-size: 9px; padding: 4px 7px; }
	.mc-dialog { position: relative; z-index: 3; }
	.mc-prev { margin-bottom: 1rem; }
	.mc-chip { font-size: 15px; padding: 9px 15px; }
	.mc-dock { bottom: 16px; }
	.mc-index__grid { grid-template-columns: 1fr; }
	.mc-index__list a { grid-template-columns: 3rem 1fr; }
	.mc-index__b { grid-column: 2; }
	.mc-index__t { grid-column: 1 / -1; }
	.mc-case__head { grid-template-columns: 1fr; }
	.mc-screen--hero { position: relative; top: 0; order: -1; }
	.mc-case__foot { grid-template-columns: 1fr 1fr; }
	.mc-case__talk { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
	.mc-panel__sheet { top: auto; height: 92svh; width: 100%; border-left: 0; border-top: var(--rule) solid var(--b); border-radius: 18px 18px 0 0; transform: translateY(100%); }
}

@media (max-width: 600px) {
	.mc-grain { display: none; }
	.mc-back { width: 44px; height: 44px; }
}

@media (max-width: 420px) {
	.mc-facts { grid-template-columns: 1fr; }
	.mc-langs { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
	.mc-cursor { animation: none; }
}

/* 11. Stampa (CV in PDF) --------------------------------- */
@media print {
	@page { margin: 16mm 16mm 18mm; }
	:root { --b: #000; --ink-2: #333; }
	body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
	.mc-header, .mc-index, .mc-dock, .mc-progress, .mc-noprint, .mc-skip, .mc-panel, .mc-defs, .mc-toast { display: none !important; }
	.mc-printonly { display: block; }
	.mc-page, .mc-case { padding: 0; }
	.mc-page__head, .mc-entry { max-width: none; margin: 0; }
	.mc-page__title { font-size: 28pt; margin-bottom: 4pt; }
	.mc-page__sub { margin: 0 0 4pt; }
	.mc-page__contacts { font: 400 9pt/1.4 var(--mono); margin: 0 0 14pt; padding-bottom: 8pt; border-bottom: 1px solid #000; }
	.mc-entry img { max-width: 40%; }
	.mc-entry p, .mc-entry li { orphans: 3; widows: 3; }
	.mc-entry h2, .mc-entry h3 { break-after: avoid; }
	a { text-decoration: none; }
}