body {
        background: radial-gradient(circle at top left, #e9f3fb 0, #f8fafc 40%, #edf2f7 100%);
        color: #0f172a;
    }

    .event-shell {
        border-radius: 1.25rem;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        padding: 1.75rem 1.5rem;
        border: 1px solid rgba(15, 23, 42, 0.05);
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    }

    .event-header-title {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .event-subtitle {
        font-size: .9rem;
        color: #6b7280;
    }

    .event-item {
        position: relative;
        display: flex;
        gap: 1.25rem;
        padding: 1rem 1.25rem;
        margin-bottom: .75rem;
        border-radius: 1rem;
        background-color: var(--surface);
        border: 1px solid rgba(148, 163, 184, 0.45);
        transition:
            transform .12s ease,
            box-shadow .12s ease,
            border-color .12s ease,
            background-color .12s ease;
    }

    .event-item:last-child {
        margin-bottom: 0;
    }

    .event-item:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
        border-color: rgba(27, 95, 140, 0.7);
        background-color: #f8fbff;
    }

    /* Vertical accent bar */
    .event-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 3px;
        border-radius: 999px;
        background: linear-gradient(to bottom, var(--primary), #3b82f6);
        opacity: .35;
        transition: opacity .12s ease, transform .12s ease;
    }

    .event-item:hover::before {
        opacity: .85;
        transform: translateX(-1px);
    }

    .event-date {
        text-align: center;
        min-width: 72px;
        padding-right: .5rem;
    }

    .event-date .day {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1;
        color: var(--primary);
    }

    .event-date .month {
        text-transform: uppercase;
        letter-spacing: .09em;
        font-size: .75rem;
        color: #64748b;
        margin-top: .15rem;
    }

    .event-date .weekday {
        font-size: .75rem;
        color: #94a3b8;
        margin-top: .1rem;
    }

    .event-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: .25rem;
    }

    .event-title {
        font-size: 1.05rem;
        font-weight: 600;
        margin: 0;
    }

    .event-meta {
        font-size: .9rem;
        color: #6b7280;
    }

    .event-description {
        font-size: .9rem;
        color: #4b5563;
    }

    .event-meta span+span::before {
        content: "•";
        margin: 0 .4rem;
        color: #9ca3af;
    }

    /* HIGHLIGHT-STATE */
    .event-featured {
        border-color: transparent;
        background-image:
            linear-gradient(#ffffff, #ffffff),
            radial-gradient(circle at top left, var(--primary), #38bdf8);
        background-origin: border-box;
        background-clip: padding-box, border-box;
        box-shadow: 0 22px 55px rgba(15, 23, 42, 0.28);
    }

    .event-featured::before {
        opacity: 1;
        width: 4px;
    }

    .event-featured .event-title {
        letter-spacing: .01em;
    }

    @media (max-width: 576px) {
        .event-item {
            padding: .9rem 1rem;
        }

        .event-date {
            min-width: 60px;
        }
    }