/* ---------- pagina degli eventi (/eventi/) e riga degli eventi della home ---------- */

/* medaglione con l'icona dell'evento */
.evento-segno {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #3a2a1c, #140d09);
	box-shadow: 0 0 0 2px var(--oro), 0 0 0 5px rgba(0, 0, 0, .5), 0 0 0 6px rgba(212, 174, 98, .3), 0 4px 12px rgba(0, 0, 0, .5);
	color: var(--oro-luce);
}

.evento-segno .icona {
	width: 28px;
	height: 28px;
}

/* ---------- adesso sull'isola ---------- */

.adesso {
	position: relative;
	z-index: 2;
	margin-top: -48px;
	padding: 0 var(--margine);
}

.bando {
	padding: 26px clamp(20px, 3vw, 36px) 28px;
	background: var(--grana), linear-gradient(180deg, var(--cuoio-2), var(--cuoio));
	box-shadow: var(--cornice), var(--ombra);
	transition: box-shadow .6s;
}

.bando.con-eventi {
	box-shadow: var(--cornice), var(--ombra), 0 0 0 1px rgba(242, 214, 143, .4), 0 0 46px rgba(212, 174, 98, .22);
}

.bando-titolo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-family: var(--maiuscoletto);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--oro);
}

.bando.spento .stato-punto {
	background: #c0574a;
}

.bando-lista > .vuoto {
	margin: 0;
}

.in-corso {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 22px;
	padding: 18px 0;
	animation: entra-riga .6s both;
}

.in-corso + .in-corso {
	border-top: 1px solid rgba(212, 174, 98, .18);
}

.in-corso .evento-segno {
	width: 68px;
	height: 68px;
}

.in-corso .evento-segno .icona {
	width: 34px;
	height: 34px;
}

.in-corso.bonus .evento-segno {
	background: radial-gradient(circle at 35% 30%, #7a2420, #2a0b09);
	box-shadow: 0 0 0 2px #e07a5f, 0 0 0 5px rgba(0, 0, 0, .5), 0 0 0 6px rgba(224, 122, 95, .35), 0 4px 12px rgba(0, 0, 0, .5);
	color: #ffd2c2;
}

.in-corso.esterno .evento-segno {
	background: radial-gradient(circle at 35% 30%, #2c2440, #0b0912);
	box-shadow: 0 0 0 2px #8e83b8, 0 0 0 5px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .5);
	color: #d9d2f5;
}

.in-corso-etichette {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 6px;
}

.in-corso-etichette span {
	padding: 1px 9px;
	border: 1px solid rgba(212, 174, 98, .45);
	border-radius: 2px;
	font-family: var(--maiuscoletto);
	font-size: .88rem;
	color: var(--oro-luce);
}

.in-corso-etichette span:first-child {
	border-color: transparent;
	background: var(--cremisi);
	color: #fde7da;
}

.in-corso h3 {
	margin: 0;
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	line-height: 1.1;
}

.in-corso.esterno h3 {
	font-family: var(--testo);
	font-size: 1.3rem;
	font-style: italic;
	font-weight: 400;
	color: var(--avorio);
}

.in-corso-testo {
	margin: 4px 0 0;
	color: var(--pergamena-2);
}

.in-corso-tempo {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
	font-size: .95rem;
	color: var(--pergamena-2);
}

.tempo-barra {
	position: relative;
	flex: 1;
	max-width: 360px;
	height: 8px;
	overflow: hidden;
	border-radius: 4px;
	background: rgba(0, 0, 0, .45);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .25);
}

.tempo-barra i {
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--fatto, 0) * 100%);
	background: linear-gradient(90deg, var(--oro-scuro), var(--oro-luce));
	transition: width 1s linear;
}

