/* cookingbyamina.com — nero su panna, e basta. */

:root{
  --panna:#F3EEE2;
  --nero:#151310;
  --grigio:#7A7263;
  --riga:#D8CFBB;
}

*{box-sizing:border-box}

html{background:var(--panna)}

body{
  margin:0;
  background:var(--panna);
  color:var(--nero);
  font-family:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size:14px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.foglio{max-width:620px;margin:0 auto;padding:46px 24px 96px}

a{color:inherit}

/* ---------------------------------------------------------- testata */

header{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:22px;margin-bottom:34px;
  border-bottom:1px solid var(--riga);
}

.insegna{
  font-family:"Instrument Serif", Georgia, serif;
  font-size:26px;line-height:1;letter-spacing:.01em;
  text-decoration:none;
}
.insegna i{font-style:italic;color:var(--grigio)}

nav{display:flex;gap:18px;font-size:12px}

/* ---------------------------------------------------------- bottoni */

button{font:inherit;color:inherit;cursor:pointer}

.link{
  background:none;border:none;padding:0;
  font-size:12px;color:var(--grigio);
  text-decoration:underline;text-underline-offset:3px;
}
.link:hover{color:var(--nero)}

.bottone{
  background:var(--nero);color:var(--panna);
  border:1px solid var(--nero);border-radius:0;
  padding:9px 20px;font-size:13px;
}
.bottone:hover{background:transparent;color:var(--nero)}
.bottone.vuoto{background:transparent;color:var(--nero);border-color:var(--riga)}
.bottone.vuoto:hover{border-color:var(--nero)}

:where(a,button,input,textarea):focus-visible{
  outline:2px solid var(--nero);outline-offset:3px;
}

/* ---------------------------------------------------------- la lista */

.lista{list-style:none;margin:0;padding:0}

.lista li{border-bottom:1px solid var(--riga)}
.lista li:first-child{border-top:1px solid var(--riga)}

.voce{
  width:100%;background:none;border:none;text-align:left;
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:17px 0;
}
.voce:hover .titolo{text-decoration:underline;text-underline-offset:4px}

.titolo{
  font-family:"Instrument Serif", Georgia, serif;
  font-size:23px;line-height:1.15;
  text-wrap:balance;
}
.durata{
  font-size:12px;color:var(--grigio);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.vuota{color:var(--grigio);padding:30px 0;border-top:1px solid var(--riga)}

/* ---------------------------------------------------------- ricetta */

.indietro{margin-bottom:26px}

h1{
  font-family:"Instrument Serif", Georgia, serif;
  font-weight:400;font-size:clamp(30px,7vw,42px);line-height:1.08;
  margin:0 0 10px;text-wrap:balance;
}

.riassunto{margin:0 0 4px;color:var(--grigio);font-size:13px;max-width:52ch}

.dati{
  margin:20px 0 0;padding:14px 0;font-size:12px;color:var(--grigio);
  border-top:1px solid var(--riga);border-bottom:1px solid var(--riga);
  display:flex;gap:26px;flex-wrap:wrap;font-variant-numeric:tabular-nums;
}

h2{
  font-family:"IBM Plex Mono", monospace;
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grigio);margin:34px 0 12px;
}

.ingredienti{list-style:none;margin:0;padding:0;font-size:14px}
.ingredienti li{padding:6px 0 6px 20px;position:relative}
.ingredienti li::before{
  content:"";position:absolute;left:2px;top:14px;
  width:7px;height:1px;background:var(--nero);
}

.passaggi{margin:0;padding:0;list-style:none;counter-reset:p}
.passaggi li{
  counter-increment:p;position:relative;
  padding:0 0 16px 34px;font-size:14px;
}
.passaggi li::before{
  content:counter(p,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-size:12px;color:var(--grigio);font-variant-numeric:tabular-nums;
}

.nota{
  margin:30px 0 0;padding-top:16px;border-top:1px solid var(--riga);
  font-size:13px;color:var(--grigio);max-width:56ch;
}

/* ---------------------------------------------------------- form */

.campo{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}

label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}

input,textarea{
  font:inherit;font-size:14px;color:var(--nero);
  background:transparent;
  border:none;border-bottom:1px solid var(--riga);
  border-radius:0;padding:8px 0;width:100%;
}
input:focus,textarea:focus{border-bottom-color:var(--nero)}
input::placeholder,textarea::placeholder{color:#B3A992}

textarea{min-height:130px;resize:vertical;line-height:1.7}

.coppia{display:grid;grid-template-columns:1fr 1fr;gap:22px}

.aiuto{font-size:11.5px;color:var(--grigio)}

.messaggio{font-size:12.5px;min-height:19px;margin:0}
.messaggio.rosso{color:var(--nero);font-weight:500}

.pulsanti{display:flex;gap:12px;align-items:center;margin-top:28px}

.stretto{max-width:300px}

@media (max-width:520px){
  .coppia{grid-template-columns:1fr}
  .foglio{padding:34px 20px 70px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.staccato{margin-top:26px}