@font-face {
  font-family: "Yale Script";
  src: url("../assets/fonts/yale-script/OPTIYaleScript.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Yale Script";
  src: url("../assets/fonts/yale-script/OYALE%20Scrip%20Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

body.home-page {
  --home-background: #c9e3e7;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--home-background);
  background-image: url("../home%20page/sfondo.png?v=cc47221fc92d");
  background-position: center top;
  background-size: 1920px 1080px;
  background-repeat: repeat;
  color: #000000;
  text-align: left;
  overflow-x: clip;
}

.home-content {
  --home-frame-width: min(620px, calc(100vw - 48px), calc((100svh - 96px) * 1000 / 1050));
  position: relative;
  --projects-overlap: clamp(28px, 4svh, 48px);
  --home-layout-bottom: calc(var(--projects-overlap) + max(20px, env(safe-area-inset-bottom)));
  width: 100%;
}

.home-content > [data-scroll-panel] {
  position: sticky;
  top: var(--panel-sticky-top, 0px);
  z-index: var(--panel-order, 0);
  box-sizing: border-box;
  min-height: 100svh;
  background-color: #ffffff;
}

.home-content > [data-scroll-panel]:not(:first-child) {
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
}

.home-intro {
  position: relative;
  z-index: 0;
  isolation: isolate;
  box-sizing: border-box;
  height: 100svh;
  min-height: 100svh;
  background: transparent;
  overflow: hidden;
}

.home-content > .home-putti {
  --putti-frame-width: min(644px, calc(100vw - 24px));
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-height: 0;
  margin: calc(12px - var(--home-layout-bottom)) 0 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.home-intro > .home-canvas {
  height: 100%;
  aspect-ratio: auto;
}

.home-side-menu {
  --menu-peek: 96px;
  --menu-gap: 12px;
  position: absolute;
  z-index: 20;
  top: var(--menu-gap);
  right: var(--menu-gap);
  width: min(620px, calc(100vw - 24px), calc((100svh - 24px) * 640 / 1070));
  aspect-ratio: 640 / 1070;
  overflow: hidden;
  /* Crop the empty margins so the paper itself fills the available space. */
  transform: translateX(calc(100% + var(--menu-gap) - var(--menu-peek)));
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-side-menu.is-open {
  z-index: 21;
  transform: translateX(0);
}

.home-side-menu[data-home-menu] {
  --menu-peek: 120px;
  transform: translateX(calc(100% + var(--menu-gap) - var(--menu-peek))) rotate(2deg);
}

.home-side-menu[data-home-menu].is-open {
  transform: translateX(-12px) rotate(2deg);
}

.home-side-menu.site-menu {
  position: fixed;
  z-index: 30;
  top: 16px;
  left: auto;
  right: 16px;
  width: max-content;
  max-width: calc(100vw - 32px);
  aspect-ratio: auto;
  overflow: visible;
  transform: none;
  transition: none;
}

.home-side-menu.site-menu.is-open {
  z-index: 31;
}

.site-menu .home-menu-toggle {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 2px 20px;
  border: 1px solid #29241f;
  border-radius: 50%;
  background: #ffffff;
  color: #29241f;
  font: 22px/1.2 "Yale Script", Georgia, serif;
}

.site-menu .home-menu-toggle span {
  display: block;
  transform: translate(-0.08em, -0.06em);
}

.site-menu .home-menu-panel {
  inset: auto;
  top: calc(100% + 12px);
  right: 0;
  display: block;
  box-sizing: border-box;
  width: min(260px, calc(100vw - 32px));
  max-height: calc(100svh - 130px);
  padding: 20px;
  border: 1px solid #29241f;
  border-radius: 20px;
  background: #ffffff;
  text-align: left;
  mix-blend-mode: normal;
}

.site-menu .home-nav {
  width: 100%;
  max-width: none;
  gap: 18px;
  margin: 0;
}

.site-menu .home-nav-title {
  margin: 0;
  font-size: 18px;
}

.site-menu .home-nav-description {
  display: none;
}

body:not(.home-page) {
  overflow-x: clip;
}

.home-side-about {
  --menu-peek: 200px;
  --menu-gap: 24px;
  top: clamp(88px, 14svh, 144px);
  left: var(--menu-gap);
  right: auto;
  width: var(--home-frame-width);
  aspect-ratio: 1000 / 1050;
  transform: translateX(calc(-100% - var(--menu-gap) + var(--menu-peek)));
}

.home-side-about.is-open {
  transform: translateX(0);
}

.home-menu-toggle {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000000;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-menu-toggle:focus-visible {
  outline: 2px solid #000000;
  outline-offset: -8px;
}

.home-menu-artwork {
  position: absolute;
  top: -7.4766%;
  left: -43.75%;
  display: block;
  width: 187.5%;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.home-about-artwork {
  top: 0;
  left: 0;
  width: 100%;
}

.home-about-panel:empty {
  display: none;
}

.home-about-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.home-about-panel[aria-hidden="true"] {
  visibility: hidden;
}

.home-menu-panel {
  position: absolute;
  inset: 14% 12% 10%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #29241f;
  font-family: "Yale Script", Georgia, "Times New Roman", serif;
  text-align: center;
  mix-blend-mode: multiply;
}

[data-home-menu] .home-menu-panel {
  --heading-lift: clamp(24px, 4svh, 40px);
  top: calc(14% - var(--heading-lift));
  box-sizing: border-box;
  padding-top: var(--heading-lift);
}

[data-home-menu] .home-menu-heading {
  transform: translateY(calc(-1 * var(--heading-lift)));
}

.home-menu-heading {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 0 16px;
  min-height: 1.2em;
  padding: 0 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: "Yale Script", Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1;
}

.home-menu-heading span {
  display: block;
  transform: translate(-0.08em, -0.06em);
}

.home-about-photos {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 369 / 414;
  margin: 0 auto;
  overflow: hidden;
}

.home-portrait-window {
  position: absolute;
  z-index: 1;
  top: 22%;
  left: 25.5%;
  width: 49%;
  height: 55.5%;
  overflow: hidden;
}

.home-photo-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

.home-photo-frame:first-child {
  opacity: 1;
}

.home-side-menu.is-open .home-photo-frame {
  animation: home-photo-flip 1080ms steps(1, end) infinite;
  animation-delay: calc(var(--photo-index) * 180ms);
}

@keyframes home-photo-flip {
  0%, 16.66% { opacity: 1; }
  16.67%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-side-menu.is-open .home-photo-frame {
    animation: none;
  }
}

.home-menu-panel[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}

.home-nav {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  justify-content: space-evenly;
  gap: clamp(20px, 3svh, 32px);
  width: 82%;
  max-width: 260px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.home-nav a {
  display: block;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.home-nav-title {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
}

.home-nav-description {
  display: block;
  max-width: 20em;
  margin-inline: auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 400;
  line-height: 1.55;
}

.home-nav a:hover .home-nav-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.home-nav a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: -1px;
}

@media (prefers-reduced-motion: reduce) {
  .home-side-menu {
    transition: none;
  }
}

.home-canvas {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
}

.home-layout-toggle {
  position: absolute;
  z-index: 15;
  bottom: var(--home-layout-bottom);
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  border: 1px solid #000000;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  font: 14px/1.2 Arial, Helvetica, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-layout-toggle[hidden] {
  display: none;
}

.home-layout-toggle:hover {
  background: #000000;
  color: #ffffff;
}

.home-layout-toggle:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 4px;
}

.home-object {
  position: absolute;
  display: block;
  width: var(--object-width);
  height: auto;
  transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(var(--object-rotation, 0deg));
}

.home-object--horse {
  --object-width: 39.5%;
  --object-rotation: -15deg;
  top: 13.5%;
  left: 30.5%;
}

.home-object--scarf {
  --object-width: 34.5%;
  --object-rotation: 0deg;
  top: 5%;
  right: 1%;
}

.home-object--boots {
  --object-width: 34.2%;
  --object-rotation: -22deg;
  top: 0;
  left: 2.5%;
}

.home-object--cat {
  --object-width: 11.4%;
  --object-rotation: -12deg;
  top: 64.2%;
  left: 41.1%;
}

.home-object--bari-magnet {
  --object-width: 12.6%;
  --object-rotation: 7deg;
  top: 61%;
  left: 61%;
}

.home-object--potato {
  --object-width: 11.2%;
  --object-rotation: -12deg;
  top: 65%;
  left: 27%;
}

.home-object--kemonito {
  --object-width: 20.4%;
  --object-rotation: 8deg;
  top: 60%;
  left: 75.5%;
}

.home-object--ring {
  --object-width: 7.875%;
  --object-rotation: -10deg;
  top: 3%;
  left: 43%;
}

.home-object--drawing {
  --object-width: 11%;
  --object-rotation: 6deg;
  top: 78%;
  left: 29%;
}

.home-cards {
  position: absolute;
  top: 60.8%;
  left: 8.1%;
  width: 16.3%;
  aspect-ratio: 1 / 1.15;
}

.home-cards-help,
.home-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.home-card {
  position: absolute;
  z-index: 1;
  width: 65%;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  line-height: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(var(--card-rotation));
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 10%));
}

.home-card--eight {
  --card-rotation: 28deg;
  top: 0;
  left: 0;
}

.home-card img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.home-card.is-front {
  z-index: 2;
}

.home-object,
.home-card {
  scale: 1;
  transition: scale 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

.home-object.is-dragging,
.home-card.is-dragging {
  scale: 1;
  transition: none;
  cursor: grabbing;
}

@media (hover: hover) and (pointer: fine) {
  .home-object:hover:not(.is-dragging),
  .home-card:hover:not(.is-dragging) {
    scale: 1.025;
  }
}

.home-object-caption {
  position: fixed;
  box-sizing: border-box;
  width: max-content;
  max-width: min(220px, calc(100vw - 24px));
  max-height: calc(100svh - 24px);
  overflow-y: auto;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid #000000;
  border-radius: 10px;
  background: #ffffff;
  color: #000000;
  font: 11px/1.35 Arial, Helvetica, sans-serif;
  text-align: left;
  overflow-wrap: anywhere;
  animation: home-caption-in 180ms ease-out;
}

.home-object-caption[hidden] {
  display: none;
}

@keyframes home-caption-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

.home-object:focus,
.home-card:focus {
  outline: none;
}

.home-object:focus-visible:not(.is-pointer-selected),
.home-card:focus-visible:not(.is-pointer-selected) {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (min-width: 641px) and (max-width: 900px) {
  .home-canvas {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 640px) {
  .home-canvas {
    aspect-ratio: 3 / 4;
  }

  .home-object--horse {
    --object-width: 64%;
    top: 34%;
    left: 3%;
  }

  .home-object--scarf {
    --object-width: 43%;
    top: 5%;
  }

  .home-object--boots {
    --object-width: 50.4%;
    top: 2%;
    left: 1%;
  }

  .home-object--cat {
    --object-width: 20.4%;
    top: 76%;
    left: 54%;
  }

  .home-object--bari-magnet {
    --object-width: 22.8%;
    top: 30%;
    left: 40%;
  }

  .home-object--potato {
    --object-width: 19.2%;
    top: 79%;
    left: 74%;
  }

  .home-object--kemonito {
    --object-width: 30%;
    top: 41%;
    left: 67%;
  }

  .home-object--ring {
    --object-width: 12.375%;
    top: 24%;
    left: 43%;
  }

  .home-object--drawing {
    --object-width: 22%;
    top: 48%;
    left: 5%;
  }

  .home-cards {
    top: 64%;
    left: 11%;
    width: 36%;
  }
}

.home-object--bari-magnet.is-dragging {
  filter: drop-shadow(0 8px 5px rgb(0 0 0 / 20%));
}

.home-object--bari-magnet.is-snapping {
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .home-object,
  .home-card,
  .home-object--bari-magnet.is-snapping {
    transition: none;
  }

  .home-object-caption {
    animation: none;
  }
}

.home-putti > img {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

.home-childhood-photos {
  position: relative;
  z-index: 1;
  width: var(--putti-frame-width);
  max-width: calc(100% - 24px);
  aspect-ratio: 1000 / 1050;
  margin: 0 auto calc(var(--putti-frame-width) * -0.1);
}

.putti-frame-artwork {
  display: block;
  width: 100%;
  height: auto;
}

.putti-photo-window {
  position: absolute;
  top: 33.1%;
  left: 35.2%;
  width: 29.6%;
  height: 34.8%;
  overflow: hidden;
}

.putti-photo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: putti-photo-flip 540ms steps(1, end) infinite;
  animation-delay: calc(var(--photo-index) * 180ms);
}

.putti-photo-image:first-child {
  opacity: 1;
}

@keyframes putti-photo-flip {
  0%, 33.33% { opacity: 1; }
  33.34%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .putti-photo-image { animation: none; }
}

.home-side-contacts {
  --menu-gap: 16px;
  --menu-peek: 220px;
  --contacts-top: clamp(104px, 20svh, 200px);
  top: var(--contacts-top);
  left: var(--menu-gap);
  right: auto;
  width: min(640px, calc(100vw - 32px), calc((100svh - var(--contacts-top) - 32px) * 1200 / 1153));
  aspect-ratio: 1200 / 1153;
  transform: translateX(calc(-100% - var(--menu-gap) + var(--menu-peek))) rotate(-2deg);
}

.home-side-contacts.is-open {
  transform: translateX(0) rotate(-2deg);
}

.home-contacts-artwork {
  top: 0;
  left: 0;
  width: 100%;
}

.home-contacts-panel {
  position: absolute;
  inset: 18% 12% 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  overflow-y: auto;
  color: #29241f;
  text-align: center;
  mix-blend-mode: multiply;
}

.home-contacts-panel[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}

.home-contacts-panel h2 {
  margin: 0 0 8px;
  font: 400 clamp(24px, 2.4vw, 32px)/1.2 "Yale Script", Georgia, serif;
}

.home-contacts-panel a {
  color: inherit;
  font: 400 calc(clamp(14px, 1.1vw, 16px) * var(--contact-fit, 1))/1.4 Arial, Helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  overflow-wrap: normal;
}

.home-contacts-panel a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-contacts-panel a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: -1px;
}

/* Keep the desktop collage, with smaller handles and a usable drawing area on phones. */
.home-menu-close { display: none; }

@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  .home-content { --home-layout-bottom: max(28px, env(safe-area-inset-bottom)); }
  .home-intro { min-height: 540px; height: max(540px, 100svh); }
  .home-intro > .home-canvas {
    position: absolute;
    container-type: size;
    top: 76px;
    height: calc(100% - 168px);
    width: 100%;
  }
  .home-side-menu[data-home-menu] {
    --menu-peek: 36px;
    --menu-gap: 12px;
    top: 12px;
    width: min(340px, 88vw, calc((100svh - 24px) * 640 / 1070));
    height: auto;
    aspect-ratio: 640 / 1070;
    container-type: inline-size;
    transform: translateX(calc(100% + var(--menu-gap) - var(--menu-peek)));
  }
  .home-side-menu[data-home-menu].is-open { transform: none; }
  [data-home-menu] .home-menu-artwork { height: auto; }
  [data-home-menu] .home-menu-panel {
    --heading-lift: 0px;
    inset: 10% 10% 8%;
    padding: 0;
    scrollbar-width: thin;
  }
  [data-home-menu] .home-menu-heading { font-size: clamp(28px, 11cqw, 38px); margin-bottom: 10px; }
  [data-home-menu] .home-nav {
    width: 100%;
    max-width: 280px;
    gap: 10px;
    flex: 1 0 auto;
    padding-bottom: 4px;
  }
  [data-home-menu] .home-nav-title { font-size: clamp(22px, 8cqw, 28px); margin-bottom: 3px; }
  [data-home-menu] .home-nav-description { font-size: clamp(11px, 4cqw, 13px); line-height: 1.35; }
  [data-home-menu] .home-nav a { hyphens: none; overflow-wrap: normal; min-height: 44px; }
  .home-side-contacts {
    --menu-peek: 36px;
    --menu-gap: 12px;
    --contacts-top: 80px;
    width: min(340px, 88vw, calc((100svh - 104px) * 1200 / 1153));
    container-type: inline-size;
    transform: translateX(calc(-100% - var(--menu-gap) + var(--menu-peek)));
  }
  .home-side-contacts.is-open { transform: none; }
  .home-contacts-panel { inset: 18% 8% 20%; gap: 16px; }
  .home-contacts-panel h2 { font-size: 32px; }
  .home-contacts-panel a { font-size: calc(14px * var(--contact-fit, 1)); min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .is-open .home-menu-close {
    position: absolute;
    top: 12px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font: 28px/1 Arial, Helvetica, sans-serif;
    color: #29241f;
    pointer-events: none;
  }
  .home-layout-toggle { min-height: 44px; font-size: 16px; }
  .home-object-caption { font-size: 12px; }
  .home-object--boots { --object-width: min(80%, 80cqh); top: 3%; left: 8%; }
  .home-object--scarf { --object-width: min(70%, 70cqh); top: 5%; right: 6%; }
  .home-object--horse { --object-width: min(96%, 110cqh); top: 32%; left: 8%; }
  .home-object--ring { --object-width: 23%; top: 25%; left: 42%; }
  .home-object--bari-magnet { --object-width: 40%; top: 31%; left: 63%; }
  .home-object--drawing { --object-width: 38%; top: 52%; left: 10%; }
  .home-object--kemonito { --object-width: 50%; top: 48%; left: 65%; }
  .home-object--cat { --object-width: 36%; top: 73%; left: 47%; }
  .home-object--potato { --object-width: 34%; top: 76%; left: 76%; }
  .home-cards { top: 70%; left: 12%; width: min(58%, 72cqh); }
  .home-content > .home-putti { --putti-frame-width: min(448px, calc(100vw - 24px)); }
}

@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) {
  .home-putti > img { width: 100%; left: auto; transform: none; }
  .home-childhood-photos { margin-bottom: 0; }
  .home-page.home-grid .home-intro { height: calc(var(--mobile-grid-height) + 160px); }
  .home-page.home-grid .home-canvas { top: 36px; height: var(--mobile-grid-height); }
  .home-page.home-grid .home-cards { position: static; width: auto; aspect-ratio: auto; }
  .home-page.home-grid .home-object,
  .home-page.home-grid .home-card {
    top: 0; left: 0; right: auto;
    width: var(--grid-object-width);
    --object-rotation: 0deg;
    --card-rotation: 0deg;
    touch-action: pan-y;
  }
}