/* layer manoscritto, caricato dopo styles.css */

.display {
  font-family: var(--display);
  font-weight: 420;
  letter-spacing: -0.012em;
  line-height: 0.98;
  font-variation-settings: "opsz" 96, "SOFT" 70, "WONK" 1;
}

.display em {
  font-family: var(--hand);
  font-style: normal;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0;
  line-height: 0.9;
  display: inline-block;
  transform: rotate(-1.6deg) translateY(0.06em);
  padding: 0 0.06em;
}

.hero__brand {
  font-family: var(--display);
  font-weight: 380;
  letter-spacing: -0.036em;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
}
.brand-line:nth-child(1) .brand-word {
  transform: rotate(-0.4deg);
  transform-origin: left bottom;
}
.brand-line:nth-child(2) .brand-word {
  transform: rotate(0.35deg);
  transform-origin: left bottom;
}

.amp {
  font-family: var(--hand) !important;
  font-style: normal !important;
  font-weight: 600;
  display: inline-block;
  transform: rotate(-7deg) translateY(0.08em) scale(1.3);
  margin: 0 .04em 0 .02em;
  letter-spacing: 0;
}

.hero__claim em {
  font-family: var(--hand);
  font-style: normal;
  font-weight: 500;
  font-size: 1.22em;
  letter-spacing: 0;
  display: inline-block;
  transform: rotate(-1.8deg) translateY(0.05em);
  color: var(--gold-hi);
}

.eyebrow {
  font-family: var(--ui-sans);
  font-feature-settings: "case" 1;
}

.ornament__diamond {
  border-radius: 1px;
  transform: rotate(45deg) skewX(-1.5deg);
}

/* linea scarabocchio invece della retta perfetta */
.ornament__rule {
  background: none !important;
  position: relative;
  height: 3px;
  opacity: 1;
  overflow: visible;
}
.ornament__rule::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4' preserveAspectRatio='none'%3E%3Cpath d='M0 2 C 18 .4 36 3.3 54 1.9 S 90 .8 108 2.2 144 3.4 162 1.7 198 2.6 200 2' fill='none' stroke='currentColor' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .75;
}

.storia__photo {
  transform: rotate(-1.2deg);
  transition: transform .6s var(--ease);
}
.storia__photo:hover { transform: rotate(-0.3deg); }

/* nastro adesivo dorato in cima alla foto */
.storia__photo::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 14%;
  width: 110px;
  height: 24px;
  background: rgba(201, 163, 94, 0.22);
  border: 1px solid rgba(201, 163, 94, 0.35);
  transform: rotate(-4deg);
  z-index: 4;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.storia__photo figcaption {
  font-family: var(--hand) !important;
  font-style: normal !important;
  font-size: 1.18rem !important;
  letter-spacing: 0 !important;
  background: rgba(14, 13, 10, 0.78) !important;
  padding: .4rem 1rem !important;
  transform: rotate(-1.5deg);
}

.crudi__tile { transition: transform .5s var(--ease); }
.crudi__tile:nth-of-type(1) { transform: rotate(-0.7deg); }
.crudi__tile:nth-of-type(2) { transform: rotate(0.6deg); }
.crudi__tile:nth-of-type(3) { transform: rotate(-0.4deg); }
.crudi__tile:hover {
  transform: rotate(0) scale(1.012);
  z-index: 2;
}

.secondi__grid .dish:nth-child(1) { transform: rotate(-0.4deg); }
.secondi__grid .dish:nth-child(2) { transform: rotate(0.5deg); }
.secondi__grid .dish:nth-child(3) { transform: rotate(-0.35deg); }

.storia__pull {
  position: relative;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.3rem, .9vw + 1.05rem, 1.8rem);
  line-height: 1.38;
  color: var(--ink-soft);
  margin: 2rem 0 2.5rem;
  padding: 1rem 0 1rem 1.8rem;
  border-left: 2px solid var(--gold);
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 1;
}
.storia__pull::before {
  content: "“";
  position: absolute;
  left: .08em;
  top: -.2em;
  font-family: var(--display);
  font-size: 3em;
  color: var(--gold);
  opacity: .35;
  line-height: 1;
  font-style: normal;
}
.storia__pull p { margin: 0; }
.storia__pull cite {
  display: block;
  margin-top: .9rem;
  font-family: var(--hand);
  font-style: normal;
  font-size: 1.6rem;
  color: var(--gold-d);
  font-weight: 600;
  transform: rotate(-2.8deg);
  transform-origin: left center;
  letter-spacing: 0;
}

