/* La Sosta del Cavaliere — base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  caret-color: var(--marmo-rosa);
  scrollbar-color: var(--verde-cupo) var(--pietra);
  scrollbar-width: thin;
}

::selection { background: var(--marmo-rosa); color: var(--pietra-fonda); }
.inverso ::selection, .inverso::selection { background: var(--verde-cupo); color: var(--marmo); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--pietra); }
::-webkit-scrollbar-thumb { background: var(--verde-cupo); border: 3px solid var(--pietra); }
::-webkit-scrollbar-thumb:hover { background: var(--verde); }

body {
  margin: 0;
  background: var(--pietra);
  color: var(--marmo);
  font-family: var(--voce);
  font-size: var(--t-corpo);
  font-weight: 380;
  line-height: 1.62;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--sp-2); max-width: var(--misura); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

/* il contenitore */
.lastra {
  width: min(100% - 2.5rem, 78rem);
  margin-inline: auto;
}
.lastra--stretta { width: min(100% - 2.5rem, 46rem); }

/* inversione: il solo strumento di gerarchia */

picture { display: contents; }

.inverso {
  background-color: var(--marmo-fondo);
  background-image: url("data:image/svg+xml,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="360"%20height="360"><filter%20id="v"%20x="0"%20y="0"%20width="100%25"%20height="100%25"><feTurbulence%20type="fractalNoise"%20baseFrequency="0.006%200.055"%20numOctaves="4"%20seed="3"/><feColorMatrix%20type="matrix"%20values="0%200%200%200%200.72%20%200%200%200%200%200.62%20%200%200%200%200%200.57%20%200%200%200%200.5%200"/></filter><rect%20width="360"%20height="360"%20filter="url%28%23v%29"/></svg>");
  background-size: 360px 360px;
  color: var(--pietra-fonda);
}

/* l'azione: l'unico ocra della pagina */
.gesto {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
  font-family: var(--conta);
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ocra-testo);
  background: var(--ocra);
  padding: 1.05em 1.9em;
  border: 0;
  transition: background var(--moto-breve);
}
.gesto::after {
  content: "";
  width: 1.6em;
  height: 1px;
  background: currentColor;
  align-self: center;
  transform-origin: left center;
  transition: transform var(--moto-breve);
}
.gesto:hover, .gesto:focus-visible { background: var(--ocra-vivo); }
.gesto:hover::after, .gesto:focus-visible::after { transform: scaleX(1.5); }

.gesto--filo {
  background: transparent;
  color: var(--marmo-velo);
  padding: 0;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.35em;
}
.gesto--filo:hover, .gesto--filo:focus-visible { background: transparent; color: var(--marmo); }

/* accessibilità */

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--pietra-fonda);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--marmo);
}
.inverso :where(a, button, [tabindex]):focus-visible {
  outline-color: var(--pietra-fonda);
  box-shadow: 0 0 0 5px var(--verde-cupo);
}

