/* =========================================================
   LRNZ — Portfolio di Lorenzo Passacantilli
   Misure dal file Figma "portfolio", frame desktop 1440 px
   e frame mobile 375 px.
   ========================================================= */

/* ---------- Font ----------
   Ronzino (Collletttivo) e Nunito: entrambi SIL Open Font License,
   le licenze sono nella cartella /fonts. */
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../../fonts/Nunito-Bold.woff") format("woff"), url("../../fonts/Nunito-Bold.ttf") format("truetype"); }
@font-face { font-family: "Ronzino"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../../fonts/Ronzino-Regular.woff") format("woff"), url("../../fonts/Ronzino-Regular.otf") format("opentype"); }
@font-face { font-family: "Ronzino"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../../fonts/Ronzino-Oblique.woff") format("woff"), url("../../fonts/Ronzino-Oblique.otf") format("opentype"); }
@font-face { font-family: "Ronzino"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../../fonts/Ronzino-Medium.woff") format("woff"), url("../../fonts/Ronzino-Medium.otf") format("opentype"); }
@font-face { font-family: "Ronzino"; font-weight: 500; font-style: italic; font-display: swap;
  src: url("../../fonts/Ronzino-MediumOblique.woff") format("woff"), url("../../fonts/Ronzino-MediumOblique.otf") format("opentype"); }
@font-face { font-family: "Ronzino"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../../fonts/Ronzino-Bold.woff") format("woff"), url("../../fonts/Ronzino-Bold.otf") format("opentype"); }
@font-face { font-family: "Ronzino"; font-weight: 700; font-style: italic; font-display: swap;
  src: url("../../fonts/Ronzino-BoldOblique.woff") format("woff"), url("../../fonts/Ronzino-BoldOblique.otf") format("opentype"); }

:root {
  --ink: #2f2f2f;
  --black: #000;
  --grey: #8f8f8f;
  --grey-meta: #404040;
  --green: #00c896;       /* barra della mail */
  --green-soft: #55db9c;  /* fascetta "coffee" */
  --green-nav: #7cd8a1;   /* rettangolo hover del menu */
  --bg: #fff;

  --font-body: "Ronzino", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Nunito", "Helvetica Neue", Arial, sans-serif;

  /* scala fluida: il valore massimo è quello di Figma a 1440 px */
  --gutter: clamp(16px, 2.78vw, 40px);
  --gap: clamp(9px, 1.39vw, 20px);
  --row-gap: clamp(9px, 1.53vw, 22px);
  --fs-hero: clamp(43px, 6.8vw, 98px);
  --fs-nav: clamp(16px, 1.94vw, 28px);
  --fs-label: clamp(14px, 1.8vw, 26px);
  --fs-about-lead: clamp(20px, 3.2vw, 46px);
  --fs-about: clamp(16px, 2.5vw, 36px);
  --fs-links: clamp(13px, 1.78vw, 25.7px);
  --fs-meta: clamp(12px, 1.53vw, 22px);
  --fs-mail: clamp(15px, 3.89vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1 { margin: 0; font-weight: 400; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Header ---------- */
/* navbar sempre fissata in alto, con fondo bianco a tutta larghezza */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: space-between;
  max-width: 1440px; margin-inline: auto;
  padding: clamp(20px, 2.2vw, 32px) var(--gutter) clamp(14px, 1.5vw, 22px);
}
.site-header::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -100vmax; right: -100vmax;
  background: var(--bg); z-index: -1;
}

/* Logo LRNZ (102×59 px in Figma) */
.logo { display: block; flex: none; }
.logo img { width: clamp(55px, 6.22vw, 89.6px); height: auto; }
.logo-svg { display: block; width: clamp(55px, 6.22vw, 89.6px); height: auto; overflow: visible; }
.logo-svg path { transform-box: fill-box; transform-origin: 50% 60%; }
/* a ogni tocco del menu le lettere traballano sul posto, ognuna a modo suo */
.logo.wobble path { animation: logo-wobble .55s cubic-bezier(.3,.7,.4,1) both; }
.logo.wobble path:nth-child(2) { animation-delay: .04s; animation-direction: reverse; }
.logo.wobble path:nth-child(3) { animation-delay: .08s; }
.logo.wobble path:nth-child(4) { animation-delay: .12s; animation-direction: reverse; }
@keyframes logo-wobble {
  0%   { transform: none; }
  20%  { transform: translateY(-1.5px) rotate(-9deg); }
  40%  { transform: translateY(1px) rotate(7deg); }
  60%  { transform: translateY(-.6px) rotate(-4deg); }
  80%  { transform: rotate(2deg); }
  100% { transform: none; }
}

.nav { display: flex; gap: clamp(14px, 1.7vw, 24px); padding-top: clamp(0px, 1.25vw, 18px); }
.nav a {
  display: inline-block;
  font-size: var(--fs-nav); line-height: 1.1; letter-spacing: -0.01em;
  padding: 0 .04em;
}
/* hover: il rettangolo verde compare e basta, senza animazione */
.nav a:hover, .nav a:focus-visible { background: var(--green-nav); outline: none; }

.menu-toggle { display: none; }
.nav-extra { display: none; }
.mob-only { display: none; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(53px, 7.15vw, 103px); }
.hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-hero);
  line-height: .86; letter-spacing: -0.05em;
  color: var(--ink);
}
.hero-title .line { display: block; white-space: nowrap; }

/* "I love to do": scritta a mano, ogni lettera trema da sola */
/* l'SVG (537×99 in Figma) parte dalla cima della seconda riga;
   la fascetta è posizionata rispetto alla scritta, così resta
   sempre nello stesso punto a qualsiasi larghezza */
.love-wrap {
  position: relative; display: inline-block; vertical-align: top;
  margin-top: .067em; margin-bottom: -.07em; margin-left: .16em;
}
.love {
  display: block;
  height: .788em; width: auto; aspect-ratio: 494.8 / 77.2;
  overflow: visible;
}
.love path { transform-box: fill-box; transform-origin: 50% 60%; will-change: transform; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* fascetta verde: sale verso destra e sfiora il fondo di "do."
   (misure prese dalla composizione di riferimento) */
/* misure prese dalla composizione di riferimento: la fascetta parte
   sotto la "I", sale verso destra e copre il fondo di "do." */
.tagline {
  position: absolute; left: 1.42%; top: 110.4%; width: 102.5%; height: 66.2%;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-4.95deg); transform-origin: 50% 50%;
  font-family: var(--font-body); font-weight: 400; font-size: .30em;
  line-height: 1; letter-spacing: -0.01em; white-space: nowrap;
  color: var(--ink); background: var(--green-soft);
  padding: 0 .17em;
}
.hero-title { margin-bottom: 1.85em; }

.hero-meta {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  margin-bottom: clamp(24px, 3.33vw, 48px);
}
.disciplines { max-width: 535px; font-size: var(--fs-label); line-height: 1.2; letter-spacing: -0.01em; color: var(--grey); }
.scroll-down {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  margin-top: clamp(0px, 2.6vw, 38px);
  font-size: var(--fs-meta); color: var(--grey-meta);
}
.scroll-down svg { width: 15px; height: auto; }

/* ---------- Caroselli ----------
   Escono oltre i margini fino ai bordi della finestra;
   le foto restano della misura della griglia Figma. */
.carousels {
  display: flex; flex-direction: column; gap: var(--row-gap);
  width: 100vw; margin-left: calc(50% - 50vw);
}
.carousel {
  /* tre foto visibili come nella griglia Figma (440 px a 1440) */
  --tile-px: calc((min(100vw, 1440px) - 2 * var(--gutter) - 2 * var(--gap)) / 3);
  overflow: hidden;
}
.carousel-track {
  display: flex; width: max-content;
  animation: marquee var(--speed, 48s) linear infinite;
}
.carousel[data-direction="right"] .carousel-track { animation-name: marquee-right; }
.carousel-track img {
  width: var(--tile-px, 440px); height: auto; aspect-ratio: 440 / 352; object-fit: cover;
  margin-right: var(--gap); flex: none; background: #ececec;
  user-select: none; -webkit-user-drag: none;
}
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes marquee-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* ---------- About ---------- */
.about { padding-top: clamp(80px, 9.8vw, 140px); color: var(--grey); scroll-margin-top: 130px; }
.about .lead { font-size: var(--fs-about-lead); line-height: 1.2; max-width: 25em; }
.about p { font-size: var(--fs-about); line-height: 1.2; max-width: 32em; }
.about .lead + p, .about p + p { margin-top: 1.2em; }
.about .tight { margin-top: 0 !important; }
.about strong { font-weight: 400; color: var(--black); }

/* ---------- Contatti ---------- */
.contact { padding-top: clamp(80px, 8.7vw, 125px); scroll-margin-top: 130px; }
.contact-top { display: grid; grid-template-columns: 440fr 920fr; gap: var(--gap); align-items: end; }
.portrait { aspect-ratio: 440 / 517; overflow: hidden; background: #ececec; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.contact-links {
  display: grid; grid-template-columns: 230px auto; justify-content: start;
  font-size: var(--fs-links); line-height: 1.2; letter-spacing: -0.01em; color: var(--grey);
  padding-bottom: clamp(0px, .9vw, 13px);
}
.contact-links ul { list-style: none; margin: 0; padding: 0; }
.contact-links a { display: inline-flex; align-items: center; gap: .42em; }
.contact-links svg { width: .63em; height: auto; flex: none; }

.mail-bar {
  margin-top: clamp(40px, 6.6vw, 96px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: fit-content; min-width: min(100%, 1113px); max-width: 100%;
  min-height: clamp(25px, 7.15vw, 103px);
  background: var(--green); color: var(--black);
  font-size: var(--fs-mail); line-height: 1; letter-spacing: -0.01em;
  padding: .3em clamp(8px, 2.6vw, 37px) .3em clamp(3px, .7vw, 10px);
}
.mail-bar span { min-width: 0; overflow-wrap: anywhere; }
.mail-bar svg { flex: none; width: .73em; height: auto; }

/* ---------- Works ---------- */
.page-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 4.72vw, 68px);
  line-height: .86; letter-spacing: -0.05em; color: var(--ink);
  padding-top: clamp(53px, 7.15vw, 103px);
}
.works-list { list-style: none; margin: clamp(40px, 6.2vw, 89px) 0 0; padding: 0; }
.work-row a {
  display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 24px;
  padding: clamp(14px, 1.84vw, 26.5px) 0 clamp(14px, 1.84vw, 26.5px);
  border-bottom: 1px solid #8a8a8a;
}
.work-row:first-child a { padding-top: 0; }
.work-year {
  grid-column: 1 / -1; justify-self: start;
  margin-left: -3px; padding: 0 3px;
  font-size: var(--fs-label); line-height: 1.04; letter-spacing: -0.01em;
  background: #f2f2f2; color: #c4c4c4;
  transition: background-color .15s, color .15s;
}
.work-title {
  margin-top: clamp(6px, .83vw, 12px);
  font-size: clamp(36px, 5.97vw, 86px); line-height: 1.2; letter-spacing: -0.005em;
  color: #c4c4c4; transition: color .15s;
}
.work-cat {
  font-size: var(--fs-label); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--grey); white-space: nowrap;
  margin-bottom: clamp(10px, 1.7vw, 24px);
}
.work-thumb { display: none; }
/* hover: la riga si "accende" */
.work-row a:hover .work-title, .work-row a:focus-visible .work-title { color: var(--black); }
.work-row a:hover .work-year, .work-row a:focus-visible .work-year { background: #eaeaea; color: var(--black); }
.work-row a:focus-visible { outline: none; }

/* anteprima che segue il cursore (492×394 in Figma) */
.works-preview {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: clamp(260px, 34.2vw, 492px); aspect-ratio: 492 / 394;
  overflow: hidden; background: #ececec;
  opacity: 0; visibility: hidden;
  transition: opacity .15s, visibility .15s;
  will-change: transform;
}
.works-preview.is-visible { opacity: 1; visibility: visible; }
.works-preview img, .works-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.works-preview video { display: none; }
.works-preview.is-video img { display: none; }
.works-preview.is-video video { display: block; }

/* ---------- Pagina progetto ---------- */
.project { padding-top: clamp(40px, 7.15vw, 104px); }
.project-hero { aspect-ratio: 1360 / 820; overflow: hidden; background: #d9d9d9; }
.project-hero img, .project-hero video { width: 100%; height: 100%; object-fit: cover; }

.project-intro {
  display: grid; grid-template-columns: 920fr 440fr; gap: var(--gap);
  margin-top: clamp(32px, 4.72vw, 68px);
}
.project-text { font-size: clamp(17px, 2.5vw, 36px); line-height: 1.2; color: var(--black); }
.project-text p + p { margin-top: 1.2em; }
.project-text .lead { font-weight: 700; }
.project-meta {
  text-align: right; font-size: var(--fs-meta); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--grey-meta);
}

/* riconoscimento (es. BIG) */
.award {
  display: flex; align-items: center; gap: clamp(8px, .9vw, 13px);
  margin-top: clamp(24px, 3.4vw, 48px); margin-left: calc(-1 * clamp(4px, 2vw, 29px));
  font-size: clamp(14px, 1.67vw, 24px); line-height: 1.2; color: var(--grey);
}
.award img { width: clamp(60px, 8.6vw, 124px); height: auto; flex: none; }

/* galleria: righe di riquadri con le proporzioni di Figma */
.gallery { margin-top: clamp(48px, 5.4vw, 78px); display: flex; flex-direction: column; gap: var(--gap); }
.g-row { display: grid; gap: var(--gap); }
.g-row.cols-1 { grid-template-columns: 1fr; }
.g-row.cols-2 { grid-template-columns: 1fr 1fr; }
.g-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.g-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.g-item { position: relative; overflow: hidden; background: #ececec; aspect-ratio: 1; }
.g-item.wide { aspect-ratio: 1360 / 820; }
.g-item img, .g-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* righe con riquadri di larghezze diverse: colonne e proporzioni
   sono scritte nell'HTML con le misure di Figma */
.g-row.custom { grid-template-columns: var(--cols); }
.g-item.dark { background: #2e2c2c; }

/* testo: grassetto obliquo per le parole messe in evidenza */
.project-text em { font-weight: 700; font-style: italic; }

/* San Savino: lo stesso poster tre volte, ruotato come in Figma;
   i poster laterali escono oltre i bordi della finestra */
.poster-stack {
  position: relative;
  margin-inline: calc(-1 * var(--gutter));
  margin-top: calc(min(100vw, 1440px) * -0.0326);
  aspect-ratio: 1440 / 881;
}
.poster-stack img {
  position: absolute; width: 32.16%; height: auto;
  border: 1px solid #000; transform-origin: 50% 50%;
}
/* su schermi più larghi di 1440 px i poster laterali si spostano
   verso i bordi della finestra, così escono sempre */
.poster-stack { --extra: max(0px, (100vw - 1440px) / 2); }
.poster-stack .p1 { left: calc(-0.72% - var(--extra)); top: 8.03%;  transform: rotate(9.07deg); }
.poster-stack .p2 { left: 34.69%;                      top: 21.5%;  transform: rotate(-10.73deg); }
.poster-stack .p3 { left: calc(70.56% + var(--extra)); top: 5.54%;  transform: rotate(15deg); }

/* Lady Diana: il tablet si vede intero appena si apre la pagina */
.project-hero.fit { aspect-ratio: auto; background: none; overflow: visible; display: flex; justify-content: center; }
.project-hero.fit video {
  width: auto; height: auto; max-width: 100%;
  max-height: max(300px, calc(100svh - 250px));
  object-fit: contain;
}

/* Previous / Next project */
.project-nav {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: clamp(40px, 4.2vw, 60px);
  font-size: clamp(18px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -0.01em; color: var(--black);
}
.project-nav a { display: inline-flex; align-items: center; gap: .47em; }
/* hover: lo stesso rettangolo verde del menu, compare e basta */
.project-nav a span { padding: 0 .04em; margin: 0 -.04em; }
.project-nav a:hover span, .project-nav a:focus-visible span { background: var(--green-nav); }
.project-nav a:focus-visible { outline: none; }
.project-nav .next { margin-left: auto; }
.project-nav svg { width: .8em; height: auto; flex: none; }

/* ---------- Footer ---------- */
.site-footer {
  max-width: 1440px; margin-inline: auto;
  padding: clamp(64px, 8.5vw, 123px) var(--gutter) clamp(36px, 4.2vw, 61px);
}
.footer-logo { display: inline-block; }
.footer-logo img { width: clamp(55px, 6.22vw, 89.6px); height: auto; }
.footer-mail {
  display: flex; align-items: center; justify-content: space-between; gap: .4em;
  width: fit-content; min-width: min(100%, 772px); max-width: 100%;
  min-height: clamp(44px, 7.15vw, 103px);
  margin-top: clamp(24px, 2.85vw, 41px);
  padding: .18em clamp(14px, 1.8vw, 26px) .18em clamp(6px, .7vw, 10px);
  background: var(--green); color: var(--black);
  font-size: clamp(18px, 3.89vw, 56px); line-height: 1; letter-spacing: -0.01em;
}
.footer-mail span { min-width: 0; overflow-wrap: anywhere; }
.footer-mail svg { flex: none; width: .73em; height: auto; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px 24px;
  margin-top: clamp(28px, 4.6vw, 66px);
  font-size: clamp(14px, 1.78vw, 25.67px); line-height: 1.2; letter-spacing: -0.01em; color: var(--black);
}
.footer-rights { font-weight: 500; }
.footer-credit {
  margin-top: clamp(14px, 1.8vw, 26px);
  font-style: italic; font-size: clamp(13px, 1.53vw, 22px); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--grey);
}
.footer-links {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 250fr 210fr auto;
  width: calc(100% * 692 / 1360); flex: none;
}
.footer-links a { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.footer-links svg { width: .63em; height: auto; flex: none; color: #a6a6a6; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }

/* =========================================================
   Mobile (frame 375 px)
   ========================================================= */
@media (max-width: 760px) {
  /* icona hamburger: linee posizionate a mano, così Safari su iPhone
     le disegna sempre (niente flex dentro il <button>) */
  .menu-toggle {
    display: block; position: relative; z-index: 60;
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 12px; padding: 0; margin: 9px 0 0;
    background: transparent; border: 0; border-radius: 0; color: var(--ink);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .menu-toggle::before { content: ""; position: absolute; top: -14px; right: -14px; bottom: -14px; left: -14px; }
  .menu-toggle span {
    position: absolute; left: 0; width: 24px; height: 2px; border-radius: 1px;
    background-color: #2f2f2f;
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
  }
  .menu-toggle span:first-child { top: 0; }
  .menu-toggle span:last-child { top: 10px; }
  /* aperto: le due linee diventano una X */
  .menu-open .menu-toggle span:first-child { transform: translateY(5px) rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform: translateY(-5px) rotate(-45deg); }

  /* menu a tutto schermo, allineato a destra (Figma: Frame 156) */
  .site-header .logo { position: relative; z-index: 60; }
  .nav {
    position: fixed; inset: 0; z-index: 55; background: var(--bg);
    display: flex; flex-direction: column; align-items: flex-end; gap: 0;
    padding: 155px 18px 40px; text-align: right; overflow-y: auto;
    visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s;
  }
  .nav > a {
    font-family: var(--font-display); font-weight: 700;
    font-size: 50px; line-height: .98; letter-spacing: -0.05em; color: var(--ink);
    padding: 0;
  }
  /* al tocco compare la bandina verde, come su desktop */
  .nav > a:hover, .nav > a:focus-visible, .nav > a:active, .nav > a.is-tapped { background: var(--green-nav); }
  .nav-extra { display: block; margin-top: 22px; }
  .nav-links { list-style: none; margin: 0; padding: 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; color: var(--grey); }
  .nav-links a { font-size: inherit; line-height: inherit; padding: 0; }
  .nav-links a:hover, .nav-links a:focus-visible { color: var(--black); background: none; }
  .nav-legal { margin-top: 62px; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; color: #bfbfbf; }
  .nav-legal em { font-style: italic; }
  .menu-open { overflow: hidden; }
  .menu-open .nav { visibility: visible; opacity: 1; }

  .hero-title .line { white-space: normal; }
  .scroll-down { display: none; }

  .love-wrap { margin-left: 0; }
  .desk-only { display: none; }
  .mob-only { display: block; }
  /* più respiro bianco sotto il titolo su mobile */
  .hero-title { margin-bottom: 4.15em; }
  .hero-meta { margin-bottom: 24px; }
  .carousel { --tile-px: 51.5vw; }
  .carousel-track { animation-duration: var(--speed-mobile, 30s); }

  .about { padding-top: 32px; }
  .contact { padding-top: 40px; }
  .contact-top { grid-template-columns: 1fr; gap: 26px; }
  .portrait { aspect-ratio: 337 / 363; }
  .contact-links { grid-template-columns: 164px auto; }

  /* Works mobile: anno, titolo, foto, categoria (sempre "accesi") */
  .works-preview { display: none; }
  .works-list { margin-top: 36px; }
  .work-row a { grid-template-columns: 1fr; padding: 28px 0 18px; }
  .work-year { font-size: 13px; padding: 1px 3px; background: #eaeaea; color: var(--black); }
  .work-title { font-size: 36px; line-height: 1.2; margin-top: 4px; color: var(--black); }
  .work-thumb { display: block; position: relative; aspect-ratio: 339 / 271; overflow: hidden; background: #ececec; margin-top: 14px; }
  .work-thumb img, .work-thumb video { width: 100%; height: 100%; object-fit: cover; }
  .work-cat { margin: 16px 0 0; font-size: 16px; }

  /* Progetto mobile: foto, anno/categoria, testo, galleria impilata */
  .project { padding-top: 40px; }
  .project-hero { aspect-ratio: 339 / 271; }
  /* i video in apertura tengono le proporzioni del desktop */
  .project-hero.keep-ratio { aspect-ratio: 1360 / 820; }
  .project-intro { grid-template-columns: 1fr; gap: 0; margin-top: 20px; }
  .project-meta { order: -1; text-align: left; margin-bottom: 40px; }
  .award { margin-left: -6px; }
  .gallery { margin-top: 40px; gap: 5px; }
  .g-row { gap: 5px; }
  .g-row.cols-3 { grid-template-columns: 1fr; }
  .g-row.cols-3 .g-item { aspect-ratio: 339 / 274; }
  .g-row.cols-4 { grid-template-columns: 1fr 1fr; }
  .g-item.wide { aspect-ratio: 339 / 220; }
  .g-row.custom { grid-template-columns: 1fr; }

  .footer-bottom { flex-direction: column; gap: 18px; }
  .footer-links { width: auto; display: flex; flex-wrap: wrap; gap: 10px 22px; order: 1; }
  /* su mobile i diritti stanno in fondo, subito sopra il credito al font */
  .footer-rights { order: 2; }
  .footer-credit { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-track { animation-duration: 160s; }
}

/* ---------- The weight of thoughts ---------- */
/* video di apertura: parte muto, al click si sente la musica */
.sound-hero { position: relative; cursor: pointer; aspect-ratio: 1358 / 764; }
.sound-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sound-toggle {
  position: absolute; left: clamp(10px, 1.4vw, 20px); bottom: clamp(10px, 1.4vw, 20px);
  display: inline-flex; align-items: center; gap: .45em;
  font: inherit; font-size: var(--fs-meta); line-height: 1.2; color: var(--black);
  background: #fff; border: 0; padding: .3em .6em; cursor: pointer;
}
.sound-toggle svg { width: 1.1em; height: auto; }
.sound-hero:hover .sound-toggle, .sound-toggle:focus-visible { background: var(--green-nav); outline: none; }

/* storyboard su fondo lilla (1360×727 in Figma) */
.storyboard { aspect-ratio: 1360 / 727; background: #bfaffe; overflow: hidden; }
.storyboard img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* carosello palette e font: scorre lentamente, esce dai bordi */
.cards {
  width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
  --card: clamp(150px, 20.97vw, 302px); --card-gap: clamp(10px, 1.32vw, 19px);
}
.cards-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.cards-track img { width: var(--card); height: var(--card); margin-right: var(--card-gap); flex: none; }
@media (max-width: 760px) { .cards { --card: 46vw; } .cards-track { animation-duration: 24s; } }

/* San Savino: i poster ruotati scorrono appena si apre la pagina */
.poster-carousel {
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow-x: clip; overflow-y: visible;
  --poster: clamp(150px, 22vw, 320px);
  /* spazio per gli spigoli dei poster ruotati: nessuno viene tagliato */
  padding-top: calc(var(--poster) * .12);
  padding-bottom: calc(var(--poster) * .42);
}
.poster-track { display: flex; align-items: flex-start; width: max-content; animation: marquee 40s linear infinite; }
.poster-track img {
  width: var(--poster); height: auto; flex: none; margin-right: calc(var(--poster) * .03);
  border: 1px solid #000;
}
/* due posizioni alternate, come nello screen: A ruotato a destra, B a sinistra e più in basso */
.poster-track img:nth-child(odd)  { transform: rotate(8deg); }
.poster-track img:nth-child(even) { transform: translateY(16%) rotate(-10deg); }
@media (max-width: 760px) { .poster-track { animation-duration: 28s; } }

/* ---------- Testi a comparsa ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Cursore personalizzato (solo mouse) ---------- */
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor-dot {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--ink);
  transition: width .25s cubic-bezier(.22,.61,.36,1), height .25s cubic-bezier(.22,.61,.36,1), margin .25s cubic-bezier(.22,.61,.36,1), background-color .2s, opacity .2s;
  will-change: transform;
}
/* sopra ciò che è cliccabile: si ingrandisce, verde in "difference" come in Figma */
.cursor-dot.is-link { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: #55db9c; mix-blend-mode: difference; }
.cursor-dot.is-hidden { opacity: 0; }

/* ---------- Works: titoli che entrano lettera per lettera ---------- */
.work-title .ch { display: inline-block; white-space: pre; }
.js .work-title.split .ch { opacity: 0; transform: translateY(.45em); animation: letter-in .55s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes letter-in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .work-title.split .ch { opacity: 1; transform: none; animation: none; }
  .cursor-dot { display: none; }
  .has-cursor, .has-cursor * { cursor: auto !important; }
}

/* ---------- Caricamento iniziale (solo home, una volta per visita) ---------- */
.preloader { display: none; }
.is-loading { overflow: hidden; }
.is-loading .preloader {
  display: block; position: fixed; inset: 0; z-index: 9000;
  background: var(--green-soft); color: #3a4c0d;
  transition: transform .9s cubic-bezier(.76,0,.24,1);
}
.pl-text {
  position: absolute; top: 50%; margin: 0;
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs-label); line-height: 1.17;
  transform: translateY(-50%);
}
.pl-left { left: var(--gutter); }
.pl-right { right: var(--gutter); text-align: right; }
.pl-box {
  position: absolute; left: 50%; top: 50%;
  width: clamp(96px, 7.85vw, 140px); aspect-ratio: 1;
  transform: translate(-50%, -50%); overflow: hidden;
}
.pl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-logo { position: absolute; left: 10%; top: 50%; width: 80%; height: auto; transform: translateY(-50%); opacity: 0; }
.preloader.show-logo .pl-img { opacity: 0; }
.preloader.show-logo .pl-logo { opacity: 1; }
/* uscita: logo e scritte salgono e spariscono, poi il verde si alza */
.pl-text, .pl-box { transition: transform .7s cubic-bezier(.65,0,.35,1), opacity .5s ease; }
.preloader.exit .pl-left  { transform: translateY(-50%) translateY(-60vh); opacity: 0; }
.preloader.exit .pl-box   { transform: translate(-50%, -50%) translateY(-60vh); opacity: 0; transition-delay: .07s; }
.preloader.exit .pl-right { transform: translateY(-50%) translateY(-60vh); opacity: 0; transition-delay: .14s; }
.preloader.lift { transform: translateY(-100%); }
/* la home entra dal basso mentre il verde si alza */
.is-loading .hero-title, .is-loading .hero-meta { opacity: 0; transform: translateY(60px); }
.pl-anim .hero-title, .pl-anim .hero-meta { transition: opacity .9s ease .25s, transform 1s cubic-bezier(.22,.61,.36,1) .2s; }
.pl-anim .hero-meta { transition-delay: .35s; }

@media (max-width: 760px) {
  .pl-text { top: auto; transform: none; font-size: 16px; }
  .pl-left { top: 22px; }
  .pl-right { bottom: 22px; }
  .pl-box { width: 30vw; }
  .preloader.exit .pl-left, .preloader.exit .pl-right { transform: translateY(-60vh); }
}