.bonus .tempo-barra i {
	background: linear-gradient(90deg, var(--cremisi), #ff9a7a);
}

.bando-calmo {
	display: flex;
	align-items: center;
	gap: 22px;
}

.bando-calmo .evento-segno {
	width: 68px;
	height: 68px;
}

.bando-calmo h3 {
	margin: 0 0 4px;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.bando-calmo p {
	margin: 0;
	max-width: 70ch;
	color: var(--pergamena-2);
}

.bando-calmo .bando-prossimo {
	margin-top: 8px;
	color: var(--pergamena);
}

/* ---------- conto alla rovescia ---------- */

.appuntamenti-griglia {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(28px, 4vw, 52px);
}

html:not(.js) .conto {
	display: none;
}

.conto {
	padding: 34px 24px 30px;
	text-align: center;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(212, 174, 98, .16), transparent 62%),
		var(--grana),
		linear-gradient(180deg, var(--cuoio-2), var(--notte-2));
	box-shadow: var(--cornice), var(--ombra);
}

.conto-sopra {
	margin: 0 0 14px;
	font-family: var(--maiuscoletto);
	font-size: 1.05rem;
	color: var(--oro);
}

.conto-segno {
	width: 74px;
	height: 74px;
	margin: 0 auto 12px;
}

.conto-segno .icona {
	width: 36px;
	height: 36px;
}

.conto-nome {
	margin: 0;
	font-size: clamp(2rem, 4vw, 2.8rem);
	line-height: 1.05;
	color: var(--oro-luce);
}

.conto-dove {
	margin: 6px 0 0;
	font-style: italic;
	color: var(--pergamena-2);
}

.conto-cifre {
	display: flex;
	justify-content: center;
	gap: clamp(8px, 1.6vw, 14px);
	margin: 26px 0 18px;
	perspective: 400px;
}

.conto-cifre span {
	display: grid;
	gap: 2px;
	min-width: clamp(62px, 9vw, 84px);
	padding: 12px 6px 8px;
	background: linear-gradient(180deg, #120c08, #1f160f);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .4), inset 0 0 0 4px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .4);
}

.conto-cifre b {
	display: block;
	font-family: var(--gotico);
	font-size: clamp(2.1rem, 4.6vw, 3.1rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--avorio);
	text-shadow: 0 0 18px rgba(242, 214, 143, .25);
}

.conto-cifre small {
	font-family: var(--maiuscoletto);
	font-size: .85rem;
	color: var(--pergamena-3);
}

.conto-quando {
	margin: 0;
	font-family: var(--maiuscoletto);
	font-size: 1.2rem;
	color: var(--pergamena);
}

.conto.vicino .conto-cifre span {
	box-shadow: inset 0 0 0 1px rgba(224, 122, 95, .7), inset 0 0 0 4px rgba(0, 0, 0, .55), 0 0 22px rgba(181, 58, 47, .35);
}

.prossimi-titolo,
.settimana-titolo {
	margin: 0 0 8px;
	font-size: 1.9rem;
}

.prossimi {
	margin: 0;
	padding: 0;
	list-style: none;
}

.prossimo {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px dashed rgba(212, 174, 98, .22);
}

.prossimo > .icona {
	width: 24px;
	height: 24px;
	color: var(--oro);
}

.prossimo-nome {
	font-size: 1.12rem;
	color: var(--avorio);
}

.prossimo-nome small,
.prossimo-quando small {
	display: block;
	font-size: .92rem;
	color: var(--pergamena-3);
}

.prossimo-quando {
	font-family: var(--maiuscoletto);
	text-align: right;
	color: var(--oro-luce);
}

.prossimo.battito > .icona {
	color: #e8826a;
}

.prossimo.battito.attivo {
	background: linear-gradient(90deg, rgba(181, 58, 47, .22), transparent);
}

/* ---------- la settimana ---------- */

.settimana-titolo {
	margin-top: clamp(48px, 6vw, 72px);
}

.settimana-cornice {
	--alto: 320px;
	--testa: 46px;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	margin-top: 14px;
	padding: 18px clamp(12px, 2vw, 22px) 34px 8px;
	background: var(--grana), linear-gradient(180deg, var(--cuoio-2), var(--cuoio));
	box-shadow: var(--cornice), var(--ombra);
}

.settimana-ore {
	position: relative;
	height: var(--alto);
	margin-top: var(--testa);
}

.settimana-ore span {
	position: absolute;
	right: 8px;
	top: calc(var(--t) * 100%);
	translate: 0 -50%;
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	color: var(--pergamena-3);
}

.settimana {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.giorno-nome {
	display: grid;
	place-items: center;
	height: var(--testa);
	margin: 0;
	border-bottom: 1px solid rgba(212, 174, 98, .4);
	font-family: var(--maiuscoletto);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--pergamena-2);
}

.giorno-nome .corto {
	display: none;
}

.giorno.oggi .giorno-nome {
	color: var(--notte);
	background: linear-gradient(180deg, var(--oro-luce), var(--oro));
	border-radius: 3px 3px 0 0;
}

.giorno-ore {
	position: relative;
	height: var(--alto);
	background:
		repeating-linear-gradient(180deg, rgba(212, 174, 98, .12) 0 1px, transparent 1px calc(var(--alto) / 6)),
		rgba(0, 0, 0, .18);
}

.giorno.oggi .giorno-ore {
	background:
		repeating-linear-gradient(180deg, rgba(212, 174, 98, .16) 0 1px, transparent 1px calc(var(--alto) / 6)),
		rgba(212, 174, 98, .07);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .35);
}

.fascia-battito {
	position: absolute;
	left: 3px;
	right: 3px;
	top: calc(var(--da) * 100%);
	height: calc((var(--a) - var(--da)) * 100%);
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 6px 7px;
	border-left: 2px solid #c8513f;
	background:
		repeating-linear-gradient(135deg, rgba(181, 58, 47, .16) 0 6px, transparent 6px 12px),
		linear-gradient(180deg, rgba(142, 35, 32, .45), rgba(142, 35, 32, .2));
	color: #f1b3a5;
	font-size: .78rem;
	line-height: 1.15;
	text-decoration: none;
}

.fascia-battito .icona {
	width: 14px;
	height: 14px;
}

.fascia-battito small {
	font-variant-numeric: tabular-nums;
	opacity: .8;
}

.giorno-eventi {
	margin: 0;
	padding: 0;
	list-style: none;
}

.appuntamento {
	position: absolute;
	z-index: 2;
	left: 5px;
	right: 5px;
	top: calc(var(--t) * 100%);
	translate: 0 -4px;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 5px;
	align-items: center;
	padding: 6px 7px 7px;
	border-radius: 3px;
	background: linear-gradient(180deg, #f6e2a8, #cfa65a);
	box-shadow: 0 0 0 1px #7d5f27, 0 6px 14px rgba(0, 0, 0, .55);
	color: #2a1c0e;
	font-size: .85rem;
	line-height: 1.15;
	text-decoration: none;
	transition: translate .25s, box-shadow .25s;
}

.appuntamento::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 0;
	border: 4px solid transparent;
	border-left-color: #7d5f27;
	border-top-color: #7d5f27;
}

.appuntamento:hover,
.appuntamento:focus-visible {
	translate: 0 -7px;
	box-shadow: 0 0 0 1px #7d5f27, 0 10px 20px rgba(0, 0, 0, .6), 0 0 18px rgba(242, 214, 143, .4);
}

.appuntamento .icona {
	width: 16px;
	height: 16px;
}

.appuntamento b {
	font-variant-numeric: tabular-nums;
}

.appuntamento span {
	grid-column: 1 / -1;
	margin-top: 2px;
	font-weight: 700;
}

.appuntamento.passato {
	filter: grayscale(.8) brightness(.7);
}

.giorno-ore.con-ora::after {
	content: "";
	position: absolute;
	z-index: 3;
	left: -3px;
	right: -3px;
	top: calc(var(--ora) * 100%);
	height: 2px;
	background: #ff7a62;
	box-shadow: 0 0 10px #ff7a62;
}

.giorno-ore.con-ora::before {
	content: "";
	position: absolute;
	z-index: 3;
	left: -6px;
	top: calc(var(--ora) * 100%);
	width: 9px;
	height: 9px;
	translate: 0 -3.5px;
	border-radius: 50%;
	background: #ff7a62;
}

.settimana-nota {
	margin: 14px 0 0;
	font-size: .98rem;
	font-style: italic;
	color: var(--pergamena-3);
}

/* ---------- schede degli eventi ---------- */

.eventi-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
	gap: 24px;
	margin-top: 36px;
}