.salta {
  position: absolute;
  left: -9999px;
}
.salta:focus {
  left: var(--sp-2);
  top: var(--sp-2);
  z-index: 99;
  background: var(--marmo-fondo);
  color: var(--pietra-fonda);
  padding: 0.8em 1.2em;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* l'arcata del chiostro */
.arcata__muro  { fill: url(#serpentinoChiaro); }
.arcata__piano { fill: url(#serpentino); }

.campata__vano  { fill: url(#serpentino); transition: fill 420ms cubic-bezier(0.22,0.61,0.36,1); }
.campata__filo  { stroke: var(--pietra-linea); stroke-width: 1.4; fill: none; }
.campata__intarsio { fill: var(--verde-cupo); opacity: 0.6; transition: opacity var(--moto), fill var(--moto); }

.colonna__fusto { fill: var(--pietra); }
.colonna__base  { fill: var(--verde-cupo); }
.colonna__abaco { fill: var(--verde-cupo); }
.campata__capitello { fill: var(--verde); transition: fill var(--moto); }

.campata.viva .campata__vano { fill: url(#marmoBianco); }
.campata.viva .campata__filo { stroke: var(--marmo-velo); }
.campata.viva .campata__intarsio { fill: var(--verde-cupo); opacity: 0.95; }

/* capo: il segno, piccolo per forza */
.capo {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0 var(--sp-2);
}
.capo__marchio { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; }
.capo__cavallo { width: 46px; height: 46px; flex: none; }
.capo__nome {
  font-size: var(--t-piccolo);
  letter-spacing: 0.06em;
  line-height: 1.15;
  max-width: 9em;
}
.capo nav { display: flex; align-items: center; gap: var(--sp-3); }
.capo nav a { font-family: var(--conta); font-size: var(--t-legenda); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--marmo-velo); transition: color var(--moto-breve); }
.capo nav a:hover { color: var(--marmo); }
.capo__lingua { color: var(--verde) !important; }

/* la leva e il pannello */
.capo__leva {
  display: none;
  flex: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--marmo-velo);
  cursor: pointer;
  transition: color var(--moto-breve);
}
.capo__leva:hover { color: var(--marmo); }
.capo__leva__segno { position: relative; display: block; }
.capo__leva__segno,
.capo__leva__segno::before,
.capo__leva__segno::after {
  width: 24px;
  height: 1px;
  background: currentColor;
}
.capo__leva__segno::before,
.capo__leva__segno::after { content: ""; position: absolute; left: 0; }
.capo__leva__segno::before { top: -7px; }
.capo__leva__segno::after  { top: 7px; }

.menu { position: fixed; inset: 0; z-index: 100; }
.menu[hidden] { display: none; }
.menu__velo {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--pietra-fonda) 76%, transparent);
  opacity: 0;
  transition: opacity var(--moto-breve);
}
.menu__lastra {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(80vw, 20rem);
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--moto-breve);
}
.menu.aperto .menu__velo  { opacity: 1; }
.menu.aperto .menu__lastra { transform: none; }

.menu__chiudi {
  align-self: flex-end;
  min-width: 46px;
  min-height: 46px;
  padding: 0 0.2rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--conta);
  font-size: var(--t-legenda);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-cupo);
  transition: color var(--moto-breve);
}
.menu__chiudi:hover { color: var(--pietra-fonda); }

.menu__voci { display: flex; flex-direction: column; margin-top: var(--sp-2); }

.menu__voci a {
  font-size: var(--t-nome);
  line-height: 1.15;
  text-decoration: none;
  color: var(--pietra-fonda);
  padding: 0.75rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pietra-fonda) 16%, transparent);
  transition: color var(--moto-breve);
}
.menu__voci a:hover { color: var(--verde-cupo); }

.menu__coda {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.menu__gesto { align-self: stretch; justify-content: center; }
.menu__lingua {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  font-family: var(--conta);
  font-size: var(--t-legenda);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--verde-cupo);
}
.menu__lingua:hover { color: var(--pietra-fonda); }

body.menu-aperto { overflow: hidden; }

@media (min-width: 52.0625rem) {
  .menu { display: none; }
}

@media (max-width: 52rem) {
  [data-menu] .capo__voci { display: none; }
  [data-menu] .capo__leva:not([hidden]) { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .menu__velo, .menu__lastra { transition: none; }
}

/* piede */
.piede { border-top: var(--bordo); padding: var(--sp-4) 0 var(--sp-5); }
.piede__griglia { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-4); }
.piede__cavallo { margin-bottom: var(--sp-2); }
.piede__sede { font-size: var(--t-piccolo); }
.piede a { color: var(--marmo-velo); text-decoration: none; display: block; padding: 0.28rem 0; font-size: var(--t-piccolo); }
.piede a:hover { color: var(--marmo); }

.piede__nota {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: var(--bordo);
  color: var(--verde);
  font-family: var(--conta); font-size: var(--t-legenda); letter-spacing: 0.06em;
  display: grid; gap: var(--sp-1);
}
.piede__riga {
  display: flex; justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  flex-wrap: wrap;
}

