/* =========================================================
   Font ospitato sul nostro dominio.
   NON usare Google Fonts: caricarli dai server di Google manda
   l'indirizzo IP di ogni visitatore a un terzo prima che questi
   abbia acconsentito a qualcosa. Con i file qui accanto il
   browser non contatta nessuno, e il sito non ha bisogno di
   alcun banner sui cookie.

   Quattro pesi, quelli davvero usati dal sito:
     300  sottotitolo della home
     400  testo corrente
     500  titoli, menu, pulsanti
     700  titolo grande della home
   Ogni file copre latino, latino esteso, cirillico e cirillico
   esteso, quindi vale per tutte e tre le lingue. Il browser
   scarica solo i pesi che la pagina usa davvero.
   ========================================================= */
@font-face{
  font-family:"Roboto";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("../fonts/roboto-300.woff2") format("woff2");
}

@font-face{
  font-family:"Roboto";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/roboto-400.woff2") format("woff2");
}

@font-face{
  font-family:"Roboto";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/roboto-500.woff2") format("woff2");
}

@font-face{
  font-family:"Roboto";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/roboto-700.woff2") format("woff2");
}

/* =========================================================
   M.Majoré — ART studio
   Foglio di stile unico. Nessuna dipendenza esterna
   (a parte il font Roboto da Google Fonts).
   ========================================================= */

:root{
  --nero:        #000000;
  --testo:       #111111;
  --testo-soft:  #4a4a4a;
  --bianco:      #ffffff;
  --grigio-bg:   #f5f5f5;
  --bordo:       #e2e2e2;
  --accento:     #000000;

  --font: "Roboto", Arial, Helvetica, sans-serif;

  --max:     1200px;
  --gutter:  24px;
  --nav-h:   62px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }

body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  color:var(--testo);
  background:var(--bianco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:#000; color:#fff; padding:10px 16px;
}
.skip-link:focus{ left:8px; top:8px; }

/* ---------- titoli di sezione ---------- */
.section-title{
  font-size:42px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 42px;
  text-align:center;
}
.section-title--left{ text-align:left; margin-bottom:26px; }

