/* INFABULAE — foglio di stile unico.
   I colori stanno tutti qui sopra: si cambiano da qui e cambia tutto il sito. */

:root{
  --carta:      #f2efe7;   /* il fondo del marchio */
  --inchiostro: #1e3f5c;   /* il blu del marchio */
  --tenue:      #6d7f8e;
  --filo:       #d9d3c6;
  --evidenza:   #a8842b;   /* oro, dal marchio di Bindery */
  --serif: "Cormorant Garamond", Georgia, serif;
  --titoli: "Marcellus", Georgia, serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--serif);
  font-size:1.16rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

.dentro{max-width:52rem;margin:0 auto;padding:0 1.5rem}

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

header{
  text-align:center;
  padding:4.5rem 1.5rem 3.2rem;
}

header img{
  width:min(19rem,66vw);
  height:auto;
  display:block;
  margin:0 auto 1.4rem;
  
}

header p{max-width:36rem;margin-left:auto;margin-right:auto}

.motto{
  font-family:var(--titoli);
  font-size:.74rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--tenue);
  margin:0;
}

.occhiello{
  font-size:1.28rem;
  font-style:italic;
  color:var(--tenue);
  max-width:30rem;
  margin:1.6rem auto 0;
}

/* ---- navigazione -------------------------------------------------- */

nav{
  border-top:1px solid var(--filo);
  border-bottom:1px solid var(--filo);
  text-align:center;
  padding:.9rem 1rem;
}

nav a{
  font-family:var(--titoli);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--inchiostro);
  text-decoration:none;
  margin:0 .9rem;
  border-bottom:1px solid transparent;
  padding-bottom:.15rem;
}

nav a:hover{border-bottom-color:var(--evidenza)}

/* ---- sezioni ------------------------------------------------------ */

section{padding:4rem 0;border-bottom:1px solid var(--filo)}
section:last-of-type{border-bottom:none}

h2{
  font-family:var(--titoli);
  font-weight:400;
  font-size:.78rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--tenue);
  margin:0 0 1.6rem;
}

h3{
  font-family:var(--titoli);
  font-weight:400;
  font-size:2rem;
  line-height:1.24;
  margin:0 0 .9rem;
}

p{margin:0 0 1.1rem;max-width:40rem}

ul{margin:0 0 1.4rem;padding-left:1.2rem;max-width:40rem}
li{margin-bottom:.4rem}

a{color:var(--inchiostro)}

.bottone{
  display:inline-block;
  font-family:var(--titoli);
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--carta);
  background:var(--inchiostro);
  padding:.75rem 1.6rem;
  border:1px solid var(--inchiostro);
}

.bottone:hover{background:transparent;color:var(--inchiostro)}

.bottone.vuoto{background:transparent;color:var(--inchiostro)}
.bottone.vuoto:hover{background:var(--inchiostro);color:var(--carta)}

.nota{
  font-size:.92rem;
  color:var(--tenue);
  font-style:italic;
}

/* ---- piede -------------------------------------------------------- */

footer{
  text-align:center;
  padding:3.5rem 1.5rem 4.5rem;
  color:var(--tenue);
  font-size:.92rem;
}

footer img{width:4.2rem;height:auto;opacity:.75;margin-bottom:1.2rem}

/* Il sito sta su carta chiara come il marchio: niente versione scura,
   altrimenti i marchi (che hanno il fondo crema dentro) si staccano dal fondo. */

/* ---- le due porte: Bindery e Hotel Bizarre ------------------------- */

.porte{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1.4rem;
  margin:0;
  padding:0;
  list-style:none;
}

.porta{
  border:1px solid var(--filo);
  padding:2rem 1.7rem 1.8rem;
  display:flex;
  flex-direction:column;
}

.porta .tipo{
  font-family:var(--titoli);
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--tenue);
  margin:0 0 .7rem;
}

.porta h3{font-size:1.7rem;margin-bottom:.7rem}
.porta p{font-size:1.04rem;flex:1}
.porta .bottone{align-self:flex-start;margin-top:.6rem}

/* ---- pagine interne ------------------------------------------------ */

.briciola{
  font-family:var(--titoli);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--tenue);
  text-decoration:none;
}

.briciola:hover{color:var(--inchiostro)}

.titolone{
  font-family:var(--titoli);
  font-weight:400;
  font-size:clamp(2.4rem,8vw,3.6rem);
  line-height:1.1;
  margin:1rem 0 .6rem;
}

.scheda{
  border-top:1px solid var(--filo);
  padding-top:1.4rem;
  margin-top:2.4rem;
  font-size:.98rem;
  color:var(--tenue);
}

.scheda dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.4rem;margin:0}
.scheda dt{font-family:var(--titoli);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;padding-top:.3rem}
.scheda dd{margin:0}

.mancante{
  border:1px dashed var(--filo);
  padding:1rem 1.2rem;
  color:var(--tenue);
  font-style:italic;
  font-size:.96rem;
  margin:0 0 1.4rem;
}

/* le righe dentro la testata restano centrate anche quando sono strette */
header p, header .motto{max-width:36rem;margin-left:auto;margin-right:auto}
header .occhiello{max-width:30rem}

