/* Design tokens and base document rules */
:root {
    --bg: #ffffff;
    --text: #0b0b0b;
    --hairline: rgba(11, 11, 11, 0.1);
    --thumb-w: clamp(210px, 16vw, 255px);
    --thumb-w-active: clamp(300px, 23vw, 365px);
    --poster-ratio: 5 / 7;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tile-scale: 0.9;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html,
  body {
    height: 100%;
  }
  
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  /* Shared focus treatment for links and the keyboard-focusable scroller */
  a:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
  }
  
  /* Contact mixed-font heading:
   STIX has a smaller x-height than Geist, so this slightly enlarges
   the serif words to match the sans words optically rather than mathematically */
.contact-hero-alt {
  display: inline-block;
  font-family: "STIX Two Text", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.5em;
  letter-spacing: -0.02em;
  transform: translateY(0.01em);
}


/* Carousel shell:
   mantengo identica l'altezza dello stage, ma riduco leggermente il poster
   così ogni tile respira di più dentro il suo spazio ed eviti overflow verticali */
   .work-scroller {
    --carousel-h: clamp(360px, 69svh, 640px);
    --meta-h: clamp(86px, 7.5vh, 96px);
    --card-gap: clamp(14px, 1.6vw, 22px);
    --active-scale: 1.02;
    --poster-h-base: calc((var(--carousel-h) - var(--meta-h)) / var(--active-scale));
    --poster-h: calc(var(--poster-h-base) * var(--tile-scale));
    --poster-w: calc(var(--poster-h) * 0.7143);
  
    height: var(--carousel-h);
    min-height: var(--carousel-h);
    max-height: var(--carousel-h);
  
    display: flex;
    gap: var(--card-gap);
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
    align-items: flex-start;
  }

  /* Desktop stage:
   quando riduci --tile-scale, anche l'altezza del carosello si restringe
   seguendo la tile reale, lasciando sotto solo un margine minimo di sicurezza */
@media (min-width: 861px) {
  .work-scroller {
    --desktop-media-scale: 1.035;
    --desktop-bottom-gap: clamp(0px, 0.35vh, 4px);

    height: calc(
      var(--meta-h) + (var(--poster-h) * var(--desktop-media-scale)) + var(--desktop-bottom-gap)
    );
    min-height: calc(
      var(--meta-h) + (var(--poster-h) * var(--desktop-media-scale)) + var(--desktop-bottom-gap)
    );
    max-height: calc(
      var(--meta-h) + (var(--poster-h) * var(--desktop-media-scale)) + var(--desktop-bottom-gap)
    );
  }
}
  
  .work-scroller::-webkit-scrollbar {
    display: none;
  }
  
  /* Coarse pointer devices can drag horizontally */
  @media (hover: none) and (pointer: coarse) {
    .work-scroller {
      overflow-x: auto;
    }
  }
  
  /* Carousel buttons */
  .carousel-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 25px;
    padding: 0;
    /*border: 1px solid rgba(11, 11, 11, 0.12); */
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: rgba(11, 11, 11, 0.52);
    transition:
      border-color 220ms var(--ease),
      color 220ms var(--ease),
      transform 220ms var(--ease);
  }
  
  .carousel-nav-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .carousel-nav-button:hover,
  .carousel-nav-button:focus-visible {
    color: var(--text);
    border-color: rgba(11, 11, 11, 0.22);
    transform: translateY(-1px);
  }
  
/* Meta block:
   reserves a fixed vertical slot so the full card never exceeds the stage height */
   .work-meta {
    flex: 0 0 var(--meta-h);
    min-height: var(--meta-h);
    padding-bottom: 14px;
    transform: translateY(0);
    transition: transform 220ms var(--ease);
    will-change: transform;
  }
  
  .work-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  
  .work-link:hover .work-meta,
  .work-link:focus-visible .work-meta {
    transform: translateY(-4px);
  }
  
