/* ArchiArcaici — stile.
   Colori presi dalla casa: la calce dei muri, la pietra degli archi,
   il nero e l'ottone dell'insegna sulla strada. */

@font-face {
  font-family: "Vollkorn";
  src: url("/font/vollkorn.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vollkorn";
  src: url("/font/vollkorn-corsivo.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/font/figtree.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --calce: #f7f3ec;
  --pietra-chiara: #eee5d5;
  --linea: #ddd1bb;
  --linea-scura: #cbbb9e;
  --inchiostro: #27221d;
  --inchiostro-2: #5d5245;
  --ottone: #7f5f30;
  --ottone-chiaro: #c9a66b;
  --notte: #1f1b17;
  --notte-2: #2a251f;
  --su-notte: #efe7da;
  --su-notte-2: #b9ad9b;
  --serif: "Vollkorn", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margine: clamp(20px, 5vw, 56px);
  --sezione: clamp(72px, 10vw, 140px);
  --testata: 72px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--testata);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--calce);
  color: var(--inchiostro);
  font: 400 1.0625rem/1.65 var(--sans);
  /* Vollkorn ha di serie le cifre antiche, dove l'1 sembra una I ("I7th"):
     in tutto il sito cifre allineate. */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--ottone); }
h2 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); margin-bottom: 1.6rem; }
h3 { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.95rem); margin-bottom: 0.8rem; }

:focus-visible { outline: 2px solid var(--ottone); outline-offset: 3px; }
.fondo-notte :focus-visible, .apertura :focus-visible { outline-color: var(--ottone-chiaro); }

.contenitore { width: min(1200px, 100% - 2 * var(--margine)); margin-inline: auto; }

.sopra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.2rem;
  font: 600 0.78rem/1.2 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ottone);
}
.sopra::before { content: ""; width: 28px; height: 1px; background: currentColor; }

.primo { font-size: 1.2rem; line-height: 1.6; }
.nota { font-size: 0.85rem; line-height: 1.5; color: var(--inchiostro-2); }

.salta {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--calce);
  color: var(--inchiostro);
}
.salta:focus { top: 12px; }

/* --- la firma: archi in pietra ------------------------------------------- */

.motivo { position: absolute; width: 0; height: 0; overflow: hidden; }
.arcata svg {
  display: block;
  width: 100%;
  height: clamp(104px, 11.7vw, 168px);
}
.arcata rect { opacity: 0.44; }
.fondo-pietra .arcata rect { opacity: 0.55; }
.fondo-notte .arcata rect { opacity: 0.42; }
section > .arcata { margin: calc(-1 * var(--sezione)) 0 clamp(40px, 5vw, 72px); }

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

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0 1.4em;
  border: 1.5px solid var(--inchiostro);
  border-radius: 3px;
  background: var(--inchiostro);
  color: var(--calce);
  font: 600 0.95rem/1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.bottone:hover { background: var(--ottone); border-color: var(--ottone); }
.bottone-vuoto { background: transparent; color: var(--inchiostro); }
.bottone-vuoto:hover { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--calce); }
.bottone-chiaro { background: var(--calce); border-color: var(--calce); color: var(--inchiostro); }
.bottone-chiaro:hover { background: #fff; border-color: #fff; }
.bottone-piccolo { min-height: 40px; padding: 0 1.1em; font-size: 0.85rem; }

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

.testata {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: #fff;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.js .testata { position: fixed; }
.testata.piena {
  background: rgba(247, 243, 236, 0.96);
  color: var(--inchiostro);
  box-shadow: 0 1px 0 var(--linea);
}
@supports (backdrop-filter: blur(8px)) {
  .testata.piena { background: rgba(247, 243, 236, 0.86); backdrop-filter: blur(12px); }
}
.testata-dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--testata);
  padding: 10px var(--margine);
  padding-top: max(10px, env(safe-area-inset-top));
}
.marchio { display: flex; flex-direction: column; color: inherit; text-decoration: none; line-height: 1; }
.marchio-nome { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; letter-spacing: 0.005em; }
.marchio-sotto { margin-top: 5px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; opacity: 0.8; }
@media (min-width: 600px) { .marchio-sotto { font-size: 0.66rem; letter-spacing: 0.18em; } }

.menu { display: none; }
.menu a { color: inherit; text-decoration: none; font-size: 0.92rem; font-weight: 500; padding: 6px 0; border-bottom: 1px solid transparent; }
.menu a:hover { border-bottom-color: currentColor; }

