/* ---------------------------------------------------------------
   Base — carta calda, inchiostro, cose disegnate storte apposta.
   --------------------------------------------------------------- */

:root{
  /* superfici */
  --crema:        #f6efe3;
  --crema-scura:  #ece1cf;
  --carta:        #fdfaf3;
  --tavolo:       #e7dbc7;

  /* inchiostri */
  --inchiostro:   #1d2433;
  --inchiostro-2: #4a5364;
  --tenue:        #8c8574;
  --biro:         #26356f;
  --nero:         #14171d;
  --rosso:        #a3271c;

  /* accenti */
  --ceralacca:    #a3271c;
  --ceralacca-hi: #d1533f;
  --rosa:         #c2415a;
  --oro:          #b98b3e;
  --notte:        #0a0c17;

  --raggio:       14px;
  --ombra-carta:  0 1px 2px rgba(60,45,25,.10), 0 10px 24px -12px rgba(60,45,25,.28);
  --ombra-alta:   0 2px 6px rgba(60,45,25,.12), 0 26px 60px -22px rgba(60,45,25,.45);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mano: 'Caveat', 'Bradley Hand', cursive;

  --misura: 68ch;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:var(--inchiostro);
  background:var(--crema);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Grana di carta su tutto il sito: due frequenze sovrapposte,
   una fine (fibra) e una larga (macchie di ingiallimento). */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 15% 0%, rgba(197,168,120,.16), transparent 60%),
    radial-gradient(100% 80% at 95% 100%, rgba(170,140,95,.14), transparent 55%);
  mix-blend-mode:multiply;
}
body > *{ position:relative; z-index:1; }

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1.05; margin:0; }
h1{ font-size:clamp(2.6rem, 8vw, 5.2rem); }
h2{ font-size:clamp(2rem, 5.2vw, 3.4rem); }
h3{ font-size:clamp(1.3rem, 2.6vw, 1.7rem); }
p{ margin:0 0 1em; }

.corsivo{ font-style:italic; }
.mano{ font-family:var(--mano); font-size:1.35em; line-height:1.25; }

.contenitore{ width:min(1140px, 92vw); margin-inline:auto; }
.stretto{ width:min(720px, 92vw); margin-inline:auto; }

.occhiello{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tenue); font-weight:500;
}

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

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font:500 1rem/1 var(--sans);
  padding:.95em 1.5em;
  border:1.5px solid var(--inchiostro);
  border-radius:999px;
  background:var(--inchiostro); color:var(--crema);
  cursor:pointer; text-decoration:none;
  transition:transform .12s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s ease, background .2s ease, color .2s ease;
  box-shadow:0 2px 0 rgba(29,36,51,.25);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ transform:translateY(-2px) rotate(-.4deg); box-shadow:0 6px 0 -1px rgba(29,36,51,.22), 0 14px 24px -14px rgba(29,36,51,.6); }
.btn:active{ transform:translateY(1px) rotate(0); box-shadow:0 1px 0 rgba(29,36,51,.3); }
.btn:focus-visible{ outline:3px solid var(--rosa); outline-offset:3px; }

.btn-vuoto{ background:transparent; color:var(--inchiostro); box-shadow:none; }
.btn-vuoto:hover{ background:rgba(29,36,51,.06); box-shadow:none; }

.btn-rosa{ background:var(--rosa); border-color:var(--rosa); color:#fff; box-shadow:0 2px 0 rgba(140,40,64,.35); }
.btn-rosa:hover{ box-shadow:0 6px 0 -1px rgba(140,40,64,.3), 0 14px 24px -14px rgba(140,40,64,.7); }

.btn-grande{ font-size:1.1rem; padding:1.1em 2em; }

/* ---------- campi ----------------------------------------------------- */

label{ display:block; font-size:.82rem; font-weight:500; letter-spacing:.02em; color:var(--inchiostro-2); margin-bottom:.4em; }

input[type=text], input[type=date], input[type=time], textarea, select{
  width:100%; font:400 1rem/1.45 var(--sans); color:var(--inchiostro);
  padding:.7em .85em;
  background:var(--carta);
  border:1.5px solid rgba(29,36,51,.22);
  border-radius:10px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--inchiostro);
  box-shadow:0 0 0 3px rgba(194,65,90,.16);
}
textarea{ resize:vertical; min-height:5.5em; }
select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a5364' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9em center; padding-right:2.4em; }

.aiuto{ font-size:.78rem; color:var(--tenue); margin:.45em 0 0; line-height:1.45; }

/* ---------- utilità --------------------------------------------------- */

.solo-lettori{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.doodle{ display:block; overflow:visible; }
.doodle path, .doodle line, .doodle circle{
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}