.eh-magazine-hero {
    --eh-magazine-ink: #f1f7ff;
    --eh-magazine-muted: #d7e6f4;
    position: relative;
    isolation: isolate;
    color: var(--eh-magazine-ink);
    background: #0b1e32;
}

.eh-magazine-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background:
        linear-gradient(270deg, rgba(7, 20, 34, .96) 6%, rgba(8, 24, 40, .9) 38%, rgba(8, 24, 40, .36) 76%, rgba(8, 24, 40, .23)),
        url("magazine-hero-20261105-v1.webp") left center / cover no-repeat;
}

.eh-magazine-hero__inner {
    width: min(100%, 80rem);
    box-sizing: border-box;
    margin-inline: auto;
    padding: clamp(1.45rem, 4.1vw, 4rem) clamp(1rem, 4vw, 3.5rem);
}

.eh-magazine-hero .tool-crumb {
    margin: 0 0 clamp(.8rem, 2.2vw, 1.5rem);
    color: var(--eh-magazine-muted);
}

.eh-magazine-hero .tool-crumb a { color: inherit; }

.eh-magazine-hero .mag-hero {
    max-width: 43rem;
    min-width: 0;
    margin: 0;
    padding: clamp(1.05rem, 2.6vw, 2rem);
    border: 1px solid rgba(204, 233, 251, .25);
    border-radius: 1.25rem;
    background: rgba(9, 28, 47, .58);
    box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 12px 36px rgba(0, 0, 0, .25);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    color: inherit;
    text-align: right;
}

.eh-magazine-hero .mag-hero h1 {
    margin: .5rem 0;
    color: var(--eh-magazine-ink);
    font-size: clamp(1.9rem, 1.35rem + 2vw, 3.15rem);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.eh-magazine-hero .mag-hero p {
    margin: 0;
    color: var(--eh-magazine-muted);
    line-height: 1.85;
}

.eh-magazine-hero .mag-hero .tool-kicker { color: #9ee5d9; }

.eh-magazine-hero .mag-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    width: 100%;
    margin: 1rem 0 0;
}

.eh-magazine-hero .mag-search input {
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    box-sizing: border-box;
    padding-inline: .85rem;
    border: 1px solid rgba(208, 232, 252, .42);
    border-radius: .65rem;
    color: #112840;
    background: #f2f8ff;
}

.eh-magazine-hero .mag-search input::placeholder { color: #526479; }

.eh-magazine-hero .mag-search button {
    min-height: 3rem;
    padding-inline: clamp(.65rem, 2vw, 1.2rem);
    border-radius: .65rem;
    background: #0c645d;
    color: #fff;
}

.eh-magazine-hero .mag-categories {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    max-width: 60rem;
    margin: 1.15rem 0 0;
}

.eh-magazine-hero .mag-categories a {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .37rem .7rem;
    border: 1px solid rgba(200, 229, 250, .32);
    border-radius: 999px;
    background: rgba(9, 28, 47, .85);
    color: var(--eh-magazine-ink);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.eh-magazine-hero .mag-categories a small { color: inherit; }

.eh-magazine-hero .mag-categories a:hover,
.eh-magazine-hero .mag-categories a.active {
    border-color: #99e3d7;
    background: #b2eee2;
    color: #102c33;
}

.eh-magazine-hero :is(a, button, input):focus-visible {
    outline: 2px solid #b2eee2;
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .eh-magazine-hero::before {
        background-position: center, 34% center;
    }
}