/* Keep the film introduction visible below the home content on desktop screens. */
@media(min-width:701px) and (hover:hover) and (pointer:fine){
 .intro{padding-block:clamp(12px,2vh,24px)}
 .section-navigation{padding-top:12px;padding-bottom:16px}
 #films{padding-top:clamp(16px,2vh,24px)}
 .section-navigation a{color:var(--ink);padding-right:19px;transition:color .24s ease}
 .section-navigation a::before{content:'↘';position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.85em;transition:transform .24s ease,color .24s ease}
 .section-navigation a::after{transform:scaleX(1);background:currentColor;opacity:.24;transition:opacity .24s ease}
 .section-navigation a:hover::before,.section-navigation a:focus-visible::before{transform:translate(2px,calc(-50% + 2px));color:var(--accent)}
 .section-navigation a:hover::after,.section-navigation a:focus-visible::after{opacity:.75}
}
@media(min-width:701px) and (hover:hover) and (pointer:fine) and (max-height:850px){
 .intro{padding-block:8px}
 .section-navigation{padding-block:8px 12px}
 .intro-description .intro-description-lead,.intro-description .intro-desktop-detail{height:17em}
 .intro-description .detailed-portfolio{margin-top:16px}
 .intro-description .intro-desktop-closing{margin-top:12px}
}