/* Un foglio solo, nessuna dipendenza esterna: il sito deve caricare anche
   con una connessione lenta e restare in piedi fra dieci anni. */

:root {
	--sfondo: #12100e;
	--sfondo-2: #1b1815;
	--bordo: #332d26;
	--testo: #e8e2d9;
	--tenue: #a29a8e;
	--fuoco: #ff8c2b;
	--verde: #6fcf5f;
	--rosso: #e35d4a;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--sfondo);
	color: var(--testo);
	font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.contenuto { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }

/* ---------------------------------------------------------------- testata */

header {
	border-bottom: 1px solid var(--bordo);
	background: linear-gradient(180deg, #1e1a16 0%, var(--sfondo) 100%);
	padding: 3.5rem 0 3rem;
	text-align: center;
}

header img { width: 128px; height: 128px; image-rendering: auto; }

h1 { margin: 1rem 0 0.25rem; font-size: 2.6rem; letter-spacing: -0.02em; }

.claim {
	/* niente max-width: e' lui che mandava a capo la frase molto prima del
	   bordo. Il margine sotto resta, e' lo stacco dai pulsanti. */
	margin: 0 auto 1.75rem;
	font-size: 1.2rem;
	color: var(--fuoco);
}

/* -------------------------------------------------------------- schermate */

.galleria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 1.5rem;
}

.galleria figure { margin: 0; }

/* width:auto, non 100%: le schermate dei menu sono piccole (338px) e
   stirarle a tutta colonna le renderebbe sfocate. Restano alla loro
   dimensione, centrate, e si riducono solo se la colonna e' piu' stretta. */
.galleria img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 6px;
	border: 1px solid #3a332c;
}

.galleria figcaption {
	margin-top: 0.6rem;
	font-size: 0.95rem;
	color: #a29a8e;
}

/* Il click ingrandisce. Nella griglia le schermate grandi stanno in colonne
   da poco piu' di 400px, quindi rimpiccioliscono: la lente le rimette a
   grandezza vera. Tutto con :target, senza JavaScript. */
.galleria a { display: block; cursor: zoom-in; }

.lente {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba(0, 0, 0, 0.88);
	padding: 1.5rem;
}

.lente:target { display: flex; align-items: center; justify-content: center; }

.lente a {
	display: block;
	max-width: 100%;
	max-height: 100%;
	cursor: zoom-out;
}

.lente img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 90vh;
	border-radius: 6px;
	border: 1px solid #3a332c;
}

/* --------------------------------------------------------------- pulsanti */

.azioni { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.bottone {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	border: 1px solid var(--bordo);
	color: var(--testo);
	background: var(--sfondo-2);
}

.bottone.primario { background: var(--fuoco); border-color: var(--fuoco); color: #1a1207; }
.bottone:hover { filter: brightness(1.12); }

/* --------------------------------------------------------------- sezioni  */

section { padding: 3rem 0; border-bottom: 1px solid var(--bordo); }

h2 { font-size: 1.5rem; margin: 0 0 1.5rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--fuoco); }

.griglia {
	display: grid;
	gap: 1.5rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.griglia p { margin: 0; color: var(--tenue); }

ul.spoglio { list-style: none; padding: 0; margin: 0; color: var(--tenue); }
ul.spoglio li { padding: 0.3rem 0 0.3rem 1.2rem; position: relative; }
ul.spoglio li::before { content: "·"; position: absolute; left: 0.3rem; color: var(--fuoco); }

code {
	background: var(--sfondo-2);
	border: 1px solid var(--bordo);
	border-radius: 4px;
	padding: 0.1rem 0.35rem;
	font-size: 0.9em;
}

/* Segnaposto per gli screenshot: finche' non ci sono, si vede che mancano
   invece di lasciare un buco muto. */
.scatto {
	border: 1px dashed var(--bordo);
	border-radius: 8px;
	padding: 3rem 1rem;
	text-align: center;
	color: var(--tenue);
	background: var(--sfondo-2);
}

footer {
	padding: 2.5rem 0 3.5rem;
	text-align: center;
	color: var(--tenue);
	font-size: 0.9rem;
}

footer a, .lingua a { color: var(--fuoco); }

.lingua { text-align: right; padding-top: 1rem; font-size: 0.9rem; }

@media (max-width: 40rem) {
	h1 { font-size: 2rem; }
	header { padding: 2.5rem 0 2rem; }
}