.evento {
	display: flex;
	scroll-margin-top: calc(var(--barra) + 24px);
	background: var(--grana), linear-gradient(180deg, var(--cuoio-2), var(--cuoio));
	box-shadow: var(--cornice), 0 10px 26px rgba(0, 0, 0, .45);
	transition: box-shadow .5s;
}

.evento-corpo {
	display: flex;
	flex-direction: column;
	padding: 26px 24px 20px;
}

.evento-testa {
	display: flex;
	align-items: center;
	gap: 16px;
}

.evento-testa h4 {
	margin: 0;
	font-size: 1.75rem;
	line-height: 1.05;
}

.evento-quando {
	margin: 4px 0 0;
	font-family: var(--maiuscoletto);
	font-size: .98rem;
	color: var(--oro);
}

.evento-testo {
	margin: 16px 0 14px;
	font-size: 1.08rem;
	color: var(--pergamena);
}

.evento-dati {
	margin: 0;
}

.evento-dati > div {
	display: grid;
	grid-template-columns: 82px minmax(0, 1fr);
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid rgba(212, 174, 98, .15);
}

.evento-dati dt {
	font-family: var(--maiuscoletto);
	font-size: .92rem;
	color: var(--oro);
}

.evento-dati dd {
	margin: 0;
	font-size: .98rem;
	color: var(--pergamena-2);
}

