/* The Stripped — una pagina sola.
   Bianco e nero fissi: niente variante scura, perché il bianco non è un tema
   ma la pagina. Niente font esterni: il carattere è quello di sistema, portato
   al registro giusto dalla spaziatura invece che dalla famiglia -- una
   copertina deve comparire subito, e una richiesta di rete in meno è la
   differenza. */

:root {
	--carta: #ffffff;
	--inchiostro: #000000;
	color-scheme: light;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100dvh;
	background: var(--carta);
	color: var(--inchiostro);
	font-family: ui-sans-serif, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.copertina {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(1.75rem, 5vh, 2.75rem);
	padding: clamp(2rem, 6vw, 3.5rem) clamp(0.75rem, 3vw, 2rem);
	text-align: center;
}

/* --------------------------------------------------------------- scatto */

/* Cornice rettangolare, 16:9, con lo scatto che la riempie: il file è 640x498
   (quasi 4:3), quindi per stare in questa forma va ritagliato.
   `object-position` in basso ancora l'immagine al suo bordo inferiore, così il
   ritaglio mangia dall'alto -- dove c'è solo il muro.

   `cover` e non `contain`: contain lascerebbe due bande vuote ai lati invece
   di ritagliare. Le proporzioni dello scatto restano intatte in ogni caso --
   cover ritaglia, non deforma.

   Per cambiare la forma è l'`aspect-ratio`: 16/9 = adesso, 2/1 più
   cinematografico e taglia di più, 3/2 più vicino all'originale.

   Sulla misura: 72rem sono 1152px contro i 640 nativi del file, quasi il
   doppio. Il browser ingrandisce, cioè inventa pixel, e da vicino lo scatto è
   morbido. È una scelta -- la presenza vale la nitidezza persa -- e l'unico
   rimedio vero non sta in questo file: è un originale più grande. */
.scatto {
	display: block;
	width: min(100%, 72rem);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 50% 100%;
	/* Su schermi bassi la cornice si accorcia invece di spingere il testo
	   fuori pagina. Con `cover` non si deforma niente: cambia solo quanto
	   viene tagliato in alto. */
	max-height: 70vh;
}

/* ----------------------------------------------------------- didascalia */

.didascalia {
	display: grid;
	gap: 0.85rem;
}

.marchio {
	margin: 0;
	font-size: clamp(0.8rem, 0.72rem + 0.4vw, 1rem);
	font-weight: 400;
	/* La spaziatura è il marchio. L'ultima lettera si porta dietro lo spazio di
	   destra, che senza correzione scentra la riga. */
	letter-spacing: 0.4em;
	text-indent: 0.4em;
	text-transform: uppercase;
	line-height: 1.3;
}

.claim {
	margin: 0;
	font-size: clamp(0.66rem, 0.62rem + 0.2vw, 0.78rem);
	font-weight: 300;
	letter-spacing: 0.17em;
	text-indent: 0.17em;
	line-height: 1.6;
	text-wrap: balance;
}

/* ----------------------------------------------------------------- coda */

.attesa {
	margin: 0;
	font-size: 0.6rem;
	font-weight: 400;
	letter-spacing: 0.32em;
	text-indent: 0.32em;
	text-transform: uppercase;
	line-height: 1;
}