/* 2. SHARED HERO — one navy field, one photo frame, one attached fade. */
.aauw-shared-page .site-main { width:100%; margin:0; padding:0; max-width:none; }
.aauw-shared-page .aauw-x1-hero {
    position:relative; isolation:isolate; width:100%; margin:0; padding:0;
    background:var(--aauw-brand-navy,#052a4f); color:#fff; overflow:hidden;
}
.aauw-shared-page .aauw-x1-hero__inner {
    position:relative; display:flex; align-items:center;
    min-height:170px; height:auto;
}
/* The frame's right edge is the same site-container edge as Donate. */
.aauw-shared-page .aauw-x1-hero__media {
    position:absolute; inset:0 0 0 auto; width:46%; overflow:hidden;
    --aauw-hero-fade-width:clamp(90px,12vw,220px);
}
.aauw-shared-page .aauw-x1-hero__photo {
    display:block; width:100%; height:100%; max-width:none;
    object-fit:cover; object-position:50% 50%;
}
/* 2.1 The image itself fades into the hero's navy background.
   Masking avoids introducing a second blue and stays attached to the photo
   when the browser narrows. Both standard and WebKit declarations are used. */
.aauw-shared-page .aauw-x1-hero__media {
    -webkit-mask-image:linear-gradient(90deg,
        transparent 0, transparent 6px,
        rgba(0,0,0,.04) calc(var(--aauw-hero-fade-width) * .2),
        rgba(0,0,0,.22) calc(var(--aauw-hero-fade-width) * .45),
        rgba(0,0,0,.65) calc(var(--aauw-hero-fade-width) * .75),
        #000 var(--aauw-hero-fade-width));
    mask-image:linear-gradient(90deg,
        transparent 0, transparent 6px,
        rgba(0,0,0,.04) calc(var(--aauw-hero-fade-width) * .2),
        rgba(0,0,0,.22) calc(var(--aauw-hero-fade-width) * .45),
        rgba(0,0,0,.65) calc(var(--aauw-hero-fade-width) * .75),
        #000 var(--aauw-hero-fade-width));
}
/* Disable the former color overlay; the mask supplies the single fade. */
.aauw-shared-page .aauw-x1-hero__media::after { content:none; }
.aauw-shared-page .aauw-x1-hero__copy {
    position:relative; z-index:1; width:55%; padding:22px 12px 22px 0;
}
.aauw-shared-page .aauw-x1-hero h1 {
    margin:0; color:#fff; font:700 clamp(26px,3vw,46px)/1.05 Georgia,"Times New Roman",serif;
    letter-spacing:-.02em; overflow-wrap:break-word;
}
.aauw-shared-page .aauw-x1-hero__eyebrow {
    margin:0 0 8px; font-size:13px; font-weight:700;
    line-height:1.35; letter-spacing:.12em; text-transform:uppercase;
}
.aauw-shared-page .aauw-x1-hero__tagline,
.aauw-shared-page .aauw-x1-hero__summary { margin:10px 0 0; font-size:15px; line-height:1.5; }
/* A page without a photo can use the full text width. */
.aauw-shared-page .aauw-x1-hero:not(.aauw-x1-hero--image) .aauw-x1-hero__copy { width:100%; max-width:850px; }
@media(max-width:700px) {
    .aauw-shared-page .aauw-x1-hero__copy { width:58%; padding-block:18px; }
    .aauw-shared-page .aauw-x1-hero__summary,
    .aauw-shared-page .aauw-x1-hero__tagline { font-size:12px; line-height:1.45; }
}
