/* ============================================================
   The Absent Look — style
   Palette scura, tipografia editoriale, foto protagoniste.
   ============================================================ */

:root{
  --bg:        #0b0b0c;
  --bg-soft:   #131315;
  --ink:       #ece9e3;   /* bianco caldo */
  --muted:     #9a968d;   /* grigio caldo */
  --faint:     #565349;
  --gold:      #c9a86a;   /* accento tenue, richiama la luce dorata */
  --line:      rgba(236,233,227,.12);
  --maxw:      1320px;
  --gap:       clamp(10px, 1.4vw, 20px);
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter", system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.05;
  margin:0;
}

/* ---------- utilities ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px); }
.eyebrow{
  font-family:"Inter",sans-serif;
  font-size:.72rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold);
}
.muted{ color:var(--muted); }
.center{ text-align:center; }

/* reveal on scroll — only when JS is active, so content is never hidden without it */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
  /* dark veil so the menu stays legible over a bright hero photo;
     invisible over the dark page background */
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,0) 100%);
}
.site-header.solid{
  background:rgba(11,11,12,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding-top:16px; padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:"Cormorant Garamond",serif;
  font-size:1.5rem; font-weight:600; letter-spacing:.02em;
  color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.site-header.solid .brand{ color:var(--ink); text-shadow:none; }
.nav{ display:flex; gap:34px; align-items:center; }
.nav a{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:#cfccc4; font-weight:400;
  position:relative; padding:4px 0;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
  transition:color .3s var(--ease);
}
.site-header.solid .nav a{ color:var(--muted); text-shadow:none; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .35s var(--ease);
}
.nav a:hover, .nav a.active{ color:var(--ink); }
.nav a:hover::after, .nav a.active::after{ width:100%; }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ display:block; width:24px; height:1.5px; background:var(--ink); margin:5px 0; transition:.3s var(--ease); }

/* ---------- hero ---------- */
.hero{
  position:relative; height:100svh; min-height:600px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transform:scale(1.06); animation:heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,12,.5) 0%, rgba(11,11,12,.28) 40%, rgba(11,11,12,.72) 100%);
}
.hero-inner{ position:relative; z-index:2; padding:0 24px; }
.hero h1{
  font-size:clamp(3rem, 9vw, 7.5rem);
  font-weight:500; letter-spacing:.005em; color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero .tagline{
  margin:26px auto 0; max-width:38ch;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(1.15rem,2.2vw,1.6rem);
  font-style:italic; font-weight:400; color:rgba(236,233,227,.9);
  line-height:1.5;
}
.hero .cta{
  display:inline-block; margin-top:40px;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
  padding:15px 34px; border:1px solid rgba(236,233,227,.4); border-radius:2px;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.hero .cta:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.scroll-cue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:2;
  width:1px; height:52px; background:linear-gradient(var(--muted),transparent);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{opacity:.2; height:38px} 50%{opacity:.9; height:56px} }

/* ---------- sections ---------- */
.section{ padding:clamp(70px,11vw,150px) 0; }
.section-head{ max-width:760px; margin:0 auto clamp(38px,6vw,72px); text-align:center; }
.section-head h2{ font-size:clamp(2rem,5vw,3.4rem); margin:18px 0 0; }
.section-head p{ color:var(--muted); margin:20px auto 0; max-width:60ch; }

.statement{ max-width:720px; margin:0 auto; text-align:center; }
.statement p{
  font-family:"Cormorant Garamond",serif; font-style:italic;
  font-size:clamp(1.3rem,3vw,2rem); line-height:1.5; color:var(--ink);
}

/* ---------- collection cards (home + galleries index) ---------- */
.collections{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2.4vw,34px);
}
.collections.featured .card:first-child{ grid-column:1 / -1; }
.card{
  position:relative; display:block; overflow:hidden;
  background:var(--bg-soft); border-radius:3px;
}
.card-media{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.card.wide .card-media{ aspect-ratio:16/9; }
.card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease), filter 1.2s var(--ease);
  filter:grayscale(8%) brightness(.9);
}
.card:hover .card-media img{ transform:scale(1.06); filter:grayscale(0) brightness(1); }
.card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%, rgba(11,11,12,.82) 100%);
}
.card-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(20px,3vw,34px); }
.card-body .place{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.card-body h3{ font-size:clamp(1.5rem,2.6vw,2.4rem); margin:8px 0 4px; color:#fff; }
.card-body .blurb{ color:rgba(236,233,227,.72); font-size:.95rem; max-width:40ch; }
.card-arrow{ margin-top:14px; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); opacity:0; transform:translateX(-6px); transition:.4s var(--ease); }
.card:hover .card-arrow{ opacity:1; transform:none; }

/* ---------- collection page (photo grid, masonry via columns) ---------- */
.collection-hero{ padding:calc(clamp(90px,14vw,150px)) 0 clamp(30px,6vw,60px); text-align:center; }
.collection-hero .place{ font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.collection-hero h1{ font-size:clamp(2.6rem,7vw,5.2rem); margin:16px 0; }
.collection-hero p{ max-width:56ch; margin:0 auto; color:var(--muted); font-size:1.05rem; }

.masonry{ columns:3; column-gap:var(--gap); }
.masonry .shot{
  break-inside:avoid; margin-bottom:var(--gap); position:relative; cursor:pointer;
  overflow:hidden; border-radius:2px; background:var(--bg-soft);
}
.masonry .shot img{
  width:100%; height:auto;
  transition:transform 1.1s var(--ease), filter .8s var(--ease), opacity 1.2s var(--ease);
  filter:brightness(.92);
}
.masonry .shot:hover img{ transform:scale(1.04); filter:brightness(1.05); }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(30px,6vw,80px); align-items:center; }
.about-portrait{ position:relative; }
.about-portrait img{ width:100%; border-radius:3px; filter:grayscale(6%); }
.about-copy .eyebrow{ display:block; margin-bottom:16px; }
.about-copy h1{ font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:8px; }
.about-copy .role{ font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.3rem; color:var(--muted); margin-bottom:26px; }
.about-copy p{ color:rgba(236,233,227,.82); margin:0 0 20px; }
.about-copy .sign{ font-family:"Cormorant Garamond",serif; font-size:1.5rem; color:var(--ink); margin-top:30px; }

/* ---------- contact strip ---------- */
.contact{ text-align:center; border-top:1px solid var(--line); }
.contact h2{ font-size:clamp(2rem,5vw,3.2rem); }
.contact .email{
  display:inline-block; margin-top:22px; font-size:clamp(1.1rem,2.4vw,1.6rem);
  font-family:"Cormorant Garamond",serif; color:var(--gold);
  border-bottom:1px solid transparent; transition:border-color .4s var(--ease);
}
.contact .email:hover{ border-color:var(--gold); }

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line); padding:40px 0;
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  color:var(--faint); font-size:.8rem; letter-spacing:.04em;
}
.site-footer .brand{ font-size:1.1rem; color:var(--muted); }
.site-footer nav{ display:flex; gap:24px; }
.site-footer a{ color:var(--faint); transition:color .3s var(--ease); }
.site-footer a:hover{ color:var(--ink); }