/* Componenti condivisi da tutte le pagine */

/* l'iscrizione: i fatti incisi, non contati */
.iscrizione {
  margin: 0;
  max-width: none;
  padding: 1.2rem var(--sp-3);
  text-align: center;
  font-size: var(--t-piccolo);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 2;
}
.iscrizione span { display: inline-block; }
.iscrizione span:not(:last-child)::after {
  content: "\00a0·";
  margin-right: 1.4em;
  color: var(--verde-cupo);
}

/* la chiusa: l'unica altra inversione */
.chiusa { padding: var(--sp-5) 0 var(--sp-6); }
.chiusa__lastra { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-5); padding: var(--sp-5) var(--sp-4); align-items: center; }
.chiusa__tesi { font-size: var(--t-media); font-weight: 440; letter-spacing: -0.02em; max-width: 14ch; }
.chiusa__azione { margin-top: var(--sp-3); }
.chiusa__dati { display: flex; flex-direction: column; gap: var(--sp-2); }
.chiusa__riga { display: flex; justify-content: space-between; gap: var(--sp-2); border-bottom: 1px solid color-mix(in srgb, var(--pietra-fonda) 20%, transparent); padding-bottom: 0.6rem; font-family: var(--conta); font-size: var(--t-piccolo); }
.chiusa__riga span:first-child { color: var(--verde-cupo); letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--t-legenda); }

@media (max-width: 60rem) {
  .chiusa__lastra { grid-template-columns: 1fr; gap: var(--sp-4); }
  .piede__griglia { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 40rem) {
  .chiusa__lastra { padding: var(--sp-4) var(--sp-3); }
  .capo { flex-wrap: wrap; }
  .capo nav { gap: var(--sp-2); order: 3; width: 100%; padding-top: var(--sp-2); border-top: var(--bordo); }
  .piede__griglia { grid-template-columns: 1fr; gap: var(--sp-3); }

  .gesto { letter-spacing: 0.06em; padding: 1em 1.25em; white-space: normal; }
  .chiusa .gesto { display: flex; justify-content: center; }
  .iscrizione { letter-spacing: 0.08em; }
}

.piede__legale { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.piede__legale a { display: inline; padding: 0; font-size: inherit; color: var(--verde); }
.piede__legale a:hover { color: var(--marmo); }

.piede__consenso {
  padding: 0; border: 0; background: none;
  font: inherit; line-height: inherit; letter-spacing: inherit;
  color: var(--verde); cursor: pointer;
}
.piede__consenso:hover { color: var(--marmo); }

.piede__credito a {
  display: inline; padding: 0; font-size: inherit; line-height: inherit;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 55%, transparent);
}
.piede__credito a:hover { color: var(--marmo); border-bottom-color: currentColor; }
@media (max-width: 40rem) {
  .piede__riga { flex-direction: column; gap: var(--sp-1); }
}

/* la comparsa delle opere */
[data-rivela] .opera,
[data-rivela] .archivio__opera,
[data-rivela] .figura {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--moto), transform var(--moto);
}
[data-rivela] .rivelato {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-rivela] .opera,
  [data-rivela] .archivio__opera,
  [data-rivela] .figura { opacity: 1; transform: none; transition: none; }
}

/* il consenso */
.consenso {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--pietra-fonda);
  border-top: var(--bordo);
}
.consenso[hidden] { display: none; }
.consenso__lastra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) 0;
}
.consenso__testo {
  margin: 0;
  max-width: 46rem;
  font-size: var(--t-piccolo);
  color: var(--marmo-velo);
}
.consenso__testo a { color: var(--verde); }
.consenso__azioni { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

@media (max-width: 46rem) {
  .consenso__lastra { flex-direction: column; align-items: stretch; }
  .consenso__azioni .gesto { flex: 1 1 auto; justify-content: center; }
}