/* Compact portfolio; media retains its original proportions. */
body[data-page="portfolio"] .page-main { padding-top: 24px; }
body[data-page="portfolio"] .page-hero { padding: 24px; margin-bottom: 24px; min-height: 0; }
body[data-page="portfolio"] .page-title { font-size: clamp(28px, 4vw, 44px); margin: 8px 0; }
body[data-page="portfolio"] .page-subtitle { font-size: 15px; margin-bottom: 0; }
body[data-page="portfolio"] .page-section { margin-top: 28px; margin-bottom: 28px; padding-top: 0; padding-bottom: 0; scroll-margin-top: 24px; }
body[data-page="portfolio"] .page-section > h2 { font-size: clamp(16px, 2vw, 21px); line-height: 1.4; margin: 0 0 12px; overflow-wrap: anywhere; }
.portfolio-sections { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.work-card { overflow: hidden; padding: 0; min-width: 0; border-radius: 14px; }
.work-card video, .work-card img { width: 100%; height: 190px; display: block; background: #050811; object-fit: contain; }
.work-caption { padding: 10px 12px; }
.work-caption span { display: none; }
.work-caption h3 { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.portfolio-contact { padding: 22px; margin: 28px 0; }
.portfolio-contact h2 { font-size: clamp(18px, 2.3vw, 26px); }
.portfolio-contact p { margin: 10px 0 16px; }
.portfolio-footer { display: flex; gap: 16px; flex-wrap: wrap; padding-bottom: 24px; font-size: 13px; }
@media (max-width: 1100px) { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .work-grid { grid-template-columns: 1fr; gap: 12px; }
  .work-card video, .work-card img { height: 220px; }
  body[data-page="portfolio"] .page-hero { padding: 18px; }
  .portfolio-contact { padding: 18px; }
}

/* Avoid backdrop compositing around native video surfaces. */
.work-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
.work-card::before { display: none; }
.work-card video { position: relative; z-index: 1; }