/* Pagina contatti. Solo quello che e' suo: tokens, reset, barra, menu, cursore
   e footer stanno in comune.css, come per le pagine progetto.

   Fondo nero come la home. Il pezzo che porta il peso e' il compositore: una
   frase grande in cui alcune parole sono caselle da riempire. Le parole vuote
   sono arancioni e sottolineate a puntini, quelle riempite diventano bianche e
   la sottolineatura si chiude. Nient'altro cambia: e' l'unico movimento della
   pagina, e vuol dire una cosa sola, "questa l'hai fatta". */

.ct{
  padding:calc(var(--nav-h) + clamp(40px,7vh,90px)) var(--pad) clamp(80px,12vh,160px);
  max-width:1600px;margin:0 auto;
}

/* Il calore del fondo sale col riempimento della frase: --riempito va da 0 a 1
   e lo scrive contatti.js. Non e' decorazione a vuoto, e' l'unica cosa che dice
   "manca poco" a chi non sta guardando il contatore in alto. */
.ct::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 34%, rgba(216,136,42,.17), transparent 72%);
  opacity:var(--riempito,0);
  transition:opacity .9s var(--ease);
}

/* Etichetta per il lettore di schermo. Le caselle della frase non possono
   avere una label a vista senza sfasciare la frase, ma senza label un input
   non ha nome: questa c'e' e non si vede. */
.ct-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================================================
   TESTATA
   ============================================================ */
.ct-occhiello{color:var(--dim);margin-bottom:clamp(18px,3vh,34px)}

.ct-tit{
  font-family:var(--f-serif);font-weight:var(--w-serif);
  font-size:clamp(52px,10.5vw,176px);letter-spacing:-.012em;line-height:.94;
}
/* stessa maschera di #contact-big sulla home: le righe salgono da sotto */
.ct-tit .line{overflow:hidden;display:block;padding-bottom:.16em;margin-bottom:-.16em}
.ct-tit .line > span{display:block;transform:translateY(130%)}

.ct-sotto{
  margin-top:clamp(26px,4vh,44px);max-width:56ch;
  font-size:clamp(16px,1.5vw,21px);line-height:1.65;
  color:rgba(244,244,242,.78);
}
.ct-sotto--min{margin-top:14px;font-size:clamp(14px,1.15vw,16px);color:var(--dim)}

/* ============================================================
   COMPOSITORE
   ============================================================ */
.ct-comp{margin-top:clamp(64px,11vh,140px)}

