/* Portfolio filters */
.portfolio-story{padding:clamp(52px,6vw,78px) 0 clamp(72px,8vw,104px)}
.portfolio-filters{display:flex;gap:8px;overflow-x:auto;padding:0 0 18px;margin:0 0 26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.portfolio-filters::-webkit-scrollbar{display:none}
.portfolio-filter{flex:0 0 auto;min-height:42px;padding:0 15px;border:1px solid var(--line);background:transparent;color:var(--ink);font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.portfolio-filter:hover,.portfolio-filter.active{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.portfolio-item[hidden]{display:none!important}
.portfolio-item img[role="button"]{cursor:zoom-in}

/* Stable masonry portfolio
   Explicit columns are built by portfolio-filters.js instead of CSS columns.
   This avoids the brief right-column repaint seen in mobile Safari. */
.portfolio-editorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;opacity:1;transform:none;transition:opacity .15s ease}
.js .portfolio-editorial-grid:not(.is-ready){visibility:hidden}
.js .portfolio-editorial-grid.is-ready{visibility:visible}
.portfolio-editorial-grid.is-changing{opacity:.28}
.portfolio-column{display:flex;min-width:0;flex-direction:column;gap:16px;align-self:start}
.portfolio-item{display:block;width:100%;margin:0;overflow:hidden;background:var(--cream)}
.portfolio-item img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:cover;transition:transform .45s ease}
.portfolio-item:hover img{transform:scale(1.015)}
.portfolio-item figcaption{padding:10px 0 0;font-family:var(--serif);font-size:1.15rem;font-style:italic;background:var(--ivory)}
.portfolio-more-wrap{display:flex;justify-content:center;padding-top:30px}
.portfolio-more[hidden]{display:none!important}
.portfolio-more{min-width:148px}

/* Homepage portfolio loop */
.home-portfolio-carousel{overflow:hidden;margin-top:42px;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.home-portfolio-track{display:flex;width:max-content;will-change:transform;animation:homePortfolioLoop var(--home-carousel-duration,38s) linear infinite}
.home-portfolio-group{display:flex;gap:14px;flex:none;padding-right:14px}
.home-portfolio-group figure{width:clamp(220px,25vw,330px);aspect-ratio:4/5;flex:none;margin:0;overflow:hidden;background:#312c29}
.home-portfolio-group img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.home-portfolio-group figure:hover img{transform:scale(1.018)}
.home-portfolio-carousel:hover .home-portfolio-track{animation-play-state:paused}
@keyframes homePortfolioLoop{to{transform:translateX(-50%)}}

/* Full-screen photo viewer */
.gallery-lightbox{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:calc(58px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));background:rgba(18,16,14,.95);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gallery-lightbox.open{display:flex}
.gallery-lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:min(1100px,100%);max-height:100%;gap:12px}
.gallery-lightbox img{width:auto;max-width:100%;max-height:calc(100dvh - 150px);object-fit:contain}
.gallery-lightbox figcaption{font-family:var(--serif);font-size:1.05rem;font-style:italic;text-align:center;color:rgba(255,255,255,.78)}
.gallery-lightbox-close,.gallery-lightbox-nav{position:fixed;border:1px solid rgba(255,255,255,.18);background:rgba(248,244,237,.08);color:#fff;display:grid;place-items:center;cursor:pointer}
.gallery-lightbox-close{top:calc(12px + env(safe-area-inset-top));right:14px;width:46px;height:46px;border-radius:50%;font-size:1.8rem}
.gallery-lightbox-nav{top:50%;width:46px;height:60px;transform:translateY(-50%);font-size:2rem}
.gallery-lightbox-nav.prev{left:12px}
.gallery-lightbox-nav.next{right:12px}

@media(max-width:850px){
  .portfolio-editorial-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .portfolio-column{gap:12px}
  .home-portfolio-carousel{margin-top:34px}
  .home-portfolio-group{gap:11px;padding-right:11px}
  .home-portfolio-group figure{width:min(62vw,290px)}
}

@media(max-width:650px){
  .portfolio-story{padding:42px 0 68px}
  .portfolio-filters{margin-inline:-14px;padding-inline:14px;padding-bottom:14px;margin-bottom:18px}
  .portfolio-filter{min-height:40px;padding:0 13px;font-size:.62rem}
  .portfolio-editorial-grid{gap:9px}
  .portfolio-column{gap:9px}
  .portfolio-more-wrap{padding-top:24px}
  .home-portfolio-carousel{margin-inline:-14px;padding-inline:14px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .home-portfolio-group figure{width:67vw;max-width:270px}
  .gallery-lightbox{padding-inline:8px}
  .gallery-lightbox-nav{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));width:52px;height:46px}
  .gallery-lightbox-nav.prev{left:calc(50% - 60px)}
  .gallery-lightbox-nav.next{right:calc(50% - 60px)}
  .gallery-lightbox img{max-height:calc(100dvh - 168px)}
}

@media(prefers-reduced-motion:reduce){
  .portfolio-editorial-grid{transition:none}
  .home-portfolio-track{animation:none}
  .home-portfolio-carousel{overflow-x:auto;mask-image:none;-webkit-mask-image:none;scrollbar-width:none}
  .home-portfolio-carousel::-webkit-scrollbar{display:none}
}