/* A continuous gallery, with small project labels inside each frame. */
.portfolio-main { padding-top: 0; }
.portfolio-index { padding: 12px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.portfolio-card { min-width: 0; }
.portfolio-card-cover { display: block; position: relative; aspect-ratio: 1.6; overflow: hidden; background: #111; }
.portfolio-card-cover > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.portfolio-card-cover:hover > img { transform: scale(1.035); }
.portfolio-card-cover::after { content: ''; position: absolute; inset: 35% 0 0; z-index: 1; background: linear-gradient(transparent, #0002 45%, #000c); pointer-events: none; }
.portfolio-card-label { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; min-width: 0; color: #d7dfdf; }
.portfolio-card-label h2 { margin: 0; min-width: 0; font: 400 13px/1.4 var(--body); letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 4px #0009; }
.portfolio-card-tags { color: #dce6e6; font-size: 10px; letter-spacing: .025em; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.portfolio-card-tags span:not(:first-child)::before { content: '/'; margin-right: 12px; color: #5b6565; }
.portfolio-art { height: 100%; position: relative; isolation: isolate; overflow: hidden; background: #182a24; color: #a9d4bf; }
.portfolio-art::after { content: ''; position: absolute; width: 80%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; right: -20%; top: -35%; opacity: .2; box-shadow: 0 0 0 30px #ffffff08, 0 0 0 60px #ffffff05; }
.portfolio-art--events, .portfolio-art--coverage { background: #302018; color: #ffb17b; }
.portfolio-art--radio { background: #75401f; color: #ffb582; }
.portfolio-art--radio::after { border-radius: 45%; transform: rotate(-35deg); }
.portfolio-art--printing, .portfolio-art--branding { background: #283b33; color: #bacab0; }
.portfolio-art--documentaries, .portfolio-art--tvc { background: #202634; color: #b9cbed; }
.portfolio-art--websites { background: #171b1d; color: #e0eeee; }
.portfolio-empty { padding: 72px 12px; text-align: center; color: var(--muted); }
.portfolio-footer { border-top: 1px solid var(--line); padding: 26px var(--edge); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; }
.portfolio-footer nav { display: flex; gap: 20px; }
.portfolio-footer a:hover { color: var(--orange); }
@media (max-width: 760px) {
    .portfolio-index { padding: 8px; }
    .portfolio-grid { gap: 8px; }
    .portfolio-card-label { left: 9px; right: 9px; bottom: 9px; gap: 6px; }
    .portfolio-card-label h2 { font-size: 11px; }
}
@media (max-width: 599px) { .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .portfolio-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .portfolio-card-cover > img { transition: none; } }