/* ---- home: i tre riquadri ------------------------------------------ */

.riquadri{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:1.2rem;
  list-style:none;
  margin:0;
  padding:0;
}

.riquadro{
  border:1px solid var(--filo);
  padding:1.8rem 1.6rem 1.6rem;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s, transform .15s;
}

.riquadro:hover{border-color:var(--inchiostro);transform:translateY(-2px)}
.riquadro .tipo{font-family:var(--titoli);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tenue);margin:0 0 .6rem}
.riquadro h3{font-size:1.55rem;margin:0 0 .6rem}
.riquadro p{font-size:1.02rem;margin:0;flex:1}
.riquadro .freccia{font-family:var(--titoli);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tenue);margin-top:1.2rem}
.riquadro:hover .freccia{color:var(--inchiostro)}

.lingua{
  display:inline-block;border:1px solid var(--filo);border-radius:2px;
  font-family:var(--titoli);font-size:.6rem;letter-spacing:.16em;
  padding:.1rem .4rem;margin-left:.5rem;color:var(--tenue);vertical-align:.15em;
}

/* ---- opera: copertina, bottone grosso, musica ---------------------- */

.opera{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:2.4rem;align-items:start}
@media (max-width:44rem){ .opera{grid-template-columns:1fr} }

.copertina{width:100%;height:auto;border:1px solid var(--filo);display:block}

.vuoto-copertina{
  aspect-ratio:2/3;border:1px dashed var(--filo);display:flex;align-items:center;
  justify-content:center;text-align:center;padding:1.5rem;color:var(--tenue);
  font-style:italic;font-size:.95rem;
}

.atmosfera{font-size:1.32rem;line-height:1.62}

.gigante{
  display:inline-block;font-family:var(--titoli);font-size:1rem;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;color:var(--carta);
  background:var(--inchiostro);border:1px solid var(--inchiostro);
  padding:1.1rem 3rem;margin:.4rem 0 .6rem;
}
.gigante:hover{background:transparent;color:var(--inchiostro)}

.suono{border:1px solid var(--filo);padding:1.2rem;margin:0 0 1.4rem}
.suono iframe{display:block;width:100%;border:0}
.suono .tipo{font-family:var(--titoli);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tenue);margin:0 0 .8rem}

/* ---- diario -------------------------------------------------------- */

.diario{list-style:none;margin:0;padding:0}
.diario li{border-bottom:1px solid var(--filo);padding:1.4rem 0}
.diario li:first-child{border-top:1px solid var(--filo)}
.diario time{font-family:var(--titoli);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tenue);display:block;margin-bottom:.35rem}
.diario h3{font-size:1.4rem;margin:0 0 .4rem}
.diario a{text-decoration:none}
.diario a:hover{text-decoration:underline}
.diario p{margin:0;color:var(--tenue)}

/* ---- modulo (newsletter) ------------------------------------------- */

.modulo{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0 .8rem;max-width:34rem}
.modulo input[type=email]{
  flex:1;min-width:14rem;font-family:var(--serif);font-size:1.05rem;
  padding:.7rem .9rem;border:1px solid var(--filo);background:var(--carta);
  color:var(--inchiostro);border-radius:0;
}
.modulo input[type=email]:focus{outline:2px solid var(--inchiostro);outline-offset:-1px}
.modulo button{
  font-family:var(--titoli);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--inchiostro);color:var(--carta);border:1px solid var(--inchiostro);
  padding:.7rem 1.6rem;cursor:pointer;
}
.modulo button:hover{background:transparent;color:var(--inchiostro)}
.nascosto{position:absolute;left:-9999px}

/* il riquadro d'iscrizione in fondo a ogni pagina */
.coda-iscrizione{border-top:1px solid var(--filo);padding:2.6rem 0 0;margin-top:1rem}
.coda-iscrizione h2{margin-bottom:.8rem}

/* le griglie non seguono la larghezza di lettura degli elenchi normali */
.riquadri, .porte, .diario{max-width:none}

/* ==== la barra in cima, uguale su tutte le pagine di carta ============== */

.barra{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1rem 1.6rem;border-bottom:1px solid var(--filo)}
.barra .nome{font-family:var(--titoli);font-size:.76rem;letter-spacing:.32em;
  text-transform:uppercase}
.barra .nome a{text-decoration:none}
.barra nav{display:flex;gap:1.4rem;flex-wrap:wrap;border:0;padding:0;text-align:left}
.barra nav a{font-family:var(--titoli);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tenue);text-decoration:none;margin:0;
  padding-bottom:.2rem;border-bottom:1px solid transparent}
.barra nav a:hover,.barra nav a[aria-current=page]{color:var(--inchiostro);
  border-bottom-color:var(--evidenza)}

/* ==== le porte con la tavola incorniciata =============================== */

