/* Lm' Associated Architects — stylesheet condiviso
   Palette ispirata alla pietra e ai boschi dell'Alto Adige:
   carta calda, inchiostro profondo, muschio e legno bruciato. */

:root{
  --paper: #f5f0e4;
  --paper-deep: #ece4d2;
  --ink: #211d17;
  --ink-soft: #665f4f;
  --line: #d9cfb8;
  --moss: #4a5a40;
  --moss-deep: #37432f;
  --clay: #8a5a3a;
  --sand: #cbb996;
  --red: #b3261e;
  --brand: #8d271d;
  --max: 1180px;
  --header-h: 4.8rem;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; scrollbar-gutter: stable; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

::selection{ background: var(--moss); color: var(--paper); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--moss);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ---------- layout shell ---------- */

.shell{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ---------- header (logo + menu) ---------- */

.skip-link{
  position: fixed;
  top: -3.5rem;
  left: 1rem;
  z-index: 1200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.2rem;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
  transition: top 0.15s ease;
}
.skip-link:focus{
  top: 1rem;
}
#main-content{
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  background: var(--paper);
}
/* Sulla home l'header resta trasparente, come in origine */
body.home-page .site-header{
  background: transparent;
}

/* Il "logo" Lm' Architettura & Design ricorre in piu' punti del sito
   (header, carrellata a schermo intero, testo della pagina La Malfa): questa
   regola condivisa ne fissa il font dell'apostrofo; colore e dimensioni
   variano invece da un contesto all'altro e sono definiti piu' sotto. */
.lm-apos{
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
}
.lm-sub{
  font-weight: 400;
  vertical-align: baseline;
}

.corner-mark{
  padding: 1.1rem 1.4rem 0.9rem 2.6rem;
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--brand);
  white-space: nowrap;
}
.corner-mark:hover{ color: var(--moss-deep); }
.corner-mark .lm-apos{
  color: var(--brand);
}
.corner-mark .lm-sub{
  font-size: 0.62em;
  color: var(--ink-soft);
  margin-left: -0.22em;
}

/* Stessa identita' del logo, riutilizzata inline dentro un paragrafo di
   testo (es. la pagina La Malfa): qui e' identico in tutto e per tutto al
   logo dell'header (stessa dimensione assoluta, colore, spaziatura) — non
   si adatta al testo circostante, e' il testo circostante che viene
   allineato alla dimensione di "Architettura & Design". */
.logo-mark{
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2rem;
  color: var(--brand);
  margin-right: 0.2em;
}
.logo-mark .lm-apos{
  color: var(--brand);
}
.logo-mark .lm-sub{
  font-size: 0.62em;
  color: var(--ink-soft);
  margin-left: -0.22em;
}

/* Stato "due righe": quando header-height.js rileva che logo e menu non
   stanno piu' sulla stessa riga, questa classe avvicina le due righe,
   allinea il menu a sinistra sotto il logo, e riduce i margini laterali/gap
   del menu, per lasciare piu' spazio al resto della pagina. */
.site-header.is-stacked{
  justify-content: flex-start;
}
.site-header.is-stacked .corner-mark{
  padding-bottom: 0.15rem;
}
.site-header.is-stacked .corner-nav{
  padding-top: 0.15rem;
  padding-right: 1.4rem;
  gap: 0.5rem 1rem;
}

.corner-nav{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 1.4rem 2.6rem;
  gap: 1rem 1.9rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.corner-nav a{
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 2px;
  transition: color .25s ease;
}
.corner-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--moss);
  transition: right .3s ease;
}
.corner-nav a:hover{ color: var(--ink); }
.corner-nav a:hover::after{ right: 0; }
.corner-nav a[aria-current="page"]{ color: var(--moss-deep); }
.corner-nav a[aria-current="page"]::after{ right: 0; background: var(--clay); }