.luoghi {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.luoghi li {
	padding: 1px 8px;
	background: rgba(0, 0, 0, .28);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .2);
	color: var(--pergamena);
}

.luoghi .lv {
	font-family: var(--maiuscoletto);
	font-size: .85rem;
	color: var(--oro);
}

@media (min-width: 1100px) {
	.evento.largo {
		grid-column: span 2;
	}
}

/* scheda con il ritratto del modello 3D sopra */
.evento.con-ritratto {
	flex-direction: column;
}

.evento-ritratto {
	display: block;
	width: 100%;
	height: 230px;
	padding: 22px 0 0;
	object-fit: contain;
	background: radial-gradient(ellipse 46% 52% at 50% 62%, rgba(242, 214, 143, .22), transparent 70%);
	filter: drop-shadow(0 0 18px rgba(242, 214, 143, .3)) drop-shadow(0 12px 12px rgba(0, 0, 0, .55));
}

.evento.con-ritratto .evento-corpo {
	padding-top: 8px;
}

/* gli eventi che possono arrivare adesso (giorno o notte ad Aurion) */
.evento.ora-loro {
	box-shadow: var(--cornice), 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 1px rgba(242, 214, 143, .5), 0 0 30px rgba(212, 174, 98, .2);
}

.evento.ora-loro .evento-segno {
	animation: richiamo 2.6s ease-in-out infinite;
}

.evento:target {
	animation: bagliore 1.8s ease-out;
}

.gruppo-titolo {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: clamp(48px, 6vw, 72px) 0 0;
	font-size: 2rem;
}

.gruppo-titolo .icona {
	width: 30px;
	height: 30px;
	color: var(--oro);
}

.gruppo-titolo::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgba(212, 174, 98, .5), transparent);
}

.gruppo-titolo + .eventi-griglia {
	margin-top: 22px;
}

/* ---------- il quadrante del giorno e della notte ---------- */

.ciclo {
	display: grid;
	grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 5vw, 64px);
}

.quadrante {
	margin: 0;
	text-align: center;
}

.quadrante-disegno {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.quadrante-fondo {
	fill: rgba(0, 0, 0, .4);
	stroke: rgba(212, 174, 98, .45);
	stroke-width: 1.2;
}

.arco-giorno,
.arco-notte {
	fill: none;
	stroke-width: 13;
}

.arco-giorno {
	stroke: #d4ae62;
	filter: drop-shadow(0 0 6px rgba(242, 214, 143, .35));
}

.arco-notte {
	stroke: #2f4a8c;
	filter: drop-shadow(0 0 6px rgba(90, 130, 220, .35));
}

.quadrante-tacche path {
	stroke: rgba(242, 214, 143, .45);
	stroke-width: 1.4;
	stroke-linecap: round;
}

.segno-sole {
	color: var(--oro-luce);
}

.segno-luna {
	color: #b9cbff;
}

.lancetta {
	transform-box: view-box;
	transform-origin: 100px 100px;
	transition: transform 1s linear;
}

.lancetta path {
	stroke: var(--oro-luce);
	stroke-width: 3;
	stroke-linecap: round;
}

.lancetta circle {
	fill: var(--oro-luce);
	filter: drop-shadow(0 0 5px rgba(242, 214, 143, .9));
}

.quadrante.di-notte .lancetta path {
	stroke: #cfdcff;
}

.quadrante.di-notte .lancetta circle {
	fill: #cfdcff;
	filter: drop-shadow(0 0 6px rgba(160, 190, 255, .9));
}

.quadrante.senza-ora .lancetta {
	display: none;
}

.perno {
	fill: var(--cuoio);
	stroke: var(--oro);
	stroke-width: 2;
}

.quadrante figcaption {
	margin-top: 12px;
	font-size: .95rem;
	color: var(--pergamena-2);
}

.giorno-segno,
.notte-segno {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 6px 0 4px;
	border-radius: 2px;
	vertical-align: -1px;
	background: #d4ae62;
}

.notte-segno {
	margin-left: 14px;
	background: #2f4a8c;
}

.ciclo-testo h3 {
	margin: 0 0 10px;
	font-size: 2rem;
}

.ciclo-testo > p {
	max-width: 62ch;
	font-size: 1.1rem;
}

.ciclo-adesso {
	padding-left: 14px;
	border-left: 3px solid var(--oro);
	color: var(--oro-luce);
}

/* ---------- i Sigilli ---------- */

.sigilli-griglia {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	align-items: start;
	gap: clamp(32px, 5vw, 64px);
}

.sigilli-sotto {
	margin: 0 0 12px;
	font-size: 1.9rem;
}

.guadagno {
	margin: 0;
	padding: 0;
	list-style: none;
}

.guadagno li {
	display: grid;
	gap: 3px;
	padding: 12px 0;
	border-bottom: 1px dashed rgba(212, 174, 98, .22);
}

.guadagno a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--avorio);
	text-decoration: none;
}

