/* Ser y desaparecer — five editorial groups based on Chiara's supplied sketch.
   The right boundary matches every work's text column; the left boundary stays
   safely past the fixed lateral menu. Technical captions remain below each set. */
/* Match Geopoiesis: the sidebar-to-image inset equals the shared right
   text/image safe margin. Scrollbar gutter is excluded on both sides. */
.ser-project {
  --ser-right:var(--artwork-right-safe,calc(var(--gutter) + 4.25vw));
  --ser-left-base:clamp(46px,5.25vw,82px);
  --ser-edge-shift:calc(var(--ser-right) - var(--ser-left-base));
}
.ser-project .ser-stage {
  padding:0 var(--ser-right) clamp(100px,9vw,145px) var(--ser-left-base);
}
.ser-project .ser-intro { position:relative; min-height:clamp(295px,24vw,360px); }
.ser-project .ser-intro h1,
.ser-project .ser-description {
  position:absolute; right:0; width:min(32%,370px);
  margin:0; font-family:"Times Draft","Times New Roman",serif;
}
.ser-project .ser-intro h1 {
  top:clamp(64px,5.6vw,92px);
  text-align:right; font-size:clamp(12px,1.04vw,17px); line-height:1.2;
}
.ser-project .ser-description {
  top:clamp(109px,9.3vw,147px);
  font-size:clamp(11px,.94vw,16px); line-height:1.3;
  text-align:justify; text-align-last:left; hyphens:none;
}
.ser-project .ser-description p {margin:0;}
.ser-project .ser-gallery { width:100%; display:flex; flex-direction:column; align-items:stretch; gap:clamp(112px,12vw,180px); }
.ser-project .ser-group {margin:0;min-width:0;max-width:100%;}
.ser-project .ser-photos {display:grid;min-width:0;column-gap:clamp(13px,1.8vw,30px);}
.ser-project .ser-photo {
  display:block; padding:0;min-width:0;width:100%;height:100%;background:#fff;
  cursor:zoom-in;
}
.ser-project .ser-photo img { display:block; width:100%;height:auto;object-fit:contain; }
.ser-project .ser-photo:focus-visible {outline:1px solid var(--ink);outline-offset:4px;}
.ser-project .ser-ficha {
  color:var(--ink); font:400 clamp(10px,.78vw,13px)/1.35 "Times Draft","Times New Roman",serif;
  text-align:center; margin:12px auto 0; max-width:100%;
}
.ser-project .ser-ficha span {display:block;}
.ser-project .ser-ficha em {font-style:italic;}
.ser-project .ser-group--lead { width:calc(100% - var(--ser-edge-shift)); margin-left:auto; }
.ser-project .ser-group--lead .ser-photos {grid-template-columns:repeat(2,minmax(0,1fr));}
.ser-project .ser-group--lead .ser-ficha {width:47%;margin-right:0;margin-left:auto;}
.ser-project .ser-group--wide {width:57.6%;margin-left:var(--ser-edge-shift);}
.ser-project .ser-group--wide .ser-photos {grid-template-columns:minmax(0,1fr);}
.ser-project .ser-group--wide .ser-ficha {max-width:80%;}
.ser-project .ser-group--single {width:25.5%;margin-left:var(--ser-edge-shift);}
.ser-project .ser-group--single .ser-photos {grid-template-columns:minmax(0,1fr);}
.ser-project .ser-group--single .ser-ficha {max-width:100%;}
.ser-project .ser-group--pair {
  width:54.6%;margin-left:auto;
}
.ser-project .ser-group--pair .ser-photos {grid-template-columns:repeat(2,minmax(0,1fr));}
/* Supplied JPEG crops already match the two diptych frames exactly.
   Preserve their complete compositions with no further CSS cropping. */
.ser-project .ser-group--lead .ser-photo,
.ser-project .ser-group--pair .ser-photo {
  position:relative; display:block; height:auto; overflow:hidden;
}
.ser-project .ser-group--lead .ser-photo { aspect-ratio:2048 / 1348; }
.ser-project .ser-group--pair .ser-photo { aspect-ratio:1339 / 2048; }
.ser-project .ser-group--lead .ser-photo img,
.ser-project .ser-group--pair .ser-photo img {
  width:100%; height:100%; aspect-ratio:auto; object-fit:contain;
  object-position:center center;
}
.ser-project .ser-group--pair .ser-ficha {max-width:78%;}
.ser-project .ser-group--trio {width:calc(100% - var(--ser-edge-shift));margin-left:auto;}
.ser-project .ser-group--trio .ser-photos {grid-template-columns:repeat(3,minmax(0,1fr));}
.ser-project .ser-group--trio .ser-ficha {max-width:65%;}
@media (max-width: 1024px), (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .ser-project { --ser-right:22px; --ser-left-base:22px; }
  .ser-project .ser-stage {padding:0 22px 72px;}
  .ser-project .ser-intro {min-height:0;padding:42px 0 65px;}
  .ser-project .ser-intro h1,.ser-project .ser-description {position:static;width:min(100%,440px);margin-left:auto;}
  .ser-project .ser-intro h1 {font-size:16px;margin-bottom:22px;}
  .ser-project .ser-description {font-size:14px;line-height:1.4;}
  .ser-project .ser-photos {column-gap:12px;}
  .ser-project .ser-gallery {gap:75px;}
  .ser-project .ser-group--lead {width:100%;}
  .ser-project .ser-group--lead .ser-ficha {width:100%;max-width:250px;margin-right:0;}
  .ser-project .ser-group--wide {width:84%;}
  .ser-project .ser-group--single {width:48%;}
  .ser-project .ser-group--pair {width:92%;}
  .ser-project .ser-group--trio {width:100%;}
  .ser-project .ser-ficha {font-size:11px;line-height:1.35;margin-top:12px;}
  .ser-project .ser-group--pair .ser-ficha,
  .ser-project .ser-group--trio .ser-ficha {max-width:95%;}
}