.testata-azioni { display: flex; align-items: center; gap: 8px; }
@media (min-width: 600px) { .testata-azioni { gap: 12px; } }
.lingue { display: inline-flex; gap: 2px; }
.lingue a {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 40px;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  opacity: 0.68;
}
.lingue a:hover { opacity: 1; }
.lingue a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }

.testata:not(.piena) .bottone-piccolo { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.testata:not(.piena) .bottone-piccolo:hover { background: var(--calce); border-color: var(--calce); color: var(--inchiostro); }

@media (min-width: 1100px) {
  .menu { display: flex; gap: 26px; }
}

/* --- apertura ------------------------------------------------------------------ */

.apertura {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--notte);
  color: #fff;
}
.apertura-foto img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;
}
.apertura::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(22, 18, 14, 0.9) 0%, rgba(22, 18, 14, 0.8) 42%, rgba(22, 18, 14, 0.58) 64%, rgba(22, 18, 14, 0.12) 84%, rgba(22, 18, 14, 0) 92%),
    linear-gradient(to bottom, rgba(22, 18, 14, 0.55) 0%, rgba(22, 18, 14, 0) 18%);
}
@media (min-aspect-ratio: 1/1) {
  .apertura::before {
    background:
      linear-gradient(to top, rgba(22, 18, 14, 0.82) 0%, rgba(22, 18, 14, 0.35) 40%, rgba(22, 18, 14, 0) 62%),
      linear-gradient(to right, rgba(22, 18, 14, 0.62) 0%, rgba(22, 18, 14, 0.2) 45%, rgba(22, 18, 14, 0) 60%),
      linear-gradient(to bottom, rgba(22, 18, 14, 0.5) 0%, rgba(22, 18, 14, 0) 20%);
  }
}
.apertura-testo { padding: 140px 0 clamp(44px, 8vh, 100px); }
.apertura .sopra { color: #fff; }
.apertura .sopra::before { background: var(--ottone-chiaro); }
.apertura h1 {
  max-width: 13ch;
  margin-bottom: 1.3rem;
  font-size: clamp(2.6rem, 1.5rem + 4.8vw, 5.8rem);
  line-height: 1;
}
.apertura-sotto { max-width: 34rem; font-size: 1.15rem; color: rgba(255, 255, 255, 0.92); }
.voto { display: flex; align-items: center; gap: 14px; margin: 1.6rem 0 2rem; }
.voto-numero {
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 64px;
  padding-top: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 30px 30px 3px 3px;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 600;
}
.voto-parole { font-size: 0.95rem; line-height: 1.35; }
.voto-parole strong { font-weight: 600; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.collegamento-chiaro {
  padding: 10px 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.collegamento-chiaro:hover { border-bottom-color: #fff; }

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

section { padding-block: var(--sezione); }
.fondo-pietra { background: var(--pietra-chiara); }
.fondo-notte { background: var(--notte); color: var(--su-notte); }
.fondo-notte .sopra, .fondo-notte h2 em { color: var(--ottone-chiaro); }
.fondo-notte .nota { color: var(--su-notte-2); }

.intestazione { max-width: 46rem; margin-bottom: clamp(44px, 6vw, 88px); }
.intestazione h2 { margin-bottom: 1.2rem; }
.intestazione-testo { margin: 0; font-size: 1.15rem; color: var(--inchiostro-2); }

figcaption { margin-top: 0.75rem; font-size: 0.85rem; color: var(--inchiostro-2); }

/* la casa */
.casa-griglia { display: grid; gap: 40px; }
.casa-pilastro { width: 58%; margin: -22% 0 0 auto; border: 8px solid var(--calce); border-right: 0; border-bottom: 0; }
/* la didascalia sta a sinistra, il pilastro le sale accanto senza coprirla */
.casa-arco figcaption { max-width: 38%; }
.dati {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 20px;
  margin: 2.4rem 0 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linea);
}
.dati dt { font-family: var(--serif); font-size: 2.5rem; line-height: 1; }
.dati dt, .voto-numero, .punteggio-numero, .orario-ore { font-variant-numeric: lining-nums tabular-nums; }
.dati dd { margin: 0.4rem 0 0; font-size: 0.9rem; line-height: 1.35; color: var(--inchiostro-2); }

@media (min-width: 960px) {
  .casa-griglia { grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 40px); align-items: start; }
  .casa-testo { grid-column: 1 / 6; grid-row: 1 / 3; padding-top: 1rem; }
  .casa-arco { grid-column: 6 / 13; grid-row: 1; }
  .casa-pilastro { grid-column: 9 / 13; grid-row: 2; width: auto; margin: -18% 0 0; }
  .casa-arco figcaption { max-width: 48%; }
}

/* gli spazi */
.ambiente { display: grid; gap: 20px; margin-bottom: clamp(64px, 9vw, 128px); }
.ambiente-testo p { color: var(--inchiostro-2); }
.ambiente-piccole { display: flex; gap: 16px; align-items: flex-end; }
.ambiente-piccole figure { flex: 1.6 1 0; }
.ambiente-piccole .verticale { flex: 1 1 0; }
.dotazioni {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}
.dotazioni li { position: relative; padding-left: 20px; line-height: 1.35; }
/* un archetto al posto del pallino */
.dotazioni li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 10px;
  height: 8px;
  border: 1.5px solid var(--ottone);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
@media (min-width: 960px) {
  .ambiente { grid-template-columns: repeat(12, 1fr); gap: 28px clamp(20px, 3vw, 40px); align-items: end; }
  .ambiente-grande { grid-column: 1 / 8; grid-row: 1 / 3; }
  .ambiente-testo { grid-column: 9 / 13; grid-row: 1; }
  .ambiente-piccole { grid-column: 9 / 13; grid-row: 2; }
  .ambiente-rovescio .ambiente-grande { grid-column: 6 / 13; }
  .ambiente-rovescio .ambiente-testo, .ambiente-rovescio .ambiente-piccole { grid-column: 1 / 5; }
}
.tutta {
  display: grid;
  gap: 14px 40px;
  padding-top: 2rem;
  border-top: 1px solid var(--linea-scura);
}
.tutta h3 { margin: 0; }
.tutta .dotazioni { margin: 0; font-size: 1rem; }
@media (min-width: 960px) {
  .tutta { grid-template-columns: 1fr 2.6fr; align-items: baseline; }
  .tutta .dotazioni { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* la zona */
.zona-griglia { display: grid; gap: 40px; }
.distanze h3 { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ottone); }
.distanze dl, .sottovoti { margin: 0 0 1rem; }
.distanze dl div, .sottovoti div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linea);
}
.distanze dt, .sottovoti dt { display: flex; flex: 1; align-items: baseline; gap: 12px; }
.distanze dt::after, .sottovoti dt::after {
  content: "";
  flex: 1;
  min-width: 16px;
  border-bottom: 1px dotted var(--linea-scura);
  transform: translateY(-0.3em);
}
.distanze dd, .sottovoti dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 960px) {
  .zona-griglia { grid-template-columns: repeat(12, 1fr); gap: 48px clamp(20px, 3vw, 40px); align-items: start; }
  .zona-testo { grid-column: 1 / 6; grid-row: 1; }
  .zona-foto { grid-column: 7 / 13; grid-row: 1 / 3; position: sticky; top: calc(var(--testata) + 24px); }
  .distanze { grid-column: 1 / 6; grid-row: 2; }
}

