/* Al Macrame: calce, terracotta, verde blu. Solo caratteri di sistema. */
:root{
  --calce:#f5f1e7;
  --carta:#fcf9f3;
  --inchiostro:#1e1b17;
  --tenue:#5f584c;
  --terra:#a84c27;
  --verdeblu:#0f5058;
  --linea:#d8cfbd;
  --linea-forte:#b6a98f;
  --ombra:rgba(30,27,23,.08);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --calce:#15161a;
    --carta:#1c1e23;
    --inchiostro:#ece4d6;
    --tenue:#a69e90;
    --terra:#e08c60;
    --verdeblu:#5fb2b9;
    --linea:#33363d;
    --linea-forte:#4c515a;
    --ombra:rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--calce);
  color:var(--inchiostro);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.68;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--verdeblu);text-underline-offset:.18em;text-decoration-thickness:.06em}
a:hover{color:var(--terra)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.18;letter-spacing:-.01em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.5rem)}
h2{font-size:clamp(1.45rem,1.2rem + .9vw,2rem);margin-top:2.2em}
h3{font-size:1.2rem;margin-top:1.8em}
p{margin:0 0 1.1em}
.guscio{max-width:74rem;margin:0 auto;padding:0 1.6rem}
.etichetta{
  font-family:var(--sans);
  font-variant-caps:all-small-caps;
  font-feature-settings:"c2sc" 1,"smcp" 1;
  text-transform:lowercase;
  letter-spacing:.14em;
  font-size:.82rem;
  color:var(--tenue);
}
.sep{color:var(--linea-forte)}

/* testata */
.testata{border-bottom:1px solid var(--linea);background:var(--calce)}
.testata-riga{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem 2rem;padding:1.4rem 0 1.1rem}
.marchio{font-family:var(--serif);font-size:1.7rem;letter-spacing:.01em;text-decoration:none;color:var(--inchiostro)}
.marchio b{font-weight:600}
.marchio span{color:var(--terra)}
.motto{font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);margin-left:auto}
.menu{border-top:1px solid var(--linea);padding:.55rem 0}
.menu ul{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;margin:0;padding:0}
.menu a{
  font-family:var(--sans);
  font-size:.86rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--tenue);
  padding:.25rem 0;
  display:inline-block;
  border-bottom:1px solid transparent;
}
.menu a:hover,.menu a[aria-current]{color:var(--inchiostro);border-bottom-color:var(--terra)}

/* briciole */
.briciole{font-family:var(--sans);font-size:.8rem;color:var(--tenue);padding:1.4rem 0 0;letter-spacing:.03em}
.briciole a{color:var(--tenue)}
.briciole span{margin:0 .45rem;color:var(--linea-forte)}
.briciole .qui{margin:0;color:var(--inchiostro)}

/* impaginazione asimmetrica */
.impaginato{display:grid;grid-template-columns:minmax(0,1fr) 16.5rem;gap:3.4rem;align-items:start;padding:2.2rem 0 4rem}
.colonna-stretta{position:sticky;top:1.5rem;font-family:var(--sans)}
@media (max-width:62rem){
  .impaginato{grid-template-columns:1fr;gap:2.4rem}
  .colonna-stretta{position:static}
}
main{max-width:45rem;min-width:0}
main>p{max-width:42rem}
.occhiello{font-family:var(--sans);font-variant-caps:all-small-caps;text-transform:lowercase;letter-spacing:.16em;font-size:.9rem;color:var(--terra);margin:0 0 .7rem}
.sommario{font-size:1.22rem;line-height:1.55;color:var(--tenue);border-left:2px solid var(--terra);padding-left:1.2rem;margin:0 0 2rem}

/* schede nella colonna stretta */
.scheda{border-top:2px solid var(--verdeblu);padding-top:.8rem;margin-bottom:2.2rem}
.scheda-titolo{
  font-family:var(--sans);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--verdeblu);margin:0 0 .9rem;font-weight:600;
}
.fatti{margin:0}
.fatto{border-bottom:1px solid var(--linea);padding:.5rem 0}
.fatto dt{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.fatto dd{margin:.15rem 0 0;font-size:.95rem;line-height:1.45}
.scheda-link{list-style:none;margin:0;padding:0}
.scheda-link li{border-bottom:1px solid var(--linea)}
.scheda-link a{display:block;padding:.5rem 0;font-size:.92rem;text-decoration:none}
.scheda-link a:hover{text-decoration:underline}

/* elenco redazionale numerato */
.editoriale{list-style:none;counter-reset:voce;margin:2.4rem 0 0;padding:0}
.editoriale>li{
  counter-increment:voce;
  display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:1.6rem;
  border-top:1px solid var(--linea);padding:1.8rem 0;
}
.editoriale>li::before{
  content:counter(voce,decimal-leading-zero);
  grid-column:1;
  font-family:var(--serif);font-size:2.3rem;line-height:1;color:var(--terra);
}
.editoriale>li>*{grid-column:2}
.editoriale h2{margin:0 0 .35em;font-size:1.5rem}
.editoriale h2 a{text-decoration:none;color:var(--inchiostro)}
.editoriale h2 a:hover{color:var(--terra)}
.editoriale p{margin:0 0 .5em;color:var(--tenue)}
.editoriale .coda{font-family:var(--sans);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--verdeblu)}
@media (max-width:40rem){
  .editoriale>li{grid-template-columns:2.8rem minmax(0,1fr);gap:1rem}
  .editoriale>li::before{font-size:1.6rem}
}

