.member-announcement {
    position: relative;
    z-index: 70;
    overflow: hidden;
    background: linear-gradient(100deg, #e94f49 0%, #f15c51 52%, #dd413e 100%);
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .14);
}

.member-announcement[hidden] { display: none !important; }
.member-announcement:not(.is-state-ready) { max-height: 0; visibility: hidden; }

.member-announcement-shell {
    width: min(1280px, calc(100% - 64px));
    min-height: 158px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "heading timing actions"
        "body body body";
    align-items: center;
    gap: 17px 38px;
    margin-inline: auto;
    padding: 25px 0 27px;
    transition: min-height .25s ease, padding .25s ease;
}

.member-announcement-heading { grid-area: heading; display: flex; align-items: center; gap: 15px; min-width: 0; }
.member-announcement-icon { flex: 0 0 50px; width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; }
.member-announcement-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.member-announcement-label { display: block; margin-bottom: 6px; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.member-announcement h2 { margin: 0; color: #fff; font-family: inherit; font-size: clamp(22px, 2.1vw, 30px); font-weight: 760; line-height: 1.18; }

.member-announcement-timing { grid-area: timing; min-width: 235px; padding-left: 29px; border-left: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.92); font-size: 13px; font-weight: 680; letter-spacing: .03em; white-space: nowrap; }
.member-announcement-timing strong { color: #fff; font-size: 20px; letter-spacing: .055em; }
.member-announcement-actions { grid-area: actions; }
.member-announcement-actions button { min-width: 94px; height: 42px; padding: 0 23px; border: 1px solid rgba(255,255,255,.66); border-radius: 999px; background: transparent; color: #fff; font-size: 12px; font-weight: 750; letter-spacing: .04em; cursor: pointer; transition: background .2s ease, color .2s ease; }
.member-announcement-actions button:hover { background: #fff; color: #c93e3a; }
.member-announcement-body { grid-area: body; padding-left: 65px; }
.member-announcement-body p { max-width: 1000px; margin: 0; color: #fff; font-size: 15px; font-weight: 520; line-height: 1.7; }

.member-announcement.is-collapsed .member-announcement-shell { min-height: 46px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "heading actions"; gap: 10px; padding-block: 4px; }
.member-announcement.is-collapsed .member-announcement-icon,
.member-announcement.is-collapsed .member-announcement-label,
.member-announcement.is-collapsed .member-announcement-timing,
.member-announcement.is-collapsed .member-announcement-body,
.member-announcement.is-collapsed [data-announcement-close] { display: none; }
.member-announcement.is-collapsed .member-announcement-heading { min-width: 0; padding-left: 0; }
.member-announcement.is-collapsed h2 { overflow: hidden; font-size: 15px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.member-announcement.is-collapsed .member-announcement-actions button { min-width: 64px; height: 30px; padding-inline: 12px; font-size: 10px; }

@media (max-width: 760px) {
    .member-announcement-shell { width: min(100% - 32px, 620px); grid-template-columns: 1fr auto; grid-template-areas: "heading actions" "timing timing" "body body"; gap: 13px 14px; padding-block: 17px; }
    .member-announcement-icon { flex-basis: 42px; width: 42px; height: 42px; }
    .member-announcement-timing { min-width: 0; padding: 12px 0 0 57px; border-top: 1px solid rgba(255,255,255,.22); border-left: 0; }
    .member-announcement-body { padding-left: 57px; }
    .member-announcement-actions button { min-width: 70px; height: 34px; padding-inline: 14px; }
    .member-announcement.is-collapsed .member-announcement-heading { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .member-announcement-shell,
    .member-announcement-actions button { transition: none; }
}