.ct-comp-testa{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.ct-comp-testa h2{color:var(--dim)}
.ct-conta{color:var(--dim);font-variant-numeric:tabular-nums}
#ct-conta-n{color:var(--orange)}

.ct-barra{margin-top:12px;height:1px;background:rgba(244,244,242,.16)}
.ct-barra i{
  display:block;height:100%;width:0;background:var(--orange);
  transition:width .55s var(--ease);
}

.ct-frase{margin-top:clamp(34px,6vh,64px)}

.ct-riga{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(27px,4.4vw,64px);line-height:1.34;letter-spacing:-.02em;
  color:rgba(244,244,242,.62);
  text-wrap:pretty;
}
.ct-riga + .ct-riga{margin-top:clamp(10px,1.6vh,20px)}

/* ---- le caselle ----
   La sottolineatura sta sul contenitore e non sulla parola, ed e' l'unico modo
   perche' cada dove ci si aspetta. Il bordo di un elemento inline si disegna
   sotto la scatola del carattere, non sotto le lettere: con Objektiv a 64px
   quella scatola scende una trentina di pixel oltre le aste, e la riga finiva
   staccata dalla parola, come una riga a se'. Il contenitore e' inline-block
   con line-height:1, quindi la scatola torna alta quanto il testo. */
.slot{
  position:relative;display:inline-block;white-space:nowrap;
  line-height:1;padding:0 .04em .1em;vertical-align:baseline;
  border-bottom:2px solid var(--orange);
}
/* Il select e' invisibile e sta sopra la parola: il clic apre il menu di
   sistema, quindi il focus e la tastiera non vanno riscritti. Il contorno lo
   disegna il contenitore, se no non si vedrebbe mai. */
.slot:focus-within{outline:2px solid var(--orange);outline-offset:5px;border-radius:2px}

/* Fino a che la casella e' vuota la parola e' arancione e la riga e' a
   puntini: si legge come un buco da riempire, non come una parola scritta.
   Dove :has() non c'e', la riga resta piena e il colore della parola distingue
   comunque il vuoto dal riempito: si perde una sfumatura, non l'informazione. */
.slot:has(input:placeholder-shown),
.slot:has(.slot-vista[data-vuoto="si"]){border-bottom-style:dotted}

.slot input,
.slot-vista{
  display:inline-block;line-height:1;
  font:inherit;letter-spacing:inherit;
  color:var(--white);background:none;border:0;padding:0;
}
/* L'altezza va imposta: un <input> non prende la line-height per la sua
   scatola, la ricava dalle metriche del carattere, e con Objektiv a 63px
   veniva alta 137. Misurato in un browser vero: 1em basta e non taglia le
   discendenti, perche' il testo di un campo e' centrato nella sua altezza. */
.slot input{width:auto;height:1em;border-radius:0;outline:none}
.slot input::placeholder{color:var(--orange);opacity:1}
.slot input:placeholder-shown{color:var(--orange)}
.slot-vista[data-vuoto="si"]{color:var(--orange)}

/* Larghezza della casella del nome: la scrive contatti.js misurando il testo
   con .slot-misura, che ha lo stesso carattere e la stessa crenatura. Con
   l'attributo `size` la casella restava larga un terzo in piu' della parola,
   perche' `size` conta caratteri della larghezza dello zero e le minuscole
   sono piu' strette. */
.slot-misura{
  position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;
  white-space:pre;font:inherit;letter-spacing:inherit;line-height:1;
}

.slot--scelta{padding-right:.62em}
.slot--scelta select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;font:inherit;
  /* min 44px anche quando il corpo scende sui piccoli: resta toccabile */
  min-height:44px;
}
.slot-giu{
  position:absolute;right:.06em;bottom:.28em;width:.4em;pointer-events:none;
  color:var(--orange);transition:color .3s var(--ease);
}
.slot-giu svg{width:100%;height:auto;display:block;stroke-linecap:round;stroke-linejoin:round}
.slot--scelta:has(.slot-vista:not([data-vuoto])) .slot-giu{color:rgba(244,244,242,.55)}

/* Il timbro alla scelta: la parola si posa, non compare e basta. Una sola
   proprieta' animata, transform, e sotto reduced-motion non parte. */
@keyframes ct-timbro{
  from{transform:translateY(.06em) scale(.985)}
  to  {transform:none}
}
.slot-vista.ct-posa{animation:ct-timbro .32s var(--ease)}