/* Desktop footprint:
   card width now follows the available poster height instead of staying too large */
   .work-card {
    width: var(--poster-w);
    flex: 0 0 var(--poster-w);
    display: flex;
    align-self: flex-start;
    --card-progress: 0;
  }
  
/* Media box:
   its height is derived from the stage, so image + meta always stay fully visible */
   .work-media {
    width: 100%;
    height: var(--poster-h);
    aspect-ratio: var(--poster-ratio);
    min-height: 0;
    overflow: hidden;
    will-change: transform;
    transform-origin: center center;
    transform: scale(calc(0.82 + (0.215 * var(--card-progress))));
    clip-path: inset(0 round 0);
    background: #f3f3f3;
  }
  
  /* Immagine interna: riempie la tile mantenendo il taglio editoriale */
  .work-media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
/* Active state:
   remains visual only and no longer changes layout dimensions */
   .work-card.is-active {
    width: var(--poster-w);
    flex-basis: var(--poster-w);
  }
  
  .work-card.is-active .work-media {
    transform: scale(1.035);
  }
  
  /* Mobile offcanvas menu: pannello full-screen con palette invertita */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: var(--text);
    color: var(--bg);
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 400ms var(--ease),
      visibility 0ms linear 400ms;
  }
  
  body.is-menu-open .mobile-menu {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
    transition:
      transform 400ms var(--ease),
      visibility 0ms linear 0ms;
  }
  
/* Mobile offcanvas:
   il contenitore fisso resta full-screen, ma ora può scrollare verticalmente
   quando l'altezza disponibile non basta, ad esempio in landscape */
   .mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* Mobile offcanvas panel:
     mantiene almeno l'altezza viewport, ma può crescere oltre e farsi scrollare
     dentro il contenitore del menu */
  .mobile-menu__panel {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding:
      clamp(12px, 4vw, 36px) clamp(16px, 4vw, 48px) clamp(12px, 4vw, 20px);
  }
  
  .mobile-menu__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  
  .mobile-menu__nav {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vw, 16px);
    margin-top: clamp(72px, 14vh, 128px);
  }
  
  .mobile-menu__link {
    width: fit-content;
    font-family: "Geist", system-ui, -apple-system, "Segoe UI", "Roboto", "Arial", sans-serif;
    font-size: clamp(2.2rem, 8vw, 2.8rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: var(--bg);
  }
  
  .mobile-menu__link--current {
    font-weight: 650;
  }
  
  .mobile-menu__link--underlined {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
  }
  
  .mobile-menu__wordmark {
    margin-top: auto;
    padding-top: clamp(48px, 10vh, 96px);
    color: var(--bg);
  }
/* Short mobile viewport:
   in orizzontale riduco spazi e tipografia del menu offcanvas
   così i link entrano meglio e il wordmark resta visibile senza risultare invadente */
   @media (max-width: 860px) and (max-height: 520px) {
    .mobile-menu__top {
      font-size: 0.88rem;
    }
  
    .mobile-menu__nav {
      gap: 10px;
      margin-top: clamp(24px, 6vh, 44px);
    }
  
    .mobile-menu__link {
      font-size: clamp(1.7rem, 5.6vw, 2.1rem);
    }
  
    .mobile-menu__wordmark {
      padding-top: clamp(18px, 4vh, 28px);
    }
  
    .mobile-menu__wordmark h1 {
      font-size: clamp(3.1rem, 11vw, 5.4rem);
    }
  }
  
  /* Mobile only: blocca lo scroll della pagina quando il menu è aperto */
  @media (max-width: 860px) {
    body.is-menu-open {
      overflow: hidden;
    }
  }

  /* Short desktop viewports:
   slightly compresses vertical spacing so carousel and wordmark stay better balanced */
@media (min-width: 861px) and (max-height: 860px) {
    main > section[aria-label="Progetti selezionati"] {
      margin-top: clamp(18px, 3.5vh, 32px);
    }
  
    footer[aria-label="Titolo portfolio"] {
      padding-top: clamp(8px, 1.8vh, 18px);
      padding-bottom: clamp(8px, 1.8vh, 16px);
    }
  }

  /* Back to top:
   controllo fisso ancorato al gutter della pagina; resta nascosto finché
   non c'è abbastanza scroll e compare con un ingresso leggero verso l'alto */
   .back-to-top {
    position: fixed;
    right: clamp(16px, 4vw, 48px);
    bottom: max(env(safe-area-inset-bottom), clamp(28px, 4.4vw, 46px));
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 14px, 0);
    transition:
      opacity 220ms var(--ease),
      transform 320ms var(--ease),
      visibility 0ms linear 320ms;
  }

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 220ms var(--ease),
    transform 320ms var(--ease),
    visibility 0ms linear 0ms;
}