.lang-switch{
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  margin-left: 0.4rem;
}
.lang-switch .sep{ color: var(--ink-soft); opacity: 0.5; }
.lang-switch button{
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.15rem 0.1rem;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.lang-switch .lang-current{ color: var(--ink); font-weight: 700; }
.lang-switch .lang-off{ color: var(--ink-soft); }
.lang-switch .lang-off:hover{ color: var(--ink); }
.lang-switch button:focus-visible{
  outline: 2px solid var(--moss-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- footer ---------- */

.site-footer{
  margin-top: auto;
  padding: 1rem 2.6rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-transform: uppercase;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  text-align: center;
}
.site-footer .footer-group{
  white-space: nowrap;
}
.site-footer .footer-lm{
  text-transform: none;
}
@media (max-width: 700px){
  .site-footer .footer-sep{
    display: none;
  }
}

/* ---------- home ---------- */

.home-main{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4rem;
}
/* Sulla home l'immagine resta a schermo pieno, dietro l'header trasparente,
   come in origine. Solo quando l'header e' costretto su due righe (schermo
   stretto) riserviamo lo spazio sotto di esso, per non coprire la foto. */
.site-header.is-stacked ~ .home-main{
  padding-top: calc(var(--header-h) + 1.2rem);
}

/* Sulla home la pagina resta sempre alta esattamente quanto lo schermo:
   il footer deve sempre leggersi per intero, senza dover scrollare. La
   foto riempie tutto lo spazio restante (ritagliata se serve, come uno
   sfondo), invece di determinare lei stessa l'altezza della pagina. */
body.home-page,
body.home-page .shell{
  height: 100dvh;
  overflow: hidden;
}
body.home-page .home-main{
  min-height: 0;
  overflow: hidden;
}
body.home-page .home-slideshow{
  height: 100%;
}

.full-photo{
  display: block;
  width: 100%;
  height: auto;
}

.photo-frame{
  position: relative;
  display: block;
  cursor: pointer;
}
.photo-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 22px 10px var(--paper);
}

.home-slideshow{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.home-slide{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.home-slide.is-active{
  opacity: 1;
}

.project-slideshow{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.project-slideshow:focus-visible{
  outline: 2px solid var(--moss-deep);
  outline-offset: 3px;
}
.project-slide{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  cursor: pointer;
}
.project-slide.is-active{
  opacity: 1;
}

.lightbox{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 18, 14, 0.92);
  overflow: auto;
  padding: 3rem;
  box-sizing: border-box;
  cursor: zoom-out;
  text-align: center;
}
.lightbox.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox:fullscreen{
  width: 100%;
  height: 100%;
}
.lightbox:-webkit-full-screen{
  width: 100%;
  height: 100%;
}
.lightbox:-moz-full-screen{
  width: 100%;
  height: 100%;
}
.lightbox:-ms-fullscreen{
  width: 100%;
  height: 100%;
}
.lightbox-close{
  position: fixed;
  top: 0.8rem;
  right: 1rem;
  z-index: 1001;
  width: 2.4rem;
  height: 2.4rem;
  border: none;
  background: rgba(20, 18, 14, 0.85);
  color: rgba(245, 240, 230, 0.85);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  /* Invisibile per chi naviga col mouse (si chiude gia' con Esc o
     cliccando fuori dalla foto): compare solo se un utente da tastiera
     ci arriva con Tab, cosi' resta comunque raggiungibile. */
  opacity: 0;
  pointer-events: none;
}
.lightbox-close:focus-visible{
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid rgba(245, 240, 230, 0.85);
  outline-offset: 2px;
  border-radius: 3px;
}

.lightbox-frame{
  display: inline-block;
  position: relative;
  margin: auto;
  padding: 18px;
  border: 1px solid rgba(245, 240, 230, 0.55);
}
.lightbox-slideshow{
  position: relative;
  display: block;
  margin: auto;
}
.lightbox-slide{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.lightbox-slide.is-active{
  opacity: 1;
}

.wordmark{
  text-align: center;
}

.wordmark .lm{
  display: block;
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4.5rem, 14vw, 9rem);
  line-height: 0.9;
  color: var(--ink);
}

.wordmark .rest{
  display: block;
  margin-top: 0.6rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wordmark .place{
  display: block;
  margin-top: 1.6rem;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--clay);
  letter-spacing: 0.02em;
}

/* ---------- generic page header ---------- */

.page-head{
  padding: calc(var(--header-h) + 3.2rem) 2.6rem 3rem;
  width: 100%;
}
.page-head--tight{
  padding-bottom: 1rem;
}

.page-head .eyebrow{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 0.9rem;
}

.page-head h1{
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.2rem);
  margin: 0;
  line-height: 1.05;
  max-width: 16ch;
}

.page-body{
  width: 100%;
  padding: 0 2.6rem 6rem;
  flex: 1;
}

/* ---------- prose (ufficio / jg la malfa) ---------- */

.prose{
  max-width: 62ch;
}
.prose p{
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.prose p.lede{
  font-family: 'IBM Plex Sans', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.75;
}
/* Pagina La Malfa: il resto della frase deve avere la stessa dimensione
   di "Architettura & Design" dentro il logo (0.62 x 2rem). */
body.jg-page .prose p.lede{
  font-size: 1.24rem;
}

.section-label{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 3.4rem 0 1.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

/* collaborations list */
.collab-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  max-width: 46ch;
}
.collab-list li{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}
.collab-list li span.tag{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  color: var(--ink-soft);
  align-self: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* portrait / figure block used on JG La Malfa page */
.figure-block{
  aspect-ratio: 4 / 5;
  max-width: 320px;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, var(--paper-deep) 0 2px, transparent 2px 14px),
    var(--paper);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  margin: 0 0 2.2rem;
}
.figure-block span{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* timeline (bio milestones) */
.timeline{
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.timeline li{
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.2rem;
  align-items: baseline;
}
.timeline .year{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  color: var(--clay);
}
.timeline .what{
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.55;
}

/* ---------- contatto ---------- */

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
}
@media (max-width: 780px){
  .contact-grid{ grid-template-columns: 1fr; gap: 2.6rem; }
}

.contact-info dt{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  margin-top: 1.8rem;
}
.contact-info dt:first-child{ margin-top: 0; }
.contact-info dd{
  margin: 0.35rem 0 0;
  font-size: 1.15rem;
  font-family: 'Cormorant', serif;
  font-style: italic;
  color: var(--ink);
}
.contact-info dd a:hover{ color: var(--moss-deep); }
.contact-info dd a{ font-weight: 700; }

.map-block{
  margin-top: 2.4rem;
  aspect-ratio: 16/10;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, var(--paper-deep) 0 2px, transparent 2px 16px);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}
.map-block span{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

form.contact-form{
  display: grid;
  gap: 1.5rem;
}
.field{
  display: grid;
  gap: 0.15rem;
}
.field label{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.field input, .field textarea{
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 0.1rem;
  resize: vertical;
}
.field input:focus, .field textarea:focus{
  border-bottom-color: var(--moss);
}
.contact-form button{
  justify-self: start;
  margin-top: 0.4rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--moss-deep);
  border: none;
  padding: 0.85rem 1.8rem;
  cursor: pointer;
  transition: background .2s ease;
}
.contact-form button:hover{ background: var(--moss); }
.contact-form button:disabled{ opacity: 0.6; cursor: default; }

.form-status{
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.9rem;
  min-height: 1.3em;
}
.form-status--ok{ color: var(--moss-deep); }
.form-status--error{ color: var(--red); }
.form-status--pending{ color: var(--ink-soft); }

/* ---------- progetti ---------- */

.gallery{
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
}

.gallery-stage{
  width: 100%;
}

.stage-frame{
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--line);
  background: var(--paper-deep);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage-frame img{
  width: 100%; height: auto; display: block; object-fit: contain;
}
.stage-frame .placeholder-note{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: 1rem;
}
.stage-frame::before{
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(74,90,64,0.06) 0 2px, transparent 2px 18px);
  pointer-events: none;
}

.stage-caption{
  margin-top: 1.3rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.stage-caption h2{
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.7rem;
  margin: 0;
}
.stage-caption .meta{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-align: right;
  line-height: 1.5;
}
.stage-caption .note{
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0;
}

.gallery-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 3rem;
  align-items: start;
}

.gallery-list .group{
  margin-bottom: 2.6rem;
}
.gallery-list .group-title{
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.gallery-list ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.gallery-list li{ border-bottom: 1px solid var(--line); }
.gallery-list button{
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 0.65rem 0.1rem;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--ink-soft);
  font-size: 0.96rem;
  transition: color .2s ease, padding-left .2s ease;
}
.gallery-list button .p-loc{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  color: var(--ink-soft);
  opacity: 0.75;
  white-space: nowrap;
}
.gallery-list button:hover{ color: var(--ink); padding-left: 0.35rem; }
.gallery-list li[aria-current="true"] button{
  color: var(--moss-deep);
  font-weight: 700;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.96rem;
}
.gallery-list li[aria-current="true"] button .p-loc{ color: var(--clay); opacity: 1; }

/* ---------- progetti: dettaglio + macro categorie ---------- */

.project-detail{
  margin: 0 0 3.4rem;
}
.project-detail .detail-caption{
  margin-top: 0.6rem;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
}
.project-detail h2{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0;
}
.project-detail .meta{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0;
}
.project-detail .meta::before{
  content: "\2014";
  margin-right: 0.5rem;
  color: var(--ink);
}
.project-detail .desc{
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0;
}
.project-detail .desc::before{
  content: "\2014";
  margin-right: 0.5rem;
  color: var(--ink);
}

.photo-switcher{
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 0.6rem;
}
.photo-switcher button{
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.photo-switcher button:hover{
  color: var(--ink);
}
.photo-switcher button[aria-current="true"]{
  font-weight: 700;
  color: var(--ink);
}

.lightbox-switcher{
  justify-content: center;
  margin-top: 0;
}
.lightbox-switcher button{
  color: rgba(245, 240, 230, 0.6);
}
.lightbox-switcher button:hover{
  color: rgba(245, 240, 230, 0.9);
}
.lightbox-switcher button[aria-current="true"]{
  color: #fff;
}
.lightbox-switcher .slideshow-toggle{
  margin-left: 0.4rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(245, 240, 230, 0.35);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}
.lightbox-switcher .slideshow-toggle:hover{
  color: var(--brand);
  font-weight: 800;
}

.lightbox-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 0.9rem;
}
.lightbox-brand,
.lightbox-project-name{
  flex: 0 0 auto;
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: rgba(245, 240, 230, 0.75);
  white-space: nowrap;
}
.lightbox-project-name{
  text-align: right;
  font-weight: 400;
}
.lightbox-brand .lm-apos{
  color: inherit;
}
.lightbox-brand .lm-sub{
  font-size: 0.85em;
}

/* Usata solo per un istante da JS per misurare se marchio+paline+nome
   entrerebbero tutti su una riga a piena larghezza (senza troncamenti):
   forza ogni elemento alla sua larghezza naturale cosi' un eventuale
   overflow e' reale, non nascosto da un troncamento con puntini. */
.lightbox-bar--measuring{
  flex-wrap: nowrap !important;
}
.lightbox-bar--measuring > *{
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Su schermi piccoli (telefono/tablet), in verticale o ruotati in
   orizzontale, niente rettangolo attorno alla foto: l'immagine occupa
   tutto lo spazio disponibile, a bordo pagina. La barra (marchio, numeri,
   titolo) si sovrappone in basso sulla foto invece di stare sotto, cosi'
   la foto puo' essere ancora piu' grande. Il frame si restringe alla
   dimensione reale della foto (niente width:100%) cosi' la barra, che
   e' larga quanto il frame, si allinea esattamente ai bordi della foto. */
@media (max-width: 640px), (max-height: 640px) and (orientation: landscape){
  .lightbox{
    padding: 0.8rem 0;
  }
  .lightbox-frame{
    padding: 0;
    border: none;
  }
  .lightbox-bar{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 1.6rem 0 0.5rem;
    background: linear-gradient(to top, rgba(20, 17, 13, 0.72), rgba(20, 17, 13, 0));
    pointer-events: none;
  }
  .lightbox-switcher button{
    pointer-events: auto;
  }
}

/* Verticale: la larghezza e' la misura stretta, l'altezza no. Si prova a
   tenere marchio, paline (incluso STOP/PLAY) e nome progetto su un'unica
   riga in fondo alla foto; se non c'entrano (classe --stacked, decisa da
   JS in base alla larghezza reale), le paline vanno su una riga sopra,
   mentre marchio e nome restano insieme sulla riga in fondo, allineati
   rispettivamente al bordo sinistro e destro della foto. */
@media (max-width: 640px){
  .lightbox-bar{
    flex-wrap: nowrap;
    gap: 0.6rem;
  }
  .lightbox-brand,
  .lightbox-project-name{
    font-size: 0.7rem;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lightbox-switcher{
    flex: 0 0 auto;
  }

  .lightbox-bar.lightbox-bar--stacked{
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }
  .lightbox-bar--stacked .lightbox-brand,
  .lightbox-bar--stacked .lightbox-project-name{
    flex: 1 1 auto;
    white-space: normal;
  }
  .lightbox-bar--stacked .lightbox-brand{
    text-align: left;
  }
  .lightbox-bar--stacked .lightbox-project-name{
    text-align: right;
  }
  .lightbox-bar--stacked .lightbox-switcher{
    flex-basis: 100%;
    order: -1;
    justify-content: center;
  }
}

/* Ruotato in orizzontale: qui e' l'altezza la misura stretta. Stessa
   logica del verticale (riga unica quando c'entra tutto, altrimenti
   paline sopra e marchio+nome insieme sotto), con testo piu' piccolo
   perche' lo spazio verticale e' minore. */
@media (max-height: 640px) and (orientation: landscape){
  .lightbox-bar{
    flex-wrap: nowrap;
    gap: 0.7rem;
  }
  .lightbox-brand{
    font-size: 0.66rem;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 0.6rem;
  }
  .lightbox-project-name{
    font-size: 0.66rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-right: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lightbox-switcher{
    flex: 0 0 auto;
    gap: 0.6rem;
  }

  .lightbox-bar.lightbox-bar--stacked{
    flex-wrap: wrap;
    row-gap: 0.2rem;
  }
  .lightbox-bar--stacked .lightbox-brand,
  .lightbox-bar--stacked .lightbox-project-name{
    flex: 1 1 auto;
    white-space: normal;
  }
  .lightbox-bar--stacked .lightbox-brand{
    text-align: left;
  }
  .lightbox-bar--stacked .lightbox-project-name{
    text-align: right;
  }
  .lightbox-bar--stacked .lightbox-switcher{
    flex-basis: 100%;
    order: -1;
    justify-content: center;
  }
}

body.progetti-page,
body.progetti-page .shell{
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body.progetti-page .page-body{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-body--top{
  padding-top: calc(var(--header-h) + 2.2rem);
}
body.progetti-page .page-body--top{
  padding-bottom: 2rem;
}

.progetti-grid{
  display: grid;
  grid-template-columns: 0.55fr 2.2fr 0.55fr;
  gap: 3rem;
  align-items: start;
}
body.progetti-page .progetti-grid{
  flex: 1;
  min-height: 0;
}

/* Reset del pulsante a tendina: su desktop e' visivamente identico al
   vecchio titolo semplice (icona nascosta). Va DICHIARATO PRIMA della
   media query qui sotto, che lo riattiva solo su schermi piccoli: a
   parita' di specificita' vince sempre la regola scritta piu' in basso
   nel file, quindi l'ordine qui conta. */
.dropdown-toggle{
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}
.dropdown-toggle .hamburger{
  display: none;
}




.progetti-col .macro-title{
  margin-top: 0;
  flex: 0 0 auto;
}
.progetti-col .gallery-list{
  display: block;
}
body.progetti-page .progetti-col{
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.progetti-page .progetti-col.personali,
body.progetti-page .progetti-col.collaborazione{
  margin-top: -2.4rem;
}
body.progetti-page .progetti-col.personali .gallery-list,
body.progetti-page .progetti-col.collaborazione .gallery-list{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--sand) transparent;
}
body.progetti-page .progetti-col.personali .gallery-list::-webkit-scrollbar,
body.progetti-page .progetti-col.collaborazione .gallery-list::-webkit-scrollbar{
  width: 5px;
  background: transparent;
}
body.progetti-page .progetti-col.personali .gallery-list::-webkit-scrollbar-track,
body.progetti-page .progetti-col.collaborazione .gallery-list::-webkit-scrollbar-track{
  background: transparent;
}
body.progetti-page .progetti-col.personali .gallery-list::-webkit-scrollbar-thumb,
body.progetti-page .progetti-col.collaborazione .gallery-list::-webkit-scrollbar-thumb{
  background: var(--sand);
  border-radius: 3px;
}
body.progetti-page .progetti-col.detail-col{
  overflow-y: auto;
}

@media (max-width: 980px){
  /* Sotto i 980px restiamo nel layout "a schermo fisso" (come da desktop:
     vedi body.progetti-page piu' sopra), solo impilato in verticale invece
     che in 3 colonne affiancate: cosi' la foto (fissa in alto) non scorre
     mai via, e gli elenchi a tendina usano lo spazio restante con uno
     scroll tutto loro. */
  .progetti-grid{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
  }

  /* Foto (con paline, descrizione e logo compresso): dimensione FISSA,
     non si restringe mai (flex-shrink:0), nemmeno quando si apre un
     menu a tendina sotto. L'elenco aperto usa solo lo spazio che resta:
     se e' poco, si vedranno meno progetti prima di dover scorrere, ma
     foto e titoli restano sempre interi. Il tetto massimo di altezza
     (con scroll interno di riserva) serve solo per schermi molto bassi,
     dove la foto da sola rischierebbe di superare lo spazio disponibile. */
  .progetti-col.detail-col{
    order: -1;
    flex: 0 0 auto;
    max-height: 58vh;
    max-height: 58dvh;
  }

  body.progetti-page .progetti-col{
    height: auto;
    min-height: 0;
  }

  /* "Progetti personali" e "Collaborazioni" diventano due menu a tendina:
     di norma solo il titolo (con l'icona), elenco nascosto. Quando se ne
     apre uno, prende tutto lo spazio rimasto sotto la foto (che resta
     ferma) e l'elenco scorre al suo interno. */
  body.progetti-page .progetti-col.personali,
  body.progetti-page .progetti-col.collaborazione{
    margin-top: 0;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  body.progetti-page .progetti-col.personali.is-open,
  body.progetti-page .progetti-col.collaborazione.is-open{
    flex: 1 1 auto;
  }
  body.progetti-page .progetti-col.personali .gallery-list,
  body.progetti-page .progetti-col.collaborazione .gallery-list{
    display: none;
    grid-template-columns: 1fr;
  }
  body.progetti-page .progetti-col.personali.is-open .gallery-list,
  body.progetti-page .progetti-col.collaborazione.is-open .gallery-list{
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.3rem;
  }

  /* Stessa grafica del titolo di prima: qui aggiungiamo solo, affiancata,
     un'icona "a tre righe" che indica che si apre un elenco a tendina. */
  .dropdown-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
  }
  .dropdown-toggle .hamburger{
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 13px;
    position: relative;
  }
  .dropdown-toggle .hamburger span{
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
  }
  .dropdown-toggle .hamburger span:nth-child(1){ top: 0; }
  .dropdown-toggle .hamburger span:nth-child(2){ top: 5.5px; }
  .dropdown-toggle .hamburger span:nth-child(3){ top: 11px; }
}


/* ---------- juan-gabriel-la-malfa ---------- */

.jg-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: stretch;
}
@media (max-width: 900px){
  .jg-grid{ grid-template-columns: 1fr; }
  .jg-photo{ order: -1; }
}

.jg-text-frame{
  height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  padding: 1.9rem 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
@media (max-width: 900px){
  .jg-text-frame{ height: auto; }
}

.jg-text-frame .prose,
.jg-text-frame .pull-quote{
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3.5rem;
  margin-bottom: 5rem;
}
.jg-text-frame .prose p,
.jg-text-frame .pull-quote p{
  text-align: center;
}

/* Riduce lo spazio SOLO tra i due paragrafi finali del testo */
.jg-text-frame .prose p + p {
  margin-top: -0.8rem;
}

.jg-photo{
  display: flex;
}
.jg-photo .figure-block{
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
}
.jg-portrait{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
}

.pull-quote{
  margin: 1.8rem 0 7rem;
}
.pull-quote p{
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 0.8rem;
}
.pull-quote cite{
  display: block;
  text-align: center;
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  margin-top: 2rem; /* Aumenta questo valore per distanziare ulteriormente la firma dal testo sopra */
}

.macro-section + .macro-section{
  margin-top: 3rem;
}
.macro-title{
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0 1.3rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--ink);
}

/* Impedisce trascinamento/selezione delle immagini (deterrente al salvataggio) */
img{
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}


/* Testo presente nel codice per SEO/accessibilita' ma non visibile a schermo
   (es. H1 di pagina): niente display:none, cosi' resta leggibile dai motori
   di ricerca e dagli screen reader. */
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}