/* Spacious images, a minimal heading and square corners throughout. */
.portfolio-page .site-header { background:#000; box-shadow:none; }
.portfolio-page .site-header::after { display:none; }
.portfolio-main { padding:0; }
.portfolio-heading { padding:clamp(45px,6vw,90px) var(--edge) clamp(35px,4vw,60px); }
.portfolio-heading h1 { margin:0; color:#e0eeee; font:500 clamp(54px,7.5vw,116px)/1.04 var(--body); letter-spacing:-.075em; }
.portfolio-index { padding:0 20px 60px; }
.portfolio-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-flow:row; grid-auto-rows:clamp(320px,38vw,570px); gap:8px; }
.portfolio-card { min-width:0; grid-column:span 2; }
.portfolio-card--wide { grid-column:span 4; }
.portfolio-card-cover { display:block; position:relative; width:100%; height:100%; min-width:0; overflow:hidden; border-radius:0; background:#131815; }
.portfolio-card-cover > img,.portfolio-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.portfolio-preview { opacity:0; pointer-events:none; transition:opacity .55s ease,transform .8s cubic-bezier(.22,1,.36,1); }
.portfolio-card.is-playing .portfolio-preview { opacity:1; }
.portfolio-card-cover::after { content:''; position:absolute; inset:55% 0 0; z-index:1; background:linear-gradient(transparent,#0009); pointer-events:none; }
.portfolio-card-label { position:absolute; left:clamp(18px,2.1vw,34px); right:18px; bottom:clamp(20px,2.1vw,34px); z-index:2; color:#f0f5f1; pointer-events:none; }
.portfolio-card-label h2 { margin:0; font:500 clamp(20px,1.9vw,31px)/1.15 var(--body); letter-spacing:-.04em; text-wrap:balance; text-shadow:0 1px 8px #0007; }
.portfolio-art { position:absolute; inset:0; display:flex; align-items:center; padding:10%; background:#17231f; color:#7fa294; }
.portfolio-art svg { width:100%; height:auto; opacity:.8; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .portfolio-card-cover:hover > img,.portfolio-card-cover:hover .portfolio-preview { transform:scale(1.035); }
}
@media(max-width:1000px) {
 .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(300px,45vw,440px); }
 .portfolio-card,.portfolio-card--wide { grid-column:span 1; }
 .portfolio-card:nth-child(5n + 1) { grid-column:span 2; }
 .portfolio-card-label h2 { font-size:clamp(22px,3vw,31px); }
}
@media(max-width:540px) {
 .portfolio-heading { padding:40px 20px 30px; }
 .portfolio-heading h1 { font-size:64px; }
 .portfolio-index { padding:0 12px 40px; }
 .portfolio-grid { grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:8px; }
 .portfolio-card,.portfolio-card--wide,.portfolio-card:nth-child(5n + 1) { grid-column:1; aspect-ratio:4/3; }
 .portfolio-card--tall { aspect-ratio:4/5; }
 .portfolio-card-label { left:20px; bottom:22px; }
 .portfolio-card-label h2 { font-size:26px; }
}
@media(prefers-reduced-motion:reduce) {
 .portfolio-card-cover > img,.portfolio-preview { transition:none; }
}