/* ---------------------------------------------------------------
   Studio Legale Minasi — foglio di stile
   Tipografia editoriale, palette sobria, dettagli d'inchiostro.
--------------------------------------------------------------- */

@font-face{
  font-family:'EB Garamond';
  src:url('../fonts/ebgaramond.woff2') format('woff2');
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --carta:#FBFAF6;
  --carta-chiara:#FFFFFF;
  --ink:#1B1B18;
  --verde:#103C00;
  --verde-tenue:#2B5A18;
  --grigio:#6F6F68;
  --riga:#DDDCD6;
}

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

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

body{
  margin:0;
  color:var(--ink);
  font-family:'EB Garamond',Garamond,Georgia,'Times New Roman',serif;
  font-feature-settings:"kern" 1,"liga" 1,"onum" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:clamp(2rem,7vw,5rem) 1.5rem clamp(3rem,8vw,6rem);

  /* fondo: carta con leggerissima vignetta e grana sottile */
  background-color:var(--carta);
  background-image:
    radial-gradient(ellipse at center top, var(--carta-chiara) 0%, var(--carta) 55%, #F4F2EA 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-blend-mode:multiply;
  background-attachment:fixed;
}

.foglio{width:100%;max-width:34rem}

/* ---- ingresso in scena: inchiostro che asciuga ---- */

@keyframes affiora{
  from{opacity:0;transform:translateY(6px)}
  to  {opacity:1;transform:none}
}

.foglio > *{
  opacity:0;
  animation:affiora .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.foglio > *:nth-child(1){animation-delay:.05s}
.foglio > *:nth-child(2){animation-delay:.25s}
.foglio > *:nth-child(3){animation-delay:.40s}
.foglio > *:nth-child(4){animation-delay:.55s}

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

.marchio{
  display:block;
  width:clamp(15rem,80%,26rem);
  height:auto;
  margin:0 auto;
}

/* ornamento sostitutivo dell'<hr>: filo con diamante al centro */
.ornamento{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  margin:clamp(1.75rem,5vw,2.5rem) auto;
  color:var(--verde);
}
.ornamento::before,
.ornamento::after{
  content:"";
  flex:0 1 3.5rem;
  height:1px;
  background:currentColor;
  opacity:.55;
}
.ornamento span{
  font-size:.6rem;
  line-height:1;
  transform:translateY(-1px);
  letter-spacing:0;
}

.nota{
  margin:0 0 clamp(2rem,6vw,3rem);
  text-align:center;
  color:var(--grigio);
  font-size:1rem;
  line-height:1.6;
  font-style:italic;
  text-wrap:balance;
}

/* ---- recapito ---- */

.recapito{
  display:block;
  font-style:normal;
  border-top:1px solid var(--riga);
}

.recapito > *{
  display:block;
  border-bottom:1px solid var(--riga);
  transition:border-color .3s ease;
}

.recapito a{
  display:block;
  padding:1.05rem 0;
  text-decoration:none;
  color:inherit;
}

.voce{
  display:block;
  font-variant-caps:small-caps;
  font-size:.72rem;
  letter-spacing:.19em;
  color:var(--grigio);
  margin-bottom:.15rem;
  transition:color .3s ease;
}

.valore{
  display:block;
  line-height:1.25;
  transition:color .3s ease;
}

.valore--tel {font-size:clamp(1.6rem,7vw,2rem);letter-spacing:.01em;font-feature-settings:"onum" 1,"lnum" 0}
.valore--mail{font-size:clamp(1.05rem,4.7vw,1.35rem);word-break:break-word}
.valore--sede{font-size:clamp(1.05rem,4.3vw,1.25rem)}
.valore--sede span{display:block;color:var(--grigio);font-size:.85em}

/* ---- interazione: l'inchiostro passa ---- */

.recapito > *:hover,
.recapito > *:focus-within{border-bottom-color:var(--verde)}

.recapito a:hover .valore,
.recapito a:focus-visible .valore,
.recapito a:hover .voce,
.recapito a:focus-visible .voce{color:var(--verde)}

.recapito a:focus-visible{
  outline:2px solid var(--verde);
  outline-offset:4px;
}

/* ---- pié di pagina ---- */

.colofone{
  margin-top:clamp(2.5rem,7vw,3.5rem);
  text-align:center;
  color:var(--grigio);
  font-size:.72rem;
  font-variant-caps:small-caps;
  letter-spacing:.22em;
}

/* ---- accessibilità: chi preferisce meno moto ---- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .foglio > *{opacity:1;transform:none}
}