.guadagno a:hover {
	color: var(--oro-luce);
}

.guadagno a .icona {
	width: 22px;
	height: 22px;
	color: var(--oro);
}

.guadagno b {
	display: flex;
	align-items: center;
	gap: 7px;
	padding-left: 34px;
	font-weight: 400;
	color: var(--pergamena-2);
}

.guadagno b .icona {
	flex: none;
	width: 18px;
	height: 18px;
	color: #e07a5f;
}

/* il banco dei Sigilli: un listino su pergamena */
.banco {
	display: grid;
	gap: 26px;
	padding: clamp(26px, 4vw, 40px);
	color: #2b1d10;
	background:
		radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120, 84, 40, .28)),
		var(--grana),
		linear-gradient(170deg, #f3e6c6, #e2cfa4);
	box-shadow: 0 0 0 1px #8a6a36, 0 0 0 5px rgba(0, 0, 0, .35), var(--ombra);
}

.banco-gruppo h4 {
	margin: 0;
	font-size: 1.7rem;
	color: var(--cremisi-scuro);
}

.banco-gruppo > p {
	margin: 2px 0 8px;
	font-size: .95rem;
	font-style: italic;
	color: #6b5536;
}

.listino {
	margin: 0;
	padding: 0;
	list-style: none;
}

.listino li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: baseline;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px dotted rgba(80, 52, 22, .4);
}

.merce {
	font-size: 1.12rem;
	font-weight: 500;
}

.merce small {
	display: block;
	font-size: .92rem;
	font-weight: 400;
	color: #6b5536;
}

.titolo-chat {
	font-family: 'VT323', monospace;
	font-size: 1.45rem;
	line-height: 1;
	color: #8a5a00;
}

.ancora {
	font-size: .85rem;
	font-style: italic;
	color: #6b5536;
}

.prezzo {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--gotico);
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--cremisi);
}

.prezzo .icona {
	width: 20px;
	height: 20px;
}

.comandi-eventi {
	margin-top: 36px;
}

/* ---------- la riga degli eventi della home ---------- */

.eventi-breve {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: clamp(36px, 5vw, 56px);
	padding: 18px clamp(18px, 3vw, 28px);
	background: var(--grana), linear-gradient(90deg, var(--cuoio-2), var(--cuoio));
	box-shadow: var(--cornice), 0 10px 26px rgba(0, 0, 0, .4);
}

.eventi-breve.acceso {
	box-shadow: var(--cornice), 0 10px 26px rgba(0, 0, 0, .4), 0 0 0 1px rgba(242, 214, 143, .45), 0 0 34px rgba(212, 174, 98, .2);
}

.eventi-breve.acceso .evento-segno {
	animation: richiamo 2.6s ease-in-out infinite;
}

.eventi-breve-testo {
	display: grid;
	flex: 1;
	min-width: 0;
}

.breve-sopra {
	font-family: var(--maiuscoletto);
	font-size: .95rem;
	color: var(--oro);
}

.eventi-breve strong {
	font-family: var(--gotico);
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--oro-luce);
}

.breve-sotto {
	color: var(--pergamena-2);
}

/* ---------- animazioni ---------- */

@keyframes entra-riga {
	from {
		opacity: 0;
		translate: 0 10px;
	}
}

