/* =========================================================
   STUDIO PALMINTERI — Design System (Minimal Svizzero)
   ========================================================= */
:root{
  --ink:#1A1A1A; --taupe:#8A8378; --sand:#D9D4CB; --ochre:#B89968; --paper:#FAFAF8;
  --line:#E3DFD7;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px;
  --max:1320px; --header-h:106px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s4)}
.mono{font-family:'IBM Plex Mono',monospace}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--taupe)}

/* ---- segnaposto (immagini mancanti) ---- */
.media{position:relative;background:var(--sand);overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover}
.media.is-empty::after{content:"FOTO";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.16em;color:rgba(26,26,26,.4)}

/* ===================== HEADER ===================== */
header.site{position:sticky;top:0;z-index:60;background:rgba(250,250,248,.9);
  backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:var(--header-h)}
.brand{display:flex;align-items:center}
.brand img{height:74px;width:auto}
nav.menu{display:flex;gap:var(--s3)}
nav.menu a{font-size:13px;font-weight:500;letter-spacing:.01em;padding-bottom:3px;
  border-bottom:1px solid transparent;transition:border-color .2s}
nav.menu a:hover,nav.menu a[aria-current="page"]{border-color:var(--ochre)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;width:40px;height:40px;
  flex-direction:column;justify-content:center;gap:5px}
.nav-toggle span{display:block;height:1.5px;width:24px;background:var(--ink);transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ===================== HERO / SLIDESHOW (home) ===================== */
.hero{position:relative;height:clamp(460px,calc(100vh - var(--header-h)),860px);
  overflow:hidden;background:#2c2823}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide .media{position:absolute;inset:0}
.slide .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,15,.04) 38%,rgba(20,18,15,.64) 100%)}
.slide a.cover-link{position:absolute;inset:0;z-index:2}
.slide .meta{position:absolute;left:0;right:0;bottom:0;color:var(--paper);z-index:3;pointer-events:none}
.slide .meta .inner{max-width:var(--max);margin:0 auto;padding:0 var(--s4) calc(var(--s5) + 56px);
display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.slide h1{font-weight:300;font-size:clamp(24px,4vw,50px);letter-spacing:-.02em;line-height:1.05}
.slide .sub{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(250,250,248,.82);margin-top:14px}
.slide .idx{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.14em;
  color:rgba(250,250,248,.7);white-space:nowrap}
.hero-tag{position:absolute;top:var(--s4);left:0;right:0;z-index:3}
.hero-tag .inner{max-width:var(--max);margin:0 auto;padding:0 var(--s4)}
.hero-tag .eyebrow{color:rgba(250,250,248,.72)}
.dots{position:absolute;right:var(--s4);top:50%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;gap:12px}
.dots button{width:9px;height:9px;border-radius:50%;border:1px solid rgba(250,250,248,.6);
  background:transparent;cursor:pointer;padding:0}
.dots button[aria-current="true"]{background:var(--ochre);border-color:var(--ochre)}
.arrows{position:absolute;left:0;right:0;bottom:var(--s5);z-index:4;
  display:flex;gap:10px;max-width:var(--max);margin:0 auto;padding:0 var(--s4)}
  .arrows button{width:42px;height:42px;border:1px solid rgba(250,250,248,.5);background:transparent;
  color:var(--paper);font-size:15px;cursor:pointer;transition:.2s}
.arrows button:hover{background:var(--ochre);border-color:var(--ochre);color:var(--ink)}

/* ===================== SEZIONI ===================== */
.section{padding-top:var(--s7);padding-bottom:var(--s7)}
.section.alt{background:var(--sand)}
.page-top{padding-top:var(--s6);padding-bottom:var(--s4)}
.page-top h1{font-weight:300;font-size:clamp(36px,6vw,72px);letter-spacing:-.02em;line-height:1.02}
.page-top .eyebrow{margin-bottom:18px;display:block}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s5);flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:var(--s3)}
.sec-head h2{font-weight:400;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.01em}
.sec-head .count{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--taupe);
  letter-spacing:.12em}

/* ===================== GRIGLIA PROGETTI ===================== */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4) var(--s3)}
.card{cursor:pointer;display:block}
.card .thumb{aspect-ratio:4/3}
.card .thumb img{transition:filter .25s}
.card:hover .thumb img{filter:brightness(.93)}
.card .name{margin-top:14px;font-size:15px;font-weight:500}
.card .ctg{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--taupe);margin-top:4px}
.more{display:flex;justify-content:center;margin-top:var(--s6)}
.btn{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);
  padding:16px 38px;cursor:pointer;transition:.22s;display:inline-block}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn[hidden]{display:none}

/* ===================== SCHEDA PROGETTO ===================== */
.back-link{display:inline-block;margin-bottom:var(--s4);font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.back-link:hover{color:var(--ink)}
.project-head h1{font-weight:300;font-size:clamp(32px,5vw,60px);letter-spacing:-.02em;
  line-height:1.04;margin-bottom:var(--s4)}
.project-top{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s5);align-items:start;
  margin-bottom:var(--s6)}
