/* Existing photograph and boxer; the copy is smaller and higher. */
.hero { position: relative; min-height: 520px; overflow: hidden; background: linear-gradient(90deg, #ece5db, #796a5a 50%, #171615); }
.hero-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Feathered light across the copy area: no rectangular text card. */
.hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 48% 54% at 18% 32%, #ffffffe6, #ffffffa3 38%, #ffffff00 78%); pointer-events: none; }
.hero-content { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-start; }
.hero-copy { z-index: 2; position: relative; padding-top: clamp(112px, 16vh, 166px); padding-bottom: 28px; width: 56%; }
.eyebrow { display: flex; align-items: center; gap: 14px; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-weight:500; -webkit-text-stroke:.15px currentColor; margin: 0 0 14px; }
.eyebrow span { height: 1px; width: 60px; background: var(--accent); }
h1 { font-family: Impact, 'Arial Narrow', 'Arial Black', sans-serif; font-weight: 400; font-stretch: condensed; font-size: clamp(52px, 5.85vw, 80px); line-height: 1.06; letter-spacing: -1px; margin: 0 0 20px; }
h1 span { color: var(--accent); }
.hero-description { font-size: 15px; font-weight:500; -webkit-text-stroke:.15px currentColor; line-height: 1.4; margin: 0 0 22px; }
.hero-athlete { position: absolute; right: -8%; bottom: 12px; width: 80%; height: min(87%, 750px); object-fit: contain; object-position: center bottom; }

@media (min-width:901px) {
    .hero-content { padding-top:var(--hero-interval-top,69px); }
    .hero-copy { padding-top:0; padding-bottom:0; margin-block:auto; }
    /* The strip becomes shorter; retain the athlete's previous viewport geometry. */
    .hero-athlete {
        height:min(calc(max(520px, calc(100svh - var(--admin-bar-height) - 92px)) * .87),750px);
        bottom:calc(12px + 92px - var(--strip-height));
    }
}

/* Only X changes; retain the accepted image dimensions and vertical position. */
.hero-athlete { translate:var(--athlete-shift-x,0px) 0; }

/* Crop only the supplied composite; retain all existing layout dimensions. */
@media (min-width:601px) and (max-width:900px) {
    .hero-background[src*='hero-background-final.webp'] { object-position:80% center; }
}
@media (max-width:600px) {
    .hero-background[src*='hero-background-final.webp'] { object-position:82% center; }
}