@keyframes richiamo {
	0%, 100% {
		box-shadow: 0 0 0 2px var(--oro), 0 0 0 5px rgba(0, 0, 0, .5), 0 0 0 6px rgba(212, 174, 98, .3), 0 0 0 rgba(242, 214, 143, 0);
	}
	50% {
		box-shadow: 0 0 0 2px var(--oro-luce), 0 0 0 5px rgba(0, 0, 0, .5), 0 0 0 6px rgba(242, 214, 143, .6), 0 0 26px rgba(242, 214, 143, .55);
	}
}

@keyframes bagliore {
	0% {
		box-shadow: var(--cornice), 0 0 0 2px var(--oro-luce), 0 0 60px rgba(242, 214, 143, .6);
	}
}

@keyframes scatto {
	from {
		transform: rotateX(-80deg);
		opacity: .2;
	}
}

.conto-cifre b.scatta {
	animation: scatto .35s cubic-bezier(.2, .8, .3, 1.2);
}

.bando.con-eventi .in-corso:not(.esterno) .evento-segno {
	animation: richiamo 2.6s ease-in-out infinite;
}

.bando.con-eventi .stato-punto {
	animation: palpita 1.6s ease-in-out infinite;
}

@keyframes palpita {
	50% {
		box-shadow: 0 0 0 6px rgba(143, 207, 122, 0), 0 0 12px rgba(143, 207, 122, .9);
	}
}

@media (prefers-reduced-motion: reduce) {
	.in-corso,
	.evento.ora-loro .evento-segno,
	.eventi-breve.acceso .evento-segno,
	.bando.con-eventi .in-corso .evento-segno,
	.bando.con-eventi .stato-punto,
	.conto-cifre b.scatta,
	.evento:target {
		animation: none;
	}

	.lancetta,
	.tempo-barra i {
		transition: none;
	}
}

/* ---------- schermi piccoli ---------- */

@media (max-width: 960px) {
	.appuntamenti-griglia,
	.ciclo,
	.sigilli-griglia {
		grid-template-columns: minmax(0, 1fr);
	}

	.quadrante {
		max-width: 300px;
		margin: 0 auto;
	}

}

@media (max-width: 720px) {
	.adesso {
		margin-top: -28px;
	}

	.in-corso {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 16px;
	}

	.in-corso .bottone {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.in-corso .evento-segno,
	.bando-calmo .evento-segno {
		width: 54px;
		height: 54px;
	}

	.bando-calmo {
		align-items: flex-start;
	}

	.prossimo {
		grid-template-columns: 26px minmax(0, 1fr);
		row-gap: 4px;
	}

	.prossimo-quando {
		grid-column: 2;
		text-align: left;
	}

	.prossimo-quando small {
		display: inline;
		margin-left: 6px;
	}

	/* la settimana diventa un elenco di giorni */
	.settimana-cornice {
		display: block;
		padding: 8px 16px;
	}

	.settimana-ore {
		display: none;
	}

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

	.giorno {
		display: grid;
		grid-template-columns: 92px minmax(0, 1fr);
		align-items: center;
		border-bottom: 1px solid rgba(212, 174, 98, .16);
	}

	.giorno:last-child {
		border-bottom: 0;
	}

	.giorno-nome {
		place-items: center start;
		height: auto;
		padding: 12px 0;
		border: 0;
	}

	.giorno.oggi .giorno-nome {
		padding-left: 8px;
		border-radius: 3px;
	}

	.giorno-ore,
	.giorno.oggi .giorno-ore {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		height: auto;
		padding: 10px 0 10px 10px;
		background: none;
		box-shadow: none;
	}

	.giorno-eventi {
		display: contents;
	}

	.giorno-eventi li {
		order: -1;
	}

	.appuntamento,
	.fascia-battito {
		position: static;
		translate: none;
	}

	.appuntamento {
		display: inline-flex;
		gap: 6px;
	}

	.appuntamento::before {
		display: none;
	}

	.appuntamento span {
		margin: 0;
	}

	.fascia-battito {
		flex-direction: row;
		align-items: center;
		gap: 6px;
		height: auto;
		padding: 5px 8px;
	}

	.giorno-ore.con-ora::after,
	.giorno-ore.con-ora::before {
		display: none;
	}

	.evento-corpo {
		padding: 22px 18px 16px;
	}

	.evento-dati > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.listino li {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.listino .ancora {
		grid-row: 2;
	}

	.eventi-breve {
		flex-wrap: wrap;
	}

	.eventi-breve .bottone {
		width: 100%;
		justify-content: center;
	}
}