/* Portfolio layout: consistent previews, complete artwork and clear captions. */
.portfolio-grid{
  width:100%;max-width:1440px;margin:0 auto;padding:32px clamp(20px,4vw,60px) 64px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;align-items:start;
}
.portfolio-grid .portfolio-item{
  grid-column:auto;min-width:0;margin:0;overflow:visible;
}
.portfolio-grid .portfolio-item img,
.portfolio-grid .portfolio-wide img,
.portfolio-grid .portfolio-tall img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  padding:0;background:#fff;transform:none;transition:none;box-sizing:border-box;
}
.portfolio-grid .portfolio-item:hover img{transform:none}
.portfolio-grid .portfolio-item figcaption{
  display:block;padding:16px 0 0;opacity:1;font:inherit;
}
.portfolio-grid .portfolio-card-link{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:7px;min-height:60px;color:#f1f4ef;line-height:1.4;
}
.portfolio-grid .portfolio-card-link span:first-child{font-size:15px;font-weight:700;letter-spacing:.045em}
.portfolio-grid .portfolio-card-link span:last-child{font-size:10px;line-height:1.6;letter-spacing:.08em;color:#a7b2ab;text-align:left;overflow-wrap:anywhere}
.graphics-choices{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.graphics-choices .browse-image{aspect-ratio:1/1;overflow:hidden;background:#fff}
.graphics-choices .browse-image img{width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;padding:0;background:#fff;box-sizing:border-box;transform:none;transition:none}
.graphics-choices .browse-card:hover img{transform:none}
/* Keep transparent black artwork readable when opened as a project, too. */
body.project-detail-page .project-gallery img{background:#fff;object-fit:contain}
@media(min-width:601px) and (max-width:1000px){
  .portfolio-grid,.graphics-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .portfolio-grid{grid-template-columns:minmax(0,1fr);padding:22px 20px 48px;gap:30px}
  .portfolio-grid .portfolio-item{width:100%;max-width:480px;justify-self:center}
  .portfolio-grid .portfolio-item img{padding:0}
  .portfolio-grid .portfolio-card-link{min-height:52px;gap:6px}
  .portfolio-grid .portfolio-card-link span:first-child{font-size:15px}
  .portfolio-grid .portfolio-card-link span:last-child{font-size:11px}
  .graphics-choices{grid-template-columns:minmax(0,1fr);gap:24px}
  .graphics-choices .browse-card{max-width:480px;width:100%;justify-self:center}
  body.project-detail-page .project-gallery img{max-height:72vh;max-height:72svh;object-fit:contain}
}

/* White is confined to the source image canvas; the frame stays transparent. */
.artwork-frame{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:transparent;overflow:hidden}
.portfolio-grid .portfolio-item .artwork-frame img,
.graphics-choices .browse-image .artwork-frame img,
body.project-detail-page .project-gallery .artwork-frame img{
 width:var(--artwork-width,100%);height:auto;max-width:100%;max-height:none;aspect-ratio:auto;
 padding:0;border:0;border-radius:0;background:#fff;object-fit:contain;transform:none;
}
.graphics-choices .browse-image{background:transparent}
body.project-detail-page .project-gallery{
 width:100%;max-width:1440px;margin:0 auto;
 padding:32px clamp(20px,4vw,60px) 64px;
 grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;align-items:start;
}
body.project-detail-page .project-gallery figure:first-child{grid-column:auto}
body.project-detail-page .project-gallery figure{min-width:0;overflow:visible}
body.project-detail-page .project-gallery figcaption{padding-top:16px;line-height:1.6;color:#a7b2ab}
@media(min-width:601px) and (max-width:1000px){
 body.project-detail-page .project-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 body.project-detail-page .project-gallery{grid-template-columns:minmax(0,1fr);padding:22px 20px 48px;gap:30px}
 body.project-detail-page .project-gallery figure{width:100%;max-width:480px;justify-self:center}
}