/* ==============================
   FONT
============================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Libre+Baskerville:wght@400;700&display=swap');

/* ==============================
   BASE
============================== */
html, body { height: 100%; }

body{
  margin:0;
  font-size:120%;
  font-family: Georgia, "Times New Roman", Times, serif;
  color:#2f2a26;

  /* pergamena (pagine interne) */
  background:
    radial-gradient(900px 520px at 50% 10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(700px 520px at 15% 85%, rgba(122,74,29,.12), transparent 62%),
    radial-gradient(700px 520px at 88% 78%, rgba(35,75,91,.10), transparent 62%),
    linear-gradient(180deg,#f6eddc 0%, #f0e5cf 55%, #f6eddc 100%);
}

/* Contenitore */
.container{
  max-width:980px;
  margin:20px auto;
  padding:0 20px;
}

/* ==============================
   TITOLI
============================== */
h1,h2,h3{
  font-family:'Cormorant Garamond', serif;
  text-align:center;
  letter-spacing:.5px;
  margin-top:0;
}

/* ==============================
   MENU (DESKTOP)
============================== */
.topbar{
  position:relative;
  background:#e5dccb;
  padding:5px 12px;
}

nav{
  display:flex;
  justify-content:center;
  align-items:center;
}

nav ul{
  list-style:none;
  display:flex;
  justify-content:center;
  gap:18px;
  margin:0;
  padding:0;
}

nav a{
  text-decoration:none;
  color:#2b2b2b;
  padding:5px 12px;
  border-radius:24px;
}

nav a.active,
nav a:hover{
  background:rgba(0,0,0,.06);
}

/* ==============================
   MENU RESPONSIVE
============================== */
/* Desktop */
.hamburger{ display:none; }
.nav-mobile{ display:none; }
.menu-vertical{ display:none; }


/* Mobile */
@media (max-width:820px){
  .nav-desktop{ display:none; }
  .hamburger{ display:block; }
  .nav-mobile{ display:block; }
}
.hamburger{
  font-size: 22px;
  font-weight:600;
  color: #4a382c;
  padding: 4px 6px;
  background: rgba(246,237,220,.9);
  border: 1.5px solid rgba(120,74,29,.60);
  border-radius: 5px;
  line-height: 1;
  box-shadow: none;
}
/* Menu mobile: stile (tendina verticale) */
.menu-vertical{
  list-style:none;
  margin:12px 0 0 0;
  padding:12px;
  background: rgba(246,237,220,.95);
  border: 2px solid rgba(120,74,29,.45);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.20);
}

.menu-vertical li{
  border-bottom: 1px solid rgba(120,74,29,.25);
}
.menu-vertical li:last-child{ border-bottom:none; }

.menu-vertical a{
  display:block;
  padding:12px 10px;
  text-decoration:none;
  color:#2b2b2b;
  border-radius: 14px;
}

.menu-vertical a:hover,
.menu-vertical a.active{
  background: rgba(0,0,0,.06);
}

/* Apertura/chiusura: il tuo JS deve aggiungere/togliere .is-open su .nav-mobile */
.nav-mobile.is-open .menu-vertical{ display:block; }

/* ==============================
   CORNICE ROCOCÒ
============================== */
.frame{
  background: rgba(246,237,220,.88);

  border: 30px solid transparent;
  border-image: url("assets/rococo-frame.svg") 90 stretch;

  border-radius: 60px;
  overflow:hidden;

  box-shadow: 0 22px 58px rgba(27,27,24,.16);
  margin: 40px 0;
  padding:60px 55px;

  position:relative;
}

.frame::after{
  content:"";
  position:absolute;
  inset: 20px;
  border: 3px solid rgba(120,74,29,.70);
  border-radius: 30px;
  pointer-events:none;
}

/* Carta interna (se usata) */
.paper{
  background:#fbf5e8;
  border:4px solid #c9b79a;
  border-radius:12px;
  padding: 20px 25px;
  margin:50px 0;
  box-shadow: inset 0 0 20px rgba(0,0,0,.05);
  text-align:left;
}

/* vecchi elementi dismessi */
.frame::before{ content:none !important; }
.corner{ display:none !important; }

/* ==============================
   HOMEPAGE
   (sfondo + copertina integrati in un solo file)
============================== */
body.homepage{
  background: #f0e5cf;
}

/* La hero non deve coprire lo sfondo della home */
body.homepage .hero,
body.homepage .hero__grid{
  background: transparent !important;
}

/* Se in index.html esiste ancora la vecchia cover separata, la nascondiamo */
body.homepage .hero__cover{ display:none; }

/* ==============================
   PAGINE INTERNE: SFONDO UNIFORME (se lo desideri)
   (non tocca la home, grazie a :not(.homepage))
============================== */
body:not(.homepage){
  /* commenta queste 2 righe se vuoi mantenere la pergamena a gradienti */
  background: #f3ead7;
  background-image: none;
}

/* ==============================
   LINK EMAIL + CTA
============================== */
.email-link{
  color:#5c4630;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.email-link:hover{ opacity:.7; }

.cta-wrap{
  text-align:center;
  margin-top: 22px;
}

.cta-btn{
  display:inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid rgba(120,74,29,.55);
  background: rgba(246,237,220,.75);
  color:#2b2b2b;
  text-decoration:none;
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
font-size: 1.2em;
  letter-spacing:.4px;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.cta-btn:hover{
  background: rgba(246,237,220,.95);
  transform: translateY(-1px);
}

/* ==============================
   FOOTER (testo più piccolo)
   (se usi classi .footer/.footer__inner)
============================== */
.footer p{ font-size: 0.7em; 
padding-bottom: 3em;}
  

/* ==============================
   HOMEPAGE: IMMAGINE COME <img>
============================== */
.home-hero{
  width: 100%;
  max-width: 1400px;     /* opzionale: evita che esploda sui monitor enormi */
  margin: 0 auto 40px auto;
  padding: 0;
}

.home-hero-img{
  width: 100%;
  height: auto;
  display: block;         /* elimina “spazi strani” sotto le immagini */
}

/* Testi home */
.home-copy{
  text-align: center;
}

.home-lead{
  margin: 18px 0 10px 0;
}

.home-sub{
  margin: 0 0 24px 0;
}

.frame.home-note{
  padding: 50px 40px;     /* rende il box più “box” */
}

.home-note p{
  text-align: center;
  margin: 0;
  padding-top: 0px;
  padding-bottom: 22px;
}
/* ==============================
   MOBILE: riduci i box
============================== */
@media (max-width: 820px){

  /* box “cornice” generico (se lo usi anche nelle altre pagine) */
  .frame{
    margin: 22px 0;
    padding: 22px 18px;          /* prima era enorme */
    border-width: 16px;          /* cornice meno spessa */
    border-radius: 34px;
  }

  /* linea interna della cornice (se esiste) */
  .frame::after{
    inset: 12px;
    border-width: 2px;
    border-radius: 22px;
  }

  /* HOMEPAGE: il box “Sito in versione pre-pubblicazione” */
  .home-note{
    max-width: 300px;            /* non “gigante” */
    margin: 10px 0;
    padding: 16px 10px;
  }

    
  
}
/* Footer layout */
.footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.footer__inner p{
  margin:0;                 /* evita salto verticale */
}


.dialoghi-form{
  max-width: 600px;
  margin: 25px 0 0 0;
}

.field{
  margin-bottom: 18px;
}

.field label{
  display:block;
  margin-bottom: 6px;
}

.field input,
.field textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid rgba(120,74,29,.35);
  border-radius: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95em;
  background: #fffdf7;
}

.dialoghi-form .cta-btn{
  padding: 12px 26px;
}

.dialoghi-form button{
  margin-top: 8px;
  align-self: flex-start;
}

/* Bottone generico (corretto: prima avevi btn:hover senza punto) */
.btn{
  font-family: 'Cormorant Garamond', serif;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 1.5em;
  font-weight: 700;
  background: rgba(246,237,220,.75);
  border: 2px solid rgba(120,74,29,.55);
  cursor: pointer;
  transition: all .15s ease;
}

.btn:hover{
  background: rgba(246,237,220,.95);
  transform: translateY(-1px);
  font-weight:700;
}

.frame p{
line-height:1.65;
}
h1, h2 {
letter-spacing:0.4em;
margin: 38px 0 26px;
}
/* TO-TOP come mini CTA, più stretto e più lungo */
.to-top{
  display:inline-block;
  padding: 8px 12px;                 /* più basso, più allungato */
  border-radius: 15px;
  border: 2px solid rgba(120,74,29,.55);
  background: rgba(246,237,220,.75);
  color:#2b2b2b;
  text-decoration:none;
transition: font-weight 0.1 ease;
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  letter-spacing:.2px;
  line-height:1;
  white-space:nowrap;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.to-top:hover{
  background: rgba(246,237,220,.95);
  transform: translateY(-1px);
text-decoration:none;
font-weight:700;
}
/* ==============================
   Masthead tipografico
============================== */
.masthead{
  text-align: center;
  margin: 14px 0 22px;
}

.masthead__author{
  font-family: "Cormorant Garamond", "Libre Baskerville", serif;
  font-size: 29px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2b2218;
  line-height: 1.05;
font-weight: 700;
}

.masthead__book{
  margin-top: 6px;
  font-family: "Cormorant Garamond", "Libre Baskerville", serif;
  font-size: 28px;
  font-style: italic;
  color: #3a2f24;
  line-height: 1.2;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
}

.masthead__mark{
  width: 26px;
  height: auto;
  opacity: 0.9;
}

@media (max-width:820px){
  .masthead{
    margin: 10px 0 18px;
  }
  .masthead__author{
    font-size: 24px;
  }
  .masthead__book{
    font-size: 18px;
gap: 6px;
  }
.masthead__mark{
  width: 20px;
}

}

.footer-brand{
  display:inline-flex;
  align-items:center;
  gap:2px;
}

.footer-pen{
 display:block;
  width:auto;
  height:22px;
  opacity:.75;
margin-left: 2px;
 filter: contrast(1.4);
transform: scaleX(2.0);
}
/* SOLO HOMEPAGE (index) + SOLO MOBILE: riduci SOLO sopra/sotto del box home-note */
@media (max-width:820px){
  body.homepage .frame.home-note{
    padding-top: 10px;
    padding-bottom: 10px;
    /* non tocco i lati: restano quelli della regola esistente */
  }

  body.homepage .frame.home-note p{
   font-size: 0.9em;
    margin: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 1.1;
  }
}

.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.frame-stretto{
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

.sottotitolo {
  font-size: 1.5rem; /* desltop */
  line-height: 1.5;
  max-width: 46ch;
  margin: 10px auto;
  text-align: center;
  font-style: italic;
  letter-spacing: -0.01em;
}
@media (max-width:820px){
.sottotitolo {
  font-size: 1.0em; /* mobile */
  line-height: 1.3;
  max-width: 40ch;
  margin: 8px auto;
  text-align: center;
  font-style: italic;
  letter-spacing: -0.05em;
}

  .frame.card.card--center{
    padding-top: 16px;
    padding-bottom: 16px;
  }
.cta-btn
{ margin-bottom: 20px;
}
  .frame.card.card--center p{
    margin: 0;
    line-height: 1.4;
  }
}
.image1{
display: block;
width: 500px;
height: auto;
margin: 0 auto;
margin-bottom: 30px;
border-radius: 15px;
}

.image2{
display: block;
width: 400px;
height: auto;
margin: 0 auto;
margin-bottom: 30px;
border-radius: 12px;
}

@media (max-width:720px) {
.image1{
width: 92%;
max-width: 450px;
height: auto;
margin: 20px auto 20px auto;
border-radius: 6px;}

.image2{
width: 92%;
max-width: 400px;
height: auto;
margin: 20px auto 20px auto;
border-radius: 5px;}
}

.cta-btn:focus,
.cta-btn:focus-visible {
  outline: none;
}