/* ============================================================
   Missive · modulo pubblico
   Stile del manuale "Exclave · Ambientazione & Regolamento":
   carta bianca, inchiostro nero, accento arancio, titoli
   Anybody, testo Space Grotesk Light, quadratini arancio.
   ============================================================ */

:root {
  --carta: #ffffff;
  --inchiostro: #0a0a0a;
  --grigio: #575756;
  --grigio-chiaro: #8c8c8a;
  --arancio: #bc6c24;
  --arancio-velo: #faf3ec;
  --errore: #a3341b;
  --errore-velo: #fbeeea;

  --font-titoli: 'Anybody', 'Space Grotesk', system-ui, sans-serif;
  --font-testo: 'Space Grotesk', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
body { position: relative; overflow-x: hidden; }

::selection { background: var(--arancio); color: #fff; }

strong { font-weight: 600; }

/* ===== Copertina ===== */
.copertina {
  position: relative;
  height: clamp(230px, 42vh, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0f0c url("img/copertina.jpg") 60% 40% / cover no-repeat;
}
.copertina-logo {
  width: clamp(170px, 26vw, 290px);
  height: auto;
  filter: drop-shadow(0 2px 16px rgba(0,0,0,.35));
}
.copertina-tag {
  position: absolute;
  top: 18px;
  right: 20px;
  margin: 0;
  color: #fff;
  font-weight: 300;
  font-size: clamp(.95rem, 2vw, 1.2rem);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ===== Pagina ===== */
.pagina {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 76px) 24px 24px;
  text-align: center;   /* tutto centrato, come il logo in copertina */
}

h1, h2 {
  font-family: var(--font-titoli);
  text-transform: uppercase;
  margin: 0;
}

.apertura h1 {
  font-weight: 300;
  font-size: clamp(2.3rem, 8.8vw, 4.9rem);
  line-height: .95;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.sottotitolo {
  margin: .2em 0 0;
  font-family: var(--font-titoli);
  font-weight: 300;
  font-size: clamp(1.35rem, 4.4vw, 2rem);
  line-height: 1.1;
  color: var(--arancio);
  letter-spacing: 0;
}
.intro {
  max-width: 34em;
  margin: 1.8em auto 0;
  text-wrap: pretty;
}

h2 {
  font-weight: 400;
  font-size: clamp(1.65rem, 5.2vw, 2.3rem);
  line-height: 1;
  margin-bottom: .75em;
}
/* ===== Modulo ===== */
.lettera { margin-top: clamp(52px, 8vw, 84px); }

.lettera-campi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.campo label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--carta);
  color: var(--inchiostro);
  border: 1px solid var(--inchiostro);
  border-radius: 0;
  font-family: var(--font-testo);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: .02em;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.campo input,
.campo select { text-align: center; text-align-last: center; }
.campo input::placeholder,
.campo textarea::placeholder { color: var(--grigio-chiaro); opacity: 1; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--arancio);
  box-shadow: 0 0 0 1px var(--arancio);
}

.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%230a0a0a' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.campo select option:disabled { color: var(--grigio-chiaro); }

.foglio {
  display: block;
  min-height: 340px;
  resize: vertical;
  padding: 18px 20px;
  line-height: 1.6;
  text-align: left;
}

/* Pulsante al centro, contatore sotto */
.lettera-piede {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.contatore {
  font-weight: 500;
  font-size: .85rem;
  color: var(--grigio);
  letter-spacing: .04em;
}
.contatore::before { content: "("; color: var(--arancio); }
.contatore::after  { content: ")"; color: var(--arancio); }
.contatore.pieno { color: var(--errore); }

.btn-sigilla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  padding: 14px 26px;
  background: var(--inchiostro);
  color: #fff;
  border: 1px solid var(--inchiostro);
  border-radius: 0;
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-sigilla::before {
  content: "";
  width: .55em;
  height: .55em;
  background: var(--arancio);
  transition: background .15s;
}
.btn-sigilla:hover:not(:disabled) { background: var(--arancio); border-color: var(--arancio); }
.btn-sigilla:hover:not(:disabled)::before { background: #fff; }
.btn-sigilla:focus-visible { outline: 2px solid var(--arancio); outline-offset: 3px; }
.btn-sigilla:disabled { opacity: .55; cursor: wait; }

.esito {
  max-width: 34em;
  margin: 18px auto 0;
  padding: 12px 16px;
  border: 1px solid;
  font-size: .95rem;
}
.esito-ok  { border-color: var(--arancio); background: var(--arancio-velo); }
.esito-err { border-color: var(--errore); background: var(--errore-velo); color: var(--errore); }

/* Curve di livello in fondo alla pagina (motivo originale del manuale) */
body::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(760px, 140vw);
  background: url("img/anelli.svg") 72% 85% / cover no-repeat;
  opacity: .075;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
          mask-image: linear-gradient(to bottom, transparent, #000 45%);
}

/* ===== Piè di pagina ===== */
.piede {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 24px 32px;
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.piede-sx::before {
  content: "";
  display: inline-block;
  width: .6em;
  height: .6em;
  margin-right: .45em;
  background: var(--arancio);
}
.piede-num { color: var(--arancio); font-weight: 500; }
.piede-dx { text-align: right; }

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .pagina { padding-left: 16px; padding-right: 16px; }
  .piede { padding-left: 16px; padding-right: 16px; }
  .lettera-campi { grid-template-columns: 1fr; gap: 16px; }
  .foglio { min-height: 280px; padding: 14px 16px; }
  .lettera-piede { align-items: stretch; }
  .copertina-tag { top: 14px; right: 16px; }
}