/* Reset, tipografia e comandi di base. Vale per tutte le pagine del sito. */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--carta);
  color:var(--ink);
  font-family:var(--font);
  font-weight:var(--peso-testo);
  font-size:var(--f-3);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block;}
img{height:auto;}
h1,h2,h3,h4{margin:0;font-weight:var(--peso-titolo);line-height:1.06;letter-spacing:-.035em;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}

.colonna{width:100%;max-width:var(--colonna);margin:0 auto;padding-left:var(--bordo-pagina);padding-right:var(--bordo-pagina);}

/* occhielli */
.occhiello{font-size:var(--f-1);font-weight:var(--peso-forte);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);}
.su-scuro .occhiello{color:var(--chiaro-3);}

/* testo secondario */
.secondario{color:var(--ink-2);}
.su-scuro .secondario{color:var(--chiaro-2);}

/* il gradiente del marchio come inchiostro */
.grad{
  background:var(--gradiente);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{color:var(--b3);background:none;}
}

/* blocchi su fondo scuro */
.su-scuro{background:var(--nero);color:var(--chiaro);}

/* comandi */
.bottone{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font:inherit;font-weight:var(--peso-forte);font-size:var(--f-2);
  padding:13px 22px;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--ink);color:var(--carta);text-decoration:none;
  transition:transform .14s ease,opacity .14s ease;
}
.bottone:hover{transform:translateY(-1px);opacity:.92;}
.bottone:active{transform:translateY(0);}
.bottone--marchio{background:var(--gradiente);color:#fff;}
.bottone--fantasma{background:transparent;color:var(--ink);border:1px solid var(--linea);}

a{color:inherit;}
:focus-visible{outline:3px solid var(--b3);outline-offset:3px;border-radius:var(--r-xs);}

@media(min-width:720px){
  :root{--bordo-pagina:34px;}
}