/* ==========================================================================
   MOSTRE dell'Archivio — le teche grandi (/archivio/mostra/<slug>).
   --------------------------------------------------------------------------
   Nasce dalla teca locale di settembre 2026 (倚天II, ottobre 2004) riportata
   dentro la scatola centrale del 2010: 481px su desktop, fluida su telefono
   (riquadro-mobile.css). Due materiali soli, per scelta di Marco:
     - la CARTA (pergamena del forum) per testo, tabelle e grafici;
     - la VETRINA scura con filetto d'oro solo per gli oggetti: disco,
       modelli 3D, lente sul collo.
   Titoli in Cormorant Garamond (caricato da _proto solo sulle mostre), corpo
   nell'Arial 11px del sito. Mai style="" nel template: tutto passa da qui.
   Tutte le larghezze sono in %, cosi' lo stesso markup regge 481px e il
   telefono senza una seconda versione.
   ========================================================================== */

.ms {
	color: #160400;
	font-size: 11px;
	line-height: 1.55;
}
.ms *, .ms *::before, .ms *::after { box-sizing: border-box; }
.ms img { display: block; height: auto; max-width: 100%; }
.ms .zh { font-family: "SimSun", "Songti SC", "Noto Serif SC", serif; }
.ms code, .ms .mono {
	background: none;
	color: #3a2a10;
	font-family: "Courier New", Courier, monospace;
	font-size: 10.5px;
	padding: 0;
}
.ms p { text-align: left; }

/* ---- titoli: serif da museo, colore dei titoli del sito ---- */
.ms-sala h3,
.ms-hero h1 {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-weight: 700;
	letter-spacing: .01em;
}
.arc-inner .ms-sala h3 {
	background: none;
	border-bottom: 1px solid #c9b18c;
	color: #7b1300;
	font-size: 21px;
	line-height: 1.1;
	margin: 0 0 8px 0;
	padding: 0 0 6px 0;
}
.arc-inner .ms-sala h4 {
	color: #7b1300;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 15px;
	margin: 14px 0 5px 0;
}
.ms-num {
	color: #9a6b12;
	font: bold 9px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .18em;
	margin: 0 0 3px 0;
	text-transform: uppercase;
}
.arc-inner .ms-lead { color: #3b2a14; font-size: 12px; line-height: 1.5; }

/* ---- la vetrina: nero caldo, filetto oro ---- */
.ms-vetrina {
	background: radial-gradient(ellipse at 50% 30%, #3a2a12 0%, #0d0b08 70%);
	border: 1px solid #b8923a;
	box-shadow: inset 0 0 0 3px #0d0b08, inset 0 0 0 4px rgba(184, 146, 58, .45);
	color: #efe6d2;
}
/* 25/9: Marco ha voluto la locandina di novembre 2004 (la sciamana col
   ventaglio) a tutta pagina come fondo del cartiglio, cosi' il poster si
   riusa anche qui. Poi (stesso giorno) l'ha voluta piu' lunga in verticale
   e il trafiletto piu' leggibile: il cartiglio ha un'altezza minima vicina
   a quella della locandina (948x1193 -> ~600px a 481 di larghezza), le
   cifre scendono in fondo e in mezzo resta la sciamana; il velo e' leggero
   e la leggibilita' la da' il pannello dietro al testo (.ms-hero-testo),
   non uno scurimento di tutto il poster.
   Ancora il 25/9: disco e riquadro stavano in alto e coprivano il titolo
   倚天II e la faccia della sciamana (entrambi nel 30% alto del poster).
   Li ho portati in fondo, sopra le cifre, ma a Marco e' sembrato peggio:
   li ha voluti AL CENTRO. Ora .ms-hero-top ha margin auto sopra e sotto
   (lo spazio libero si divide a meta'), le cifre restano in fondo.
   Il velo in cima resta quasi nullo cosi' il titolo si legge. */
.ms-vetrina.ms-hero {
	background:
		linear-gradient(180deg, rgba(13, 11, 8, .08) 0%, rgba(13, 11, 8, 0) 30%, rgba(13, 11, 8, .1) 55%, rgba(13, 11, 8, .8) 100%),
		url("../archivio/img/yitian2-2004/locandina-sciamana-2004-11.jpg") 50% 0 / cover no-repeat,
		#0d0b08;
	display: flex;
	flex-direction: column;
	min-height: 620px;
}
.ms-hero { margin: 0 0 12px 0; overflow: hidden; padding: 16px 16px 14px 16px; }
.ms-hero .ms-cifre { margin-top: 12px; }
.ms-hero-testo {
	background: rgba(10, 8, 5, .72);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	border: 1px solid rgba(217, 164, 65, .35);
	border-radius: 2px;
	padding: 9px 11px 5px 11px;
	text-shadow: 0 1px 2px #000;
}
.ms-hero-top { display: flex; gap: 14px; align-items: center; margin: auto 0; }
.ms-disco {
	/* l'ombra sta sulla cornice ferma: sull'immagine girerebbe col disco */
	filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .75));
	flex: 0 0 40%;
}
/* Il disco e' disco-2004-11.webp: l'etichetta scansionata con il foro
   centrale svuotato (trasparente fino alla prima riga grigia, r=58/1000,
   restano i due margini bianchi) e gli angoli tolti, cosi' attraverso il
   foro si vede la locandina. Il centro vero del disco nella scansione e'
   (498.4, 497.9), non il centro dell'immagine: da qui il transform-origin,
   altrimenti ruotando sbanda.
   Gira e si ferma: tre giri con partenza e frenata, poi resta fermo diritto
   (etichetta leggibile) e riparte. Tutto CSS, nessuno script. Gira anche con
   prefers-reduced-motion: l'ha chiesto Marco il 25/9 (il disco e' il pezzo
   d'apertura; e' lento e si ferma da solo). */
