:root{
  --font:"Arial Narrow","Helvetica Neue Condensed","Liberation Sans Narrow",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;font-family:var(--font);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:#000;
  color:#111;
  height:76px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:16px 18px 10px;
}
.brand{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1;
  text-transform:lowercase;
  font-size:25px;
}
.brand small{
  font-size:12px;
  letter-spacing:.1em;
  color:#666;
}
.menu{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:16px;
  text-transform:lowercase;
  flex-wrap:wrap;
}
.menu a:hover,.menu button:hover{opacity:.55}

.stage{
  width:100%;
  background:#000;
  line-height:0;
}
.panel{
  position:relative;
  width:100%;
  aspect-ratio:2 / 1;
  overflow:hidden;
  background:#000;
  display:block;
  margin:0;
  padding:0;
}
.panel + .panel{
  margin-top:0 !important;
}
.panel.hidden{display:none !important}

.layer{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .8s ease-in-out;
  background:#000;
}
.layer.active{opacity:1}
.layer :is(img,video){
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1);
  transition:transform 5s ease-out;
}
.panel.zoom .layer.active :is(img,video){transform:scale(1.08)}

.scrim{
  position:absolute;
  inset:0;
  z-index:5;
  background:linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.03) 60%, rgba(0,0,0,.22) 100%);
  pointer-events:none;
}

.caption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  pointer-events:none;
}
.caption-kicker{
  font-size:10px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.caption-title{
  max-width:min(70vw,760px);
  font-size:clamp(28px,4.5vw,64px);
  line-height:.9;
  letter-spacing:-.045em;
  color:#fff;
  text-transform:lowercase;
  text-shadow:0 2px 14px rgba(0,0,0,.26);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease;
}
.panel.show-caption .caption-title{
  opacity:1;
  transform:none;
}

.drawer{
  position:fixed;
  inset:0;
  z-index:200;
  background:#f4f4f1;
  color:#111;
  transform:translateX(102%);
  transition:transform .32s ease;
  overflow:auto;
}
.drawer.open{transform:none}
.drawer-head{
  position:sticky;
  top:0;
  z-index:3;
  background:rgba(244,244,241,.97);
  padding:18px 16px 14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.drawer-head h2{
  margin:0;
  font-size:28px;
  line-height:.92;
  font-weight:400;
  text-transform:lowercase;
}
.close{font-size:26px;color:#111}
.info-block{padding:0 16px 22px}
.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 20px;
  padding:16px 0 22px;
}
.info-grid h3,.section-title{
  margin:0 0 7px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:#666;
  font-weight:400;
}
.info-grid p{margin:0;font-size:14px;line-height:1.42}
.section{padding:18px 0 22px}
.section-title{
  font-size:24px;
  text-transform:none;
  letter-spacing:-.02em;
  color:#111;
  margin-bottom:12px;
}
.section-intro{margin:0;font-size:17px;line-height:1.33;max-width:34ch}
.cv-list{display:grid;gap:10px}
.cv-item{display:grid;grid-template-columns:64px 1fr;gap:12px}
.cv-item time{font-size:12px;color:#666}
.cv-item p{margin:0;font-size:14px;line-height:1.42}
.drawer-foot{display:flex;justify-content:space-between;gap:12px;padding:0 0 8px;font-size:12px;color:#666}

@media (min-width: 981px) and (orientation: landscape){
  .panel.p1,.panel.p2{display:none !important}
  .panel.p0{display:block !important}
}

@media (max-width: 980px), (orientation: portrait){
  .site-header{
    height:72px;
    padding:14px 14px 10px;
  }
  .brand{font-size:21px}
  .brand small{font-size:11px}
  .menu{font-size:13px;gap:12px}
  .panel.p0,.panel.p1,.panel.p2{display:block !important}
  .caption{left:12px;right:12px;bottom:12px}
  .caption-title{
    max-width:82vw;
    font-size:clamp(20px,5.6vw,34px);
  }
}

@media (max-width:560px){
  .menu .email{display:none}
  .info-grid{grid-template-columns:1fr}
  .cv-item{grid-template-columns:56px 1fr;gap:10px}
}

/* HEADER FISSO IN SOVRIMPRESSIONE */
.site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:1000 !important;
  height:auto !important;
  padding:18px 20px 12px !important;
  background:transparent !important;
  color:#fff !important;
  text-shadow:0 1px 10px rgba(0,0,0,.32);
}
.site-header a,
.site-header button{
  color:#fff !important;
}
.brand{
  font-size:26px !important;
  color:#fff !important;
}
.brand small{
  font-size:12px !important;
  color:rgba(255,255,255,.80) !important;
}
.menu{
  font-size:16px !important;
  gap:18px !important;
  color:#fff !important;
}
.panel.p0::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:145px;
  z-index:12;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.28) 0%,
    rgba(0,0,0,.11) 55%,
    rgba(0,0,0,0) 100%
  );
}

@media(max-width:980px), (orientation:portrait){
  .site-header{
    padding:11px 10px 8px !important;
  }
  .brand{
    font-size:17px !important;
  }
  .brand small{
    font-size:9px !important;
    letter-spacing:.08em !important;
  }
  .menu{
    font-size:10px !important;
    gap:8px !important;
  }
  .panel.p0::before{
    height:105px;
  }
}
@media(max-width:560px){
  .menu .email{display:none !important;}
}


/* BARRA 30 SEGMENTI — SEMPRE SUL BORDO BASSO */
.progress-nav{
  position:absolute;
  left:14px;
  right:14px;
  bottom:2px;
  z-index:60;
  height:16px;
  display:flex;
  align-items:flex-end;
  cursor:pointer;
  touch-action:manipulation;
}
.progress-segments{
  width:100%;
  height:5px;
  display:grid;
  grid-template-columns:repeat(var(--segments,30),minmax(0,1fr));
  gap:2px;
  align-items:end;
}
.progress-segment{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  height:2px;
  margin:0;
  padding:0;
  border:0;
  background:rgba(0,0,0,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.52);
  cursor:pointer;
  opacity:.95;
  transition:
    background .16s ease,
    height .16s ease,
    box-shadow .16s ease,
    opacity .16s ease;
}
.progress-segment:hover{
  height:3px;
  background:#000;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.60),
    0 0 5px rgba(255,255,255,.95);
}
.progress-segment.active{
  height:3px;
  background:#fff;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.72),
    0 0 6px rgba(255,255,255,1);
  opacity:1;
}

@media(max-width:980px), (orientation:portrait){
  .progress-nav{
    left:7px;
    right:7px;
    bottom:0 !important;
    height:10px;
    align-items:flex-end;
  }
  .progress-segments{
    height:4px;
    gap:1px;
    margin-bottom:1px;
  }
  .progress-segment{
    height:2px;
  }
  .progress-segment.active{
    height:3px;
  }
}


/* ===== PHONE / TOUCH FINAL OVERRIDE =====
   Targets real phones even if orientation/viewport rules behave differently.
*/
@media (hover:none) and (pointer:coarse){
  .site-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    padding:8px 8px 5px !important;
    height:auto !important;
  }

  .brand{
    font-size:15px !important;
    line-height:.92 !important;
  }

  .brand small{
    font-size:7px !important;
    line-height:1 !important;
    letter-spacing:.07em !important;
    margin-top:2px !important;
  }

  .menu{
    font-size:9px !important;
    line-height:1 !important;
    gap:7px !important;
    flex-wrap:nowrap !important;
  }

  .menu .email{
    display:none !important;
  }

  /* Exactly on the lower edge of every image panel */
  .progress-nav{
    position:absolute !important;
    left:6px !important;
    right:6px !important;
    bottom:0 !important;
    top:auto !important;
    height:3px !important;
    min-height:3px !important;
    padding:0 !important;
    margin:0 !important;
    display:block !important;
    line-height:0 !important;
    z-index:100 !important;
  }

  .progress-segments{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:3px !important;
    margin:0 !important;
    padding:0 !important;
    gap:1px !important;
    align-items:end !important;
  }

  .progress-segment{
    height:2px !important;
    min-height:2px !important;
    margin:0 !important;
    padding:0 !important;
    box-shadow:none !important;
    background:#111 !important;
  }

  .progress-segment.active{
    height:3px !important;
    min-height:3px !important;
    background:#fff !important;
    box-shadow:0 0 4px rgba(255,255,255,.95) !important;
  }

  .panel{
    margin:0 !important;
    padding:0 !important;
  }
}

/* Extra narrow-phone fallback */
@media (max-width:700px){
  .site-header{
    padding:8px 8px 5px !important;
  }
  .brand{
    font-size:15px !important;
  }
  .brand small{
    font-size:7px !important;
  }
  .menu{
    font-size:9px !important;
    gap:7px !important;
    flex-wrap:nowrap !important;
  }
  .menu .email{
    display:none !important;
  }

  .progress-nav{
    bottom:0 !important;
    top:auto !important;
    left:6px !important;
    right:6px !important;
    height:3px !important;
  }
  .progress-segments{
    position:absolute !important;
    bottom:0 !important;
    height:3px !important;
    gap:1px !important;
  }
}


