/* ======================================================================
   MODULI DI CONTATTO
   File a parte apposta: style.css non viene toccato, e se un giorno si
   vuole tornare indietro basta togliere il collegamento dalle pagine.
   ====================================================================== */

.mod { margin-top: clamp(22px, 3vh, 34px); max-width: 540px; }
.mod-riga { margin-bottom: 13px; }
.mod-riga-doppia { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
/* Su telefono le due caselle affiancate diventerebbero strettissime: si impilano. */
@media (max-width: 680px) {
  .mod-riga-doppia { grid-template-columns: 1fr; gap: 18px; }
  .mod-riga-doppia > div { margin-bottom: 0; }
  .mod-invia { width: 100%; text-align: center; }
  .mod-diretto { gap: 14px 0; flex-direction: column; }
}

.mod-eti {
  display: block; margin-bottom: 6px;
  font-family: var(--font-cond); font-weight: 900; font-stretch: condensed;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink); opacity: 0.72;
}
.mod-campo {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  font-family: var(--font-body); font-weight: 300; font-size: 15px;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mod-campo:focus {
  outline: none;
  border-color: var(--color-accent-scuro);
  box-shadow: 0 0 0 3px rgba(156, 60, 151, 0.16);
}
textarea.mod-campo { min-height: 112px; resize: vertical; line-height: 1.55; }

.mod-consenso {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 17px 0 4px;
  font-family: var(--font-body); font-weight: 300;
  font-size: 12.5px; line-height: 1.5; color: var(--color-ink); opacity: 0.8;
}
.mod-consenso input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--color-accent-scuro); flex: none; }
.mod-consenso a { text-decoration: underline; }

/* Un solo tasto per tutto il sito: il rosa di Areté, sia sul chiaro che sullo scuro.
   Il testo resta nero perché su questo rosa si legge molto meglio del bianco. */
.mod-invia {
  display: inline-block; width: fit-content; margin-top: 16px;
  background: var(--color-accent); color: var(--color-ink);
  /* Archivo Black scelto a vista il 5/11. Scritto per esteso e non come
     var(--font-cond), che oggi punta a un file mancante e ripiega qui per caso. */
  font-family: "Archivo Black", sans-serif; font-weight: 400;
  font-size: clamp(13px, 1.1vw, 16px); letter-spacing: 0.05em;
  padding: 13px 30px; border: 0; border-radius: 12px; cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.mod-invia:hover { background: var(--color-accent-scuro); color: var(--color-white); }

/* La via di scampo: mail e telefono sempre in chiaro accanto al modulo. */
.mod-oppure {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}
.mod-oppure-eti {
  font-family: var(--font-cond); font-weight: 900; font-stretch: condensed;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink); opacity: 0.6; margin: 0 0 10px;
}
.mod-diretto { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0; }
.mod-diretto a {
  font-family: var(--font-body); font-weight: 300; font-size: clamp(15px, 1.3vw, 17px);
  color: var(--color-ink); user-select: all;
  border-bottom: 2px solid var(--color-accent);
}

/* ======================================================================
   IL MODULO — versione SCURA (Areté e book trailer, fondo nero).
   Stesse misure, pelle diversa: pillole e testo chiaro, come il resto di Areté.
   ====================================================================== */
.mod-scuro .mod-eti { color: var(--paper); opacity: 0.72; }
.mod-scuro .mod-campo {
  background: rgba(242, 242, 242, 0.06);
  border: 1px solid rgba(242, 242, 242, 0.3);
  border-radius: 999px;
  color: var(--paper);
}
.mod-scuro textarea.mod-campo { border-radius: 24px; }
.mod-scuro .mod-campo:focus {
  border-color: var(--paper);
  box-shadow: 0 0 0 3px rgba(242, 242, 242, 0.12);
}
.mod-scuro .mod-campo::placeholder { color: rgba(242, 242, 242, 0.4); }
.mod-scuro .mod-consenso { color: var(--paper); opacity: 0.78; }
/* Sullo scuro il tasto è identico a quello chiaro: stesso colore, stessa forma.
   La pillola di Areté è stata scartata il 5/11 per avere un tasto solo in tutto il sito. */
