:root{
  --bg:#27121F;     /* sfondo sito */
  --ink:#ffffff;    /* testo */

  /* gallerie: 22.5% sopra + 55% immagine + 22.5% sotto = 100% */
  --vpad: 22.5svh;

  /* micro correzione ottica per allineamento PHOTO/VIDEO con mail */
  --opt-left: -1px;   /* PHOTO: verso sinistra */
  --opt-right:  2px;  /* VIDEO: verso destra */
}

/* reset */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
a{ color:inherit; text-decoration:none; }

/* viewport mobile: svh evita problemi con barre browser */
.fullscreen{
  min-height: 100vh;
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    max(20px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

/* --- INDEX: solo logo (mai deformato) --- */
.logo-only a{ display:block; }
.logo-only img{
  display:block;
  width: min(900px, 78vw);
  max-width: 78vw;
  height: auto !important;
  max-height: 55svh;
  object-fit: contain;
  aspect-ratio: auto;
}

/* --- HUB --- */
.hub{
  min-height: 100vh;
  min-height: 100svh;
  display:grid;
  grid-template-rows: 1fr auto auto;
  gap: 18px;
  padding:
    max(22px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

.hub-top{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  max-width: 920px;
  margin: 0 auto;
}

.hub-text{
  font-size: clamp(15px, 2.8vw, 22px);
  line-height: 1.6;
  letter-spacing: .25em;
  opacity: .92;
  font-weight: 300; /* LIGHT */
}

/* gruppo nav + email: larghezza = mail (per allineare i bordi) */
.hub-bottom-group{
  justify-self: center;
  align-self: center;
  width: max-content;
  display:flex;
  flex-direction: column;
  gap: 14px;
}

/* nav base */
.hub-mid{
  display:flex;
  justify-content:center;
}

/* nav allineata ai bordi della larghezza del gruppo (mail) */
.hub-mid-align{
  width: 100%;
  justify-content: space-between;
}

/* link PHOTO/VIDEO: niente padding orizzontale => allineamento “matematico” */
.hub-mid a{
  letter-spacing:.22em;
  font-size: 12px;
  padding: 12px 0;          /* solo verticale */
  opacity:.9;
  position:relative;
  transition: opacity .18s ease, transform .18s ease;
}

/* micro correzione ottica */
.hub-mid-align a:first-child{ transform: translateX(var(--opt-left)); }
.hub-mid-align a:last-child{  transform: translateX(var(--opt-right)); }

.hub-mid a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:7px; /* underline a tutta larghezza del testo */
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition: transform .18s ease;
  opacity:.6;
}

/* hover: mantieni lo shift + lift */
.hub-mid a:hover{ opacity:1; }
.hub-mid-align a:first-child:hover{
  transform: translateX(var(--opt-left)) translateY(-1px);
}
.hub-mid-align a:last-child:hover{
  transform: translateX(var(--opt-right)) translateY(-1px);
}
.hub-mid a:hover::after{ transform:scaleX(1); }

/* email */
.hub-bottom{
  text-align:center;
  font-size: 12px;
  letter-spacing: .08em;
  opacity:.75;
  padding-bottom: 6px;
}

.hub-bottom-align{
  width: 100%;
}
.hub-bottom-align a{
  display:block;
  text-align:center; /* centrata */
}

/* --- FOTO/VIDEO: strip orizzontale --- */
.gallery-wrap{
  min-height:100vh;
  min-height:100svh;
}

/* Freccia indietro (triangolo) */
.back{
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 9999;

  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: transparent;
  border: 0;
  padding: 0;

  opacity: .75;
  transition: opacity .18s ease, transform .18s ease;
}

.back:hover{
  opacity: 1;
  transform: translateX(-1px);
}

.back-ico{
  width: 22px;
  height: 22px;
  display:block;
  fill: var(--ink);
}

@media (max-width: 520px){
  .back{
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
  }
  .back-ico{
    width: 18px;
    height: 18px;
  }
}

/* scroller: padding sopra/sotto + scroll orizzontale CONTINUO (no snap) */
.scroller{
  height: 100svh;
  display:flex;
  gap:0;
  padding: var(--vpad) 0;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scroll-behavior: smooth;
  align-items: center;
  scrollbar-width: thin; /* Firefox */
}
.scroller:active{ cursor: grabbing; }

/* scrollbar discreta per Chrome/Safari */
.scroller::-webkit-scrollbar{ height: 10px; }
.scroller::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
.scroller::-webkit-scrollbar-track{ background: transparent; }

/* item senza spazi (no snap) */
.item{
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  display:block;
}

/* immagine: 55% + protezioni desktop */
.item img{
  display:block;
  height: 55svh;
  width:auto;
  object-fit: contain;

  max-width: none !important;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}