.project-top .main-media{aspect-ratio:3/2}
.titleblock{border-top:1px solid var(--ink)}
.titleblock .row{display:flex;justify-content:space-between;gap:var(--s2);
  padding:16px 0;border-bottom:1px solid var(--line)}
.titleblock dt{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe)}
.titleblock dd{font-size:15px;font-weight:500;text-align:right}
.project-desc{max-width:100%;width:100%;margin-bottom:var(--s6);grid-column:1/-1}
.project-desc p{margin-bottom:var(--s2);color:#2b2b2b;text-align:justify;hyphens:auto}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.gallery .media{aspect-ratio:3/2;cursor:zoom-in}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(18,16,14,.94);
  display:none;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;object-fit:contain}
.lightbox .lb-btn{position:absolute;background:none;border:1px solid rgba(250,250,248,.4);
  color:var(--paper);width:48px;height:48px;font-size:18px;cursor:pointer;transition:.2s}
.lightbox .lb-btn:hover{background:var(--ochre);border-color:var(--ochre);color:var(--ink)}
.lightbox .lb-close{top:24px;right:24px}
.lightbox .lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:24px;top:50%;transform:translateY(-50%)}

/* ===================== CHI SONO ===================== */
.about{display:grid;grid-template-columns:.85fr 0.70fr;gap:var(--s6);align-items:start}
.about .portrait{aspect-ratio:4/5}
.about .bio h2{font-weight:300;font-size:clamp(24px,3vw,38px);letter-spacing:-.01em;
  line-height:1.12;margin-bottom:var(--s4)}
.about .bio p{max-width:68ch;color:#2b2b2b;margin-bottom:var(--s2);text-align:justify}
.about .bio .lead{font-size:17px}
.about .facts{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s3);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4)}
.about .facts dt{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe);margin-bottom:3px}
.about .facts dd{font-size:14px}

/* ===================== IDEE / GIORNALE ===================== */
.intro-lead{max-width:60ch;font-size:18px;color:#2b2b2b;margin-bottom:var(--s6)}
.articoli{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)}
.articolo-card{display:block;cursor:pointer;border-top:1px solid var(--ink);padding-top:var(--s3)}
.articolo-card .date{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--taupe)}
.articolo-card h2{font-weight:400;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.01em;
  line-height:1.12;margin:14px 0 12px}
.articolo-card:hover h2{color:var(--taupe)}
.articolo-card .excerpt{max-width:46ch;color:#2b2b2b}
.articolo-card .readmore{display:inline-block;margin-top:16px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre)}
.article{max-width:70ch;margin:0 auto}
.article .date{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--taupe)}
.article h1{font-weight:300;font-size:clamp(30px,4.6vw,52px);letter-spacing:-.02em;
  line-height:1.06;margin:16px 0 var(--s4)}
.article p{margin-bottom:var(--s3);color:#222;font-size:17px}

/* ===================== CONTATTI ===================== */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s6);align-items:start}
.contact .block .row{border-top:1px solid var(--line);padding-top:14px;margin-bottom:var(--s3)}
.contact .block dt{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe);margin-bottom:6px}
.contact .block dd{font-size:16px}
.contact .map{aspect-ratio:4/3;min-height:320px;border:1px solid var(--line)}
.contact .map iframe{width:100%;height:100%;border:0;display:block}
.form{margin-top:var(--s4);display:grid;gap:var(--s2)}
.form label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--taupe)}
.form input,.form textarea{width:100%;border:1px solid var(--line);background:var(--paper);
  padding:12px 14px;font-family:inherit;font-size:14px;color:var(--ink)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--ochre)}

/* ===================== FOOTER ===================== */
footer.site{border-top:1px solid var(--line);padding:var(--s6) 0 var(--s4)}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
.foot img{height:72px;width:auto}
.foot nav{display:flex;flex-direction:column;gap:10px}
.foot nav a{font-size:13px;color:var(--taupe)}
.foot nav a:hover{color:var(--ink)}
.foot .contact-mini{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:var(--taupe);line-height:1.9}
.foot .legal{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
  color:var(--taupe);width:100%;margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s3)}

/* --- Social nel footer --- */
.social{display:flex;gap:18px;margin-top:4px}
.social a{color:var(--taupe);transition:color .2s,transform .2s;display:flex}
.social a:hover{color:var(--ochre);transform:translateY(-2px)}
.social svg{display:block}

