/* =========================================================
   EDITORIAL V2 — prima proposta visiva
   Mantiene immagini, contenuti e struttura esistenti.
   ========================================================= */
:root {
  --editorial-cream: #f1ede6;
  --editorial-muted: rgba(241,237,230,.58);
  --editorial-line: rgba(241,237,230,.14);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 98;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

nav {
  padding: 30px 52px;
  background: linear-gradient(to bottom, rgba(6,6,6,.76), rgba(6,6,6,0));
}
nav.scrolled {
  padding: 17px 52px;
  background: rgba(8,8,8,.82);
  border-bottom: 1px solid var(--editorial-line);
}
.nav-brand {
  font-size: 24px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav-brand span { color: var(--white); font-style: italic; }
.nav-links { gap: 31px; }
.nav-links a { font-size: 9px; letter-spacing: .2em; }

.hero { background: #090909; }
.slide-bg {
  transform: scale(1.08);
  filter: saturate(.88) contrast(1.03);
  transition: transform 10s cubic-bezier(.2,.6,.2,1), filter 1.5s ease;
}
.slide.active .slide-bg { transform: scale(1); filter: saturate(.94) contrast(1.05); }
.slide-overlay {
  background:
    linear-gradient(90deg, rgba(5,5,5,.66) 0%, rgba(5,5,5,.15) 52%, rgba(5,5,5,.28) 100%),
    linear-gradient(0deg, rgba(5,5,5,.72) 0%, transparent 38%, rgba(5,5,5,.18) 100%);
}
.hero-content { left: 52px; bottom: 105px; max-width: min(720px, 72vw); }
.hero-label { font-size: 9px; letter-spacing: .28em; margin-bottom: 15px; }
.hero-title {
  font-size: clamp(44px, 6.3vw, 86px);
  line-height: .98;
  letter-spacing: -.02em;
  text-shadow: 0 10px 35px rgba(0,0,0,.18);
}
.hero-title em { color: var(--editorial-cream); }
.hero-nav { right: 52px; bottom: 105px; gap: 8px; }
.hero-btn {
  width: 50px; height: 50px; border-color: rgba(245,242,238,.3);
  background: rgba(8,8,8,.12); backdrop-filter: blur(6px);
}
.hero-btn:hover { border-color: var(--accent); background: rgba(200,169,110,.12); }

.hero-index {
  position: absolute; right: 54px; top: 50%; transform: translateY(-50%);
  z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--serif); font-size: 14px; color: rgba(245,242,238,.62);
}
.hero-index-current { color: var(--white); font-size: 20px; }
.hero-index-total { font-size: 11px; }
.hero-index-rule { width: 1px; height: 44px; background: var(--accent); opacity: .65; }
.hero-progress {
  position: absolute; left: 52px; right: 52px; bottom: 31px; height: 1px;
  background: rgba(245,242,238,.18); z-index: 5; overflow: hidden;
}
.hero-progress span { display:block; width:16.666%; height:100%; background: var(--accent); transform-origin:left; transition: width .7s ease; }
.scroll-hint { bottom: 33px; left: 50%; opacity: .65; }
.scroll-hint span { font-size: 8px; letter-spacing: .26em; }
.scroll-line { height: 30px; background: linear-gradient(var(--accent), transparent); }

.gallery-home { background: #0d0d0d; }
.editorial-gallery { padding-top: 120px; }
.section-header { margin-bottom: 45px; padding-bottom: 22px; border-bottom-color: var(--editorial-line); }
.section-label { font-size: 9px; letter-spacing: .28em; }
.section-title { font-size: clamp(42px, 5vw, 68px); letter-spacing: -.02em; }
.section-title em { color: var(--editorial-cream); }
.section-link { font-size: 9px; letter-spacing: .2em; }
.gallery-categories { margin-bottom: 34px; gap: 24px; }
.cat-btn { font-size: 9px; letter-spacing: .18em; padding: 9px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; }
.cat-btn.active { border-bottom-color: var(--accent); }
.grid-masonry { columns: 3; column-gap: 16px; }
.grid-item { margin-bottom: 16px; }
.grid-item img { filter: brightness(.9) saturate(.92); transition: transform 1.1s cubic-bezier(.2,.6,.2,1), filter .8s ease; }
.grid-item:hover img { transform: scale(1.035); filter: brightness(1) saturate(1); }
.grid-item-info { padding: 22px; background: linear-gradient(to top, rgba(5,5,5,.72), transparent 58%); }
.grid-item-info p { font-size: 9px; letter-spacing: .18em; }

.about-strip { background: #111; padding: 105px 52px; gap: 100px; }
.about-img-wrap { box-shadow: 0 25px 70px rgba(0,0,0,.28); }
.about-text .lead { font-family: var(--serif); font-size: clamp(30px, 3.3vw, 48px); line-height: 1.05; }
.about-text > p:not(.lead):not(.section-label) { max-width: 560px; color: rgba(245,242,238,.6); line-height: 1.9; }
.btn-outline { border-color: rgba(245,242,238,.3); }

.projects { background: #0d0d0d; }
.project-current-text h3 { font-size: clamp(36px, 4vw, 58px); }
.project-current-text p { color: rgba(245,242,238,.62); line-height: 1.85; }
.project-thumb { overflow:hidden; }
.project-thumb img { transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.project-thumb:hover img { transform: scale(1.045); }

.contact { background: #111; }
.contact h2 { font-size: clamp(44px, 6vw, 82px); }
.contact h2 em { color: var(--editorial-cream); }

.lightbox { background: rgba(5,5,5,.985); backdrop-filter: blur(12px); }
.lightbox img { max-height: 84vh; max-width: 84vw; box-shadow: 0 30px 90px rgba(0,0,0,.42); }
.lightbox-caption { font-family: var(--serif); font-size: 17px; letter-spacing: .03em; text-transform:none; color: rgba(245,242,238,.7); }
.lightbox-close { top: 32px; right: 40px; }
.lightbox-nav-btn { border-color: rgba(245,242,238,.22); background: rgba(10,10,10,.18); }

@media (max-width: 768px) {
  nav, nav.scrolled { padding: 20px 24px; }
  .hero-content { left: 24px; bottom: 92px; max-width: calc(100vw - 48px); }
  .hero-title { font-size: clamp(40px, 12vw, 62px); }
  .hero-nav { right: 24px; bottom: 92px; }
  .hero-index { display: none; }
  .hero-progress { left: 24px; right: 24px; bottom: 25px; }
  .editorial-gallery { padding-top: 82px; }
  .grid-masonry { columns: 2; column-gap: 9px; }
  .grid-item { margin-bottom: 9px; }
  .about-strip { padding: 75px 24px; gap: 50px; }
}

@media (max-width: 480px) {
  .nav-brand { font-size: 19px; }
  .hero-content { bottom: 85px; }
  .hero-nav { bottom: 24px; right: 20px; }
  .hero-btn { width: 42px; height: 42px; }
  .scroll-hint { display:none; }
  .hero-progress { bottom: 14px; }
  .grid-masonry { columns: 1; }
}