/* BLACK BACKGROUND */
html,
body,
.stage,
.panel,
.layer{
  background:#000 !important;
}
.layer :is(img,video){
  background:#000 !important;
}


@media (hover:none) and (pointer:coarse){
  .brand{
    font-size:18px !important;
  }
  .brand small{
    font-size:8px !important;
  }
  .menu{
    font-size:10.5px !important;
    gap:8px !important;
  }
}
@media (max-width:700px){
  .brand{
    font-size:18px !important;
  }
  .brand small{
    font-size:8px !important;
  }
  .menu{
    font-size:10.5px !important;
    gap:8px !important;
  }
}


/* INFO COMPLETE */
.drawer .info-block{
  max-width:1180px;
  margin:0 auto;
  padding-left:clamp(16px,4vw,52px);
  padding-right:clamp(16px,4vw,52px);
}
.drawer .section{
  padding-top:28px;
  padding-bottom:32px;
}
.drawer .section-title{
  font-size:clamp(25px,3vw,42px);
  margin-bottom:20px;
}
.drawer .cv-list{
  gap:0;
}
.drawer .cv-item{
  padding:10px 0;
  border-top:1px solid rgba(0,0,0,.08);
}
.drawer .cv-item:first-child{
  border-top:0;
}
.drawer .cv-item p{
  font-size:15px;
  line-height:1.42;
}
.drawer .cv-item time{
  font-size:12px;
  padding-top:2px;
}
@media(min-width:900px){
  .drawer .cv-item{
    grid-template-columns:90px minmax(0,1fr);
    gap:24px;
  }
  .drawer .info-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:560px){
  .drawer .section-title{
    font-size:27px;
  }
  .drawer .cv-item{
    grid-template-columns:58px minmax(0,1fr);
    gap:10px;
  }
  .drawer .cv-item p{
    font-size:13px;
  }
}


.drawer.open{cursor:pointer;}
.drawer.open a,
.drawer.open button{cursor:pointer;}

/* ===== iPAD / SAFARI COMPATIBILITY =====
   Same 2:1 visual ratio, without relying on CSS aspect-ratio.
*/
.panel{
  width:100% !important;
  height:50vw !important;
  min-height:1px !important;
  aspect-ratio:auto !important;
}
.layer{
  position:absolute !important;
  inset:0 !important;
}
.layer :is(img,video){
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* iPad portrait / mobile: 3 uninterrupted photographic bands */
@media (max-width:980px), (orientation:portrait){
  .panel.p0,
  .panel.p1,
  .panel.p2{
    display:block !important;
    width:100% !important;
    height:50vw !important;
    margin:0 !important;
    padding:0 !important;
  }
}

/* iPad landscape around 1024px: keep desktop behavior (one image) */
@media (min-width:981px) and (orientation:landscape){
  .panel.p0{display:block !important;}
  .panel.p1,
  .panel.p2{display:none !important;}
}


/* Compatibilita' barre su browser e iPad meno recenti */
.progress-segments{
  display:-webkit-flex !important;
  display:flex !important;
  grid-template-columns:none !important;
}
.progress-segment{
  -webkit-flex:1 1 0 !important;
  flex:1 1 0 !important;
  min-width:0 !important;
}


/* ===== ANTEPRIMA BARRA + LIGHTBOX ===== */
.progress-nav{
  overflow:visible !important;
}
.progress-segment{
  position:relative;
}
.thumb-preview{
  position:fixed;
  width:150px;
  height:84px;
  object-fit:cover;
  object-position:center;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  background:#111;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:5000;
  transform:translate(-50%,-100%);
  margin-top:-10px;
  transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
}
.thumb-preview.show{
  opacity:.5;
  visibility:visible;
  transform:translate(-50%,-100%);
}

#lightbox{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:10000;
  background:rgba(0,0,0,.96);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:zoom-out;
  padding:24px;
}
#lightbox.open{
  display:-webkit-flex;
  display:flex;
}
#lightbox img{
  display:block;
  max-width:96vw;
  max-height:94vh;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
#lightbox .lightbox-close{
  position:absolute;
  top:12px;
  right:16px;
  border:0;
  background:transparent;
  color:#fff;
  font:300 28px/1 Arial, sans-serif;
  cursor:pointer;
  padding:8px;
}
@media (hover:none), (pointer:coarse){
  .thumb-preview{display:none !important;}
  #lightbox{padding:8px;}
  #lightbox img{
    max-width:100vw;
    max-height:100vh;
  }
}


@media (hover:none), (pointer:coarse){
  .panel{cursor:pointer;}
}


/* Barra: inattiva scura, attiva bianca */
.progress-segment{
  background:rgba(0,0,0,.55) !important;
}
.progress-segment.active{
  background:#fff !important;
  box-shadow:0 0 6px rgba(255,255,255,.35);
}


/* Zoom variato: il punto di origine cambia a ogni immagine */
.layer :is(img,video){
  will-change:transform;
  transform-origin:50% 50%;
}


/* ===== INSTAGRAM SCROLL-LAYER: SOLO VERTICALE / MOBILE ===== */
.instagram-mobile{
  display:none;
  width:100%;
  box-sizing:border-box;
  background:#000;
  color:#fff;
  line-height:normal;
}
.instagram-mobile-inner{
  width:100%;
  max-width:100%;
  margin:0 auto;
  overflow:hidden;
}

/*
  In verticale:
  - le tre immagini partono normalmente una sotto l'altra;
  - restano "impilate" mentre si scorre;
  - Instagram parte DOPO la terza;
  - z-index: p0/p1 sopra Instagram, Instagram sopra p2.
*/
@media (max-width:980px), (orientation:portrait){
  .stage{
    position:relative;
    overflow:visible !important;
  }

  .panel.p0,
  .panel.p1,
  .panel.p2{
    position:-webkit-sticky !important;
    position:sticky !important;
    margin:0 !important;
  }

  .panel.p0{
    top:0 !important;
    z-index:40 !important;
  }

  .panel.p1{
    top:50vw !important;
    z-index:40 !important;
  }

  .panel.p2{
    top:100vw !important;
    z-index:10 !important;
  }

  .instagram-mobile{
    display:block;
    position:relative;
    z-index:25;
    margin:0 !important;
    padding:12px 0 24px;
    background:#000;
  }
}

@media (max-width:600px){
  .instagram-mobile{
    padding:10px 0 20px;
  }
}

@media (min-width:981px) and (orientation:landscape){
  .instagram-mobile{
    display:none !important;
  }

  .panel.p0,
  .panel.p1,
  .panel.p2{
    position:relative !important;
    top:auto !important;
  }
}


/* ==========================================================
   PROVA 6 x 5 — 6 SLIDESHOW DA 5 IMMAGINI
   ========================================================== */

.portfolio-cycle{
  width:100%;
  background:#000;
  position:relative;
  overflow:visible;
}

.portfolio-cycle-copy{
  display:none;
}

.portfolio-cycle .panel{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:50vw !important;
  min-height:1px !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#000;
  z-index:10;
}

.portfolio-cycle .panel + .panel{
  margin-top:0 !important;
}

/* 5 pallini */
.portfolio-cycle .progress-nav{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:13px !important;
  width:auto !important;
  height:22px !important;
  z-index:80 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:translateX(-50%) !important;
  overflow:visible !important;
}

.portfolio-cycle .progress-segments{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  gap:9px !important;
}

.portfolio-cycle .progress-segment{
  display:block !important;
  flex:0 0 auto !important;
  width:8px !important;
  height:8px !important;
  min-width:8px !important;
  min-height:8px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.92) !important;
  background:transparent !important;
  box-shadow:0 1px 7px rgba(0,0,0,.32) !important;
  opacity:1 !important;
  transition:background .2s ease, transform .2s ease, border-color .2s ease !important;
}

.portfolio-cycle .progress-segment.active{
  background:#fff !important;
  border-color:#fff !important;
  transform:scale(1.08);
}

.portfolio-cycle .progress-segment.paused{
  box-shadow:
    0 0 0 2px rgba(0,0,0,.42),
    0 0 0 3px rgba(255,255,255,.75) !important;
}

/* Fasce informazioni fra gli slideshow */
.info-flow{
  position:relative;
  z-index:35;
  min-height:150px;
  height:18vw;
  max-height:230px;
  margin:-22px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  pointer-events:none;
}

.info-flow-inner{
  position:relative;
  z-index:36;
  width:min(92vw,1500px);
  padding:0 18px;
  text-align:center;
  color:#fff;
  mix-blend-mode:difference;
  font-family:var(--font);
  font-size:clamp(18px,2.25vw,38px);
  line-height:1.02;
  letter-spacing:-.025em;
  font-weight:400;
  text-transform:none;
  text-wrap:balance;
  pointer-events:none;
}

/* Piccola riga secondaria */
.info-flow-inner small{
  display:block;
  margin-top:7px;
  font-size:.42em;
  line-height:1.15;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.82;
}