.ms-disco img {
	animation: ms-gira 8s infinite;
	transform-origin: 49.84% 49.79%;
}
@keyframes ms-gira {
	0%   { transform: rotate(0deg); animation-timing-function: cubic-bezier(.55, 0, .25, 1); }
	55%  { transform: rotate(1080deg); }
	100% { transform: rotate(1080deg); }
}
.ms-targhetta {
	color: #d9a441;
	font: 8.5px/1.4 "Courier New", Courier, monospace;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.arc-inner .ms-hero h1 {
	color: #fff4dc;
	font-size: 30px;
	line-height: 1;
	margin: 6px 0 6px 0;
}
.ms-hero h1 .zh { color: #e8b64c; font-weight: bold; }
.arc-inner .ms-hero p { color: #d8ccb4; margin: 0 0 6px 0; }
.arc-inner .ms-hero p.ms-sott {
	color: #f3ead6;
	font: italic 14px/1.3 "Cormorant Garamond", Georgia, serif;
}
.ms-cifre {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .14);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(3, 1fr);
	margin: 10px 0 0 0;
}
.ms-cifre div { background: rgba(23, 19, 13, .84); padding: 7px 7px 6px 7px; }
.ms-cifre b { color: #f2c566; display: block; font: bold 14px/1.2 "Courier New", Courier, monospace; }
.ms-cifre span { color: #b9ad96; font-size: 9.5px; line-height: 1.25; display: block; }

/* ---- indice delle sale ---- */
.ms-indice {
	background: #f5eedc;
	border: 1px solid #e6dcc5;
	margin: 0 0 14px 0;
	padding: 6px 8px;
}
.ms-indice ol {
	columns: 2;
	column-gap: 12px;
	margin: 0;
	padding: 0;
}
.arc-inner .ms-indice ol li { list-style: none; padding: 1px 0; }
.ms-indice a { color: #8d0404; }
.ms-indice b { color: #9a6b12; display: inline-block; font: bold 9px "Courier New", monospace; width: 26px; }

/* ---- sale ---- */
.ms-sala {
	border-top: 1px solid #e6dcc5;
	margin: 0;
	padding: 16px 0 6px 0;
	scroll-margin-top: 8px;
}
.ms-due { align-items: start; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 0 0 10px 0; }
.ms-tre { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); margin: 0 0 10px 0; }

.ms figure {
	background: #fbf6ea;
	border: 1px solid #e6dcc5;
	box-shadow: 0 6px 16px -12px rgba(60, 35, 0, .55);
	margin: 0 0 10px 0;
	padding: 5px;
}
.ms figcaption { color: #5a4a30; font-size: 10px; line-height: 1.4; padding: 5px 1px 0 1px; }
.ms figcaption b { color: #160400; }
.ms img[data-zoom] { cursor: zoom-in; }

.ms-cartellino {
	background: #fbf6ea;
	border: 1px solid #e6dcc5;
	border-left: 3px solid #b8923a;
	margin: 8px 0 10px 0;
	padding: 7px 9px;
}
.ms-cartellino.verde { border-left-color: #17857a; }
.ms-cartellino.rosso { border-left-color: #8f1f16; }
.arc-inner .ms-cartellino p:last-child { margin-bottom: 0; }
.ms-cartellino h4:first-child { margin-top: 0; }

.ms-tag {
	border: 1px solid;
	border-radius: 2px;
	display: inline-block;
	font: bold 8px/1 "Courier New", monospace;
	margin-left: 3px;
	padding: 2px 3px;
	vertical-align: 1px;
}
.ms-tag.f { color: #1f6f43; }
.ms-tag.i { color: #8a5a00; }

/* ---- tabelle: le stesse della pergamena ---- */
.ms-tab { margin: 0 0 10px 0; overflow-x: auto; }
.ms-tab table { background: #fbf6ea; border: 1px solid #e6dcc5; border-collapse: collapse; width: 100%; }
.ms-tab th {
	background: #e9dfc7;
	color: #533a00;
	font-size: 9px;
	letter-spacing: .06em;
	padding: 4px 6px;
	text-align: left;
	text-transform: uppercase;
}
.ms-tab td { border-top: 1px solid #e6dcc5; padding: 4px 6px; vertical-align: top; }
.ms-tab tr:nth-child(odd) td { background: #f7f0e0; }
/* solo la colonna degli hash va in monospazio e si spezza ovunque: nomi, byte e date restano leggibili */
.ms-hash td { font-size: 10px; }
.ms-hash td:nth-child(2) { white-space: nowrap; }
.ms-hash td:last-child { font-family: "Courier New", monospace; font-size: 9.5px; word-break: break-all; }
.ms-dif { color: #8f1f16; font-weight: bold; }
.ms-nota { color: #6d5a3a; font-size: 10px; }

/* ---- la catena del ritrovamento ---- */
.ms-catena { counter-reset: anello; margin: 0 0 10px 0; }
.ms-catena div {
	background: #fbf6ea;
	border: 1px solid #e6dcc5;
	margin: 0 0 0 14px;
	padding: 5px 8px 5px 16px;
	position: relative;
}
.ms-catena div + div { border-top: 0; }
.ms-catena div::before {
	background: #b8923a;
	border-radius: 50%;
	color: #fff;
	content: counter(anello);
	counter-increment: anello;
	font: bold 9px/18px Arial, sans-serif;
	height: 18px;
	left: -10px;
	position: absolute;
	text-align: center;
	top: 5px;
	width: 18px;
}
.ms-catena b:first-child { color: #7b1300; display: block; font: bold 13px "Cormorant Garamond", Georgia, serif; }

/* ---- le etichette dei CD ---- */
.ms-etichette { display: grid; gap: 5px; grid-template-columns: repeat(6, 1fr); margin: 0 0 10px 0; }
.ms .ms-etichette figure { padding: 3px; text-align: center; }
.ms-etichette img { border-radius: 50%; }
.ms .ms-etichette figcaption { font-size: 9px; padding-top: 3px; }
.ms .ms-etichette figure.lei { border-color: #b8923a; box-shadow: 0 0 0 1px #b8923a; }

/* ---- la rivista: pagina + trascrizione ---- */
.ms-rivista { align-items: start; display: grid; gap: 10px; grid-template-columns: 44% 1fr; }
.ms-sistemi { margin: 0; padding: 0; }
.ms-sistemi dt { color: #7b1300; font-weight: bold; margin: 0; }
.ms-sistemi dd { margin: 0 0 7px 0; }
.ms-requisiti td:first-child { color: #533a00; font-weight: bold; }
/* la sala delle riviste tiene due pagine (settembre e la locandina di novembre):
   il secondo titolo e' un h4 ma fa da testata, quindi si stacca con il filetto */
.arc-inner .ms-sala h4.ms-sotto { border-top: 1px dashed #c9b18c; font-size: 18px; margin: 16px 0 8px 0; padding: 10px 0 0 0; }

/* ---- grafici SVG (disegnati da archivio/js/mostra-yitian2.js) ---- */
.ms-svg { background: #fbf6ea; border: 1px solid #e6dcc5; margin: 0 0 10px 0; padding: 6px; }
.ms-svg svg { display: block; height: auto; width: 100%; }
.ms-svg text { font-family: Arial, Helvetica, sans-serif; }

/* ---- video e lente: gli unici oggetti in vetrina ----
   Fino al 25/9 il guerriero girava in due <model-viewer> con i .glb serviti
   da static: chiunque poteva scaricarsi il modello con un clic. Marco ha
   chiesto "solo video che girano": i modelli restano offline, qui arrivano
   solo giri di camera gia' renderizzati (WebM, i due anni affiancati nello
   stesso fotogramma, stessa scala). 880x720 perche' la vetrina e' larga
   481px: un 16:9 affiancato diventava un francobollo. */
.ms-film { margin: 0 0 10px 0; padding: 8px; }
.ms-film video, .ms-gilda video, .ms-drago video {
	aspect-ratio: 880 / 720;
	background: #0d0b08;
	cursor: pointer;
	display: block;
	width: 100%;
}
.ms-film h4, .arc-inner .ms-vetrina h4 { color: #f2c566; font-size: 14px; margin: 0 0 4px 0; }
.ms-film h4 small { color: #c9bda3; font-size: 10px; font-weight: normal; letter-spacing: .06em; }
.ms-film p.ms-cosa, .arc-inner .ms-film p.ms-cosa { color: #efe6d2; font-size: 11px; line-height: 1.45; margin: 6px 0 0 0; }
/* gli edifici di gilda: 480x360, due per riga */
.ms-gilda { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin: 0 0 10px 0; padding: 8px; }
.ms .ms-gilda figure { margin: 0; }
.ms-gilda video { aspect-ratio: 4 / 3; }
.ms-gilda figcaption, .arc-inner .ms-gilda figcaption { color: #efe6d2; font-size: 10px; line-height: 1.35; margin: 4px 0 0 0; }
.ms-gilda figcaption b { color: #f2c566; display: block; }
/* il dio drago: un solo lancio, rilanciabile dal pulsante */
.ms-drago { margin: 0 0 10px 0; padding: 8px; position: relative; }
.ms-drago video { aspect-ratio: 16 / 9; }
.ms-lancia {
	background: #8f1f16;
	border: 1px solid #f2c566;
	color: #f2c566;
	cursor: pointer;
	display: block;
	font: bold 12px Arial, Helvetica, sans-serif;
	letter-spacing: .12em;
	margin: 8px auto 0 auto;
	padding: 6px 18px;
	text-transform: uppercase;
}
.ms-lancia:hover { background: #b0281c; }
.ms-anno {
	background: rgba(0, 0, 0, .6);
	border: 1px solid rgba(184, 146, 58, .6);
	color: #f2c566;
	font: bold 10px "Courier New", monospace;
	left: 6px;
	padding: 2px 6px;
	position: absolute;
	top: 6px;
	z-index: 2;
}
.ms-vetrina p.ms-didavetrina, .arc-inner .ms-vetrina .ms-didavetrina { color: #c9bda3; font-size: 10px; margin: 5px 0 0 0; }
.ms-vetrina code { color: #f2c566; }
.ms-lente { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin: 0 0 10px 0; padding: 8px; }
.ms-lente > div { position: relative; }
.ms-lente img { image-rendering: pixelated; width: 100%; }
.ms-cerchio {
	border: 3px solid #2fb3a3;
	border-radius: 50%;
	height: 32%;
	left: 43%;
	pointer-events: none;
	position: absolute;
	top: 31%;
	width: 22%;
}
.ms-lente .r05 .ms-cerchio { border-color: #e0685c; }
.ms-verde { color: #17857a; font-weight: bold; }
.ms-rosso { color: #8f1f16; font-weight: bold; }
.ms-vetrina .ms-verde { color: #46c2b3; }
.ms-vetrina .ms-rosso { color: #e0685c; }

.ms-galleria { align-items: start; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.ms .ms-galleria figure { margin: 0; }

/* ---- solo 2004 / solo 2005 ---- */
.arc-inner .ms-due > .ms-cartellino ul { margin: 0; }

/* ---- zoom immagini ---- */
.ms-zoom { background: transparent; border: 0; max-width: 96vw; padding: 0; }
.ms-zoom img { cursor: zoom-out; max-height: 90vh; width: auto; }
.ms-zoom::backdrop { background: rgba(0, 0, 0, .86); }

.ms-piede {
	border-top: 1px solid #c9b18c;
	color: #6d5a3a;
	font-size: 10px;
	margin: 10px 0 0 0;
	padding: 8px 0 0 0;
}

/* ---- telefono: la scatola e' gia' fluida, si impilano le griglie ---- */
@media screen and (max-width: 720px) {
	.ms-hero-top { display: block; }
	.ms-disco { margin: 0 auto 10px auto; width: 50%; }
	/* sul telefono il contenuto e' piu' alto del poster: il poster sta in
	   cima a tutta larghezza e il padding (in % della larghezza) lascia
	   libero titolo e faccia, ~38% della larghezza del poster */
	.ms-vetrina.ms-hero { background-size: auto, 100% auto; min-height: 0; padding-top: 44%; }
	.ms-due, .ms-rivista, .ms-tre { grid-template-columns: 1fr; }
	.ms-etichette { grid-template-columns: repeat(3, 1fr); }
	.ms-indice ol { columns: 1; }
	.ms-gilda { grid-template-columns: 1fr; }
}

/* il sito giustifica i paragrafi: nelle colonne strette della mostra apre buchi fra le parole */
.ms p, .ms li, .ms dd, .ms figcaption, .ms td { text-align: left; }

/* ---- Riviste coreane (mostra riviste-coreane-2002-2004) ----
   26/9: la pagina locale di Marco sulle riviste KR portata nel museo. Ogni
   pagina di rivista ha la trascrizione coreana e la traduzione una sotto
   l'altra: il coreano va in grigio e piu' piccolo, cosi' l'occhio legge
   l'italiano e il coreano resta come prova. Il cartiglio non ha locandina
   (niente .ms-hero): tre copertine piccole in fila e il testo sotto. */
.ms-kr-testa { margin: 0 0 12px 0; padding: 14px 16px 14px 16px; }
.ms-kr-copertine { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); margin: 0 0 12px 0; }
.ms-kr-copertine img { aspect-ratio: 3 / 4; border: 1px solid rgba(217, 164, 65, .45); display: block; height: auto; object-fit: cover; object-position: 50% 0; width: 100%; }
.arc-inner .ms-kr-testa h1 { color: #fff4dc; font: 700 30px/1.05 "Cormorant Garamond", Georgia, "Times New Roman", serif; letter-spacing: .01em; margin: 6px 0 6px 0; }
.arc-inner .ms-kr-testa p { color: #d8ccb4; }
.arc-inner .ms-kr-testa p.ms-sott { color: #f3ead6; font: italic 14px/1.3 "Cormorant Garamond", Georgia, serif; }
.ms-kr-testa .ms-cifre { margin-top: 12px; }

/* le date: quattro caselle per riga, la data in rosso sopra */
ol.ms-kr-tempo { display: grid; gap: 4px; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0 0 10px 0; padding: 0; }
ol.ms-kr-tempo li { background: #fbf6ea; border: 1px solid #e6dcc5; font-size: 9.5px; line-height: 1.3; padding: 5px 6px; }
ol.ms-kr-tempo li > b:first-child { color: #8f1f16; display: block; font: bold 11px/1.3 "Courier New", Courier, monospace; }

/* una pagina di rivista: immagine + testata, poi le trascrizioni */
.ms-kr-pagina { border-top: 1px dashed #c9b18c; margin: 14px 0 0 0; padding: 12px 0 0 0; }
.ms-kr-pagina:first-of-type { border-top: 0; padding-top: 0; }
.ms-kr-pagina > figure { margin-bottom: 8px; }
.arc-inner p.ms-kr-testata { color: #533a00; font: bold 10px/1.4 "Courier New", Courier, monospace; margin: 0 0 6px 0; }
.ms-kr-bi { border-left: 2px solid #e6dcc5; margin: 0 0 8px 0; padding: 0 0 0 8px; }
.arc-inner .ms-kr-bi p { margin: 0 0 3px 0; }
.arc-inner .ms-kr-bi p.ms-ko,
.arc-inner p.ms-ko { color: #6d5a3a; font: 10px/1.55 "Malgun Gothic", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; word-break: keep-all; }
.arc-inner .ms-kr-bi.h p:last-child { color: #160400; font-size: 12px; font-weight: bold; }
.arc-inner p.ms-kr-firma { color: #533a00; font: 10px/1.4 "Courier New", Courier, monospace; }
pre.ms-kr-albero { background: #fbf6ea; border: 1px solid #e6dcc5; font: 10px/1.45 "Courier New", Courier, monospace; margin: 0 0 10px 0; overflow-x: auto; padding: 7px 9px; white-space: pre; }
.ms-kr-segno { background: #efe4cb; border: 1px solid #e6dcc5; color: #533a00; font: 9px/1 "Courier New", Courier, monospace; padding: 0 2px; white-space: nowrap; }
.ms-kr-schede { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.ms-kr-schede .ms-cartellino { margin: 0; }

@media screen and (max-width: 720px) {
	ol.ms-kr-tempo { grid-template-columns: 1fr 1fr; }
	.ms-kr-schede { grid-template-columns: 1fr; }
}