/* --- Contatti: riquadro preventivo --- */
.quote-box{max-width:640px;margin:var(--s4) auto 0;text-align:center;
  border:1px solid var(--line);border-top:2px solid var(--ochre);
  padding:var(--s4) var(--s3);background:#fff}
.quote-box .eyebrow{display:block;margin-bottom:14px}
.quote-box p{font-weight:300;font-size:clamp(18px,2.2vw,24px);
  letter-spacing:-.01em;line-height:1.3;max-width:46ch;margin:0 auto}

/* --- Idee: video, immagine card, badge, galleria --- */
.article .video{position:relative;width:100%;padding-bottom:56.25%;margin:var(--s4) 0;background:var(--sand)}
.article .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.articolo-card .art-cover{aspect-ratio:3/2;max-width:88%;margin-bottom:var(--s3);position:relative}
.tipo-badge{position:absolute;top:12px;left:12px;background:rgba(26,26,26,.85);color:var(--paper);
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 10px}
.article .visione-galleria{margin:var(--s6) calc(50% - 50vw) 0;max-width:100vw;
  padding:0 var(--s4);display:flex;flex-direction:column;gap:var(--s6)}
.article .visione-galleria figure{max-width:1100px;margin:0 auto;width:100%}
.article .visione-galleria img{width:100%;height:auto;display:block}

/* =========================================================
   >>> CHI SONO — "LO STUDIO"  (UNICA SEZIONE MODIFICATA) <
   ========================================================= */
/* Intro "Lo studio": a piena larghezza, giustificato */
.studio-intro,.bio-long{max-width:100%;margin:0 0 var(--s6)}
.studio-intro h2,.bio-long h2{font-weight:400;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:-.01em;margin-bottom:var(--s3)}
.studio-intro p,.bio-long p{color:#2b2b2b;text-align:justify;margin-bottom:var(--s2)}
.bio-long h3{font-weight:500;font-size:clamp(18px,2.2vw,22px);letter-spacing:-.01em;
  margin:var(--s4) 0 var(--s2)}

/* I tre punti sotto: carattere più piccolo, giustificato */
.studio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.servizio{border-top:1px solid var(--ink);padding-top:var(--s3)}
.servizio .num{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;color:var(--ochre)}
.servizio h3{font-weight:500;font-size:17px;letter-spacing:-.01em;margin:14px 0 12px;line-height:1.25}
.servizio p{color:#2b2b2b;font-size:13px;line-height:1.55;text-align:justify}
@media(max-width:850px){.studio-grid{grid-template-columns:1fr;gap:0}.servizio{margin-bottom:var(--s4)}}

/* --- Animazione: fade-in al scroll --- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* ===================== ELENCO LAVORI ===================== */
.elenco-intro{max-width:70ch;color:#2b2b2b;margin-bottom:var(--s6);text-align:justify}
.elenco-intro p{margin-bottom:var(--s2)}

.lavori-table{width:100%;border-collapse:collapse;border-top:1px solid var(--ink)}
.lavori-table thead th{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe);font-weight:500;
  text-align:left;padding:18px var(--s2) 14px;border-bottom:1px solid var(--ink)
}
.lavori-table tbody td{
  padding:18px var(--s2);border-bottom:1px solid var(--line);
  font-size:14px;color:#2b2b2b;vertical-align:top;line-height:1.5
}
.lavori-table tbody tr:hover td{background:rgba(184,153,104,.04)}
.lavori-table .col-tipo{font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.04em;color:var(--taupe);text-transform:uppercase;width:22%}
.lavori-table .col-progetto{font-weight:500;color:var(--ink);width:32%}
.lavori-table .col-committente{width:22%}
.lavori-table .col-luogo{width:16%}
.lavori-table .col-anno{font-family:'IBM Plex Mono',monospace;font-size:13px;
  color:var(--taupe);width:8%;white-space:nowrap}

/* Mobile: tabella scrollabile orizzontalmente */
@media(max-width:850px){
  .lavori-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .lavori-table{min-width:760px}
}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1000px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .about,.contact,.project-top{grid-template-columns:1fr;gap:var(--s5)}
  .articoli{grid-template-columns:1fr}
}
@media(max-width:700px){
  :root{--header-h:70px}
  .brand img{height:54px}
  .nav-toggle{display:flex}
  nav.menu{position:fixed;top:var(--header-h);left:0;right:0;flex-direction:column;
    gap:0;background:var(--paper);border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:.22s}
  nav.menu.open{transform:translateY(0);opacity:1;visibility:visible}
  nav.menu a{padding:18px var(--s4);border-bottom:1px solid var(--line);border-top:none}
}
@media(max-width:640px){
  .wrap,.hero-tag .inner,.slide .meta .inner{padding-left:var(--s3);padding-right:var(--s3)}
  .section{padding-top:var(--s6);padding-bottom:var(--s6)}
  .grid{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s2)}
  .gallery{grid-template-columns:1fr}
  .dots{display:none}
  .about .facts{grid-template-columns:1fr}
  .hero{height:70vh}
.arrows{bottom:20px;left:var(--s3)}
.slide .meta .inner{padding-bottom:calc(var(--s5) + 56px)}
.slide h1{font-size:34px}
}
@media(prefers-reduced-motion:reduce){
  .slide{transition:none}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}
@media(min-width:641px) and (max-width:1000px){ .hero{height:64vh} }
.studio-grid .servizio p{text-align:justify}
@media(max-width:1000px){
  .arrows button{width:36px;height:36px;font-size:13px}
  .arrows{bottom:18px;left:var(--s3)}
}