/* ═══ SHARED PORTFOLIO CSS ═══════════════════
   Ing. Simone Di Marcoberardino
   Font: Cormorant Garamond + DM Sans + DM Mono
   Palette: Proposta B — Antracite caldo + Rame
════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@300;400&display=swap');

:root {
  --black:   #09080A;
  --dark:    #131114;
  --panel:   #1A181C;
  --card:    #221F24;
  --border:  rgba(255,255,255,0.065);
  --borderL: rgba(255,255,255,0.11);
  --white:   #F6F2EE;
  --cream:   #EDE4D8;
  --muted:   rgba(246,242,238,0.44);
  --muted2:  rgba(246,242,238,0.22);
  --copper:  #B87333;
  --copper2: #C9893E;
  --gold:    #D4A855;
  --cdim:    rgba(184,115,51,0.22);
  --cglow:   rgba(184,115,51,0.08);
  --nav-h:   76px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
body{background:var(--black);color:var(--white);font-family:'DM Sans',sans-serif;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--cdim)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 52px;background:rgba(9,8,10,0.92);border-bottom:1px solid var(--border);backdrop-filter:blur(12px)}
.nav-home{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--cream);display:flex;align-items:center;gap:10px}
.nav-home em{font-style:italic;color:var(--copper2)}
.nav-home .sep{width:1px;height:12px;background:var(--borderL);display:inline-block}
.nav-home .sub{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.nav-cats{display:flex;gap:2px}
.nav-cat{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 14px;border:1px solid transparent;transition:all .2s}
.nav-cat:hover,.nav-cat.active{color:var(--copper2);border-color:var(--cdim);background:var(--cglow)}
.nav-back{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding:8px 16px;border:1px solid var(--border);transition:all .2s}
.nav-back:hover{color:var(--copper2);border-color:var(--cdim)}

/* PAGE HERO */
.page-hero{min-height:52vh;display:flex;align-items:flex-end;padding:calc(var(--nav-h)+80px) 52px 64px;position:relative;overflow:hidden;background:var(--dark)}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 100% 50%,var(--cglow) 0%,transparent 70%)}
.page-hero-rule{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,var(--copper) 0%,var(--copper2) 40%,transparent 100%)}
.page-hero-content{position:relative;z-index:1;max-width:1200px;width:100%}
.page-eyebrow{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--copper);margin-bottom:20px;display:flex;align-items:center;gap:14px}
.page-eyebrow::before{content:'';display:block;width:24px;height:1px;background:var(--copper)}
.page-title{font-family:'Cormorant Garamond',serif;font-size:clamp(52px,7vw,96px);font-weight:300;line-height:.95;color:var(--cream)}
.page-title em{font-style:italic;color:var(--copper3,#D49B52)}
.page-title strong{font-weight:600;color:var(--white)}
.page-subtitle{font-size:15px;font-weight:300;color:var(--muted);margin-top:24px;line-height:1.8;max-width:640px}

/* GALLERY GRID */
.gallery-section{padding:80px 52px;max-width:1280px;margin:0 auto}
.gallery-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-bottom:64px;align-items:start}
.gallery-intro-text p{font-size:15px;font-weight:300;line-height:1.85;color:var(--muted);margin-bottom:16px}
.gallery-intro-text strong{color:var(--cream);font-weight:500}
.gallery-meta{display:flex;flex-direction:column;gap:2px}
.meta-row{display:grid;grid-template-columns:110px 1fr;background:var(--panel)}
.meta-key{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);padding:14px 16px;border-right:1px solid var(--border)}
.meta-val{font-size:13px;color:var(--muted);padding:14px 18px;align-self:center}

/* IMAGE GRID */
.img-grid{display:grid;gap:4px}
.img-grid--2{grid-template-columns:1fr 1fr}
.img-grid--3{grid-template-columns:1fr 1fr 1fr}
.img-grid--2-1{grid-template-columns:2fr 1fr}
.img-grid--1-2{grid-template-columns:1fr 2fr}

.img-item{position:relative;overflow:hidden;background:var(--panel);cursor:zoom-in}
.img-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.img-item:hover img{transform:scale(1.04)}
.img-item--tall{grid-row:span 2}
.img-item--wide{grid-column:span 2}

.img-caption{position:absolute;bottom:0;left:0;right:0;padding:20px 18px 16px;background:linear-gradient(to top,rgba(9,8,10,.85) 0%,transparent 100%);opacity:0;transition:opacity .3s}
.img-item:hover .img-caption{opacity:1}
.img-caption-title{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:400;color:var(--cream);margin-bottom:4px}
.img-caption-sub{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--copper2)}

/* Gallery section separator */
.gallery-sep{height:1px;background:linear-gradient(to right,transparent,var(--borderL) 20%,var(--borderL) 80%,transparent);max-width:1280px;margin:0 auto}

/* Projects list */
.projects-list{margin-top:64px}
.proj-item{display:grid;grid-template-columns:56px 1fr auto;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--border);transition:padding-left .25s}
.proj-item:first-child{border-top:1px solid var(--border)}
.proj-item:hover{padding-left:8px}
.proj-n{font-family:'DM Mono',monospace;font-size:10px;color:var(--copper)}
.proj-name{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:400;color:var(--cream)}
.proj-detail{font-size:13px;color:var(--muted);line-height:1.7;margin-top:4px}
.proj-year{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted2);white-space:nowrap}

/* FOOTER */
.pf-footer{background:var(--dark);border-top:1px solid var(--border);padding:40px 52px;margin-top:80px}
.pf-footer-inner{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.pf-footer-l{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--muted2)}
.pf-footer-r{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--copper)}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(9,8,10,.96);z-index:500;display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-height:90vh;max-width:90vw;object-fit:contain}
.lightbox-close{position:absolute;top:24px;right:32px;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.15em;color:var(--muted);cursor:pointer;padding:8px 16px;border:1px solid var(--border);transition:all .2s}
.lightbox-close:hover{color:var(--copper2);border-color:var(--cdim)}
.lightbox-cap{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center}

/* Animations */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.fade-in.visible{opacity:1;transform:none}

@media(max-width:900px){
  nav{padding:0 20px}
  .nav-cats{display:none}
  .page-hero{padding:calc(var(--nav-h)+40px) 20px 40px}
  .gallery-section{padding:48px 20px}
  .gallery-intro{grid-template-columns:1fr}
  .img-grid--3,.img-grid--2,.img-grid--2-1,.img-grid--1-2{grid-template-columns:1fr}
  .img-item--wide,.img-item--tall{grid-column:auto;grid-row:auto}
}