/* ---- il testo libero ---- */
.ct-note{margin-top:clamp(40px,6vh,72px);max-width:62ch}
.ct-note label{display:block;font-size:15px;color:rgba(244,244,242,.78);margin-bottom:10px}
.ct-note label .mono{color:var(--dim);margin-left:6px}
.ct-note textarea{
  width:100%;font:inherit;font-size:17px;line-height:1.6;color:var(--white);
  background:rgba(244,244,242,.04);
  border:1px solid rgba(244,244,242,.18);border-radius:3px;
  padding:14px 16px;resize:vertical;min-height:110px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.ct-note textarea::placeholder{color:var(--dim)}
.ct-note textarea:hover{border-color:rgba(244,244,242,.32)}
/* Il bordo arancione da solo dice poco: e' quasi lo stesso segnale dell'hover.
   Con `outline:none` su :focus il contorno spariva anche a chi arriva col Tab,
   che e' l'unico a cui serviva davvero. Adesso lo perde solo il clic. */
.ct-note textarea:focus{border-color:var(--orange);background:rgba(244,244,242,.06)}
.ct-note textarea:focus:not(:focus-visible){outline:none}

.ct-oggetto{margin-top:clamp(26px,4vh,40px);color:var(--dim);line-height:1.7}
#ct-oggetto-val{color:rgba(244,244,242,.78)}

/* ---- i due pulsanti ---- */
.ct-azioni{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}

.ct-cta,.ct-sec{
  display:inline-flex;align-items:center;gap:12px;
  min-height:56px;padding:0 30px;border-radius:999px;
  font-family:var(--f-display);font-weight:var(--w-display);font-size:16px;letter-spacing:-.01em;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.ct-cta{background:var(--orange);color:var(--ink);border:1px solid var(--orange)}
.ct-cta:hover{background:var(--orange-dim);border-color:var(--orange-dim)}
.ct-arw{display:inline-block;transition:transform .35s var(--ease)}
.ct-cta:hover .ct-arw{transform:translateX(5px)}

.ct-sec{background:none;color:var(--white);border:1px solid rgba(244,244,242,.28)}
.ct-sec:hover{border-color:var(--white)}
.ct-sec[data-fatto]{border-color:var(--orange);color:var(--orange)}

.ct-errore{margin-top:16px;color:var(--orange);line-height:1.7}
.ct-errore:empty{margin-top:0}

.ct-dove{margin-top:20px;color:var(--dim);line-height:1.8;max-width:60ch}
.ct-dove a{border-bottom:1px solid rgba(138,138,138,.6)}
.ct-dove a:hover{color:var(--white);border-bottom-color:var(--white)}

/* ============================================================
   RECAPITI DIRETTI
   ============================================================ */
.ct-diretti{margin-top:clamp(90px,16vh,190px);border-top:1px solid rgba(244,244,242,.14);padding-top:clamp(30px,5vh,54px)}
.ct-diretti h2{color:var(--dim)}

.ct-recapiti{list-style:none;margin-top:clamp(24px,4vh,44px)}
.ct-recapiti li + li{margin-top:clamp(8px,1.4vh,16px)}
.ct-grande{
  display:inline-block;
  font-family:var(--f-serif);font-weight:var(--w-serif);
  font-size:clamp(30px,5.4vw,80px);letter-spacing:-.012em;line-height:1.14;
  border-bottom:1px solid rgba(244,244,242,.22);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.ct-grande:hover{color:var(--orange);border-bottom-color:var(--orange)}

.ct-fatti{
  margin-top:clamp(34px,6vh,64px);color:var(--dim);
  display:flex;flex-wrap:wrap;gap:8px clamp(24px,4vw,60px);
}

/* ============================================================
   SCHERMI PICCOLI
   Il corpo della frase scende, ma le caselle restano toccabili: il select
   copre tutta la parola e non scende comunque sotto i 44px.
   ============================================================ */
@media (max-width:760px){
  .ct-riga{font-size:clamp(24px,6.6vw,34px);line-height:1.42}
  /* Il corpo scende e con lui la casella: qui si alza da sopra, cosi' l'area
     da toccare torna sui 44px senza staccare la sottolineatura dalla parola,
     che e' quello che succederebbe crescendo da sotto. */
  /* Misurato a 375px: corpo 24,75px. Il select riempie il contenitore perche'
     e' assoluto, quindi gli bastava questo. */
  .slot{padding-top:.7em}
  /* Il campo del nome no: sta nel flusso, resta alto 1em e si appoggia in
     fondo, quindi lo spazio aggiunto al contenitore gli passava sopra la testa
     senza allargargli l'area da toccare — 25px misurati a 375. Adesso e' il
     campo a prendersi lo spazio, e il margine negativo lo riporta esattamente
     dov'era: il testo non si muove di un pixel e la sottolineatura resta
     attaccata alla parola, che e' quello che si perderebbe crescendo da sotto.
     .8em su 24,75 fa 44,5 di altezza. Il `content-box` serve: il reset mette
     tutto in `border-box`, e li' il padding sta dentro l'altezza dichiarata,
     quindi la scatola non cresceva di un pixel. */
  .slot input{padding-top:.8em;margin-top:-.8em;box-sizing:content-box}
  .ct-comp-testa{flex-direction:column;align-items:flex-start;gap:8px}
  .ct-azioni{gap:10px}
  .ct-cta,.ct-sec{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .ct::before,.ct-barra i{transition:none}
  .slot-vista.ct-posa{animation:none}
}