/* recensioni */
.recensioni-griglia { display: grid; gap: 48px; margin-bottom: 2rem; }
.punteggio { display: flex; align-items: center; gap: 20px; margin-bottom: 1.4rem; }
.punteggio-numero {
  margin: 0;
  min-width: 2.4ch;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 2.6rem + 2.8vw, 5rem);
  line-height: 1;
  color: #fff;
}
.punteggio-parole { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--su-notte-2); }
.punteggio-parole strong { font-weight: 600; color: var(--su-notte); }
.sottovoti-titolo {
  margin: 2.2rem 0 0.4rem;
  font: 600 0.78rem/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--su-notte-2);
}
.sottovoti div { border-bottom-color: rgba(239, 231, 218, 0.14); }
.sottovoti dt::after { border-bottom-color: rgba(239, 231, 218, 0.28); }
.sottovoti dd { color: #fff; }
.citazioni { display: grid; gap: 18px; }
.citazione { margin: 0; padding: 28px 26px 24px; background: var(--notte-2); border-top: 2px solid var(--ottone-chiaro); }
.citazione blockquote { margin: 0; }
.citazione p { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-style: italic; line-height: 1.42; color: #f6efe3; }
.citazione figcaption { margin-top: 1.1rem; font-size: 0.92rem; font-weight: 600; color: var(--su-notte); }
.citazione figcaption span { font-weight: 400; color: var(--su-notte-2); }
@media (min-width: 720px) {
  .citazioni { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .recensioni-griglia { grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 40px); }
  .punteggi { grid-column: 1 / 5; }
  .citazioni { grid-column: 6 / 13; align-content: start; }
}

/* informazioni utili */
.info-griglia { display: grid; gap: 48px; }
.orari { display: grid; gap: 14px; margin-top: 0.4rem; }
.orario { padding: 22px 22px 18px; border: 1px solid var(--linea-scura); }
.orario h3 { margin: 0; font: 600 0.78rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ottone); }
.orario .orario-ore { margin: 0.5rem 0 0.4rem; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.orario p:last-child { margin: 0; font-size: 0.9rem; color: var(--inchiostro-2); }
.domande details { border-bottom: 1px solid var(--linea); }
.domande details:first-child { border-top: 1px solid var(--linea); }
.domande summary {
  position: relative;
  padding: 1.1rem 2.4rem 1.1rem 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font: 400 1.5rem/1 var(--sans);
  color: var(--ottone);
}
.domande details[open] summary::after { content: "−"; }
.risposta p { margin: 0 0 1.3rem; color: var(--inchiostro-2); }
@media (min-width: 560px) {
  .orari { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .info-griglia { grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 40px); }
  .info-orari { grid-column: 1 / 6; }
  .domande { grid-column: 7 / 13; padding-top: 0.4rem; }
}

/* segnaposto da chiedere al proprietario: deve vedersi */
.da-chiedere {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border: 1.5px dashed #b7791f;
  border-radius: 3px;
  background: #fff3cd;
  color: #5c3d0b;
  font-size: 0.95rem;
  line-height: 1.45;
}
.da-chiedere b { margin-right: 0.3em; }

/* contatti */
.contatti-griglia { display: grid; gap: 48px; }
.contatti-testo > p { max-width: 30rem; color: var(--inchiostro-2); }
.contatti-bottoni { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.8rem 0 2.6rem; }
.contatti-dove { margin: 0 0 0.6rem; font: 600 0.78rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ottone); }
address { font-family: var(--serif); font-size: 1.3rem; font-style: normal; line-height: 1.45; }
.mappa-copertina { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--notte); }
.mappa-copertina img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 50%; }
.mappa-apri { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }
.mappa iframe { display: block; width: 100%; aspect-ratio: 4 / 5; border: 0; background: var(--pietra-chiara); }
.mappa .nota { margin-top: 0.8rem; }
@media (min-width: 960px) {
  .contatti-griglia { grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 40px); align-items: center; }
  .contatti-testo { grid-column: 1 / 6; }
  .mappa { grid-column: 7 / 13; }
  .mappa-copertina, .mappa iframe { aspect-ratio: 3 / 2; }
}