.mod-scuro .mod-oppure { border-top-color: rgba(242, 242, 242, 0.22); }
.mod-scuro .mod-oppure-eti { color: var(--paper); opacity: 0.6; }
.mod-scuro .mod-diretto a { color: var(--paper); border-bottom-color: var(--color-accent); }

/* La riga con mail e telefono sotto il tastone di chiusura delle due home.
   Sta qui e non in style.css per tenere insieme tutto quello che riguarda i contatti. */
.cta-contatti {
  position: relative;
  margin: 0 auto;
  max-width: 52ch;
  line-height: 1.9;
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(14px, 1.3vw, 17px);
  color: var(--paper-dim);
}
.cta-contatti a {
  color: var(--paper);
  user-select: all;
  /* Un indirizzo o un numero spezzato a meta' non si legge e non si copia. */
  white-space: nowrap;
  border-bottom: 2px solid var(--color-accent);
}

/* ======================================================================
   LA CHIUSURA DELLE HOME
   ----------------------------------------------------------------------
   SESTA LUNA: fondo grigio chiaro, testo nero, frase su una riga, niente
   alone rosa, e il tasto torna delle dimensioni di un tasto.
   ARETÉ: non si tocca. Resta fondo nero e testo chiaro come in style.css,
   dove la frase su una riga sola c'era gia' dal 4/10.
   Per questo ogni regola qui sotto porta body:not(.brand-arete).
   ====================================================================== */
body:not(.brand-arete) .scene-cta { background: var(--color-bg); }
body:not(.brand-arete) .scene-cta .cta-glow { display: none; }

body:not(.brand-arete) .scene-cta .cta-kicker {
  margin: 0 auto;
  max-width: none;
  white-space: nowrap;
  font-weight: 700;
  font-size: min(2.45vw, 40px);
  line-height: 1.2;
  color: var(--color-ink);
}

/* Sotto i 760px una riga sola sarebbe illeggibile: la si lascia andare a capo. */
@media (max-width: 760px) {
  body:not(.brand-arete) .scene-cta .cta-kicker {
    white-space: normal;
    max-width: 22ch;
    font-size: clamp(18px, 5.2vw, 26px);
    text-wrap: balance;
  }
}

body:not(.brand-arete) .scene-cta .cta-mail {
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--color-ink);
  border: 1.5px solid rgba(0, 0, 0, 0.55);
  padding: clamp(14px, 1.5vw, 18px) clamp(28px, 3.4vw, 46px);
}
body:not(.brand-arete) .scene-cta .cta-mail:hover {
  background: var(--color-ink);
  color: var(--color-bg);
}

body:not(.brand-arete) .scene-cta .cta-contatti { color: rgba(0, 0, 0, 0.68); }
body:not(.brand-arete) .scene-cta .cta-contatti a { color: var(--color-ink); }


/* ======================================================================
   TIPOGRAFIA DI SESTA LUNA (5/11)
   ----------------------------------------------------------------------
   Scelta a vista: titoli in Fraunces, un graziato contemporaneo, e tutto
   il resto in Figtree, che era gia' sul sito. Il graziato dice "libri"
   al primo sguardo e distingue Sesta Luna da Areté, che resta lineare.

   Si cambiano le tre variabili sul body invece di riscrivere le regole:
   style.css non viene toccato, e per tornare indietro basta cancellare
   questo blocco.

   Fuori restano: Areté (brand-arete), la pagina d'ingresso (page-landing)
   e il titolone SESTA LUNA della home, che per tua richiesta resta Fixture.
   ====================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-700.woff2") format("woff2");
  /* 700-900: cosi' le regole che chiedono il 900 usano questo file
     invece di far ingrassare le lettere al browser, che le sporca. */
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-800.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

body.brand-luna {
  --font-display: "Fraunces", Georgia, serif;
  --font-cond: "Figtree", Helvetica, Arial, sans-serif;
  --font-body: "Figtree", Helvetica, Arial, sans-serif;
}

