/* Bombyx keeps archival photographs together as one carousel slide. */
#detail .bombyx-carousel .bombyx-board{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;gap:clamp(12px,2vw,28px);
  width:min(100%,900px);height:100%;max-height:calc(78svh - 36px);
}
#detail .bombyx-carousel .bombyx-board-4{
  grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,1400px);
}
#detail .bombyx-carousel .bombyx-board-3{
  grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,1100px);
}
#detail .bombyx-carousel .bombyx-board-cell{min-width:0;min-height:0;display:flex;align-items:center}
#detail .bombyx-carousel .bombyx-board .bombyx-board-cell img{
  display:block;width:100%;height:100%;max-height:100%;max-width:100%;object-fit:contain;
}
#detail .project-heading .project-date-emphasis{font-weight:700;color:#242424}
#detail .project-milestone{display:block;margin-top:5px;font-size:11px;line-height:1.5;color:#77716d}
#detail .bombyx-carousel .carousel-slide figcaption{color:#77716d;font-size:11px}
@media(max-width:700px){
  #detail .bombyx-carousel .bombyx-board{gap:10px;max-height:100%;width:100%;height:100%}
  #detail .bombyx-carousel .bombyx-board-4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #detail .bombyx-carousel .bombyx-board-3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  #detail .bombyx-carousel .bombyx-board-3 .bombyx-board-cell:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
  #detail .bombyx-carousel .carousel-slide.bombyx-archive{padding-bottom:28px}
  #detail .bombyx-carousel .carousel-slide figcaption{font-size:10px}
}
#detail .bombyx-carousel.phone-vertical-gallery .bombyx-board{
  width:min(100%,760px);height:auto;max-height:none;
}
#detail .bombyx-carousel.phone-vertical-gallery .bombyx-board .bombyx-board-cell img{width:100%;height:auto;max-height:none}

/* Selected final portraits share a frame only in the desktop gallery. */
#detail .bombyx-carousel .bombyx-final-pair .bombyx-board{
  width:min(100%,calc(104svh + clamp(12px,2vw,28px)));max-height:100%;
}

/* Both covers keep a portrait frame. Explicit image bounds also prevent the
   phone's natural-height image rule from clipping away the house. */
#projects:not(.compact-projects) .grid .project.agrotospito,
#projects:not(.compact-projects) .grid .project.bombyx{height:auto;aspect-ratio:3/4;overflow:hidden}
#projects:not(.compact-projects) .grid .project.agrotospito .photo,
#projects:not(.compact-projects) .grid .project.bombyx .photo{
  position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
}
#projects:not(.compact-projects) .grid .project.agrotospito .photo img,
#projects:not(.compact-projects) .grid .project.bombyx .photo img{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  max-width:100%;max-height:none;object-fit:cover;
}
#projects .grid .project.agrotospito .photo img{object-position:50% 65%}
#projects .grid .project.bombyx .photo img{object-position:50% 50%}
/* Landscape phones share the same final pair as tablet and desktop. */
@media (pointer:fine), (min-width:701px) and (min-height:501px), (min-width:1001px), (orientation:landscape) and (max-height:500px) and (max-width:1000px) and (pointer:coarse){
  #projects:not(.compact-projects) .grid .project.agrotospito{grid-column:1/span 6}
  #projects:not(.compact-projects) .grid .project.bombyx{grid-column:7/span 6}
}

/* More white space around archival boards, preserving their composition. */
#detail .bombyx-carousel .bombyx-archive .bombyx-board{transform:scale(.78);transform-origin:center center}
@media(max-width:700px){
  #detail .bombyx-carousel .bombyx-archive .bombyx-board{transform:scale(.9)}
}


#detail .bombyx-carousel .bombyx-archive img{filter:grayscale(1)}