/* Continuous left-to-right photographic collage. */
.portfolio-home .hero{background:#18211e;isolation:isolate}
.cover-flow{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.cover-track{display:flex;width:max-content;height:100%;animation:cover-drift 95s linear infinite;will-change:transform}
.cover-group{flex:none;display:grid;grid-template-columns:repeat(7,270px);grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;padding:30px 28px;gap:8px 0;width:1946px;height:100%}
.cover-frame{position:relative;width:min(310px,calc(var(--ratio) * 330px));height:auto;overflow:hidden;transform:translateY(var(--offset)) rotate(var(--tilt));box-shadow:0 12px 30px #0005;aspect-ratio:var(--ratio)}
.cover-frame:nth-child(3n){z-index:1}
.cover-frame{background-repeat:no-repeat}
.cover-frame img{position:absolute;display:block;opacity:0;object-fit:fill;max-width:none}
.portfolio-home .desk-grid{z-index:1;background:linear-gradient(0deg,#08100d99,transparent 90%),radial-gradient(ellipse at 50% 62%,#08100db3, #08100d33 75%)}
.portfolio-home .hero-copy{z-index:3}
.portfolio-home .location-stamp{display:none}
@keyframes cover-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(max-width:800px){.cover-group{grid-template-columns:repeat(7,210px);width:1518px;padding:25px 24px}.cover-frame{width:min(250px,calc(var(--ratio) * 310px))}.cover-track{animation-duration:110s}}
@media(prefers-reduced-motion:reduce){.cover-track{animation:none;transform:translateX(-15%)}}

/* Dense overlapping frames, with photography beneath every gap. */
.portfolio-home .hero{height:clamp(400px,58.67svh,487px);min-height:0;background:#baa88d}
.cover-group{grid-template-columns:repeat(21,180px);width:3780px;padding:0;gap:0;align-items:center}
.cover-frame{height:380px;width:calc(var(--ratio) * 380px);border-radius:12px;box-shadow:0 5px 15px #0002}
.portfolio-home .desk-grid{background:linear-gradient(0deg,#07100d42,transparent 85%),radial-gradient(ellipse at 50% 65%,#07100d66,transparent 75%)}
.portfolio-home .hero-copy{top:61%;width:min(570px,62vw)}
.portfolio-home .hero h1{font-size:clamp(3.4rem,5.7vw,5.2rem);margin:.08em 0 .16em}
.portfolio-home .hero .kicker{margin-bottom:.55rem;font-size:.68rem}
.portfolio-home .hero .intro{font-size:.9rem;line-height:1.35;margin-bottom:.8rem}
.portfolio-home .hero .pill{padding:.8rem 1.2rem}
@media(max-width:800px){
 .portfolio-home .hero{height:427px;min-height:0}
 .cover-group{grid-template-columns:repeat(21,160px);width:3360px;padding:0}
 .cover-frame{height:340px;width:calc(var(--ratio) * 340px)}
 .portfolio-home .hero-copy{top:60%;width:90%}
 .portfolio-home .hero h1{font-size:3.35rem}
 .portfolio-home .hero .intro{font-size:.83rem;max-width:350px}
 .portfolio-home .hero-secondary-link{font-size:.8rem}
}