:root{
  --bg:#ffffff;
  --dot:#e6e6e6;
  --ink:#0b0b0c;
  --muted:#686868;
  --line:#e9e9e9;
  --tab-bg:#000;
  --tab-text:#fff;

  /* Desktop tabs (verticali) */
  --tab-length: 150px;      /* lunghezza segnalibro */
  --tab-thickness: 28px;    /* spessore segnalibro */
  --top-corridor: 140px;    /* fascia superiore desktop */

  /* Logo: grande = preloader; ovunque nel sito = -25% */
  --logo-desktop-large: 300px;                        /* taglia “grande” */
  --logo-site: calc(var(--logo-desktop-large) * 0.4); /* 40% del preloader */
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.5px) 0 0/24px 24px,
    var(--bg);
  overflow:hidden;
  user-select:none;
  cursor:default;
}

/* Header / brand (base) */
.topbar.left{
  position:fixed;
  left:0;
  top:0;
  padding:18px 20px;
  z-index:140;
}
.brand a{
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}

/* Back zones */
.backzones .bz{ position:fixed; z-index:60; }
.backzones .top{ left:0; right:0; top:0; height:var(--top-corridor); }
.backzones .left{ left:0; top:var(--top-corridor); bottom:0; width:6vw; }
.backzones .right{ right:0; top:var(--top-corridor); bottom:0; width:6vw; }

/* Tabs: struttura comune */
.tabs.ribbon{
  position:fixed;
  left:0;
  top:0;
  right:0;
  height:var(--top-corridor);
  z-index:130;
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:flex-end;
  padding:0 6vw;
  pointer-events:none;
}
.vtab{
  pointer-events:auto;
  background:var(--tab-bg);
  color:var(--tab-text);
  border:0;
  border-radius:0;
  cursor:pointer;

  width:var(--tab-thickness);
  height:calc(var(--tab-length) + 20px);
  margin-top:-25px;

  writing-mode: vertical-rl;
  text-orientation: mixed;
  position:relative;
}
.vtab .label{
  position:absolute;
  bottom:8px;
  left:8px;
  transform:rotate(180deg);
  text-align:left;
  font-weight:900;
  letter-spacing:.4px;
}
.vtab .icon{
  position:absolute;
  bottom:8px;
  left:4px;
  writing-mode: horizontal-tb;
  transform:none;
  display:none;
}

/* Dimensioni degli SVG nelle icone dei tab */
.vtab .icon img{
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

/* Contact tab (desktop) */
.contact-tab{
  position:fixed;
  right:-160px;
  bottom:24px;
  z-index:120;
  background:#000;
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;

  /* ↓↓↓ dimensioni ↓↓↓ */
  height:40px;
  width:calc(var(--tab-length) + 160px);
  padding:0 12px;

  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;

  /* transizioni fluide anche se cambi width/height in hover */
  transition: transform .18s ease, width .18s ease, height .18s ease, padding .18s ease;
}
.contact-tab span{ margin-left:6px; }

@media (min-width:901px){
  /* PIÙ “crescita” in hover = esce di più e (volendo) si allunga */
  .contact-tab:hover{
    transform: translateX(-140px);
    width: calc(var(--tab-length) + 180px);
  }
}

/* Stage (home grid) */
.stage{
  height:100vh;
  display:grid;
  place-items:center;
  padding: calc(var(--top-corridor) + 4vh) 6vw 12vh;
}
.gallery.ten{
  --cols:4;
  display:grid;
  gap:22px;
  width:min(1200px, 78vw);
  grid-template-columns: repeat(var(--cols), minmax(120px, 1fr));
}
@media (max-width:1100px){ .gallery.ten{ --cols:4; width:84vw; } }
@media (max-width:820px){  .gallery.ten{ --cols:2; width:90vw; } }

/* BLOCCO PERMANENTE: nascondi SEMPRE dalla 9a card in poi */
#gallery .card:nth-child(n+9){
  display: none !important;
}