.hand,
em.hand,
.signature {
  font-family: var(--hand);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.05;
}

.signature {
  font-size: 1.55em;
  color: var(--gold);
  display: inline-block;
  transform: rotate(-3deg);
  transform-origin: left center;
}
.signature--ink { color: var(--gold-d); }

.signature__content .signature {
  margin-top: 1.5rem;
  font-size: 2rem;
  color: var(--gold-hi);
  font-weight: 600;
}
.signature__content .signature::before {
  content: "— ";
  opacity: .55;
}

.note-margin {
  font-family: var(--hand);
  font-size: clamp(1.15rem, 1.05rem + .35vw, 1.55rem);
  color: var(--gold-d);
  line-height: 1.15;
  display: inline-block;
  max-width: 16em;
  transform: rotate(-2.4deg);
}
.note-margin--right { transform: rotate(1.8deg); }
.section--dark .note-margin { color: var(--gold-hi); }

.note-arrow {
  display: inline-block;
  width: 44px;
  height: 26px;
  vertical-align: middle;
  margin-right: .25em;
  color: currentColor;
}

/* sottolineatura a mano sotto gli em della storia */
.prose em {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 22 .8 42 7 62 4 S 100 .8 118 5' fill='none' stroke='%238B6E2C' stroke-width='1.3' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .35em;
  padding-bottom: .12em;
}

.closing__text {
  font-family: var(--hand) !important;
  font-style: normal !important;
  font-size: clamp(2.6rem, 4.5vw, 4.2rem) !important;
  color: var(--gold-d) !important;
  display: inline-block;
  transform: rotate(-2.5deg);
  font-weight: 600;
}
.closing__text em {
  font-family: inherit !important;
  font-style: normal !important;
  color: inherit !important;
  transform: none !important;
  padding: 0 !important;
  background: none !important;
}

.closing__ps {
  font-family: var(--hand);
  font-size: clamp(1.2rem, 1rem + .4vw, 1.5rem);
  color: var(--paper-mute);
  margin: 1rem 0 0;
  transform: rotate(-1deg);
  display: inline-block;
  letter-spacing: 0;
}

.nav__mark text {
  font-family: var(--hand) !important;
  font-style: normal !important;
  font-size: 16px !important;
}

.nav__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 24, "SOFT" 70, "WONK" 1;
}
.nav__name em {
  font-family: var(--hand);
  font-style: normal;
  font-weight: 600;
  font-size: 1.4em;
  vertical-align: -0.12em;
  display: inline-block;
  transform: rotate(-8deg);
  margin: 0 .04em;
  color: var(--gold);
}

.recensione__title {
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "SOFT" 70, "WONK" 1;
}
.recensione__author {
  font-family: var(--hand);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  color: var(--gold-d);
  letter-spacing: 0;
  transform: rotate(-1.8deg);
  display: inline-block;
}

.servizi__grid .card h3 {
  font-family: var(--display);
  font-variation-settings: "opsz" 36, "SOFT" 70, "WONK" 1;
  font-weight: 500;
}

.visita__hours .closed dd {
  font-family: var(--hand);
  font-style: normal;
  font-size: 1.4rem;
  color: var(--wine);
  letter-spacing: 0;
  transform: rotate(-2.2deg);
  display: inline-block;
}

.hero__scroll span:first-child {
  font-family: var(--hand);
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
  opacity: .85;
  transform: rotate(-3deg);
  display: inline-block;
}

.prose .lead::first-letter {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--gold-d);
}

@media (prefers-reduced-motion: reduce) {
  .storia__photo,
  .crudi__tile,
  .secondi__grid .dish,
  .display em,
  .amp,
  .signature,
  .note-margin,
  .recensione__author,
  .visita__hours .closed dd,
  .closing__text,
  .closing__ps,
  .nav__name em,
  .hero__claim em,
  .hero__scroll span:first-child,
  .storia__pull cite,
  .brand-line:nth-child(1) .brand-word,
  .brand-line:nth-child(2) .brand-word {
    transform: none !important;
  }
}

@media (max-width: 720px) {
  .note-margin { max-width: 100%; font-size: 1.1rem; }
  .storia__photo { transform: rotate(-0.6deg); }
  .crudi__tile,
  .secondi__grid .dish { transform: none; }
  .storia__photo::before { left: 8%; width: 80px; }
}