/* Back to top frame:
   shell rettangolare e pulita con overflow hidden; serve a creare
   l'effetto "sbustata" mentre la freccia sale da dentro il contenitore */
   .back-to-top__frame {
    width: clamp(56px, 5.2vw, 72px);
    height: clamp(68px, 6.6vw, 88px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.94);
    transition:
      border-color 220ms var(--ease),
      transform 220ms var(--ease);
  }

/* Back to top icon:
   parte da sotto il frame e rientra in posizione quando il bottone diventa visibile */
   .back-to-top__icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translate3d(0, 155%, 0);
    transition: transform 380ms var(--ease);
  }

.back-to-top.is-visible .back-to-top__icon {
  transform: translate3d(0, 0, 0);
}

/* Back to top interaction:
   micro-feedback minimo, coerente col linguaggio editoriale e con focus visibile */
.back-to-top:hover .back-to-top__frame,
.back-to-top:focus-visible .back-to-top__frame {
  border-color: rgba(11, 11, 11, 0.22);
  transform: translate3d(0, -2px, 0);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

/* Back to top mobile:
   lo tengo leggermente più raccolto sul bordo per evitare tocchi accidentali */
   @media (max-width: 860px) {
    .back-to-top {
      right: clamp(14px, 4vw, 20px);
      bottom: max(env(safe-area-inset-bottom), 22px);
    }
  
    .back-to-top__frame {
      width: 50px;
      height: 62px;
    }
  
    .back-to-top__icon {
      width: 22px;
      height: 22px;
    }
  }
  
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .skip-link,
  .nav-link,
  .work-meta,
  .work-media,
  .work-card,
  .carousel-nav-button,
  .mobile-menu,
  .back-to-top,
  .back-to-top__frame,
  .back-to-top__icon {
    transition: none !important;
  }
}
  
/* Mobile carousel:
   keeps a viewport-based stage and derives equal card size from the available height */
   @media (max-width: 860px) {
/* Mobile carousel:
   applico la stessa riduzione anche su mobile, lasciando però invariata
   l'altezza del contenitore del carosello */
   .work-scroller {
    --carousel-h: clamp(390px, 60svh, 520px);
    --meta-h: clamp(82px, 18vw, 98px);
    --card-gap: 2px;
    --active-scale: 1;
    --poster-h-base: calc(var(--carousel-h) - var(--meta-h));
    --poster-h: calc(var(--poster-h-base) * var(--tile-scale));
    --thumb-w: calc(var(--poster-h) * 0.7143);
  
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: calc(50% - (var(--thumb-w) / 2));
    scroll-padding-inline: calc(50% - (var(--thumb-w) / 2));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  
    .work-card,
    .work-card.is-active {
      width: var(--thumb-w);
      flex: 0 0 var(--thumb-w);
      margin-inline: 0;
    }
  
    /* Mobile snap:
       forces one clear stop per card while swiping */
    .work-card {
      scroll-snap-stop: always;
    }
  
    /* Mobile media:
       disables active enlargement and keeps all tiles equal */
    .work-media,
    .work-card.is-active .work-media {
      height: var(--poster-h);
      transform: none;
    }
  
    /* Mobile meta:
       keeps the heading block inside the same fixed stage */
    .work-meta {
      flex-basis: var(--meta-h);
      min-height: var(--meta-h);
      padding-bottom: 10px;
    }
  }