/* piede */
.piede { padding: 56px 0 calc(44px + env(safe-area-inset-bottom)); }
.piede-dentro { display: grid; gap: 4px; font-size: 0.9rem; color: var(--su-notte-2); }
.piede-dentro p { margin: 0; }
.piede-nome { margin-bottom: 8px !important; font-family: var(--serif); font-size: 1.35rem; color: var(--su-notte); }
.piede-collegamenti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 14px; }
.piede-collegamenti > a { color: var(--su-notte); text-underline-offset: 4px; }

/* avviso dei pulsanti ancora scollegati */
.avviso {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 60;
  width: max-content;
  max-width: min(92vw, 440px);
  margin: 0;
  padding: 14px 18px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: var(--inchiostro);
  color: var(--calce);
  font-size: 0.92rem;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.avviso[hidden] { display: none; }

/* pagine semplici: privacy, 404 */
.semplice { max-width: 46rem; padding: calc(var(--testata) + 64px) 0 96px; }
.semplice h1 { margin-bottom: 1.4rem; font-size: clamp(2.4rem, 1.8rem + 3vw, 3.6rem); }
.semplice h2 { margin: 2.2rem 0 0.6rem; font-size: 1.45rem; }
.semplice a { text-underline-offset: 3px; }
.collegamento { font-weight: 600; }
.nontrovata { padding-top: 48px; }
.nontrovata .arcata { margin-bottom: 40px; }