/* Figtree non ha una versione stretta: senza questo il browser se la
   inventa schiacciando le lettere. */
body.brand-luna [class] { font-stretch: normal; }

/* I titoli in Fraunces stanno piu' larghi del Fixture: si stringono un filo. */
body.brand-luna .forma-title,
body.brand-luna .chi-mega,
body.brand-luna .sv-title,
body.brand-luna .ct-label,
body.brand-luna .ct-title { letter-spacing: -0.015em; }

/* L'unica eccezione: il titolone della prima schermata resta com'era. */
body.brand-luna .hero-brand {
  font-family: "Fixture Ultra Black", "Archivo Black", sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

/* Il tasto di chiusura usava --font-display, quindi col cambio era finito
   in Fraunces: i tasti vogliono il lineare, non il graziato. */
body.brand-luna .cta-mail {
  font-family: "Figtree", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* «o chiamaci allo» restava appeso in fondo alla riga e il numero andava
   a capo da solo: adesso vanno a capo insieme. */
.cta-chiama { white-space: nowrap; }

/* ======================================================================
   PAGINA INFORMATIVA PRIVACY
   ====================================================================== */
.pv {
  background: var(--color-bg);
  padding: calc(var(--nav-h) + clamp(40px, 7vh, 80px)) 0 clamp(60px, 10vh, 110px);
}
.pv-titolo {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.08;
  color: var(--color-ink);
}
.pv-data {
  margin: 0 0 clamp(28px, 4vh, 46px);
  font-family: var(--font-cond); font-weight: 700;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-ink); opacity: 0.6;
}
.pv h2 {
  margin: clamp(30px, 4.4vh, 46px) 0 10px;
  font-family: var(--font-cond); font-weight: 700;
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: 0.01em;
  color: var(--color-ink);
}
.pv p {
  margin: 0 0 14px;
  max-width: 68ch;
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.68;
  color: var(--color-ink); opacity: 0.88;
}
.pv a { color: var(--color-ink); border-bottom: 2px solid var(--color-accent); }
.pv strong { font-weight: 700; opacity: 1; }
.pv-torna { margin-top: clamp(36px, 5vh, 56px); }

/* ======================================================================
   IL CAMPO TRAPPOLA DEI MODULI
   Invisibile a chi guarda la pagina e non raggiungibile col tasto Tab:
   lo riempiono solo i programmi automatici, e invia.php li scarta.
   Non si usa display:none perche' certi programmi lo riconoscono.
   ====================================================================== */
.mod-trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ======================================================================
   TITOLO DELLA HOME DI SESTA LUNA — rimpicciolito (5/11)
   Era 11vw fino a 162px: con Fraunces occupava mezzo schermo. Ora poco
   piu' della meta'. La barra rosa dietro DELL'EDITORIA e' disegnata dentro
   la riga, quindi si stringe da sola insieme alla scritta.
   ====================================================================== */
body.brand-luna .forma-title {
  font-size: clamp(32px, 5.6vw, 84px);
  line-height: 1.08;
}
@media (max-width: 640px) {
  body.brand-luna .forma-title { font-size: 8.4vw; }
}

/* ======================================================================
   LA FRASE SOTTO IL TITOLO DELLA HOME — su due righe (5/11)
   Stava in una colonna di 585px e andava su quattro righe. Su schermo
   grande la colonna si allarga e la frase si spezza dopo "INNOVAZIONE";
   il corpo e' legato alla larghezza della finestra, cosi' le due righe
   non vanno mai a capo da sole. Sotto i 900px torna libera di scendere.
   ====================================================================== */
@media (min-width: 900px) {
  body.brand-luna .forma-copy { max-width: none; }
  body.brand-luna .forma-intro {
    max-width: none;
    white-space: nowrap;
    font-size: min(1.55vw, 22px);
    line-height: 1.5;
  }
}
@media (max-width: 899px) {
  body.brand-luna .solo-desk { display: none; }
}