/* Approved responsive banner: the composition and controls occupy separate layout rows. */
.banner{container-type:normal;height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;padding:0 var(--banner-pad);overflow:hidden}
.banner .hero-note{position:relative;top:auto;left:auto;margin:24px 0 0;min-height:52px}
.hero-composition{position:relative;container-type:size;width:100%;height:clamp(360px,calc(100svh - var(--nav) - 240px),700px);flex:none}
.banner h1{top:auto;bottom:24px;left:0;width:100%;--walking-font:min(24cqw,43cqh);line-height:.9}
.banner h1 .title-walking{font-size:var(--walking-font);line-height:.9}
.banner h1 .title-the{font-size:calc(var(--walking-font)*.20);width:calc(var(--walking-font)*3.387);line-height:.9;margin:0 0 .10em}
.banner h1 .title-photographer{font-size:calc(var(--walking-font)*.544);line-height:.9;margin-top:.16em}
.banner .hero-person{height:108%;bottom:0;left:57%;width:auto;max-width:none}
.hero-controls{position:relative;display:flex;justify-content:space-between;align-items:center;gap:28px;padding:24px 0 28px;border-top:1px solid #17171520}
.banner .hero-actions{position:static;flex-direction:row;align-items:center;flex-wrap:wrap;gap:24px}
.banner .hero-caption{position:static;max-width:none;flex:none}
.banner .hero-caption p{margin:4px 0 10px}
.banner .hero-bottom{position:relative;left:auto;right:auto;bottom:auto;flex:none}
@media(max-width:640px){
 .banner .hero-note{margin-top:20px;min-height:48px}
 .hero-composition{height:clamp(340px,calc(100svh - 310px),520px)}
 .banner h1{bottom:34px;--walking-font:min(27cqw,40cqh)}
 .banner .hero-person{height:98%;left:57%;bottom:0}
 .hero-controls{padding:20px 0 24px;gap:16px}
 .banner .hero-actions{gap:16px}
 .banner .hero-caption{display:none}
}


/* Keep the lettering above the visible shoes and their embedded shadow. */
.banner h1{bottom:clamp(64px,12cqh,90px);--walking-font:min(26cqw,48cqh)}
.banner .hero-person{height:108%;bottom:0}
@media(max-width:640px){
 .banner h1{bottom:72px;--walking-font:min(28cqw,42cqh)}
 .banner .hero-person{height:98%;bottom:0}
}