/* ============ IN PIENA LUCE: domande, finale, piede ============
   Dopo il fronte a 17° del marchio il sito e' di giorno: carta (Calce) e inchiostro (Notte). */
/* le domande */
#c-faq{background:var(--luce);color:var(--notte);margin:-100vh 0 0;position:relative;z-index:2;
  /* l'angolo tagliato come la cima della A: 55/180 = tan 17° */
  -webkit-clip-path:polygon(0 55px,180px 0,100% 0,100% 100%,0 100%);clip-path:polygon(0 55px,180px 0,100% 0,100% 100%,0 100%);box-shadow:0 -30px 60px rgba(11,11,11,.08)}
#c-faq .eyebrow{color:var(--pietra)}
#c-faq h2{color:var(--pietra)}
#c-faq h2 .w i.acc,#c-faq h2 em{color:var(--notte)}
#c-faq .w.om{display:none}
#c-faq .faq{border-top-color:rgba(11,11,11,.18)}
#c-faq .faq>div{border-bottom-color:rgba(11,11,11,.12)}
#c-faq .faq button{color:var(--notte)}
#c-faq .faq button:focus-visible{outline-color:var(--notte)}
#c-faq .faq .ans p{color:rgba(11,11,11,.72)}
#c-faq .passa{color:var(--notte)}
#c-faq .passa::before{background:var(--notte);box-shadow:none}
/* il finale */
#c-fine{position:relative;background:var(--luce);color:var(--notte);padding:18svh var(--m) 12svh}
#c-fine .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pietra)}
#c-fine .fi-testa{max-width:44rem}
#c-fine .fi-testa .mono{margin:0 0 18px}
#c-fine .fi-testa h2{margin:0;font:400 clamp(2.4rem,min(1rem + 4.6vw,9svh),5.8rem)/.95 'Alauda Titoli','Mona Sans',sans-serif;text-transform:uppercase;color:var(--pietra)}
#c-fine .fi-testa h2 b{font-weight:400;color:var(--notte)}
#c-fine .fi-lead{margin:22px 0 0;max-width:46ch;font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:rgba(11,11,11,.75)}
/* il nome: grande quanto la pagina, scoperto dalla luce a 17° come ALAUDA nell'ingresso */
#c-fine .fi-nome{position:relative;margin:9svh 0 7svh;font:400 var(--fi-corpo,clamp(3rem,12vw,13rem))/.9 'Alauda Titoli','Mona Sans',sans-serif;text-transform:uppercase;white-space:nowrap;min-height:1em}
#c-fine .fi-nome span{display:block}
#c-fine .fi-nome .buio{color:rgba(11,11,11,.07)}
#c-fine .fi-nome .lume{position:absolute;left:0;top:0;color:var(--notte);
  -webkit-mask-image:linear-gradient(163deg,#000 calc(50% - 70px),transparent calc(50% + 70px));mask-image:linear-gradient(163deg,#000 calc(50% - 70px),transparent calc(50% + 70px));
  /* l'altezza della maschera la calcola giorno.js: un nome lungo e basso ne vuole di piu', se no la fine resta in ombra */
  -webkit-mask-size:100% calc(var(--fi-n,5) * 100%);mask-size:100% calc(var(--fi-n,5) * 100%);-webkit-mask-position:0 100%;mask-position:0 100%}
#c-fine .fi-nome.sale .lume{animation:fiSale 1.5s cubic-bezier(.45,.05,.25,1) forwards}
#c-fine .fi-nome.fermo .lume{-webkit-mask-position:0 0;mask-position:0 0}
#c-fine .fi-nome.vuoto .lume{color:rgba(11,11,11,.2)}
@keyframes fiSale{to{-webkit-mask-position:0 0;mask-position:0 0}}
#c-fine .fi-sotto{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
#c-fine .quiz{margin:0;max-width:34rem;flex:1 1 26rem}
#c-fine .qbar{background:rgba(11,11,11,.14)}
#c-fine .qbar i{background:var(--notte)}
#c-fine .qq{color:var(--notte)}
#c-fine .qlab{color:rgba(11,11,11,.55)}
#c-fine .qf input{color:var(--notte);border-bottom-color:rgba(11,11,11,.3)}
#c-fine .qf input::placeholder{color:rgba(11,11,11,.32)}
#c-fine .qf input:focus{border-bottom-color:var(--notte)}
#c-fine .chips button{color:var(--notte);border-color:rgba(11,11,11,.28)}
#c-fine .chips button:hover{border-color:var(--notte)}
#c-fine .chips button[aria-pressed="true"]{background:var(--notte);color:var(--calce);border-color:var(--notte)}
#c-fine .qgo,#c-fine .go{border-color:var(--notte);background:var(--notte);color:var(--calce)}
#c-fine .go:hover{background:transparent;color:var(--notte)}
#c-fine .qcons{color:rgba(11,11,11,.62)}
#c-fine .qcons a{color:var(--notte)}
#c-fine .qcons input{accent-color:var(--notte)}
#c-fine .qnote{color:rgba(11,11,11,.55)}
#c-fine .qnav,#c-fine .qnav button{color:rgba(11,11,11,.55)}
#c-fine .qnav button:hover{color:var(--notte)}
#c-fine .fi-nota{margin:0}
/* il piede, nella luce piena */
body .foot{background:var(--luce);color:var(--notte);border-top:0;padding:0;height:175vh;height:175svh}
/* il piede si ferma: in basso le colonne, in alto il posto libero dove atterra ALAUDA, sceso dal logo */
body .foot .foot-palco{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:flex-end;gap:6svh;padding:0 var(--m) 1.6rem;overflow:hidden}
body .foot p,body .foot h4{color:rgba(11,11,11,.62)}
body .foot a,body .foot .manca{color:var(--notte)}
/* il nome e' il logo stesso (stessa maschera, stesso riquadro): le lettere piene arrivano ai margini */
body .foot .marchione{display:block;flex:none;width:calc(100% * 5058.5 / 4694);margin:0 0 0 calc(-100% * 182.3 / 4694);aspect-ratio:5058.5/1125.5;font-size:0;cursor:default;
  -webkit-mask:url(../media/alauda-maschera.svg) 0 0/100% 100% no-repeat;mask:url(../media/alauda-maschera.svg) 0 0/100% 100% no-repeat;
  /* la stessa lama che attraversa Filippo e Niccolo': larga, chiara, sull'ardesia */
  background-image:linear-gradient(163deg,rgba(255,248,236,0) 0%,rgba(255,248,236,0) calc(var(--fx,-40%) - 7%),rgba(255,248,236,.7) var(--fx,-40%),rgba(255,248,236,0) calc(var(--fx,-40%) + 7%),rgba(255,248,236,0) 100%),linear-gradient(163deg,#141414 0%,#141414 calc(var(--fx,-40%) - 16%),#F3EEE6 var(--fx,-40%),#141414 calc(var(--fx,-40%) + 16%),#141414 100%),url(../media/ardesia.jpg);
  background-size:100% 100%,100% 100%,cover;background-blend-mode:screen,multiply,normal;background-color:#0B0B0B;transform-origin:0 0;will-change:transform}
body .foot .fgrid{flex:none}
body .fbar{border-top-color:rgba(11,11,11,.12);color:rgba(11,11,11,.55)}
@media (max-width:759px){
  body .foot{height:auto}
  body .foot .foot-palco{position:relative;height:auto;padding-top:12svh;overflow:visible}
}
@media (max-width:899px){
  #c-fine{padding:14svh var(--m) 10svh}
  #c-fine .fi-nome{margin:6svh 0 5svh}
}