/* =========================================================
   NAVIGAZIONE
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  background:rgba(0,0,0,.92);
  backdrop-filter:saturate(140%) blur(8px);
}
.nav__inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav__brand{
  color:#fff; text-decoration:none;
  font-size:17px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
}
.nav__right{ display:flex; align-items:center; gap:18px; order:3; }

/* ---------- selettore di lingua ---------- */
.langpicker{ display:flex; align-items:center; gap:2px; }
.langpicker__btn{
  background:none; border:0; padding:5px 7px;
  font:inherit; font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  cursor:pointer;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.langpicker__btn:hover{ color:#fff; }
.langpicker__btn.is-active{ color:#fff; border-bottom-color:#fff; cursor:default; }
.langpicker__btn + .langpicker__btn{ border-left:1px solid rgba(255,255,255,.2); padding-left:9px; }

.nav__menu{ display:flex; gap:30px; }
.nav__menu--simple{ margin:0; }
.nav__menu a{
  color:#fff; text-decoration:none;
  font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 0;
  border-bottom:1px solid transparent;
  transition:border-color .2s, opacity .2s;
}
.nav__menu a:hover,
.nav__menu a.is-active{ border-bottom-color:#fff; }

.nav__toggle{
  display:none;
  width:34px; height:28px; padding:5px 3px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.nav__toggle span{
  display:block; height:2px; width:100%; background:#fff;
  transition:transform .25s, opacity .25s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:660px;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + 40px) var(--gutter) 60px;
  background:#000;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),
    url("../img/hero-2026.jpg");
  background-size:cover;
  background-position:center;
}
.hero__content{ position:relative; max-width:900px; text-align:center; }
.hero__title{
  color:#fff;
  font-size:clamp(30px, 5.2vw, 52px);
  font-weight:700;
  line-height:1.18;
  margin:0 0 22px;
}
.hero__sub{
  color:rgba(255,255,255,.88);
  font-size:clamp(16px, 2.1vw, 19px);
  font-weight:300;
  line-height:1.6;
  margin:0 auto;
  max-width:640px;
}

/* =========================================================
   BIOGRAFIA
   ========================================================= */
.bio{ padding:90px var(--gutter); }
.bio__inner{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:56px; align-items:start;
}
.bio__photo img{
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:cover;
  object-position:center top;
  background:var(--grigio-bg);
}
.bio__text p{
  margin:0 0 20px;
  color:var(--testo-soft);
  font-size:17px;
  line-height:1.75;
}
.bio__text strong{ color:var(--testo); font-weight:500; }

/* =========================================================
   GALLERIA (slider)
   ========================================================= */
.gallery{ padding:70px var(--gutter) 90px; background:var(--grigio-bg); }

.slider{
  position:relative;
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; gap:10px;
}
.slider__viewport{ overflow:hidden; flex:1; }
.slider__track{
  display:flex; gap:20px;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.slide{
  flex:0 0 var(--slide-w, 33.333%);
  cursor:zoom-in;
  background:#fff;
  border:0; padding:0; margin:0;
  text-align:left;
  font:inherit; color:inherit;
}
.slide__imgwrap{
  position:relative;
  aspect-ratio:460/330;
  overflow:hidden;
  background:#e8e8e8;
}
.slide__imgwrap img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.slide:hover .slide__imgwrap img,
.slide:focus-visible .slide__imgwrap img{ transform:scale(1.05); }
.slide__caption{
  padding:12px 4px 0;
  font-size:14px;
  color:var(--testo-soft);
}
.slide__caption b{ display:block; font-weight:500; color:var(--testo); font-size:15px; }
/* Il prezzo su una riga sua: si legge a colpo d'occhio senza rubare
   la scena al titolo dell'opera. */
.slide__prezzo{
  display:block;
  margin-top:4px;
  font-size:14px;
  font-weight:500;
  color:var(--testo);
  letter-spacing:.01em;
}

.slider__arrow{
  flex:0 0 auto;
  width:44px; height:44px;
  border:1px solid var(--bordo);
  background:#fff;
  color:var(--testo);
  font-size:26px; line-height:1;
  cursor:pointer;
  border-radius:50%;
  transition:background .2s, color .2s;
}
.slider__arrow:hover{ background:#000; color:#fff; border-color:#000; }
.slider__arrow[disabled]{ opacity:.3; cursor:default; }
.slider__arrow[disabled]:hover{ background:#fff; color:var(--testo); border-color:var(--bordo); }

.slider__dots{
  display:flex; justify-content:center; gap:8px;
  margin-top:28px;
}
.slider__dots button{
  width:8px; height:8px; padding:0;
  border:0; border-radius:50%;
  background:#c4c4c4; cursor:pointer;
  transition:background .2s, transform .2s;
}
.slider__dots button.is-active{ background:#000; transform:scale(1.35); }

/* =========================================================
   NOTIZIE
   ========================================================= */
.news{ padding:90px var(--gutter); }
.news__grid{
  max-width:var(--max); margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:36px 30px;
}
.news__loading{ text-align:center; color:var(--testo-soft); }

.news-item{ display:flex; flex-direction:column; }
}
.news-item__thumb{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--grigio-bg);
  margin-bottom:16px;
}
.news-item__thumb img{ width:100%; height:100%; object-fit:cover; }
.news-item__date{
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#8a8a8a;
  margin:0 0 6px;
}
.news-item__title{
  font-size:20px; font-weight:500; line-height:1.35;
  margin:0 0 10px;
}
.news-item__title a{ text-decoration:none; border-bottom:1px solid var(--bordo); }
.news-item__title a:hover{ border-bottom-color:#000; }
.news-item__text{
  margin:0;
  font-size:15px; line-height:1.65;
  color:var(--testo-soft);
}

/* =========================================================
   CONTATTI
   ========================================================= */
.contacts{ padding:90px var(--gutter); background:var(--grigio-bg); }
.contacts__inner{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:60px;
}
.contacts__lead{ color:var(--testo-soft); margin:0 0 28px; max-width:420px; }
.contacts__list{ list-style:none; margin:0 0 28px; padding:0; }
.contacts__list li{
  padding:14px 0;
  border-bottom:1px solid var(--bordo);
  font-size:17px;
}
.contacts__list a{ text-decoration:none; border-bottom:1px solid var(--bordo); }
.contacts__list a:hover{ border-bottom-color:#000; }
.contacts__label{
  display:block;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:#8a8a8a; margin-bottom:3px;
}
.contacts__social{ display:flex; gap:20px; }
.contacts__social a{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid #000; padding-bottom:2px;
}

.contacts__formtitle{
  font-size:22px; font-weight:500; margin:0 0 24px;
}
.field{ display:block; margin-bottom:18px; }
.field__label{
  display:block;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:#6a6a6a; margin-bottom:7px;
}
.field__label em{ font-style:normal; color:#b00; }
.field input,
.field textarea{
  width:100%;
  padding:12px 14px;
  font:inherit; font-size:16px;
  color:var(--testo);
  background:#fff;
  border:1px solid var(--bordo);
  border-radius:0;
  transition:border-color .2s;
}
.field input:focus,
.field textarea:focus{ outline:none; border-color:#000; }
.field textarea{ resize:vertical; min-height:110px; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.btn{
  display:inline-block;
  padding:14px 42px;
  font:inherit; font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:#000;
  border:1px solid #000; border-radius:0;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.btn:hover{ background:#fff; color:#000; }
.btn[disabled]{ opacity:.55; cursor:default; }
.btn[disabled]:hover{ background:#000; color:#fff; }

.form__note{
  margin:14px 0 0;
  font-size:12px; line-height:1.5; color:#8a8a8a;
}
.form__note a{ color:#8a8a8a; }
.form__status{ margin:14px 0 0; font-size:15px; min-height:1.4em; }
.form__status.ok{ color:#1a7a3c; }
.form__status.ko{ color:#b00; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:#000; color:rgba(255,255,255,.75); padding:34px var(--gutter); }
.footer__inner{
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
  font-size:13px;
}
.footer p{ margin:0; }
.footer__links{ display:flex; gap:22px; }
.footer__links a{
  color:rgba(255,255,255,.75); text-decoration:none;
  letter-spacing:.08em; text-transform:uppercase; font-size:12px;
}
.footer__links a:hover{ color:#fff; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.94);
  display:flex; align-items:center; justify-content:center;
  padding:60px 70px;
}
.lightbox[hidden]{ display:none; }
.lightbox__figure{
  margin:0;
  max-width:100%; max-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.lightbox__figure img{
  max-width:100%; max-height:78vh;
  object-fit:contain;
}
.lightbox__figure figcaption{
  color:rgba(255,255,255,.85);
  font-size:15px; text-align:center;
}
.lightbox__close{
  position:absolute; top:18px; right:22px;
  width:44px; height:44px;
  background:none; border:0; color:#fff;
  font-size:34px; line-height:1; cursor:pointer;
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px;
  background:rgba(255,255,255,.1); border:0; border-radius:50%;
  color:#fff; font-size:30px; line-height:1; cursor:pointer;
  transition:background .2s;
}
.lightbox__nav:hover{ background:rgba(255,255,255,.25); }
.lightbox__nav--prev{ left:16px; }
.lightbox__nav--next{ right:16px; }

body.no-scroll{ overflow:hidden; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .bio__inner{ grid-template-columns:1fr; gap:32px; }
  .bio__photo{ max-width:420px; }
  .contacts__inner{ grid-template-columns:1fr; gap:48px; }
  .section-title{ font-size:32px; margin-bottom:32px; }
  .bio, .news, .contacts{ padding-top:64px; padding-bottom:64px; }
  .gallery{ padding-bottom:64px; }
}

@media (max-width: 760px){
  .nav__toggle{ display:flex; }
  .nav__right{ gap:12px; }
  .langpicker__btn{ padding:5px 5px; font-size:10px; }
  .nav__menu--simple a{ font-size:11px; }

  .nav__menu:not(.nav__menu--simple){
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(0,0,0,.97);
    padding:8px var(--gutter) 20px;
    transform:translateY(-120%);
    transition:transform .3s ease;
  }
  .nav__menu.is-open{ transform:translateY(0); }
  .nav__menu:not(.nav__menu--simple) a{
    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
    font-size:13px;
  }
  .nav__menu a:hover,
  .nav__menu a.is-active{ border-bottom-color:rgba(255,255,255,.12); opacity:.65; }

  .hero{ min-height:520px; }
  .slider__arrow{ display:none; }
  .lightbox{ padding:60px 12px; }
  .lightbox__nav{ width:42px; height:42px; font-size:24px; }
  .footer__inner{ flex-direction:column; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* =========================================================
   PAGINE INTERNE — galleria, collezioni, mostre, attivita'
   Aggiunte alla ricostruzione multipagina (settembre 2026).
   ========================================================= */

.pagina{ padding:calc(var(--nav-h) + 60px) var(--gutter) 90px; }
.pagina--stretta{ max-width:820px; margin:0 auto; }

.pagina__titolo{
  font-size:34px; font-weight:300; letter-spacing:.02em;
  margin:0 0 10px;
}
.pagina__sub{
  color:var(--testo-soft); font-size:18px; font-weight:300;
  margin:0 0 30px; max-width:760px;
}
.pagina__citazione{
  margin:0 0 26px; padding-left:18px; border-left:2px solid var(--bordo);
  color:var(--testo-soft); font-style:italic;
}
.pagina__testo{ max-width:760px; }
.pagina__testo p{ color:var(--testo-soft); line-height:1.75; margin:0 0 16px; }
.pagina__lead{ color:var(--testo-soft); max-width:700px; margin:0 auto 46px; text-align:center; }

.errore-dati{ padding:20px 0; color:#b00; }

/* ---------- indice delle collezioni ---------- */
/* le quattro collezioni stanno su una sola riga */
.collezioni-griglia{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:26px;
  max-width:1400px; margin:0 auto;
}
.collezione-card{
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
}
.collezione-card__img{
  aspect-ratio:4/3; overflow:hidden; background:var(--grigio-bg);
}
.collezione-card__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.collezione-card:hover .collezione-card__img img{ transform:scale(1.04); }
.collezione-card__testo{ padding:16px 2px 0; }
.collezione-card__testo h3{
  margin:0 0 6px; font-size:21px; font-weight:400; letter-spacing:.01em;
}
.collezione-card__sub{ margin:0 0 6px; color:var(--testo-soft); font-size:15px; line-height:1.5; }
.collezione-card__conta{
  margin:0; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#9a9a9a;
}

/* ---------- griglia delle opere di una collezione ---------- */
.opere-griglia{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:34px 26px;
  max-width:1200px; margin:44px auto 0;
}
.opere-griglia .slide{ flex:none !important; width:auto; }
.opere-griglia .slide__imgwrap{ aspect-ratio:1/1; }

/* segnalino "4 foto" sulle opere che ne hanno piu' di una */
.slide__imgwrap{ position:relative; }
.slide__conta{
  position:absolute; right:10px; bottom:10px;
  background:rgba(0,0,0,.62); color:#fff;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:2px; pointer-events:none;
}

.collezione-nota{
  max-width:760px; margin:44px auto 0; padding-top:22px;
  border-top:1px solid var(--bordo);
  color:var(--testo-soft); font-size:15px; line-height:1.7;
}
.collezione-nota:empty{ display:none; }

.torna{
  display:block; max-width:1200px; margin:54px auto 0;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--testo-soft); text-decoration:none;
}
.torna:hover{ color:#000; }

/* ---------- elenco delle mostre ---------- */
.mostre{ list-style:none; margin:26px 0 0; padding:0; max-width:760px; }
.mostra{
  display:flex; gap:22px; padding:16px 0;
  border-bottom:1px solid var(--bordo);
}
.mostra__data{
  flex:0 0 150px; color:#9a9a9a;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding-top:3px;
}
.mostra__testo{ display:flex; flex-direction:column; gap:3px; }
.mostra__testo b{ font-weight:400; }
.mostra__luogo{ color:var(--testo-soft); font-size:15px; }

/* ---------- pagina attivita' (notizie per esteso) ---------- */
.news__grid[data-completo="si"]{ grid-template-columns:1fr; max-width:820px; margin-inline:auto; gap:60px; }
.news-item--completo .news-item__thumb{ aspect-ratio:16/9; }
.news-item--completo .news-item__text p{
  color:var(--testo-soft); line-height:1.75; margin:0 0 14px;
}

/* ---------- testo curatoriale a blocchi, ognuno con la sua immagine ---------- */
.blocchi{ max-width:1200px; margin:10px auto 0; }
.blocco{
  display:grid; grid-template-columns:1fr 1fr; gap:44px;
  align-items:center; margin:0 0 56px;
}
.blocco--invertito .blocco__img{ order:2; }
.blocco__img img{ width:100%; height:auto; }
.blocco__testo p{ color:var(--testo-soft); line-height:1.75; margin:0 0 16px; }
.blocco__testo p:last-child{ margin-bottom:0; }

@media (max-width: 1200px){
  .collezioni-griglia{ grid-template-columns:repeat(2, 1fr); gap:34px; max-width:1100px; }
}
@media (max-width: 1000px){
  .opere-griglia{ grid-template-columns:repeat(2, 1fr); }
  .blocco{ gap:30px; margin-bottom:44px; }
}
@media (max-width: 760px){
  .pagina{ padding-top:calc(var(--nav-h) + 34px); }
  .pagina__titolo{ font-size:27px; }
  .pagina__sub{ font-size:16px; }
  .collezioni-griglia{ grid-template-columns:1fr; gap:30px; }
  .blocco{ grid-template-columns:1fr; gap:22px; }
  .blocco--invertito .blocco__img{ order:0; }
  .opere-griglia{ grid-template-columns:1fr; gap:26px; }
  .mostra{ flex-direction:column; gap:4px; }
  .mostra__data{ flex:none; }
}

.bio__photo--pagina{ max-width:300px; margin:0 0 30px; }
.bio__photo--pagina img{ width:100%; height:auto; }
.torna--inline{ margin:18px 0 0; }