/* ---------- lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:100; display:none; background:rgba(7,7,8,.97); }
.lb.open{ display:flex; align-items:center; justify-content:center; }
.lb img{ max-width:92vw; max-height:88vh; object-fit:contain; opacity:0; transition:opacity .35s var(--ease); box-shadow:0 20px 80px rgba(0,0,0,.6); }
.lb img.ready{ opacity:1; }
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--muted); cursor:pointer;
  font-size:2.4rem; padding:20px; transition:color .3s var(--ease); z-index:2; line-height:1;
}
.lb-btn:hover{ color:var(--ink); }
.lb-prev{ left:6px; } .lb-next{ right:6px; }
.lb-close{ position:absolute; top:18px; right:22px; font-size:1.8rem; }
.lb-count{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:var(--muted); font-size:.8rem; letter-spacing:.2em; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .masonry{ columns:2; }
  .about-grid{ grid-template-columns:1fr; }
  .about-portrait{ max-width:420px; margin:0 auto; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:28px;
    background:rgba(15,15,17,.98); backdrop-filter:blur(16px);
    padding:0 40px; transform:translateX(100%); transition:transform .45s var(--ease); z-index:40;
  }
  .nav.open{ transform:none; }
  .nav a{ font-size:1rem; }
  .nav-toggle{ display:block; z-index:41; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
}
@media (max-width:560px){
  .masonry{ columns:1; }
  .collections{ grid-template-columns:1fr; }
  .collections.featured .card:first-child{ grid-column:auto; }
  .lb-btn{ font-size:1.8rem; padding:12px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}