/* Colori e caratteri sono presi dall'invito: la carta color crema, il rosso
   delle rose, e il marrone delle scritte. La pagina deve sembrare la
   continuazione del cartoncino, non un modulo qualsiasi che arriva dopo.

   Il carattere è quello del cartoncino, il Times, in due soli stili come lì:
   normale per il testo, grassetto maiuscolo e spaziato per le etichette, come
   «NOVEMBRE» e «DOMENICA». Si usa il Tinos, la copia libera del Times, perché
   i telefoni Android il Times non ce l'hanno e lo sostituirebbero con un altro.
   Sta sul nostro server, non su quelli di Google. */

:root {
	--carta:   #f7efe7;
	--carta-2: #fffaf6;
	--rosso:   #8e1520;
	--rosso-2: #b0202c;
	--oro:     #815828;     /* il marrone delle scritte sull'invito */
	--inchiostro: #4a3b33;
	--tenue:   #8a7568;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0 0 2.5rem;
	background: var(--carta);
	color: var(--oro);
	font-family: 'Tinos', 'Times New Roman', Times, serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}

.foglio {
	max-width: 620px;
	margin: 0 auto;
	padding: 0 16px;          /* il margine che serve sui telefoni stretti */
}

.invito {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto 1.6rem;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(74, 59, 51, .18);
}

/* I titoli nello stesso Times del testo, solo più grandi e nel rosso delle
   rose: nessun carattere in più. */
h2 {
	font-size: 1.55rem;
	font-weight: 400;
	color: var(--rosso);
	margin: 0 0 .5rem;
	line-height: 1.2;
	text-align: center;
}

/* --- i dettagli pratici --- */

.dettagli {
	background: var(--carta-2);
	border: 1px solid #e6d8cb;
	border-radius: 14px;
	padding: 1.1rem 1.3rem;
	margin-bottom: 1.4rem;
	text-align: center;
}
.dettagli p { margin: .5rem 0; }
/* Data e indirizzo nello stesso marrone con cui sono scritti sull'invito. */
.dettagli p { color: var(--oro); }
/* L'etichetta va già a capo da sola: l'a capo scritto dopo aggiungeva una riga
   vuota fra «QUANDO» e la data, e i due spazi del riquadro non erano uguali. */
.dettagli b + br { display: none; }
.dettagli b {
	display: block;
	font-size: .8rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--oro);
	font-weight: 700;
	margin-bottom: .15rem;
}
.mappa a {
	color: var(--rosso);
	text-decoration: none;
	border-bottom: 1px solid #dcc4a8;
	padding-bottom: 1px;
}

/* --- il modulo --- */

.modulo, .esito {
	background: var(--carta-2);
	border: 1px solid #e6d8cb;
	border-radius: 14px;
	padding: 1.3rem;
	margin-bottom: 1.4rem;
}
.esito { text-align: center; }
.esito h2 { margin-bottom: .4rem; }

.gia { margin: 0 0 1.1rem; color: var(--oro); font-size: inherit; }

label {
	display: block;
	margin: 1rem 0 .3rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--oro);
}
.facoltativo { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--oro); }

input[type=text], input[type=number], input[type=password], textarea {
	width: 100%;
	font-family: inherit;
	font-size: inherit;      /* la pagina non scende mai sotto i 16, sotto i quali
	                            i telefoni ingrandiscono da soli */
	padding: .7rem .8rem;
	border: 1px solid #d9c6b6;
	border-radius: 10px;
	background: #fff;
	color: var(--oro);
}
/* Il suggerimento dentro la casella è lo stesso marrone, solo più chiaro:
   deve sembrare un esempio, non una risposta già scritta. */
::placeholder { color: var(--oro); opacity: .5; }
input:focus, textarea:focus {
	outline: none;
	border-color: var(--rosso-2);
	box-shadow: 0 0 0 3px rgba(176, 32, 44, .12);
}
textarea { resize: vertical; }

/* le due scelte, grandi abbastanza da premerle col pollice */
.scelta { display: flex; gap: .6rem; margin: 1.1rem 0 .2rem; align-items: stretch; }
.bottone-scelta {
	flex: 1;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: inherit;
	color: var(--oro);
	cursor: pointer;
}
.bottone-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.bottone-scelta { display: flex; }
.bottone-scelta span {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.25;
	text-align: center;
	padding: .8rem .5rem;
	border: 1px solid #d9c6b6;
	border-radius: 10px;
	background: #fff;
	transition: background .15s, border-color .15s, color .15s;
}
.bottone-scelta input:checked + span {
	background: var(--rosso);
	border-color: var(--rosso);
	color: #fff;
}
.bottone-scelta input:focus-visible + span { box-shadow: 0 0 0 3px rgba(176, 32, 44, .25); }

.nascosto { display: none; }

button {
	width: 100%;
	margin-top: 1.4rem;
	padding: .95rem 1rem;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	background: var(--rosso);
	border: none;
	border-radius: 10px;
	cursor: pointer;
}
button:hover { background: var(--rosso-2); }

.errore { color: var(--rosso-2); font-size: .9rem; margin: .35rem 0 0; }

/* Il campo trappola: invisibile a chi guarda, presente per i programmi. */
.trabocchetto {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.privatezza {
	margin: 1.1rem 0 0;
	font-size: inherit;
	line-height: 1.5;
	color: var(--oro);
}

.minuto { font-size: .88rem; margin: .8rem 0 0; }
.minuto a { color: var(--oro); }

/* La firma scritta a mano: l'unico posto della pagina con la calligrafia,
   presa il più vicino possibile a quella di «Renee» e «Villa Clodia»
   sull'invito, tratto sottile e uniforme. È grande perché è sottile: più
   piccola non si leggerebbe. */
.firma {
	text-align: center;
	color: var(--oro);
	font-family: 'Allison', cursive;
	font-weight: 400;
	font-size: 3.1rem;
	line-height: 1;
	margin: 1.4rem 0 0;
}
/* Quando firma Renée, nel rosso del suo nome sul cartoncino. */
.firma.di-renee { color: var(--rosso); }

/* --- la pagina riservata --- */

.riservata { max-width: 900px; }
.numeri { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.4rem; }
.numero {
	flex: 1 1 120px;
	background: var(--carta-2);
	border: 1px solid #e6d8cb;
	border-radius: 12px;
	padding: .9rem;
	text-align: center;
}
.numero .valore { font-size: 2rem; color: var(--rosso); line-height: 1.1; }
.numero .etichetta {
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--oro);
}

table { width: 100%; border-collapse: collapse; background: var(--carta-2); }
th, td { padding: .6rem .5rem; border-bottom: 1px solid #ece0d4; text-align: left; font-size: .95rem; }
th {
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--oro);
	font-weight: normal;
}
td.destra, th.destra { text-align: right; }
.no { color: var(--tenue); }
.tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 480px) {
	body { font-size: 17px; }
	.foglio { padding: 0 12px; }
	h2 { font-size: 1.4rem; }
}