/* Small additions to the original portfolio layout. */
html.portfolio-layout { scroll-padding-top: 105px; }
.portfolio-layout [hidden] { display: none !important; }
.portfolio-layout a:focus-visible,
.portfolio-layout button:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 4px; }
.portfolio-layout.clean-theme .logo-mark { color: var(--text-main); }

/* Keep previews bounded and preserve each frame's proportions. */
.portfolio-layout .proof-case { min-width: 0; overflow: hidden; }
.portfolio-layout .proof-case-media { height: 200px; aspect-ratio: auto; object-fit: contain; background: #080808; }
.portfolio-layout .proof-case h3 { margin-top: .6rem; }
.portfolio-layout .archive-card-media img,
.portfolio-layout .archive-card-media video { object-fit: contain; }
.portfolio-layout .featured-case-grid { align-items: start; }
.portfolio-layout .case-story { min-width: 0; padding: clamp(1.4rem, 3vw, 2.5rem); }
.portfolio-layout .featured-case-grid > .case-media-jd,
.portfolio-layout .featured-case-grid > .case-media-bond,
.portfolio-layout .featured-case-grid > .case-media-coke,
.portfolio-layout .featured-case-grid > .case-visual { position: sticky; top: 110px; height: 380px; min-height: 0; align-self: start; }
.portfolio-layout .case-media-jd video,
.portfolio-layout .case-media-bond video,
.portfolio-layout .coke-media video { min-height: 0; object-fit: contain; filter: none; }
.portfolio-layout .case-media-jd,
.portfolio-layout .case-media-bond,
.portfolio-layout .coke-media { background: #080808; }
.portfolio-layout .case-media-coke { padding: .6rem; }
.portfolio-layout .coke-media { height: 100%; min-height: 0; aspect-ratio: auto; align-self: start; }
.portfolio-layout .case-media-jd figcaption,
.portfolio-layout .case-media-bond figcaption,
.portfolio-layout .coke-media figcaption { bottom: 42px; pointer-events: none; }
.portfolio-layout .case-media-strata { display: block; background: #080808; cursor: pointer; }
.portfolio-layout .case-media-strata > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.portfolio-layout .case-media-strata .visual-play { background: #050505bb; }
.portfolio-layout .case-media-strata:hover .visual-play { background: #050505ed; transform: translate(-50%, -50%) scale(1.08); }
.portfolio-layout .case-visual-capy { background-size: 100% 100%, contain; background-repeat: no-repeat; }
.portfolio-layout .case-media-strata .visual-code,
.portfolio-layout .case-media-strata .visual-telemetry { color: #f4f4f5; background: #050505b3; padding: .65rem; }
.portfolio-layout #strata .strata-story { color: var(--text-muted); font-size: .92rem; line-height: 1.75; margin: 0 0 1.5rem; }
.portfolio-layout .visual-telemetry { flex-wrap: wrap; }

/* Preserve the split hero and make every project tab available. */
.portfolio-layout #project-reel { height: 440px; min-height: 0; aspect-ratio: auto; }
.portfolio-layout .project-reel-stage > video,
.portfolio-layout #project-reel-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; }
.portfolio-layout #project-reel-poster { filter: brightness(.78); }
.portfolio-layout .project-reel-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portfolio-layout .project-reel-tab { min-width: 0; }
.portfolio-layout #project-reel-film { display: inline-block; margin: 0 .9rem .7rem 0; padding: .5rem .7rem; border: 1px solid #ffffff80; }
.portfolio-layout .reel-playback { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; color: #fff; background: #050505cc; border: 1px solid #ffffff80; border-radius: 50%; cursor: pointer; }
.portfolio-layout .reel-playback:hover { background: #333; }

@media (max-width: 900px) {
    .portfolio-layout .featured-case-grid > .case-media-jd,
    .portfolio-layout .featured-case-grid > .case-media-bond,
    .portfolio-layout .featured-case-grid > .case-media-coke,
    .portfolio-layout .featured-case-grid > .case-visual { position: relative; top: auto; width: 100%; height: 310px; aspect-ratio: auto; }
    .portfolio-layout .featured-case-grid > .case-story { order: 2; }
    .portfolio-layout .featured-case-grid > :not(.case-story) { order: 1; }
    .portfolio-layout .proof-case-media { height: 180px; }
    .portfolio-layout .proof-case-role { overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
    .portfolio-layout #project-reel { height: 350px; }
    .portfolio-layout .project-reel-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 84px; }
    .portfolio-layout .project-reel-tab { min-height: 42px; }
    .portfolio-layout .project-reel-stage { flex-basis: 266px; }
    .portfolio-layout .featured-case-head { flex-wrap: wrap; line-height: 1.6; }
    .portfolio-layout .featured-case-grid > .case-media-jd,
    .portfolio-layout .featured-case-grid > .case-media-bond,
    .portfolio-layout .featured-case-grid > .case-media-coke,
    .portfolio-layout .featured-case-grid > .case-visual { height: 260px; }
    .portfolio-layout .case-facts > div { grid-template-columns: 80px minmax(0, 1fr); gap: .75rem; }
    .portfolio-layout .case-facts dd { overflow-wrap: anywhere; }
}