/* TOM V5.7: tighter editorial flow, remove unnecessary whitespace without clipping content. */
.hero {border-bottom:1px solid rgba(34,30,26,.17)}
.hero-grid {padding-bottom:clamp(32px,3vw,52px)}

/* Major sections read as a single editorial journey, not isolated page-sized slides. */
.websites {padding-bottom:clamp(32px,3.2vw,56px)}
.websites .portfolio-head {padding:clamp(35px,3.3vw,53px) 0 clamp(30px,2.9vw,46px)}
.websites .mac-stage {margin-top:0}
.websites .mac-meta {min-height:0;margin-top:16px;padding-top:13px}
.websites .mac-topline {padding-bottom:11px}

.photo-section {padding-bottom:clamp(18px,2.6vw,39px)}
.photo-section .portfolio-head {padding:clamp(34px,3.4vw,56px) 0 clamp(23px,2.4vw,40px)}
.photo-section .motion-row {min-height:0;padding-top:8px;padding-bottom:8px}
.photo-section .motion-marquee {min-height:0}
.photo-section .motion-row-label {gap:13px}

.film-section .film-inner {padding-bottom:clamp(29px,3.8vw,56px)}
.film-section .portfolio-head {padding:clamp(38px,3.8vw,60px) 0 clamp(24px,2.6vw,42px)}
.film-grid {gap:clamp(22px,2vw,30px) clamp(10px,1.15vw,18px);margin-top:0}
.film-caption {margin-top:12px;min-height:0}

.about.about-full {padding-top:clamp(40px,4.1vw,64px);padding-bottom:clamp(48px,4.8vw,75px)}
.about-copy-full > .eyebrow {margin-bottom:clamp(18px,2vw,26px)}
.about-top-grid {margin-bottom:clamp(20px,2.4vw,34px)}
.resume-highlights {margin-top:0}
.about-full .skills-radar-section {margin-top:clamp(24px,2.4vw,34px);padding-top:clamp(24px,2.4vw,32px)}

.contact {padding-top:clamp(48px,5.5vw,88px);padding-bottom:clamp(45px,5.5vw,82px)}
.contact h2 {margin:0 0 clamp(42px,4.5vw,68px)}
.contact-bottom {padding-top:clamp(24px,2.5vw,34px)}

/* Video thumbnails are alive even before hover, then transition to a short real footage preview. */
.film-poster {isolation:isolate}
.film-poster img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:filmPosterDrift 14s ease-in-out infinite alternate;transform-origin:center center;}
@keyframes filmPosterDrift{from{transform:scale(1.02) translate3d(-.35%,0,0)}to{transform:scale(1.105) translate3d(.35%,0,0)}}
.film-card .film-hover-preview {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transform:scale(1.03);transition:opacity .38s ease,transform .65s ease;z-index:1;background:#141414}
.film-card.is-previewing .film-hover-preview {opacity:1;transform:scale(1);}
.film-card .film-play {z-index:3;transition:opacity .3s, transform .3s, background .25s;}
.film-card.is-previewing .film-play {opacity:.42;transform:translate(-50%,-50%) scale(.85)}
.film-card .film-preview-progress {position:absolute;bottom:0;left:0;right:0;height:2px;z-index:4;transform:scaleX(0);transform-origin:left center;background:var(--accent);opacity:0}
.film-card.is-previewing .film-preview-progress {opacity:1;animation:previewScrub 3.4s linear infinite}
@keyframes previewScrub{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.film-card .film-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.25),transparent 45%);z-index:2;pointer-events:none;opacity:.55;transition:opacity .3s}
.film-card.is-previewing .film-poster::after{opacity:.2}
.film-card:focus-visible{outline:2px solid var(--accent);outline-offset:5px}

@media(max-width:900px){
 .websites .portfolio-head,.photo-section .portfolio-head,.film-section .portfolio-head{padding-top:34px;padding-bottom:26px}
 .websites {padding-bottom:36px}
 .film-section .film-inner {padding-bottom:38px}
 .photo-section {padding-bottom:28px}
}
@media(max-width:720px){
 .hero-grid {padding-bottom:0}
 .websites .portfolio-head,.photo-section .portfolio-head,.film-section .portfolio-head{padding-top:32px;padding-bottom:25px}
 .websites {padding-bottom:25px}
 .websites .mac-stage {padding-top:12px;padding-bottom:10px}
 .websites .mac-meta {margin-top:15px;padding-top:12px}
 .photo-section {padding-bottom:22px}
 .photo-section .motion-row {padding:0}
 .photo-section .motion-marquee {min-height:236px;padding:6px 0}
 .film-section .film-inner {padding-bottom:33px}
 .film-grid {gap:20px 12px}
 .film-caption {margin-top:9px}
 .about.about-full {padding-top:39px;padding-bottom:44px}
 .contact{padding-top:42px;padding-bottom:48px}
 .contact h2{margin:0 0 34px}
 .contact-bottom{padding-top:22px}
}
@media(prefers-reduced-motion:reduce){
 .film-poster img{animation:none!important;transform:none!important}
 .film-hover-preview,.film-preview-progress{display:none!important}
}