.card{
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  transition: box-shadow .2s ease, transform .16s ease, opacity .2s ease;
}
.card img{
  width:100%;
  aspect-ratio:1 / 1;
  display:block;
  object-fit:cover;
  background:#fafafa;
}
.card:hover{
  box-shadow: 0 12px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  transform: translateY(-3px);
}
.card.hide{ opacity:0; transform: scale(.96); pointer-events:none; }
.card.show{ animation: cardIn .25s ease 1; }
@keyframes cardIn{
  from{ opacity:0; transform: scale(.96); }
  to{ opacity:1; transform: scale(1); }
}

/* Overlay (base) */
.overlay{
  position:fixed;
  inset:0;
  z-index:110;
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.5px) 0 0/24px 24px,
    var(--bg);
  overflow:hidden;
}
.hidden{ display:none; }
.close{
  position:fixed;
  top:12px;
  right:12px;
  z-index:150;
  background:#fff;
  border:1px solid var(--line);
  width:40px;
  height:40px;
  border-radius:0;
  font-size:20px;
  cursor:pointer;
}

/* Inner scroller desktop: sotto la fascia */
.overlay-scroll{
  position:absolute;
  left:0;
  right:0;
  top:var(--top-corridor);
  bottom:0;
  overflow:auto;
  padding: 0 6vw 8vh;
}
.overlay-scroll::-webkit-scrollbar{ width:0; height:0; }
.overlay-scroll{ scrollbar-width:none; }

/* Project sheet */
.project-sheet .sheet{
  width:min(1200px, 86vw);
  display:grid;
  grid-template-columns: 4fr 1fr;
  gap:24px;
  align-items:start;
  background:transparent;
  border:none;
  margin:0 auto;
}
@media (max-width:1024px){ .project-sheet .sheet{ grid-template-columns:1fr; } }

/* PROGETTI: immagini senza bordo, attaccate (sempre) */
.sheet-media{ border:0 !important; padding:0 !important; margin:0 !important; line-height:0 !important; }
.sheet-media img,
#sheetMedia img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  opacity:1;
  transition:none;
}
#sheetMedia img.is-ready{ border:0 !important; }

/* ================= CONTATTI: centratura + mappa quadrata b/n ================= */

/* Contenuto centrato orizzontalmente sempre */
#contactSheet .contact-inner{
  width: min(900px, 84vw);
  margin: 0 auto;
}

/* In desktop: centra anche verticalmente il blocco contatti */
@media (min-width: 901px){
  #contactSheet .contact-inner{
    min-height: calc(100vh - var(--top-corridor) - 8vh);
    display: grid;
    place-items: center;
    gap: 18px;
    text-align: center;
  }
}

/* Mappa quadrata */
#contactSheet .map{
  width: min(560px, 84vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

/* iFrame: niente bordo/shadow, bianco/nero */
#contactSheet .map iframe{
  width: 100%;
  height: 100%;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  filter: grayscale(1) contrast(1.05) brightness(0.95);
}

/* Un filo di respiro sotto i testi */
#contactSheet .contact-inner h2,
#contactSheet .contact-inner p{
  margin-left: auto;
  margin-right: auto;
}

/* Mostra gli a capo della desc come line-break/paragrafi */
#sheetDesc { white-space: pre-line; }