/*
  Il testo è sopra le immagini nei bordi di sovrapposizione.
  mix-blend-mode:difference fa diventare il bianco scuro/nero sulle
  superfici molto chiare senza dover conoscere in anticipo la foto.
*/
.info-flow::before{
  content:"";
  position:absolute;
  inset:22px 0;
  background:#000;
  z-index:-1;
}

/* Instagram dopo il sesto slideshow */
.portfolio-cycle .instagram-mobile{
  display:block !important;
  position:relative !important;
  z-index:10 !important;
  width:100% !important;
  margin:0 !important;
  padding:16px 0 28px !important;
  background:#000 !important;
}

/* Desktop: la prova 6x5 resta scorrevole anche in orizzontale */
@media (min-width:981px) and (orientation:landscape){
  .portfolio-cycle .panel.p0,
  .portfolio-cycle .panel.p1,
  .portfolio-cycle .panel.p2,
  .portfolio-cycle .panel.p3,
  .portfolio-cycle .panel.p4,
  .portfolio-cycle .panel.p5{
    display:block !important;
    position:relative !important;
    top:auto !important;
  }

  .portfolio-cycle .instagram-mobile{
    display:none !important;
  }

  .portfolio-cycle-copy{
    display:none !important;
  }
}

/* Verticale / tablet / telefono: loop infinito */
@media (max-width:980px), (orientation:portrait){
  .portfolio-cycle-copy{
    display:block;
    pointer-events:none;
  }

  .portfolio-cycle .panel{
    height:50vw !important;
  }

  .info-flow{
    min-height:118px;
    height:24vw;
    max-height:185px;
    margin:-16px 0;
  }

  .info-flow-inner{
    width:94vw;
    padding:0 12px;
    font-size:clamp(17px,4.3vw,31px);
  }

  .portfolio-cycle .progress-nav{
    bottom:10px !important;
  }

  .portfolio-cycle .progress-segments{
    gap:8px !important;
  }

  .portfolio-cycle .progress-segment{
    width:7px !important;
    height:7px !important;
    min-width:7px !important;
    min-height:7px !important;
  }

  .portfolio-cycle-copy .instagram-mobile{
    min-height:320px;
  }
}

@media (max-width:560px){
  .info-flow{
    height:29vw;
    min-height:110px;
    margin:-12px 0;
  }

  .info-flow-inner{
    font-size:clamp(16px,4.8vw,26px);
  }

  .portfolio-cycle-copy .instagram-mobile{
    min-height:360px;
  }
}

/* Le vecchie lineette vengono definitivamente neutralizzate */
.progress-segments{
  grid-template-columns:none !important;
}

/* Testo e immagini restano fluidi */
.layer :is(img,video){
  will-change:transform;
}


/* ===== CONTENUTI REALI TRA I 6 SLIDESHOW ===== */
.content-flow{
  position:relative;
  z-index:28;
  width:100%;
  box-sizing:border-box;
  background:#000;
  color:#fff;
  padding:54px 4vw 62px;
  margin:-18px 0;
  overflow:visible;
}
.content-flow-inner{
  width:min(1500px,92vw);
  margin:0 auto;
  mix-blend-mode:difference;
  color:#fff;
}
.content-flow h2,
.contact-flow h2{
  margin:0 0 24px;
  font-family:var(--font);
  font-size:clamp(24px,3vw,52px);
  line-height:.95;
  font-weight:400;
  letter-spacing:-.04em;
  text-transform:lowercase;
}
.flow-list{
  list-style:none;
  padding:0;
  margin:0;
  columns:2;
  column-gap:48px;
}
.flow-list li{
  break-inside:avoid;
  margin:0 0 11px;
  padding:0 0 10px;
  border-bottom:1px solid rgba(255,255,255,.16);
  font-family:var(--font);
  font-size:clamp(13px,1.15vw,18px);
  line-height:1.22;
  letter-spacing:.005em;
}
.projects-list{
  columns:3;
}

.contact-flow{
  position:relative;
  z-index:30;
  width:100%;
  box-sizing:border-box;
  background:#000;
  color:#fff;
  padding:68px 4vw 88px;
}
.contact-flow-inner{
  width:min(1500px,92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:34px;
}
.contact-col h2{
  font-size:clamp(17px,1.5vw,25px);
  margin-bottom:14px;
  text-transform:none;
  letter-spacing:-.02em;
}
.contact-col p{
  margin:0;
  font-family:var(--font);
  font-size:clamp(13px,1vw,17px);
  line-height:1.38;
}
.contact-col a{
  color:inherit;
  text-decoration:none;
}
.contact-col a:hover{
  text-decoration:underline;
}

/* Instagram deve stare tra slideshow 5 e 6 */
.portfolio-cycle .instagram-mobile{
  display:block !important;
  position:relative !important;
  z-index:25 !important;
  width:100% !important;
  background:#000 !important;
  margin:-12px 0 !important;
  padding:26px 0 34px !important;
}

@media (min-width:981px) and (orientation:landscape){
  .portfolio-cycle .instagram-mobile{
    display:block !important;
  }
}

@media (max-width:980px), (orientation:portrait){
  .content-flow{
    padding:38px 5vw 44px;
    margin:-12px 0;
  }
  .content-flow h2{
    margin-bottom:18px;
    font-size:clamp(26px,7vw,44px);
  }
  .flow-list,
  .projects-list{
    columns:1;
  }
  .flow-list li{
    font-size:clamp(13px,3.4vw,17px);
    margin-bottom:8px;
    padding-bottom:8px;
  }
  .contact-flow{
    padding:50px 5vw 68px;
  }
  .contact-flow-inner{
    grid-template-columns:1fr 1fr;
    gap:30px 22px;
  }
  .contact-col:last-child{
    grid-column:1 / -1;
  }
}

@media (max-width:560px){
  .contact-flow-inner{
    grid-template-columns:1fr;
    gap:26px;
  }
  .contact-col:last-child{
    grid-column:auto;
  }
}


/* ===== TESTI PIU' PICCOLI + SCROLL INTERNO ===== */
.content-flow{
  padding:34px 4vw 38px !important;
  margin:-10px 0 !important;
}

.content-flow-inner{
  width:min(1500px,94vw) !important;
  max-height:230px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:12px;
  box-sizing:border-box;
  scrollbar-width:thin;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.content-flow h2{
  margin:0 0 14px !important;
  font-size:clamp(18px,1.6vw,28px) !important;
  line-height:1 !important;
  letter-spacing:-.025em !important;
}

.flow-list{
  column-gap:34px !important;
}

.flow-list li{
  font-size:clamp(11px,.82vw,14px) !important;
  line-height:1.18 !important;
  margin:0 0 7px !important;
  padding:0 0 6px !important;
}

/* Scrollbar discreta */
.content-flow-inner::-webkit-scrollbar{
  width:5px;
}
.content-flow-inner::-webkit-scrollbar-track{
  background:transparent;
}
.content-flow-inner::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.28);
  border-radius:10px;
}

/* Blocco dati finale leggermente più compatto */
.contact-flow{
  padding:46px 4vw 56px !important;
}
.contact-flow-inner{
  gap:24px !important;
}
.contact-col h2{
  font-size:clamp(14px,1.05vw,19px) !important;
  margin-bottom:9px !important;
}
.contact-col p{
  font-size:clamp(11px,.82vw,14px) !important;
  line-height:1.32 !important;
}

@media (max-width:980px), (orientation:portrait){
  .content-flow{
    padding:28px 5vw 32px !important;
    margin:-8px 0 !important;
  }

  .content-flow-inner{
    max-height:210px;
    width:92vw !important;
    padding-right:8px;
  }

  .content-flow h2{
    font-size:clamp(17px,4.4vw,24px) !important;
    margin-bottom:12px !important;
  }

  .flow-list li{
    font-size:clamp(11px,3vw,14px) !important;
    line-height:1.2 !important;
  }

  .contact-flow{
    padding:38px 5vw 48px !important;
  }

  .contact-col h2{
    font-size:clamp(14px,3.5vw,18px) !important;
  }

  .contact-col p{
    font-size:clamp(11px,2.9vw,14px) !important;
  }
}

@media (max-width:560px){
  .content-flow-inner{
    max-height:190px;
  }
}


/* ===== FINALE SENZA LOOP + TESTI PIU' COMPATTI ===== */
.portfolio-cycle-copy{
  display:none !important;
}

.content-flow{
  position:relative !important;
  padding:18px 4vw 20px !important;
  margin:-6px 0 !important;
  min-height:0 !important;
  background:#000 !important;
  overflow:hidden !important;
}

.content-flow-inner{
  max-height:118px !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
  position:relative;
  z-index:2;
}

/* Dissolvenza nera sopra e sotto i blocchi testo */
.content-flow::before,
.content-flow::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:34px;
  z-index:3;
  pointer-events:none;
}

.content-flow::before{
  top:0;
  background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.82) 38%,rgba(0,0,0,0) 100%);
}