/* video */
.video{margin:2.2rem 0 2.6rem;padding:0;border-top:1px solid var(--linea)}
.video-quadro{margin:1.1rem 0 0;background:var(--carta)}
.video-avvia{
  position:relative;display:block;width:100%;padding:0;border:1px solid var(--linea);
  background:none;cursor:pointer;color:inherit;font:inherit;overflow:hidden;
}
.video-avvia img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.92)}
.video-avvia:hover img{filter:saturate(1.05)}
.video-triangolo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:3.6rem;height:3.6rem;border-radius:50%;background:var(--terra);
}
.video-triangolo::after{
  content:"";position:absolute;left:56%;top:50%;transform:translate(-50%,-50%);
  border-left:1.05rem solid #fff;border-top:.66rem solid transparent;border-bottom:.66rem solid transparent;
}
.video-nome{
  position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;
  background:linear-gradient(to top,rgba(20,18,15,.86),rgba(20,18,15,0));
  color:#f7f2e8;font-family:var(--sans);font-size:.9rem;letter-spacing:.03em;text-align:left;
}
.video-quadro iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.video figcaption{padding-top:.9rem}
.video-riga{margin:0 0 .4rem}
.video figcaption p{margin:0 0 .7em}
.video-noscript a{font-family:var(--sans);font-size:.9rem}

/* occorrente */
.occorrente{border:1px solid var(--linea);border-left:3px solid var(--verdeblu);background:var(--carta);padding:1.4rem 1.6rem .4rem;margin:2.6rem 0}
.occorrente h2{margin-top:0;font-size:1.25rem}
.materiale{list-style:none;margin:0 0 1.1rem;padding:0}
.materiale li{border-bottom:1px solid var(--linea);padding:.5rem 0;font-size:.98rem}
.materiale li:last-child{border-bottom:0}
.occorrente-coda{font-size:.95rem;color:var(--tenue)}
a.bottega{font-family:var(--sans);font-size:.88rem;letter-spacing:.03em;white-space:nowrap}

/* tabelle e passaggi */
.tabella{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.98rem}
.tabella th,.tabella td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--linea)}
.tabella th{font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);font-weight:600}
.tabella-guscio{overflow-x:auto}
ol.passi{padding-left:1.3rem}
ol.passi li{margin-bottom:.6em}
ul.punti{padding-left:1.2rem}
ul.punti li{margin-bottom:.45em}
.nota{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:1rem 0;font-size:.98rem;color:var(--tenue);margin:2rem 0}

/* rekenhulp */
.calcolo{border:1px solid var(--linea);background:var(--carta);padding:1.5rem 1.6rem;margin:2rem 0}
.campo{margin-bottom:1.1rem}
.campo label{display:block;font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);margin-bottom:.35rem}
.campo select,.campo input{
  width:100%;padding:.6rem .7rem;font:inherit;font-size:1rem;
  background:var(--calce);color:var(--inchiostro);border:1px solid var(--linea-forte);border-radius:0;
}
.bottone{
  font-family:var(--sans);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--verdeblu);color:#fbf8f2;border:0;padding:.8rem 1.6rem;cursor:pointer;
}
.bottone:hover{background:var(--terra)}
.esito{margin-top:1.4rem;border-top:2px solid var(--terra);padding-top:1rem}
.esito .cifra{font-size:2rem;font-family:var(--serif);color:var(--terra);line-height:1.1}
.esito p{margin:.5em 0 0;font-size:.97rem}

/* pie di pagina */
.pie{border-top:1px solid var(--linea);background:var(--carta);margin-top:3rem;padding:2.6rem 0 3rem;font-family:var(--sans);font-size:.9rem}
.pie-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2rem}
.pie h2{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verdeblu);margin:0 0 .8rem;font-family:var(--sans)}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:.4rem}
.pie a{text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie-coda{border-top:1px solid var(--linea);margin-top:2.2rem;padding-top:1.2rem;color:var(--tenue);font-size:.85rem}
.saltello{position:absolute;left:-9999px}
.saltello:focus{position:static;display:inline-block;padding:.5rem}