.porta.lastrata{display:flex;flex-direction:column;background:#fff;padding:.9rem .9rem 1.4rem}
.porta.lastrata .lastra{background:#faf8f3;border:1px solid var(--filo);overflow:hidden;
  margin-bottom:1.1rem;display:block}
.porta.lastrata .lastra img{width:100%;height:14rem;object-fit:cover;filter:saturate(.78) contrast(1.02)}
.porta.lastrata .lastra.chiara img{object-fit:contain;padding:2.2rem}
.porta.lastrata .lastra.libro{background:#0d0c0b}
.porta.lastrata .lastra.libro img{object-fit:contain;padding:.7rem}
.porta.lastrata .tipo{font-family:var(--titoli);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--evidenza);margin:0 0 .35rem;padding:0 .4rem}
.porta.lastrata h3{font-size:1.5rem;margin:0 0 .4rem;padding:0 .4rem}
.porta.lastrata p{padding:0 .4rem}
.porta.lastrata .freccia{font-family:var(--titoli);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tenue);margin:1rem 0 0;padding:0 .4rem}
.porta.lastrata:hover .freccia{color:var(--inchiostro)}

/* ==== la soglia: la fascia nera che annuncia l'albergo ================== */

.soglia{position:relative;display:block;text-decoration:none;background:#0d0c0b;
  color:#efe7d8;overflow:hidden;margin:1rem 0 0}
.soglia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.soglia .sopra{position:relative;padding:4.5rem 2rem;text-align:center}
.soglia .tipo{font-family:var(--titoli);font-size:.64rem;letter-spacing:.3em;
  text-transform:uppercase;color:#c9964a;margin:0 0 .8rem}
.soglia h3{font-family:var(--titoli);font-weight:400;font-size:clamp(2rem,6vw,3rem);
  margin:0 0 .6rem;color:#efe7d8}
.soglia p{margin:0 auto;max-width:26rem;color:#cfc6b8}
.soglia .tasto[hidden]{display:none}
.tasto{display:inline-block;margin-top:1.6rem;font-family:var(--titoli);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;padding:.8rem 2rem;
  border:1px solid #c9964a;color:#c9964a}
.soglia:hover .tasto{background:#c9964a;color:#17120e}

/* ==== cambio lingua ===================================================== */

.lingue{display:flex;gap:.5rem;font-family:var(--titoli);font-size:.66rem;
  letter-spacing:.16em}
.lingue a{text-decoration:none;color:var(--tenue);border:1px solid var(--filo);
  padding:.2rem .5rem}
.lingue a:hover{color:var(--inchiostro);border-color:var(--inchiostro)}
.lingue a.scelta{background:var(--inchiostro);color:var(--carta);border-color:var(--inchiostro)}

/* ==== modulo: riga + spunta del consenso ================================ */

.riga-modulo{display:flex;gap:.7rem;flex-wrap:wrap;width:100%}
.modulo{display:block;max-width:34rem}
.spunta{display:flex;gap:.6rem;align-items:flex-start;margin-top:.8rem;
  font-size:.92rem;color:var(--tenue);line-height:1.5}
.spunta input{margin-top:.35rem;accent-color:var(--inchiostro);width:1rem;height:1rem;flex:none}

/* ==== il negozio ======================================================== */

.negozio{list-style:none;margin:0;padding:0;max-width:none;display:grid;gap:1.6rem}
.merce{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:1.8rem;
  border:1px solid var(--filo);background:#fff;padding:1.2rem;align-items:center}
@media (max-width:40rem){ .merce{grid-template-columns:1fr} }
.merce .lastra{background:#faf8f3;border:1px solid var(--filo);overflow:hidden;display:block}
.merce .lastra img{width:100%;height:14rem;object-fit:cover}
.merce .lastra.libro{background:#0d0c0b}
.merce .lastra.libro img{object-fit:contain;padding:.6rem}
.merce .lastra.chiara img{object-fit:contain;padding:2rem}
.merce .tipo{font-family:var(--titoli);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--evidenza);margin:0 0 .3rem}
.merce h3{font-size:1.6rem;margin:0 0 .5rem}
.merce p{margin:0 0 .6rem}
.prezzo{font-family:var(--titoli);font-size:1.2rem;color:var(--inchiostro);margin:0 0 1rem}

.conta{white-space:nowrap}

/* ==== sul telefono ====================================================== */

.porta.lastrata{text-decoration:none;color:inherit}
.porta.lastrata p{text-decoration:none}

@media (max-width:52rem){
  .barra{flex-wrap:wrap;gap:.55rem 1rem;padding:.8rem 1rem}
  .barra .nome{order:1;flex:1;font-size:.72rem}
  .barra .lingue{order:2}
  .barra nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:1.1rem;
    padding-bottom:.25rem;scrollbar-width:none}
  .barra nav::-webkit-scrollbar{display:none}
  .barra nav a{white-space:nowrap}

  header{padding:3rem 1.2rem 2.2rem}
  section{padding:2.6rem 0}
  .porta.lastrata .lastra img{height:11rem}
  .merce .lastra img{height:12rem}
}

.posta{font-size:1.15rem}
.posta a{color:var(--inchiostro);text-decoration:none;border-bottom:1px solid var(--evidenza);
  padding-bottom:.1rem}
.posta a:hover{border-bottom-width:2px}