.content-flow::after{
  bottom:0;
  background:linear-gradient(to top,#000 0%,rgba(0,0,0,.82) 38%,rgba(0,0,0,0) 100%);
}

/* Lo scroll interno resta attivo */
.content-flow-inner{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* Più compatto anche il blocco Instagram fra 5 e 6 */
.portfolio-cycle .instagram-mobile{
  margin:-6px 0 !important;
  padding:16px 0 20px !important;
}

/* Dati finali: fine pagina normale */
.contact-flow{
  margin:0 !important;
  padding-bottom:56px !important;
}

@media (max-width:980px), (orientation:portrait){
  .content-flow{
    padding:14px 5vw 16px !important;
    margin:-4px 0 !important;
  }

  .content-flow-inner{
    max-height:102px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  .content-flow::before,
  .content-flow::after{
    height:28px;
  }

  .portfolio-cycle .instagram-mobile{
    margin:-4px 0 !important;
    padding:14px 0 18px !important;
  }
}

@media (max-width:560px){
  .content-flow-inner{
    max-height:92px !important;
  }
}


/* ===== TESTI: SCROLL SENZA BARRA VISIBILE ===== */
.content-flow-inner{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.content-flow-inner::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* ===== BLOCCO FINALE PIU' ORDINATO ===== */
.contact-flow{
  padding:54px 5vw 66px !important;
}
.contact-flow-inner{
  width:min(1380px,92vw) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:1.15fr 1.35fr .9fr 1.15fr .8fr !important;
  gap:36px !important;
  align-items:start !important;
}
.contact-col{
  min-width:0;
}
.contact-col h2{
  margin:0 0 12px !important;
  padding-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.contact-col p{
  margin:0 !important;
}

/* Social icons */
.social-icons{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:4px;
}
.social-icon{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none !important;
  opacity:.88;
  transition:opacity .2s ease, transform .2s ease;
}
.social-icon:hover{
  opacity:1;
  transform:translateY(-1px);
}
.social-icon svg{
  display:block;
  width:100%;
  height:100%;
  fill:currentColor;
}

@media (max-width:980px), (orientation:portrait){
  .contact-flow{
    padding:44px 5vw 56px !important;
  }
  .contact-flow-inner{
    grid-template-columns:1fr 1fr !important;
    gap:28px 22px !important;
  }
  .contact-col:nth-child(5){
    grid-column:1 / -1;
  }
}

@media (max-width:560px){
  .contact-flow-inner{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }
  .contact-col:nth-child(5){
    grid-column:auto;
  }
  .social-icon{
    width:30px;
    height:30px;
  }
}


/* ===== SPAZI TESTO UNIFORMI ===== */
.content-flow{
  padding:18px 4vw 20px !important;
  margin:-6px 0 !important;
  min-height:0 !important;
  height:auto !important;
}

.content-flow-inner{
  max-height:118px !important;
  min-height:118px !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}

/* Tutte le sezioni intermedie hanno la stessa altezza reale */
.section-projects,
.section-publications,
.section-competitions,
.section-collaborations{
  min-height:158px !important;
  height:158px !important;
  max-height:158px !important;
  box-sizing:border-box !important;
}

@media (max-width:980px), (orientation:portrait){
  .content-flow{
    padding:14px 5vw 16px !important;
    margin:-4px 0 !important;
  }

  .content-flow-inner{
    max-height:102px !important;
    min-height:102px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  .section-projects,
  .section-publications,
  .section-competitions,
  .section-collaborations{
    min-height:134px !important;
    height:134px !important;
    max-height:134px !important;
  }
}

@media (max-width:560px){
  .content-flow-inner{
    max-height:92px !important;
    min-height:92px !important;
  }

  .section-projects,
  .section-publications,
  .section-competitions,
  .section-collaborations{
    min-height:122px !important;
    height:122px !important;
    max-height:122px !important;
  }
}


/* ==========================================================
   FIX DEFINITIVO VERTICALE 6x5
   Neutralizza vecchie regole della precedente struttura a 3 pannelli
   ========================================================== */
@media (max-width:980px), (orientation:portrait){

  .portfolio-cycle .panel.p0,
  .portfolio-cycle .panel.p1,
  .portfolio-cycle .panel.p2,
  .portfolio-cycle .panel.p3,
  .portfolio-cycle .panel.p4,
  .portfolio-cycle .panel.p5{
    display:block !important;
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:100% !important;
    height:50vw !important;
    margin:0 !important;
    padding:0 !important;
    z-index:10 !important;
    transform:none !important;
  }

  /* Tutti gli intervalli testo identici */
  .section-projects,
  .section-publications,
  .section-competitions,
  .section-collaborations{
    box-sizing:border-box !important;
    width:100% !important;
    height:134px !important;
    min-height:134px !important;
    max-height:134px !important;
    margin:-4px 0 !important;
    padding:14px 5vw 16px !important;
  }

  .section-projects .content-flow-inner,
  .section-publications .content-flow-inner,
  .section-competitions .content-flow-inner,
  .section-collaborations .content-flow-inner{
    box-sizing:border-box !important;
    width:92vw !important;
    height:102px !important;
    min-height:102px !important;
    max-height:102px !important;
    margin:0 auto !important;
    padding:8px 8px 8px 0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  /* Sfumatura più forte: il testo entra/esce nel nero */
  .content-flow::before,
  .content-flow::after{
    height:48px !important;
    z-index:4 !important;
    pointer-events:none !important;
  }

  .content-flow::before{
    top:0 !important;
    background:linear-gradient(
      to bottom,
      #000 0%,
      #000 22%,
      rgba(0,0,0,.96) 42%,
      rgba(0,0,0,.72) 68%,
      rgba(0,0,0,0) 100%
    ) !important;
  }

  .content-flow::after{
    bottom:0 !important;
    background:linear-gradient(
      to top,
      #000 0%,
      #000 22%,
      rgba(0,0,0,.96) 42%,
      rgba(0,0,0,.72) 68%,
      rgba(0,0,0,0) 100%
    ) !important;
  }
}

@media (max-width:560px){
  .section-projects,
  .section-publications,
  .section-competitions,
  .section-collaborations{
    height:122px !important;
    min-height:122px !important;
    max-height:122px !important;
    padding:12px 5vw 14px !important;
  }

  .section-projects .content-flow-inner,
  .section-publications .content-flow-inner,
  .section-competitions .content-flow-inner,
  .section-collaborations .content-flow-inner{
    height:92px !important;
    min-height:92px !important;
    max-height:92px !important;
  }

  .content-flow::before,
  .content-flow::after{
    height:42px !important;
  }
}


/* Sottosezioni interne Progetti */
.section-projects .content-flow-inner > h2:not(:first-child){
  margin-top:22px !important;
}
.section-projects .flow-list{
  margin-bottom:14px !important;
}
@media (max-width:980px), (orientation:portrait){
  .section-projects .content-flow-inner > h2:not(:first-child){
    margin-top:18px !important;
  }
}


/* ===== PAGINA INFO: PROGETTI COERENTI ===== */
.info-projects-content{
  margin-top:18px;
}
.info-projects-content h3{
  margin:22px 0 10px;
  font-family:var(--font);
  font-size:clamp(15px,1.1vw,19px);
  line-height:1.1;
  font-weight:400;
  letter-spacing:-.015em;
}
.info-projects-content h3:first-child{
  margin-top:0;
}
.info-projects-content .flow-list{
  columns:1 !important;
  margin:0 0 14px !important;
}
.info-projects-content .flow-list li{
  font-size:clamp(11px,.82vw,14px) !important;
  line-height:1.25 !important;
  margin:0 0 7px !important;
  padding:0 0 7px !important;
}
@media (max-width:700px){
  .info-projects-content h3{
    font-size:14px;
  }
  .info-projects-content .flow-list li{
    font-size:12px !important;
  }
}


/* ===== SFUMATURA INFERIORE RIPRISTINATA E MENO INVASIVA ===== */
.content-flow::before{
  height:42px !important;
}

.content-flow::after{
  height:24px !important;
  bottom:0 !important;
  background:linear-gradient(
    to top,
    #000 0%,
    rgba(0,0,0,.88) 34%,
    rgba(0,0,0,.48) 66%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* I titoli restano sopra la sfumatura */
.content-flow h2,
.content-flow h3{
  position:relative;
  z-index:6;
}

/* Su mobile ancora meno invasiva */
@media (max-width:980px), (orientation:portrait){
  .content-flow::after{
    height:20px !important;
  }
}

@media (max-width:560px){
  .content-flow::after{
    height:18px !important;
  }
}


/* ===== REGOLAZIONE SPAZI + TITOLI FUORI DALLA SFUMATURA ===== */
.content-flow{
  padding-top:22px !important;
  padding-bottom:24px !important;
  margin-top:-2px !important;
  margin-bottom:-2px !important;
}

.content-flow-inner{
  padding-top:16px !important;
  padding-bottom:10px !important;
}

/* Il titolo parte più in basso, fuori dalla zona sfumata */
.content-flow h2,
.content-flow h3{
  margin-top:8px !important;
  margin-bottom:12px !important;
  position:relative;
  z-index:7;
}

/* Sfuma meno vicino all'inizio del testo */
.content-flow::before{
  height:28px !important;
  background:linear-gradient(
    to bottom,
    #000 0%,
    rgba(0,0,0,.82) 36%,
    rgba(0,0,0,.34) 70%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* Un filo più aria tra blocchi e immagini */
.section-projects,
.section-publications,
.section-competitions,
.section-collaborations{
  height:144px !important;
  min-height:144px !important;
  max-height:144px !important;
}

@media (max-width:980px), (orientation:portrait){
  .content-flow{
    padding-top:18px !important;
    padding-bottom:20px !important;
  }

  .content-flow-inner{
    padding-top:14px !important;
  }

  .content-flow h2,
  .content-flow h3{
    margin-top:7px !important;
  }

  .section-projects,
  .section-publications,
  .section-competitions,
  .section-collaborations{
    height:142px !important;
    min-height:142px !important;
    max-height:142px !important;
  }
}

@media (max-width:560px){
  .section-projects,
  .section-publications,
  .section-competitions,
  .section-collaborations{
    height:130px !important;
    min-height:130px !important;
    max-height:130px !important;
  }
}


/* Titolo principale del primo slot */
.section-projects .content-flow-inner > h2:first-child{
  margin-bottom:8px !important;
}
.section-projects .content-flow-inner > h2:nth-child(2){
  margin-top:0 !important;
  font-size:clamp(13px,1vw,17px) !important;
  letter-spacing:0 !important;
}


/* ===== TITOLI PIU' IMPORTANTI + SFUMATURA CONTENUTA ===== */

/* Titolo principale "Progetti" */
.section-projects .content-flow-inner > h2:first-child{
  font-size:clamp(20px,1.9vw,32px) !important;
  line-height:1 !important;
  margin:4px 0 10px !important;
  letter-spacing:-.025em !important;
  font-weight:400 !important;
}

/* Titolo "Opere Pubbliche, Masterplan e Concorsi" */
.section-projects .content-flow-inner > h2:nth-child(2){
  font-size:clamp(17px,1.45vw,24px) !important;
  line-height:1.05 !important;
  margin:0 0 12px !important;
  letter-spacing:-.015em !important;
  font-weight:400 !important;
}

/* Ripristino sfumatura superiore, più corta e delicata */
.content-flow::before{
  height:20px !important;
  top:0 !important;
  background:linear-gradient(
    to bottom,
    #000 0%,
    rgba(0,0,0,.72) 38%,
    rgba(0,0,0,.28) 72%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* Ripristino sfumatura inferiore, contenuta */
.content-flow::after{
  height:18px !important;
  bottom:0 !important;
  background:linear-gradient(
    to top,
    #000 0%,
    rgba(0,0,0,.72) 38%,
    rgba(0,0,0,.28) 72%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* I titoli restano sempre sopra la sfumatura */
.content-flow h2,
.content-flow h3{
  position:relative !important;
  z-index:8 !important;
}

/* Un po' più di aria all'inizio del contenuto */
.content-flow-inner{
  padding-top:18px !important;
}

@media (max-width:980px), (orientation:portrait){
  .section-projects .content-flow-inner > h2:first-child{
    font-size:clamp(20px,5.2vw,28px) !important;
  }

  .section-projects .content-flow-inner > h2:nth-child(2){
    font-size:clamp(16px,4.1vw,21px) !important;
  }

  .content-flow::before{
    height:18px !important;
  }

  .content-flow::after{
    height:16px !important;
  }
}

@media (max-width:560px){
  .content-flow::before{
    height:16px !important;
  }

  .content-flow::after{
    height:14px !important;
  }
}


/* ===== SFUMATURA TESTI: VERSIONE VISIBILE E DEFINITIVA ===== */

/* Il contenitore resta relativo per ancorare le due maschere */
.content-flow{
  position:relative !important;
  overflow:hidden !important;
}

/* Le maschere stanno SOPRA il testo solo ai bordi */
.content-flow::before,
.content-flow::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  z-index:20 !important;
  pointer-events:none !important;
}

/* Sfumatura superiore */
.content-flow::before{
  top:0 !important;
  height:34px !important;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.96) 28%,
    rgba(0,0,0,.70) 58%,
    rgba(0,0,0,.24) 82%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* Sfumatura inferiore */
.content-flow::after{
  bottom:0 !important;
  height:34px !important;
  background:linear-gradient(
    to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.96) 28%,
    rgba(0,0,0,.70) 58%,
    rgba(0,0,0,.24) 82%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* Testo abbastanza distante dai bordi sfumati */
.content-flow-inner{
  position:relative !important;
  z-index:10 !important;
  padding-top:24px !important;
  padding-bottom:24px !important;
}

/* I titoli partono nella zona leggibile, non dentro la maschera */
.content-flow h2,
.content-flow h3{
  position:relative !important;
  z-index:12 !important;
}

@media (max-width:980px), (orientation:portrait){
  .content-flow::before,
  .content-flow::after{
    height:30px !important;
  }

  .content-flow-inner{
    padding-top:22px !important;
    padding-bottom:22px !important;
  }
}

@media (max-width:560px){
  .content-flow::before,
  .content-flow::after{
    height:26px !important;
  }

  .content-flow-inner{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
}


/* ===== TESTI PIU' VICINI ALLE IMMAGINI ===== */
.content-flow{
  margin-top:-8px !important;
  margin-bottom:-8px !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}

/* la sfumatura parte subito dal bordo immagine */
.content-flow::before{
  top:0 !important;
  height:30px !important;
}

.content-flow::after{
  bottom:0 !important;
  height:30px !important;
}

/* riduciamo lo spazio nero prima dell'inizio del testo */
.content-flow-inner{
  padding-top:16px !important;
  padding-bottom:16px !important;
}

@media (max-width:980px), (orientation:portrait){
  .content-flow{
    margin-top:-6px !important;
    margin-bottom:-6px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  .content-flow-inner{
    padding-top:14px !important;
    padding-bottom:14px !important;
  }
}

@media (max-width:560px){
  .content-flow{
    margin-top:-5px !important;
    margin-bottom:-5px !important;
  }

  .content-flow-inner{
    padding-top:13px !important;
    padding-bottom:13px !important;
  }
}


/* ===== SPAZIO SIMMETRICO + TESTO ADATTIVO SU IMMAGINI CHIARE ===== */

/* stesso attacco sopra e sotto */
.content-flow{
  position:relative !important;
  margin-top:-10px !important;
  margin-bottom:-10px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.55) 18px,
      #000 34px,
      #000 calc(100% - 34px),
      rgba(0,0,0,.55) calc(100% - 18px),
      rgba(0,0,0,0) 100%
    ) !important;
  overflow:hidden !important;
}

/* le sfumature restano presenti ma dietro al testo */
.content-flow::before,
.content-flow::after{
  z-index:1 !important;
  height:30px !important;
  pointer-events:none !important;
}

.content-flow::before{
  top:0 !important;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.46) 45%,
    rgba(0,0,0,0) 100%
  ) !important;
}

.content-flow::after{
  bottom:0 !important;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.46) 45%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* testo sopra la sfumatura e con contrasto dinamico reale */
.content-flow-inner{
  position:relative !important;
  z-index:3 !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
  color:#fff !important;
  mix-blend-mode:difference !important;
  isolation:auto !important;
}

/* anche i titoli partecipano al contrasto dinamico */
.content-flow h2,
.content-flow h3,
.content-flow li,
.content-flow p{
  color:#fff !important;
  mix-blend-mode:normal !important;
}

/* stessa distanza anche in verticale/mobile */
@media (max-width:980px), (orientation:portrait){
  .content-flow{
    margin-top:-8px !important;
    margin-bottom:-8px !important;
    background:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.55) 16px,
        #000 30px,
        #000 calc(100% - 30px),
        rgba(0,0,0,.55) calc(100% - 16px),
        rgba(0,0,0,0) 100%
      ) !important;
  }

  .content-flow-inner{
    padding-top:13px !important;
    padding-bottom:13px !important;
  }

  .content-flow::before,
  .content-flow::after{
    height:26px !important;
  }
}

@media (max-width:560px){
  .content-flow{
    margin-top:-7px !important;
    margin-bottom:-7px !important;
  }

  .content-flow-inner{
    padding-top:12px !important;
    padding-bottom:12px !important;
  }
}


/* ===== FIX MOBILE / ANDROID: SFUMO DENTRO IL TESTO ===== */
@media (max-width:980px), (orientation:portrait){

  /* niente sovrapposizione del blocco testo sulle immagini */
  .content-flow{
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    background:#000 !important;
    overflow:hidden !important;
  }

  /* altezza più compatta e simmetrica */
  .section-projects,
  .section-publications,
  .section-competitions,
  .section-collaborations{
    height:128px !important;
    min-height:128px !important;
    max-height:128px !important;
  }

  .content-flow-inner{
    box-sizing:border-box !important;
    height:128px !important;
    min-height:128px !important;
    max-height:128px !important;
    padding-top:14px !important;
    padding-bottom:10px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  /* sfumature SOLO dentro il blocco testo */
  .content-flow::before,
  .content-flow::after{
    left:0 !important;
    right:0 !important;
    height:20px !important;
    z-index:4 !important;
  }

  .content-flow::before{
    top:0 !important;
    background:linear-gradient(
      to bottom,
      #000 0%,
      rgba(0,0,0,.78) 45%,
      rgba(0,0,0,0) 100%
    ) !important;
  }

  .content-flow::after{
    bottom:0 !important;
    background:linear-gradient(
      to top,
      #000 0%,
      rgba(0,0,0,.78) 45%,
      rgba(0,0,0,0) 100%
    ) !important;
  }

  /* il testo non viene spinto troppo in basso */
  .content-flow h2,
  .content-flow h3{
    margin-top:2px !important;
  }
}

@media (max-width:560px){
  .section-projects,
  .section-publications,
  .section-competitions,
  .section-collaborations{
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
  }

  .content-flow-inner{
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
    padding-top:12px !important;
    padding-bottom:8px !important;
  }

  .content-flow::before,
  .content-flow::after{
    height:18px !important;
  }
}


/* ===== FIX GLOBALE: SFUMATURA CONFINATA NEL TESTO ===== */
.content-flow{
  position:relative !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  background:#000 !important;
  overflow:hidden !important;
}

.section-projects,
.section-publications,
.section-competitions,
.section-collaborations{
  box-sizing:border-box !important;
  height:128px !important;
  min-height:128px !important;
  max-height:128px !important;
}

.content-flow-inner{
  box-sizing:border-box !important;
  height:128px !important;
  min-height:128px !important;
  max-height:128px !important;
  padding-top:14px !important;
  padding-bottom:10px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  position:relative !important;
  z-index:3 !important;
}

/* Sfumatura solo dentro il blocco testo, mai sopra le immagini */
.content-flow::before,
.content-flow::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  height:20px !important;
  z-index:4 !important;
  pointer-events:none !important;
}

.content-flow::before{
  top:0 !important;
  background:linear-gradient(
    to bottom,
    #000 0%,
    rgba(0,0,0,.78) 45%,
    rgba(0,0,0,0) 100%
  ) !important;
}

.content-flow::after{
  bottom:0 !important;
  background:linear-gradient(
    to top,
    #000 0%,
    rgba(0,0,0,.78) 45%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* Titoli leggibili e non troppo bassi */
.content-flow h2,
.content-flow h3{
  margin-top:2px !important;
  position:relative !important;
  z-index:6 !important;
}

@media (max-width:560px){
  .section-projects,
  .section-publications,
  .section-competitions,
  .section-collaborations{
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
  }

  .content-flow-inner{
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
    padding-top:12px !important;
    padding-bottom:8px !important;
  }

  .content-flow::before,
  .content-flow::after{
    height:18px !important;
  }
}


/* ===== FIX X INFO SEMPRE CLICCABILE ===== */
#closeBtn{
  position:relative !important;
  z-index:9999 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
}


/* ===== INSTAGRAM PIU' COMPATTO ===== */
.portfolio-cycle .instagram-mobile{
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  padding:22px 0 26px !important;
  background:#000 !important;
}

.portfolio-cycle .instagram-mobile-inner{
  width:min(72vw, 980px) !important;
  max-width:980px !important;
  margin:0 auto !important;
  overflow:hidden !important;
}

/* contenitore Elfsight centrato e contenuto */
.portfolio-cycle .instagram-mobile-inner .elfsight-app-734fa914-7f53-44f0-934a-de02290c8e44{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
}

/* tablet / verticale */
@media (max-width:980px), (orientation:portrait){
  .portfolio-cycle .instagram-mobile{
    padding:16px 0 20px !important;
  }

  .portfolio-cycle .instagram-mobile-inner{
    width:86vw !important;
    max-width:760px !important;
  }
}

/* telefono */
@media (max-width:560px){
  .portfolio-cycle .instagram-mobile{
    padding:12px 0 16px !important;
  }

  .portfolio-cycle .instagram-mobile-inner{
    width:90vw !important;
    max-width:none !important;
  }
}


/* ===== INSTAGRAM ANCORA PIU' PICCOLO + NEWS ===== */
.portfolio-cycle .instagram-mobile{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:24px 0 30px !important;
  background:#000 !important;
}

.instagram-news-title{
  width:min(38vw, 520px) !important;
  margin:0 auto 12px !important;
  font-family:var(--font);
  font-size:clamp(18px,1.8vw,30px);
  line-height:1;
  font-weight:400;
  letter-spacing:-.025em;
  color:#fff;
  text-align:left;
}

.portfolio-cycle .instagram-mobile-inner{
  width:min(38vw, 520px) !important;
  max-width:520px !important;
  margin:0 auto !important;
  overflow:hidden !important;
}

/* tablet / verticale */
@media (max-width:980px), (orientation:portrait){
  .instagram-news-title,
  .portfolio-cycle .instagram-mobile-inner{
    width:46vw !important;
    max-width:520px !important;
  }

  .instagram-news-title{
    font-size:clamp(18px,4vw,26px);
    margin-bottom:10px !important;
  }
}

/* telefono */
@media (max-width:560px){
  .instagram-news-title,
  .portfolio-cycle .instagram-mobile-inner{
    width:48vw !important;
    max-width:none !important;
  }

  .instagram-news-title{
    font-size:clamp(17px,5vw,23px);
    margin-bottom:9px !important;
  }
}


/* ===== SNAPWIDGET INSTAGRAM ===== */
.portfolio-cycle .instagram-mobile-inner{
  width:min(46vw, 620px) !important;
  max-width:620px !important;
  margin:0 auto !important;
  overflow:hidden !important;
}

.instagram-news-title{
  width:min(46vw, 620px) !important;
  max-width:620px !important;
}

.lightwidget-widget{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:300px !important;
  border:0 !important;
  overflow:hidden !important;
  margin:0 auto !important;
}

/* tablet */
@media (max-width:980px), (orientation:portrait){
  .portfolio-cycle .instagram-mobile-inner,
  .instagram-news-title{
    width:58vw !important;
    max-width:560px !important;
  }

  .lightwidget-widget{
    height:260px !important;
  }
}

/* telefono */
@media (max-width:560px){
  .portfolio-cycle .instagram-mobile-inner,
  .instagram-news-title{
    width:72vw !important;
    max-width:none !important;
  }

  .lightwidget-widget{
    height:230px !important;
  }
}


/* ===== NEWS SUBITO DOPO LA 5a IMMAGINE ===== */
.portfolio-cycle .instagram-mobile{
  margin-top:0 !important;
  padding-top:4px !important;
}

.instagram-news-title{
  margin-top:0 !important;
  padding-top:0 !important;
}


/* ===== MOBILE: SNAPWIDGET A TUTTA LARGHEZZA ===== */
@media (max-width:560px){

  .portfolio-cycle .instagram-mobile{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    background:#000 !important;
  }

  .instagram-news-title{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:10px 5vw 8px !important;
  }

  .portfolio-cycle .instagram-mobile-inner{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .lightwidget-widget{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:300px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }
}


/* ===== NEWS / INSTAGRAM ATTACCATO ALLA SESTA IMMAGINE ===== */
.portfolio-cycle .instagram-mobile{
  margin:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.instagram-news-title{
  margin-top:0 !important;
  margin-bottom:6px !important;
  padding-top:6px !important;
  padding-bottom:0 !important;
}

.portfolio-cycle .instagram-mobile-inner{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.lightwidget-widget{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding:0 !important;
  display:block !important;
}

/* nessuna fascia tra widget e sesta immagine */
.portfolio-cycle .instagram-mobile + .panel{
  margin-top:0 !important;
}


/* ===== SNAPWIDGET: ELIMINA SPAZIO NERO INTERNO ===== */
.lightwidget-widget{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
}


/* ===== SOCIAL TRA IMMAGINE E NEWS ===== */
.social-strip{
  width:100%;
  background:#000;
  color:#fff;
  margin:0;
  padding:12px 0 8px;
}
.social-strip-inner{
  width:min(46vw,620px);
  max-width:620px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.social-strip-title{
  font-family:var(--font);
  font-size:clamp(18px,1.8vw,30px);
  line-height:1;
  font-weight:400;
  letter-spacing:-.025em;
}
.social-strip-icons{
  display:flex;
  align-items:center;
  gap:12px;
}
.social-strip-icons a{
  width:24px;
  height:24px;
  display:inline-flex;
  color:#fff;
  opacity:.9;
}
.social-strip-icons a:hover{ opacity:1; }
.social-strip-icons svg{
  width:100%;
  height:100%;
  fill:currentColor;
}
@media (max-width:980px), (orientation:portrait){
  .social-strip-inner{
    width:58vw;
    max-width:560px;
  }
}
@media (max-width:560px){
  .social-strip{
    padding:10px 5vw 6px;
    box-sizing:border-box;
  }
  .social-strip-inner{
    width:100%;
    max-width:none;
  }
  .social-strip-title{
    font-size:clamp(17px,5vw,23px);
  }
  .social-strip-icons a{
    width:25px;
    height:25px;
  }
}


/* ===== ORDINE: NEWS -> WIDGET -> SOCIAL -> SESTA IMMAGINE ===== */
.portfolio-cycle .instagram-mobile{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

.social-strip{
  margin:0 !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
}

.social-strip + .panel{
  margin-top:0 !important;
}


/* ===== FOOTER SENZA SOCIAL; SOCIAL SOLO DOPO NEWS ===== */
.contact-flow-inner{
  grid-template-columns:1.15fr 1.35fr .9fr 1.15fr !important;
}
@media (max-width:980px), (orientation:portrait){
  .contact-flow-inner{
    grid-template-columns:1fr 1fr !important;
  }
}
@media (max-width:560px){
  .contact-flow-inner{
    grid-template-columns:1fr !important;
  }
}


/* ===== SWIPE ORIZZONTALE SLIDESHOW ===== */
.portfolio-cycle .panel{
  touch-action:pan-y !important;
  -ms-touch-action:pan-y !important;
}


/* ===== BRAND PIU' GRANDE + CONTRASTO DINAMICO ===== */

/* Titolo principale in alto */
.brand,
.site-title,
.logo-title,
header .brand,
header .site-title{
  font-size:clamp(24px,2.6vw,42px) !important;
  line-height:.95 !important;
  letter-spacing:-.035em !important;
  font-weight:400 !important;
  color:#fff !important;
  mix-blend-mode:difference !important;
  position:relative !important;
  z-index:1000 !important;
}

/* eventuale riga secondaria "architetto" */
.brand small,
.site-title small,
.logo-title small,
header .brand small,
header .site-title small{
  font-size:.46em !important;
  letter-spacing:.06em !important;
  color:inherit !important;
}

/* menu/testi header restano leggibili */
header,
.topbar,
.site-header{
  isolation:auto !important;
}

/* mobile: titolo più importante ma senza occupare troppo */
@media (max-width:560px){
  .brand,
  .site-title,
  .logo-title,
  header .brand,
  header .site-title{
    font-size:22px !important;
    line-height:.98 !important;
  }
}


/* ===== SWIPE VISIVO: L'IMMAGINE SEGUE IL DITO ===== */
.portfolio-cycle .panel{
  touch-action:pan-y !important;
  overflow:hidden !important;
}
.portfolio-cycle .panel .layer{
  will-change:transform, opacity;
}
.portfolio-cycle .panel.dragging .layer.active{
  transition:none !important;
}


/* ===== ORDINE: 5 -> SOCIAL -> 6 -> NEWS ===== */
.panel.p4 + .social-strip,
.social-strip + .panel.p5,
.panel.p5 + .instagram-mobile{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.panel.p5 + .instagram-mobile{
  padding-top:0 !important;
}


/* ===== SPAZIO SOCIAL TRA 5a E 6a IMMAGINE ===== */
.social-strip{
  width:100% !important;
  height:128px !important;
  min-height:128px !important;
  max-height:128px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#000 !important;
  box-sizing:border-box !important;
}

.social-strip-inner{
  width:min(92vw,1500px) !important;
  max-width:1500px !important;
  height:100% !important;
  margin:0 auto !important;
  padding:0 4vw !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
}

.social-strip-title{
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
}

.social-strip-icons{
  justify-content:center !important;
}

/* stessa logica su mobile */
@media (max-width:980px), (orientation:portrait){
  .social-strip{
    height:128px !important;
    min-height:128px !important;
    max-height:128px !important;
  }

  .social-strip-inner{
    width:92vw !important;
    padding:0 !important;
    flex-direction:column !important;
    gap:10px !important;
  }
}

@media (max-width:560px){
  .social-strip{
    height:120px !important;
    min-height:120px !important;
    max-height:120px !important;
  }
}


/* ===== SPAZIO DOPO LA SESTA IMMAGINE + WIDGET PIU' GRANDE SOLO ORIZZONTALE ===== */

/* stesso intervallo visivo degli altri blocchi tra sesta immagine e News */
.panel.p5 + .instagram-mobile{
  margin-top:0 !important;
  padding-top:0 !important;
}

.panel.p5 + .instagram-mobile::before{
  content:"";
  display:block;
  width:100%;
  height:128px;
  background:#000;
}

/* SOLO ORIZZONTALE / DESKTOP: widget più grande */
@media (min-width:981px) and (orientation:landscape){
  .portfolio-cycle .instagram-mobile-inner,
  .instagram-news-title{
    width:min(62vw, 980px) !important;
    max-width:980px !important;
  }

  .lightwidget-widget{
    width:100% !important;
    max-width:100% !important;
  }
}

/* verticale/tablet/telefono: dimensioni attuali */
@media (max-width:980px), (orientation:portrait){
  .panel.p5 + .instagram-mobile::before{
    height:128px;
  }
}

@media (max-width:560px){
  .panel.p5 + .instagram-mobile::before{
    height:120px;
  }
}


/* ===== RIDUZIONE SPAZIO 6a IMMAGINE -> NEWS/WIDGET ===== */

/* Lo spazio totale comprende anche il titolo News */
.panel.p5 + .instagram-mobile::before{
  height:72px !important;
}

/* News entra nello stesso intervallo, senza aggiungere una seconda fascia */
.panel.p5 + .instagram-mobile .instagram-news-title{
  margin-top:-34px !important;
  margin-bottom:8px !important;
  position:relative !important;
  z-index:2 !important;
}

/* Orizzontale/desktop: un filo più arioso ma comunque compatto */
@media (min-width:981px) and (orientation:landscape){
  .panel.p5 + .instagram-mobile::before{
    height:84px !important;
  }

  .panel.p5 + .instagram-mobile .instagram-news-title{
    margin-top:-38px !important;
  }
}

/* Mobile: spazio più stretto */
@media (max-width:980px), (orientation:portrait){
  .panel.p5 + .instagram-mobile::before{
    height:64px !important;
  }

  .panel.p5 + .instagram-mobile .instagram-news-title{
    margin-top:-30px !important;
  }
}

@media (max-width:560px){
  .panel.p5 + .instagram-mobile::before{
    height:58px !important;
  }

  .panel.p5 + .instagram-mobile .instagram-news-title{
    margin-top:-28px !important;
  }
}


/* ===== ICONE SOCIAL / MAIL NEL MENU SUPERIORE ===== */
.menu .menu-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.05em;
  height:1.05em;
  padding:0 !important;
  margin:0;
  color:inherit;
  line-height:1;
  vertical-align:middle;
}
.menu .menu-icon svg{
  display:block;
  width:100%;
  height:100%;
  fill:currentColor;
}


/* ===== FIX DEFINITIVO X INFO ===== */
#drawer{
  position:fixed !important;
}

#closeBtn{
  position:fixed !important;
  top:14px !important;
  right:14px !important;
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2147483647 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  background:transparent !important;
  border:0 !important;
}

#closeBtn *{
  pointer-events:none !important;
}


/* ===== LANGUAGE SWITCH ===== */
.menu .lang-switch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.8em;
  height:1.2em;
  padding:0 .15em !important;
  margin-left:2px;
  color:inherit;
  text-decoration:none;
  font-size:1em;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  mix-blend-mode:difference;
}


@media (max-width:560px){
  .menu .lang-switch{
    display:inline-flex !important;
  }
}


/* Intestazione adattiva: un unico livello di fusione con lo sfondo. */
.site-header {
  mix-blend-mode: difference !important;
  text-shadow: none !important;
}
.site-header * {
  mix-blend-mode: normal !important;
  text-shadow: none !important;
  color: #fff !important;
}
/* Il pannello info copre completamente la navigazione della pagina. */
#drawer {
  z-index: 2000 !important;
  visibility: hidden;
  transition: transform .32s ease, visibility .32s;
}
#drawer.open {
  visibility: visible;
  transition: transform .32s ease;
}
body:has(#drawer.open) { overflow: hidden; }
body:has(#drawer.open) .site-header {
  visibility: hidden !important;
  pointer-events: none !important;
}
#drawer .drawer-head { color: #111; }
#drawer .drawer-head h2, #drawer #closeBtn {
  color: #111 !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
}


/* Didascalia ricavata dal nome file, solidale alla singola immagine. */
.filename-caption {
 position:absolute; left:20px; right:20px; bottom:45px; z-index:24;
 text-align:center;
 max-width:calc(100% - 40px); padding:0;
 color:#fff; background:transparent;
 mix-blend-mode:difference;
 font-size:clamp(24px,2.6vw,38px); line-height:1.15; letter-spacing:-.015em;
 font-weight:400; text-shadow:none;
 text-transform:none; pointer-events:none;
}
.filename-caption:empty { display:none; }
@media(max-width:560px){.filename-caption{left:12px;right:12px;bottom:42px;font-size:22px;max-width:calc(100% - 24px)}}


/* Contrasto binario: soltanto bianco o nero, senza fusione dei colori. */
.site-header, .site-header *, .filename-caption {
 mix-blend-mode:normal !important;
 text-shadow:none !important;
}
.site-header .brand, .site-header .brand *,
.site-header .menu, .site-header .menu * {color:var(--adaptive-ink,#fff) !important;}
.site-header .menu a:hover,.site-header .menu button:hover {opacity:1;}
.filename-caption {
 left:auto; right:20px; width:max-content; text-align:right;
 color:var(--adaptive-ink,#fff); transition:none;
}
@media(max-width:560px){.filename-caption{left:auto;right:12px;}}





/* Entrata morbida dopo l'inizio della transizione fotografica. */
.filename-caption { opacity:0; }
.filename-caption.caption-reveal {
 animation:caption-fade-in 1.2s ease-out .55s both;
}
@keyframes caption-fade-in { from {opacity:0} to {opacity:1} }
@media(prefers-reduced-motion:reduce){
 .filename-caption,.filename-caption.caption-reveal {animation:none;opacity:1;}
}

/* Didascalia subito a destra della navigazione fotografica. */
.filename-caption {
 text-align:left;
 left:calc(50% + 60px); right:20px; bottom:13px;
 width:auto; font-size:clamp(20px,2.1vw,30px); line-height:1.15;
 overflow-wrap:anywhere;
}
@media(max-width:560px){
 .filename-caption{left:calc(50% + 48px);right:12px;bottom:10px;font-size:16px;}
}

/* Stessa tipografia della scritta Social. */
.filename-caption {
 font-family:var(--font);
 font-size:clamp(18px,1.8vw,30px);
 line-height:1;
 font-weight:400;
 letter-spacing:-.025em;
}
@media(max-width:560px){
 .filename-caption {font-size:clamp(17px,5vw,23px);}
}

/* Dimensione dei testi semplici più piccoli, non dei titoli. */
.filename-caption {
 font-size:clamp(11px,.82vw,14px);
 line-height:1.25;
 letter-spacing:normal;
 font-weight:400;
}
@media(max-width:700px){.filename-caption{font-size:12px;}}

/* Allineamento al bordo destro, con margine di due caratteri. */
.filename-caption {
 text-align:right;
 right:2ch;
 max-width:none;
}

/* Ultima riga allineata alla base dei cerchietti; a capo nello spazio disponibile. */
.filename-caption {line-height:1; white-space:normal; overflow-wrap:anywhere;}
@media(max-width:700px){
 .filename-caption {line-height:1.15; text-wrap:balance;}
}

/* Soglia minima dei testi di lettura solo su desktop orizzontale. */
@media (min-width:981px) and (orientation:landscape){
 .flow-list li,
 .info-projects-content .flow-list li,
 .contact-col p,
 .drawer .info-grid p,
 .drawer .cv-item p,
 .drawer .cv-item time,
 .drawer .info-grid h3,
 .drawer .drawer-foot {
   font-size:clamp(14px,1vw,16px) !important;
   line-height:1.4 !important;
 }
}

/* Fasce mobile: spazio simmetrico e dissolvenza su entrambi i bordi. */
@media(max-width:980px), (orientation:portrait){
 .content-flow {background:#000 !important; margin-block:0 !important; padding-block:0 !important;}
 .section-projects,.section-publications,.section-competitions,.section-collaborations {
  height:116px !important;min-height:116px !important;max-height:116px !important;
 }
 .content-flow .content-flow-inner {
  height:100% !important; min-height:0 !important; max-height:100% !important;
  padding-top:10px !important; padding-bottom:10px !important;
  mix-blend-mode:normal !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
 }
 .content-flow::before,.content-flow::after {display:none !important;}
}
@media(max-width:560px){
 .section-projects,.section-publications,.section-competitions,.section-collaborations {
  height:108px !important;min-height:108px !important;max-height:108px !important;
 }
}

/* Desktop centrato; layout verticale se l'intestazione non entra nei margini. */
@media(min-width:981px) and (orientation:landscape){
 body:not(.layout-vertical) .portfolio-cycle .panel {
  width:66.666667% !important; height:auto !important;
  aspect-ratio:2 / 1 !important; margin-left:auto !important; margin-right:auto !important;
 }
}
body.layout-vertical .site-header {
 position:relative !important;
 background:#000 !important;
 top:auto !important; left:auto !important; right:auto !important;
 min-height:72px;
}
body.layout-vertical .portfolio-cycle .panel {
 width:100% !important; height:auto !important; aspect-ratio:2 / 1 !important;
 margin-left:0 !important; margin-right:0 !important;
}
body.layout-vertical .site-header .brand,
body.layout-vertical .site-header .menu { flex-shrink:0; }
@media(max-width:560px){body.layout-vertical .site-header{min-height:60px;}}

/* Minimal navigation, exclusive to the centered desktop gallery. */
.gallery-arrow{display:none!important}
@media(min-width:981px) and (orientation:landscape){
 body:not(.layout-vertical) .gallery-arrow{display:flex!important;position:absolute;top:50%;transform:translateY(-50%);align-items:center;justify-content:center;width:48px;height:56px;padding:0;border:0;border-radius:0;background:transparent!important;color:var(--adaptive-ink,#fff)!important;z-index:12;cursor:pointer;touch-action:manipulation}
 body:not(.layout-vertical) .gallery-arrow-prev{left:12px}
 body:not(.layout-vertical) .gallery-arrow-next{right:12px}
 .gallery-arrow svg{width:18px;height:32px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
 .gallery-arrow:hover svg{transform:scale(1.15)}
 .gallery-arrow:focus-visible{outline:1px solid currentColor;outline-offset:2px}
}

/* Text bands share the slideshow width and have more breathing room. */
.portfolio-cycle{--gallery-content-width:100%}
@media(min-width:981px) and (orientation:landscape){
 body:not(.layout-vertical) .portfolio-cycle{--gallery-content-width:66.666667%}
}
html body .portfolio-cycle > .content-flow{
 width:var(--gallery-content-width)!important;max-width:100%!important;
 margin:0 auto!important;padding:20px clamp(14px,2vw,30px)!important;
 height:192px!important;min-height:192px!important;max-height:192px!important;
 box-sizing:border-box!important;
}
html body .portfolio-cycle > .content-flow .content-flow-inner{
 width:100%!important;max-width:100%!important;min-width:0!important;
 height:100%!important;min-height:0!important;max-height:100%!important;
 margin:0!important;padding:14px 0!important;box-sizing:border-box!important;
 overflow-x:hidden!important;overflow-y:auto!important;
 overflow-wrap:anywhere;white-space:normal;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14px,#000 calc(100% - 14px),transparent);
 mask-image:linear-gradient(to bottom,transparent,#000 14px,#000 calc(100% - 14px),transparent);
}
html body .portfolio-cycle > .content-flow::before,
html body .portfolio-cycle > .content-flow::after{display:none!important}
html body .portfolio-cycle > .content-flow .flow-list{max-width:100%!important;min-width:0!important}
html body .portfolio-cycle > .content-flow .flow-list li{
 font-size:clamp(16px,1.1vw,18px)!important;line-height:1.45!important;
 overflow-wrap:anywhere;white-space:normal;max-width:100%;
}
html body .portfolio-cycle > .content-flow h2{font-size:clamp(21px,1.7vw,28px)!important;line-height:1.15!important;overflow-wrap:anywhere}
html body .portfolio-cycle > .content-flow h3{font-size:clamp(17px,1.2vw,20px)!important;line-height:1.3!important;overflow-wrap:anywhere}
html body .portfolio-cycle > .social-strip{
 width:var(--gallery-content-width)!important;max-width:100%!important;
 margin:0 auto!important;padding:26px 16px!important;box-sizing:border-box;
}
html body .portfolio-cycle > .social-strip .social-strip-inner{max-width:100%!important}
@media(max-width:980px), (orientation:portrait){
 html body .portfolio-cycle > .content-flow{
  height:148px!important;min-height:148px!important;max-height:148px!important;
  padding:12px 16px!important;
 }
 html body .portfolio-cycle > .content-flow .flow-list li{font-size:15px!important;line-height:1.4!important}
 html body .portfolio-cycle > .content-flow h2{font-size:21px!important}
 html body .portfolio-cycle > .content-flow h3{font-size:17px!important}
}

/* Keep the existing three-square-post footprint in the News section. */
.instagram-widget-viewport{position:relative;width:100%;aspect-ratio:3 / 1;overflow:hidden}
.instagram-widget-viewport .lightwidget-widget{
 position:absolute!important;inset:0!important;display:block!important;
 width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
 border:0!important;margin:0!important;padding:0!important;overflow:hidden!important;
}

.video-play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border:1px solid white;border-radius:50%;background:rgba(0,0,0,.5);color:white;z-index:30;font-size:23px;cursor:pointer;}
.video-play[hidden]{display:none!important;}