/* Meta */
.project-sheet .sheet .sheet-meta{
  position: static;
  top: auto;
  max-height: none;
  overflow: visible;
}
.project-sheet .sheet .sheet-meta h2{ margin:0 0 8px; }
.project-sheet .sheet .sheet-meta p{ margin:0; color:#555; }

/* ===== Layout “inline text” per i progetti con inlineText: true ===== */
.project-sheet.inline .sheet{ grid-template-columns: 1fr; }         /* una colonna */
.project-sheet.inline .sheet .sheet-meta{ display:none !important; } /* nascondi laterale */
.project-sheet.inline .sheet .sheet-media{
  width: min(1200px, 86vw);
  margin: 0 auto;
}
.sheet-media .img-text{
  margin: 16px 0 20px;
  line-height: 1.5;
  color: #333;
  white-space: pre-line;
}
/* link nei blocchi testo */
.sheet-media .img-text a{
  color:#800020;
  text-decoration:underline;
  text-underline-offset:2px;
}
.sheet-media .img-text a:hover{ color:#a51e34; }
.sheet-media .img-text a:visited{ color:#6a001a; }
.sheet-media .img-text a:focus-visible{
  outline:2px solid #a51e34;
  outline-offset:2px;
}

/* ===== Link nella descrizione (sheetDesc): bordeaux + accessibilità ===== */
#sheetDesc a{
  color:#800020;
  text-decoration:underline;
  text-underline-offset:2px;
}
#sheetDesc a:hover{ color:#a51e34; }
#sheetDesc a:visited{ color:#6a001a; }
#sheetDesc a:focus-visible{
  outline:2px solid #a51e34;
  outline-offset:2px;
}

/* Dot scrollbar */
.scroll-dots{
  position:fixed;
  right:16px;
  top: calc(var(--top-corridor) + 12px);
  bottom: 28px;
  width:10px;
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  z-index:145;
  pointer-events:none;
}
.scroll-dots li{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#bfbfbf;
  opacity:.9;
}
.scroll-dots li.active{
  background:#0b0b0c;
  box-shadow:0 0 0 2px #0000000f;
}

/* --- PRELOADER --- */
#preloader{
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.5px) 0 0/24px 24px,
    var(--bg);
  display: grid;
  place-items: center;
}
#preloader.hide{
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
#preloader .pre-wrap{ display: grid; place-items: center; }
#preloader .pre-bar{ display: grid; grid-auto-flow: column; gap: 8px; }
#preloader .pre-bar span{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
  animation: fillDot .3s linear forwards;
}
#preloader .pre-bar span:nth-child(1){ animation-delay: 0s; }
#preloader .pre-bar span:nth-child(2){ animation-delay: .15s; }
#preloader .pre-bar span:nth-child(3){ animation-delay: .30s; }
#preloader .pre-bar span:nth-child(4){ animation-delay: .45s; }
#preloader .pre-bar span:nth-child(5){ animation-delay: .60s; }
#preloader .pre-bar span:nth-child(6){ animation-delay: .75s; }
#preloader .pre-bar span:nth-child(7){ animation-delay: .90s; }
#preloader .pre-bar span:nth-child(8){ animation-delay: 1.05s; }
#preloader .pre-bar span:nth-child(9){ animation-delay: 1.20s; }
#preloader .pre-bar span:nth-child(10){ animation-delay: 1.35s; }
#preloader .pre-bar span:nth-child(11){ animation-delay: 1.50s; }
#preloader .pre-bar span:nth-child(12){ animation-delay: 1.65s; }
@keyframes fillDot{
  from{ background: var(--dot); }
  to{ background: #0b0b0c; }
}

#preloader img{ transform: translateY(-40px); }
/* Logo preloader = grande */
#preloader img.logo-pre{ height: var(--logo-desktop-large); }

/* Hover overlay su card (home) */
.card{ position: relative; overflow: hidden; }
.card .mask{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .18s ease, background .18s ease;
  pointer-events: none;
}
.card:hover .mask{
  opacity: 1;
  background: rgba(255,255,255,0.5);
}
.mask .txt{ text-align: center; padding: 10px 12px; }
.mask .title{
  font-weight: 900;
  color: #0b0b0c;
  letter-spacing: .2px;
}
.mask .meta{
  margin-top: 6px;
  font-size: 13px;
  color: #0b0b0c;
  opacity: .85;
}

/* Logo header ovunque (ridotto -25% rispetto al preloader) */
header.topbar .logo-img{ height: var(--logo-site); }

/* ===================== DESKTOP-ONLY ===================== */
@media (min-width:901px){

  /* Hover grow (SOLO desktop in stato normale) */
  .vtab:hover{
    height: calc(var(--tab-length) + 60px);
    transition: height .15s ease;
  }

  /* DESKTOP: COMPACT MODE (attivato da JS con #tabs.compact) */
  /* Attivo: resta grande con etichetta */
  #tabs.compact .vtab.active,
  .tabs.compact .vtab.active{
    height: calc(var(--tab-length) + 20px) !important;
  }
  #tabs.compact .vtab.active .label,
  .tabs.compact .vtab.active .label{ display:block !important; }
  #tabs.compact .vtab.active .icon,
  .tabs.compact .vtab.active .icon{ display:none !important; }

  /* Non attivi: piccoli con sola icona (emoji) */
  #tabs.compact .vtab:not(.active),
  .tabs.compact .vtab:not(.active){
    height:72px !important;
  }
  #tabs.compact .vtab:not(.active) .label,
  .tabs.compact .vtab:not(.active) .label{ display:none !important; }
  #tabs.compact .vtab:not(.active) .icon,
  .tabs.compact .vtab:not(.active) .icon{ display:block !important; }

  /* In compact, disabilita la crescita su hover dei NON attivi (solo in home) */
  body:not(.mode-project) #tabs.compact .vtab:not(.active):hover,
  body:not(.mode-project) .tabs.compact .vtab:not(.active):hover{
    height:72px !important;
    transition:none !important;
  }

  /* === Dentro un progetto (desktop): tutti piccoli MA con preview su hover === */
  body.mode-project .tabs .vtab{ height:72px !important; }
  body.mode-project .tabs .vtab .label{ display:none !important; }
  body.mode-project .tabs .vtab .icon{ display:block !important; }

  /* Re-enable anteprima su hover anche se .compact è presente */
  body.mode-project #tabs .vtab:hover,
  body.mode-project .tabs .vtab:hover,
  body.mode-project #tabs.compact .vtab:hover,
  body.mode-project .tabs.compact .vtab:hover{
    height: calc(var(--tab-length) + 20px) !important;
    transition: height .15s ease !important;
  }
  body.mode-project #tabs .vtab:hover .label,
  body.mode-project .tabs .vtab:hover .label{ display:block !important; }
  body.mode-project #tabs .vtab:hover .icon,
  body.mode-project .tabs .vtab:hover .icon{ display:none !important; }
}

/* === Desktop: “About me” più stretto (più spazio ai lati) === */
@media (min-width:901px){
  body.project-about .project-sheet .sheet{
    width: min(900px, 70vw);
    grid-template-columns: 1fr;
  }
  body.project-about .sheet-media{
    max-width: min(720px, 56vw);
    margin: 0 auto !important;
  }
}

/* ===================== MOBILE / TABLET ===================== */
@media (max-width:900px){

  :root{
    --gap: 18px;
    --headerH: clamp(64px, 9vw, 110px);

    /* Tabs mobile */
    --tabW: 130px;        /* linguette più lunghe */
    --tabGap: 3px;        /* un filo più vicine */
    --tabOffset: -12px;   /* sporgenza a destra */

    /* Offset logo e griglia home */
    --logo-mobile-offset: 15px;
    --home-mobile-shift: 180px;  /* extra spazio sotto la fascia in HOME */
  }

  /* Header mobile */
  header.topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:190 !important;
    height:var(--headerH);
    display:flex;
    align-items:flex-start;  /* ancorato in alto */
    justify-content:flex-start;
    background:transparent;
    padding-left:12px;
    padding-top: 0 !important;  /* niente offset sul contenitore */
  }

  /* Logo mobile: taglia + offset con margine */
  header.topbar .logo-img{
    display:block;
    height: var(--logo-site) !important;
    margin-top: var(--logo-mobile-offset) !important;
    transform:none !important;
    margin-bottom:0 !important;
  }

  /* Stage mobile (base) */
  .stage{
    padding-top: calc(var(--headerH) + 16px);
    padding-left: 6vw;
    padding-right: 6vw;
    padding-bottom: 12vh;
  }

  /* SOLO HOME mobile: scendi di extra px */
  body:not(.mode-project) .stage{
    padding-top: calc(var(--headerH) + 16px + var(--home-mobile-shift)) !important;
  }

  /* Abilita scroll su mobile */
  html,body{ height:auto; overflow:auto; }
  body.no-scroll{ overflow:hidden; }

  /* Overlay sotto al logo */
  .overlay{ z-index:180 !important; }

  /* Tabs mobile: a pettine a destra, NO grow */
  #tabs{
    position:fixed;
    top: calc(var(--headerH) + 8px);
    right: var(--tabOffset);
    left:auto;
    z-index:180;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap: var(--tabGap);
    padding:0;
    background:transparent;
    overflow:visible;
    height:auto;
    width:auto;
  }
  #tabs .vtab{
    writing-mode: horizontal-tb !important;
    transform:none !important;
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    width: var(--tabW) !important;
    height:40px !important;
    padding: 0 12px !important;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border-radius:4px 0 0 4px;
    background:#000;
    color:#fff;
    transition: none !important;
  }
  #tabs .vtab .label{
    display:block;
    font-weight:700;
    writing-mode: horizontal-tb !important;
    transform:none !important;
  }
  #tabs .vtab .icon{ display:none !important; }

  /* No grow su hover/active */
  #tabs .vtab:hover,
  #tabs .vtab:active,
  #tabs .vtab.active{
    height: 40px !important;
    width: var(--tabW) !important;
    padding: 0 12px !important;
    transform:none !important;
  }

  /* Fallback se gap non è supportato */
  #tabs .vtab + .vtab{ margin-top: var(--tabGap); }

  /* Compact: attivo uguale, altri a icona */
  #tabs.compact .vtab.active{
    width: var(--tabW) !important;
    padding:0 12px !important;
  }
  #tabs.compact .vtab:not(.active){
    width: 36px !important;
    padding:0 !important;
    justify-content:center !important;
  }
  #tabs.compact .vtab:not(.active) .label{ display:none !important; }
  #tabs.compact .vtab:not(.active) .icon{ display:inline !important; }

  /* “Contatti” in basso — fisso, clic accettabile */
  #contactTab{
    position: fixed;
    right: calc(var(--tabOffset) + env(safe-area-inset-right));
    left: auto;
    bottom: 12px;
    z-index: 220;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width: var(--tabW) !important;
    height: 48px !important;
    padding: 0 14px !important;
    border-radius:4px 0 0 4px;
    background:#000;
    color:#fff;
    text-decoration:none;
    border:0;
    box-shadow:none;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transform: none !important;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #contactTab:hover,
  #contactTab:active,
  #contactTab:focus{
    transform: none !important;
    width: var(--tabW) !important;
  }

  /* Dentro un progetto: niente fascia in alto */
  #overlay:not(.hidden) .overlay-scroll,
  #overlay:not(.hidden) #overlayScroll{ padding-top: 0 !important; }
  #overlay .project-sheet,
  #overlay .sheet,
  #overlay .sheet-media{ margin-top:0 !important; }

  /* No “X”: chiusura via swipe (JS) */
  #closeOverlay{ display:none !important; }
}

/* ===== FOOTNOTE FIX (desktop + mobile) ===== */
.footnote{
  position: fixed !important;
  left: 14px !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  font-size: 12px;
  color: #888;
  z-index: 185 !important;
  pointer-events: none;
}
#preloader:not(.hide) ~ .footnote{
  display: none !important;
}

/* Nascondi il tab Contatti (e volendo i tabs) mentre il preloader è visibile */
#preloader:not(.hide) ~ #contactTab{ display:none !important; }
#preloader:not(.hide) ~ #tabs{ display:none !important; } /* opzionale */