/*************************************************
 * HTMB THEME – CLEAN BUILD
 * Blade Runner x Neuromancer: “The Reflection Lives”
 *************************************************/

/* ================================================
 * 0. FONTS
 * ================================================ */
@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/*************************************************
 * SELENE – GLOBAL LIST BACKGROUND NEUTRALIZER
 *************************************************/

/* 1. Kill the global background-color that was found in the page-wrapper */
.page-wrapper .selene-related-posts ul,
.page-wrapper .selene-related-posts li,
.page-wrapper .selene-related-posts ul li {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Re-apply the HUD Data Chips */
.selene-related-posts li.related-item {
    background: rgba(0, 243, 255, 0.05) !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
    border-left: 4px solid #00f3ff !important;
    margin-bottom: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    display: block !important;
}

/* 3. The Link Styling */
.selene-related-posts a.related-link {
    display: block !important;
    padding: 14px 20px !important;
    color: #a7f3d0 !important;
    font-family: 'JetBrains Mono', monospace !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
}

/* 4. The "Bullet" Killers */
.selene-related-posts li::before,
.selene-related-posts li::marker {
    display: none !important;
    content: none !important;
}

/* 5. Hover State */
.selene-related-posts li.related-item:hover {
    background: rgba(0, 243, 255, 0.15) !important;
    transform: translateX(10px) !important;
}

/* ==========================
 * 1. GLOBAL THEME TOKENS
 * ========================== */

:root {
    --page-bg: radial-gradient(circle at top, #020617 0, #020617 35%, #020617 65%, #000 100%);
    --card-bg: #020617;
    --card-inner-bg: #020617;
    --card-border: rgba(148, 163, 255, 0.35);
    --card-radius: 1.5rem;
    --card-shadow:
            0 24px 60px rgba(15, 23, 42, 0.95),
            0 0 30px rgba(56, 189, 248, 0.15);

    --text-main: #e5e7eb;
    --text-muted: #9ca3af;

    --accent-pink: #fb7185;
    --accent-violet: #8b5cf6;
    --accent-cyan: #22d3ee;
}

/* Background + default text */
body {
    background: var(--page-bg) fixed;
    color: var(--text-main);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: relative;
}

/* Very subtle noise overlay over entire viewport */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    /* Replace with actual noise asset path in your theme */
    background-image: url("/themes/custom/solo_subtheme/images/noise.png");
    background-size: 200px 200px;
    opacity: 0.03;
    mix-blend-mode: soft-light;
}

/* Shells stay transparent so the void shows through */
.page-wrapper,
#page-wrapper,
#main-container,
.region-inner.main-box-inner {
    background: transparent;
}

/* Focus field behind main content on home page */
body.path-frontpage .main-container-inner {
    position: relative;
    background:
            radial-gradient(circle at center,
            rgba(0, 0, 0, 0.32) 0,
            rgba(0, 0, 0, 0) 70%);
    padding-top: 1.75rem;
    padding-bottom: 3.5rem;
}

/* ==========================
 * 2. TYPOGRAPHY – GENERIC PAGES
 * ========================== */

.node--type-page .node__content {
    color: var(--text-main);
}

.node--type-page .field--name-body,
.node--type-page .layout {
    font-size: 1rem;
    line-height: 1.6;
}

.node--type-page h1,
.node--type-page h2,
.node--type-page h3 {
    color: #f9fafb;
    letter-spacing: 0.01em;
}

.node--type-page h1 {
    font-size: 2.35rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.node--type-page h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 2.2rem 0 0.75rem;
}

.node--type-page p {
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.node--type-page ul {
    margin: 0.5rem 0 0.75rem 1.25rem;
}

.node--type-page ul li {
    position: relative;
    margin-bottom: 0.25rem;
    color: var(--text-main);
}

/* ==========================
 * 3. CONTENT CARDS – GENERIC
 * ========================== */

.node--type-page .layout--twocol-section {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    padding: 2.0rem 2.25rem;
    margin: 1.5rem auto 2.25rem;
}

.node--type-page .layout--twocol-section .layout__region > .block {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.node--type-page .layout--twocol-section .layout__region {
    padding-inline: 1.25rem;
}

.node--type-page .layout--twocol-section .layout__region:nth-child(1) {
    border-right: 1px solid rgba(148, 163, 255, 0.32);
}

@media (max-width: 992px) {
    .node--type-page .layout--twocol-section {
        padding: 1.5rem 1.1rem;
    }

    .node--type-page .layout--twocol-section .layout__region {
        padding-inline: 0;
        margin-bottom: 1.35rem;
    }

    .node--type-page .layout--twocol-section .layout__region:nth-child(1) {
        border-right: none;
        border-bottom: 1px solid rgba(148, 163, 255, 0.24);
        padding-bottom: 1.35rem;
    }

    .node--type-page .layout--twocol-section .layout__region:last-child {
        margin-bottom: 0;
    }
}

/* Follow-up one-column cards */
.node--type-page .layout--onecol .layout__region {
    background: var(--card-inner-bg);
    border-radius: var(--card-radius);
    border: 1px solid rgba(148, 163, 255, 0.25);
    box-shadow:
            0 18px 40px rgba(15, 23, 42, 0.9),
            0 0 24px rgba(56, 189, 248, 0.12);
    padding: 1.85rem 2rem;
    margin: 0 auto 1.75rem;
}

.node--type-page .layout--onecol .layout__region > .block {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* ==========================
 * 4. INLINE SELENE CHIP (IN-BODY)
 * ========================== */

.selene-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.95rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid rgba(248, 113, 113, 0.7);
    color: #fecaca;
    background:
            radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.25), transparent 55%),
            radial-gradient(circle at 100% 100%, rgba(251, 113, 133, 0.3), transparent 60%),
            rgba(15, 23, 42, 0.95);
    box-shadow:
            0 0 18px rgba(248, 113, 113, 0.45),
            0 14px 30px rgba(15, 23, 42, 0.9);
    white-space: nowrap;
}

.selene-pill::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: radial-gradient(circle, #f97373 0, #b91c1c 60%);
    box-shadow: 0 0 10px rgba(248, 113, 113, 0.9);
}

/* ==========================
 * 5. GLOBAL WIDTH / STRUCTURE
 * ========================== */

.page-wrapper {
    max-width: none;
}

.header-inner,
.primary-menu-inner,
.main-container-inner,
.copyright-inner {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 1280px) {
    .header-inner,
    .primary-menu-inner,
    .main-container-inner,
    .copyright-inner {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Header padding under Drupal admin toolbar */
#header {
    position: relative;
    z-index: 5;
    padding-top: 60px; /* tightened from 72px */
    padding-bottom: 0.5rem;
    background: transparent;
}

/* ==========================
 * 6. NEON HEADER RAIL + ORB
 * ========================== */

.htmb-header-shell {
    max-width: 1280px;
    margin: 30px auto 18px; /* tighter vertical space */
    padding: 0 32px;
    position: relative;
}

.htmb-header-rail {
    position: relative;
    margin: 0 auto;
    width: min(82vw, 1220px);
    height: 52px;
    border-radius: 26px;
    overflow: visible;

    border: 0.65px solid rgba(56, 189, 248, 0.65);
    box-shadow:
            0 0 6px rgba(56, 189, 248, 0.45),
            0 0 14px rgba(56, 189, 248, 0.25),
            0 0 30px rgba(15, 23, 42, 0.85);

    background: transparent;
    backdrop-filter: blur(5px);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.htmb-header-rail::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background:
            repeating-linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0.025) 0px,
                    rgba(255, 255, 255, 0.025) 1px,
                    transparent 1px,
                    transparent 5px
            ),
            linear-gradient(
                    90deg,
                    rgba(56, 189, 248, 0.22) 0%,
                    rgba(56, 189, 248, 0.18) 42%,
                    rgba(244, 63, 94, 0.16) 58%,
                    rgba(244, 63, 94, 0.18) 100%
            );
    background-blend-mode: screen, normal;
    opacity: 0.70;
}

.htmb-header-rail::after {
    content: "";
    position: absolute;
    inset: -22px;
    border-radius: inherit;
    background:
            radial-gradient(circle at 20% 50%, rgba(56, 189, 248, 0.33), transparent 75%),
            radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.15), transparent 80%),
            radial-gradient(circle at 85% 50%, rgba(244, 63, 94, 0.12), transparent 80%);
    filter: blur(20px);
    opacity: 0.55;
    z-index: -1;
}

.htmb-header-side {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-inline: 4.25rem;
}

.htmb-header-title {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.30em;
    color: #f9fafb;
    white-space: nowrap;
    text-align: center;
    text-shadow:
            0 0 8px rgba(15, 23, 42, 0.9),
            0 0 14px rgba(15, 23, 42, 0.8);
}

/* ORB */

.htmb-header-orb {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -54%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: visible;

    background:
            radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 35%),
            radial-gradient(circle at 50% 40%, #020617 0%, #000 80%);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);

    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;

    animation: htmb-orb-pulse 7s ease-in-out infinite;
}

.htmb-header-orb::after {
    content: "";
    position: absolute;
    inset: -24%;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.95) 0, rgba(34, 211, 238, 0) 60%);
    filter: blur(10px);
    z-index: -1;
}

.htmb-header-logo-link {
    display: block;
    width: 82%;
    height: 82%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
            0 0 14px rgba(56, 189, 248, 0.9),
            inset 0 0 10px rgba(15, 23, 42, 0.95);
    background: #000;
}

.htmb-header-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .htmb-header-shell {
        margin-top: 26px;
        padding: 0 16px;
    }

    .htmb-header-rail {
        width: 100%;
        height: 46px;
    }

    .htmb-header-side {
        padding-inline: 3rem;
    }

    .htmb-header-orb {
        width: 130px;
        height: 130px;
        transform: translate(-50%, -54%);
    }

    .htmb-header-logo-link {
        width: 84%;
        height: 84%;
    }

    .htmb-header-title {
        font-size: 0.62rem;
        letter-spacing: 0.24em;
    }
}

/* ==========================
 * 7. SELENE SIDE TAB + PANEL
 * ========================== */

/* Right-pinned vertical tab */
.selene-dock.selene-status-pill {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 700;

    display: flex !important;
    align-items: center;
    justify-content: center;

    writing-mode: vertical-rl;
    text-orientation: mixed;

    width: 40px;
    height: 140px;
    padding: 0.5rem 0.35rem;
    border-radius: 12px 0 0 12px;

    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-decoration: none;

    border: 1px solid rgba(236, 72, 153, 0.75);
    color: #fee2e2;

    background:
            radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.35), transparent 55%),
            linear-gradient(to bottom, rgba(236, 72, 153, 0.45), rgba(190, 24, 93, 0.7));
    backdrop-filter: blur(6px);

    box-shadow:
            0 0 10px rgba(248, 113, 113, 0.7),
            0 12px 30px rgba(15, 23, 42, 0.9);

    cursor: pointer;
}

.selene-dock .selene-label {
    font-family: "Inter", system-ui, sans-serif;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(248, 113, 113, 0.6);
}

.selene-dock .selene-light {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #1f2933;
    border: 1px solid rgba(148, 27, 64, 0.9);
    box-shadow: 0 0 4px rgba(148, 27, 64, 0.8);
}

/* Online state – BLUE tab + green light */
.selene-dock.selene-online {
    border-color: rgba(56, 189, 248, 0.85);
    color: #e0f2fe;
    background:
            radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.45), transparent 55%),
            linear-gradient(to bottom, rgba(37, 99, 235, 0.55), rgba(15, 118, 210, 0.8));
    box-shadow:
            0 0 12px rgba(56, 189, 248, 0.8),
            0 14px 32px rgba(15, 23, 42, 0.95);
}

.selene-dock.selene-online .selene-label {
    text-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
}

.selene-dock.selene-online .selene-light {
    background: #22e0a8;
    border-color: rgba(34, 224, 168, 0.9);
    box-shadow:
            0 0 5px #22e0a8,
            0 0 12px rgba(34, 224, 168, 0.7);
}

/* Slide-out panel */
.selene-panel {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(20px);
    z-index: 650;

    width: min(380px, 95vw);
    max-height: 85vh;

    padding: 1.25rem 1.25rem 1.1rem;
    border-radius: 18px 0 0 18px;

    background:
            radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.16), transparent 55%),
            radial-gradient(circle at 100% 100%, rgba(244, 63, 94, 0.16), transparent 55%),
            rgba(15, 23, 42, 0.97);
    backdrop-filter: blur(12px);

    border: 1px solid rgba(56, 189, 248, 0.6);

    box-shadow:
            0 0 30px rgba(15, 23, 42, 0.95),
            0 0 40px rgba(56, 189, 248, 0.35);

    opacity: 0;
    pointer-events: none;
    transition:
            opacity 0.22s ease-out,
            transform 0.22s ease-out;
}

.selene-panel.selene-asleep {
    border-color: rgba(244, 63, 94, 0.7);
    box-shadow:
            0 0 30px rgba(15, 23, 42, 0.95),
            0 0 36px rgba(244, 63, 94, 0.4);
}

/* Open when hash target is #selene-panel */
#selene-panel:target {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

/* Card that holds the tall Selene image */
.selene-panel-card {
    border-radius: 14px;
    overflow: hidden;
    background: #020617;
    box-shadow:
            0 0 18px rgba(56, 189, 248, 0.7),
            0 18px 40px rgba(15, 23, 42, 0.95);
}

.selene-panel-card img {
    display: block;
    width: 100%;
    height: auto;
}

/* Close link */
.selene-panel-close {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 1.1rem;
    color: rgba(148, 163, 255, 0.85);
    text-decoration: none;
    text-shadow: 0 0 6px rgba(15, 23, 42, 0.9);
    cursor: pointer;
}

.selene-panel-close:hover {
    color: #e5e7eb;
}

/* ==========================
 * 8. MAIN NAV – [ HOME ] STYLE
 * ========================== */

/* Strip Solo’s wrapper styling */
#primary-menu,
#primary-menu-inner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#primary-menu {
    padding-top: 0.4rem;
    text-align: left;
    position: relative;   /* was sticky */
    top: auto;            /* no floating */
    z-index: 60;
    background: transparent;
}

/* Kill any lingering transitions/animations inside nav */
#primary-menu *,
#primary-menu *::before,
#primary-menu *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    text-decoration: none !important;
}

/* Desktop layout */
@media (min-width: 992px) {

    #primary-menu .navigation-primary-responsive {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        width: 100%;
    }

    #primary-menu .navigation__menubar-main {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 1.6rem !important;

        padding: 0.65rem 0 1.1rem !important;
        margin: 0 !important;

        list-style: none !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #primary-menu .navigation__menubar-main > li {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        position: relative;
    }

    #primary-menu .navigation__menubar-main > li.btn-animate::before,
    #primary-menu .navigation__menubar-main > li.btn-animate::after {
        content: none !important;
    }

    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main {
        display: inline-block;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 0.8rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #e5e7eb;
        text-decoration: none !important;
        padding: 0.15rem 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        border: 0 !important;
    }

    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main .menu__url-title {
        position: relative;
        padding: 0;
        color: #e5e7eb;
    }

    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main .menu__url-title::before,
    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main .menu__url-title::after {
        font-weight: 600;
        font-size: 0.9rem;
        color: #bbf7d0;
    }

    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main .menu__url-title::before {
        content: "[" !important;
        margin-right: 0.35rem;
    }

    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main .menu__url-title::after {
        content: "]" !important;
        margin-left: 0.35rem;
    }

    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main:hover {
        color: #f9fafb !important;
    }

    #primary-menu .navigation__menubar-main > li.is-active > a.nav__menu-link-main,
    #primary-menu .navigation__menubar-main > li.menu-item--active-trail > a.nav__menu-link-main,
    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main.is-active {
        color: #a5f3fc !important;
    }

    #primary-menu .navigation__menubar-main > li.is-active > a.nav__menu-link-main .menu__url-title,
    #primary-menu .navigation__menubar-main > li.menu-item--active-trail > a.nav__menu-link-main .menu__url-title,
    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main.is-active .menu__url-title {
        color: #a5f3fc;
    }

    #primary-menu .navigation__menubar-main > li.is-active > a.nav__menu-link-main .menu__url-title::before,
    #primary-menu .navigation__menubar-main > li.is-active > a.nav__menu-link-main .menu__url-title::after,
    #primary-menu .navigation__menubar-main > li.menu-item--active-trail > a.nav__menu-link-main .menu__url-title::before,
    #primary-menu .navigation__menubar-main > li.menu-item--active-trail > a.nav__menu-link-main .menu__url-title::after,
    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main.is-active .menu__url-title::before,
    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main.is-active .menu__url-title::after {
        color: #bef264;
    }
}

/* Mobile nav */
@media (max-width: 991.98px) {
    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: #e5e7eb;
        background: transparent !important;
        border-radius: 0 !important;
        border: 0 !important;
        text-decoration: none !important;
    }

    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main .menu__url-title {
        position: relative;
        color: #e5e7eb;
    }

    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main .menu__url-title::before,
    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main .menu__url-title::after {
        font-weight: 600;
        font-size: 0.9rem;
        color: #bbf7d0;
    }

    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main .menu__url-title::before {
        content: "[" !important;
        margin-right: 0.35rem;
    }

    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main .menu__url-title::after {
        content: "]" !important;
        margin-left: 0.35rem;
    }

    #primary-menu .navigation__menubar-main > li.is-active > a.nav__menu-link-main,
    #primary-menu .navigation__menubar-main > li.menu-item--active-trail > a.nav__menu-link-main,
    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main.is-active {
        color: #a5f3fc !important;
    }

    #primary-menu .navigation__menubar-main > li.is-active > a.nav__menu-link-main .menu__url-title,
    #primary-menu .navigation__menubar-main > li.menu-item--active-trail > a.nav__menu-link-main .menu__url-title,
    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main.is-active .menu__url-title {
        color: #a5f3fc;
    }

    #primary-menu .navigation__menubar-main > li.is-active > a.nav__menu-link-main .menu__url-title::before,
    #primary-menu .navigation__menubar-main > li.is-active > a.nav__menu-link-main .menu__url-title::after,
    #primary-menu .navigation__menubar-main > li.menu-item--active-trail > a.nav__menu-link-main .menu__url-title::before,
    #primary-menu .navigation__menubar-main > li.menu-item--active-trail > a.nav__menu-link-main .menu__url-title::after,
    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main.is-active .menu__url-title::before,
    #primary-menu .navigation__menubar-main > li > a.nav__menu-link-main.is-active .menu__url-title::after {
        color: #bef264;
    }
}

/* No sticky offset needed with Drupal toolbar anymore */
body.toolbar-horizontal #primary-menu {
    top: auto;
}

/* ==========================
 * 9. COPYRIGHT
 * ========================== */

#copyright {
    background: transparent;
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 0 3rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

#copyright a {
    color: rgba(56, 189, 248, 0.85);
}

#copyright a:hover {
    color: rgba(236, 72, 153, 0.9);
}

/* ==========================
 * 10. CLEANUP
 * ========================== */

#block-solo-subtheme-search,
#search-block-form,
.region-search,
#breadcrumb,
.region-breadcrumb {
    display: none !important;
}

/* ==========================
 * 11. ANIMATIONS
 * ========================== */

@keyframes htmb-orb-pulse {
    0%, 100% { transform: translate(-50%, -54%) scale(1); }
    50%      { transform: translate(-50%, -54%) scale(1.03); }
}

@keyframes htmbPulse {
    0% {
        box-shadow:
                0 0 0px rgba(56, 189, 248, 0.0),
                0 0 0px rgba(129, 140, 248, 0.0),
                0 0 0px rgba(251, 113, 133, 0.0);
    }
    50% {
        box-shadow:
                0 0 14px rgba(56, 189, 248, 0.55),
                0 0 30px rgba(129, 140, 248, 0.45),
                0 0 40px rgba(251, 113, 133, 0.25);
    }
    100% {
        box-shadow:
                0 0 0px rgba(56, 189, 248, 0.0),
                0 0 0px rgba(129, 140, 248, 0.0),
                0 0 0px rgba(251, 113, 133, 0.0);
    }
}

@keyframes selene-crt-boot {
    0%   { opacity: 0;   transform: scaleY(0.5); filter: brightness(0.4); }
    15%  { opacity: 1;   transform: scaleY(1.08); filter: brightness(1.8); }
    30%  { opacity: 0.2; }
    45%  { opacity: 1;   }
    60%  { opacity: 0.5; }
    80%  { opacity: 1;   filter: brightness(1.2); }
    100% { opacity: 1;   transform: scaleY(1);    filter: brightness(1); }
}

@keyframes selene-caret-blink {
    0%, 49% { opacity: 1; }
    50%,100%{ opacity: 0; }
}

/* Fade-up load animation for home-page components */
@keyframes htmb-fade-up {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*************************************************
 * 12. SELENE BLOG – FULL ARTICLE CARD
 *************************************************/

/* PAGE TYPE + BASE */

.selene-blog-page {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: rgba(229, 231, 235, 0.92);
    line-height: 1.7;
    font-size: 1rem;
}

.selene-blog-page h1,
.selene-blog-page h2,
.selene-blog-page h3,
.selene-blog-page h4 {
    font-family: "Audiowide", system-ui, sans-serif;
    letter-spacing: 0.04em;
    color: #f9fafb;
}

/* OUTER LAYOUT */

.selene-blog-shell {
    display: flex;
    justify-content: center;
    padding: 0.5rem 1.5rem 6rem;
}

.selene-blog-article {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

/* MAIN CARD */

.selene-blog-card {
    max-width: 960px;
    width: 100%;
    margin: 1.25rem auto 4rem;
    padding: 2.5rem 3rem 3rem;
    border-radius: 1.75rem;
    background: radial-gradient(
            circle at 50% 20%,
            rgba(20, 32, 55, 0.9) 0%,
            rgba(12, 18, 30, 0.98) 60%,
            rgba(10, 15, 25, 1) 100%
    );
    border: 1px solid rgba(148, 163, 255, 0.45);
    box-shadow:
            0 30px 70px rgba(15, 23, 42, 0.95),
            0 0 32px rgba(56, 189, 248, 0.22);
    overflow: hidden;
    position: relative;
}

/* HERO IMAGE */

.selene-blog-featured-image {
    margin: 0 0 2.25rem;
    padding: 0.6rem;
    border-radius: 1.4rem;
    background: radial-gradient(circle at top, #020617 0, #020617 40%, #000 100%);
    box-shadow:
            0 22px 48px rgba(15, 23, 42, 0.95),
            0 0 26px rgba(15, 118, 255, 0.28);
    overflow: hidden;
}

.selene-blog-featured-image img,
.selene-blog-featured-image .field__item,
.selene-blog-featured-image a {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.1rem;
    object-fit: cover;
}

/* HEADER BLOCK */

.selene-blog-header {
    padding: 0 0 1.75rem;
    margin: 0;
}

/* ENTRY 001 • DATE */
.selene-blog-kicker {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(210, 215, 225, 0.90);
}

.selene-blog-entry-number { font-weight: 600; }
.selene-blog-dot          { color: rgba(148, 163, 184, 0.8); }
.selene-blog-date         { color: rgba(210, 215, 225, 0.90); }

/* Cinematic title */

.selene-blog-title {
    margin: 0.7rem 0 0.2rem;
    font-family: "Audiowide", system-ui, sans-serif;
    font-size: clamp(2rem, 2.6vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f9fafb;
}

.selene-blog-title span {
    background: linear-gradient(90deg, #38bdf8, #fb7185);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Byline */

.selene-blog-byline {
    margin-top: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.selene-blog-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow:
            0 0 0 2px rgba(15, 23, 42, 0.9),
            0 0 0 3px rgba(56, 189, 248, 0.7);
}

.selene-blog-byline-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.selene-blog-author-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(180, 195, 215, 0.9);
}

.selene-blog-author-name {
    font-family: "Audiowide", system-ui, sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

.selene-blog-author-name a {
    color: inherit;
    text-decoration: none;
}

.selene-blog-author-name a:hover,
.selene-blog-author-name a:focus {
    text-decoration: underline;
}

/* Divider line */

.selene-blog-divider {
    border: 0;
    border-top: 1px solid rgba(51, 65, 85, 0.85);
    margin: 1.6rem 0 1.8rem;
}

/* BODY TEXT */

.selene-blog-body {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    font-size: 1.02rem;
    line-height: 1.8;
    color: rgba(235, 239, 245, 0.96);
    letter-spacing: 0.01em;
}

.selene-blog-body p {
    margin: 0 0 1.25rem;
    color: rgba(235, 239, 245, 0.96);
}

.selene-blog-body p + p {
    margin-top: 0.9rem;
}

.selene-blog-body em {
    font-style: italic;
    color: #f9fafb;
}

.selene-blog-body strong {
    font-weight: 700;
    color: #f9fafb;
}

/* TAGS + RELATED */

.selene-blog-tags-section {
    max-width: 720px;
    margin: 0 auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(148, 163, 255, 0.15);
}

.selene-blog-tags-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: #38bdf8;
}

.selene-blog-tags-section .field__item {
    display: inline-block;
    margin-right: 0.4rem;
    margin-bottom: 0.4rem;
}

.selene-blog-tags-section .field__item a {
    display: inline-block;
    padding: 2px 10px;
    background: rgba(56, 189, 248, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 999px;
    font-size: 0.85rem;
    color: #38bdf8;
    text-decoration: none;
    transition: 0.2s ease;
}

.selene-blog-tags-section .field__item a:hover {
    background: rgba(56, 189, 248, 0.25);
    border-color: rgba(56, 189, 248, 0.5);
}

/* RESPONSIVE BLOG CARD */

@media (max-width: 768px) {
    .selene-blog-shell {
        padding: 1.25rem 1rem 4rem;
    }

    .selene-blog-card {
        padding: 1.8rem 1.5rem 2.4rem;
        border-radius: 1.5rem;
        margin: 2.5rem auto 4rem;
    }

    .selene-blog-featured-image {
        margin: 0 0 1.75rem;
        padding: 0.5rem;
        border-radius: 1.3rem;
    }

    .selene-blog-body,
    .selene-blog-tags-section {
        max-width: 100%;
    }
}

/* Hide Drupal meta on Selene entries */
.page-node-type-selene-blog .node__meta,
.page-node-type-selene-blog .field--name-field-entry-number,
.page-node-type-selene-blog .field--name-field-entry-type {
    display: none;
}

/*************************************************
 * 13. SELENE TL;DR – SHARP CRT CARD
 *************************************************/

body.page-node-type-selene-blog .selene-blog-precis {
    max-width: 720px;
    margin: 1.5rem auto 2.25rem;
    padding: 2rem;
    border-radius: 12px;

    /* Deep black background for maximum contrast */
    background: #020b16 !important;
    border: 1px solid rgba(34, 197, 94, 0.4);

    /* Clean outer glow, not on the text */
    box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.9),
            0 0 15px rgba(34, 197, 94, 0.15);

    font-family: "JetBrains Mono", monospace;
    position: relative;
    overflow: hidden;
}

/* SHARP scanline overlay - uses thin lines that don't blur pixels */
body.page-node-type-selene-blog .selene-blog-precis::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
            rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.15) 50%
    );
    background-size: 100% 4px; /* Space between lines helps legibility */
    z-index: 2;
}

/* Label - Small and clear */
body.page-node-type-selene-blog .selene-blog-precis-label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #34d399; /* Emerald Green */
    font-weight: 800;
}

/* Body text – SHARPENED */
body.page-node-type-selene-blog .selene-blog-precis-body {
    position: relative;
    z-index: 3; /* Keep text ABOVE scanlines */
    font-size: 1.05rem; /* Slightly larger for easier reading */
    line-height: 1.6;
    color: #ecfdf5 !important; /* Near-white mint for perfect contrast */

    /* REMOVED: The heavy text-shadow that caused the blur */
    text-shadow: none !important;

    /* Hardware sharpening */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Typed cursor */
.selene-typed-cursor {
    display: inline-block;
    width: 8px;
    height: 1.2em;
    background: #34d399;
    margin-left: 4px;
    vertical-align: middle;
    animation: selene-caret-blink 1s steps(2, start) infinite;
}

@keyframes selene-caret-blink {
    to { visibility: hidden; }
}

/*************************************************
 * 14. HTMB – LAYOUT BUILDER BLOCK STYLES
 *************************************************/

/* Base: generic HTMB card shell */
.htmb-block {
    position: relative;
    border-radius: 1.5rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.75rem;
    background: #020617;
    border: 1px solid rgba(148, 163, 255, 0.35);
    box-shadow:
            0 24px 60px rgba(15, 23, 42, 0.95),
            0 0 30px rgba(56, 189, 248, 0.18);
    overflow: hidden;
}

/* Hover lift (especially on home page) */
.path-frontpage .htmb-block {
    transform: translateY(0);
    transition:
            transform 0.22s ease,
            box-shadow 0.22s ease,
            border-color 0.22s ease;
    animation: htmb-fade-up 0.55s ease-out both;
}

.path-frontpage .htmb-block:hover {
    transform: translateY(-3px);
    box-shadow:
            0 26px 72px rgba(15, 23, 42, 0.98),
            0 0 36px rgba(56, 189, 248, 0.32);
    border-color: rgba(148, 163, 255, 0.7);
}

/* Default Solo title tidy */
.htmb-block .solo-block-title {
    margin: 0 0 1rem;
    font-family: "Audiowide", system-ui, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #e0f2fe;
}

/* Variant – cyan/pink glass card */
.htmb-block--card {
    background:
            radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.18), transparent 55%),
            radial-gradient(circle at 100% 100%, rgba(244, 63, 94, 0.18), transparent 55%),
            rgba(15, 23, 42, 0.98);
    border-color: rgba(148, 163, 255, 0.55);
    box-shadow:
            0 26px 70px rgba(15, 23, 42, 0.96),
            0 0 36px rgba(56, 189, 248, 0.28);
    backdrop-filter: blur(10px);
}

/* Variant – deep navy panel */
.htmb-block--panel {
    background:
            radial-gradient(circle at 10% 0%, rgba(15, 118, 255, 0.18), transparent 60%),
            #020617;
    border-color: rgba(30, 64, 175, 0.75);
    box-shadow:
            0 20px 55px rgba(15, 23, 42, 0.96),
            0 0 24px rgba(15, 118, 255, 0.22);
}

.htmb-block--panel .solo-block-title {
    color: #bfdbfe;
}

/* Variant – terminal card */
.htmb-block--terminal {
    background:
            radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.22), transparent 55%),
            #020b16;
    border-color: rgba(34, 197, 94, 0.7);
    box-shadow:
            0 22px 60px rgba(15, 23, 42, 0.98),
            0 0 30px rgba(34, 197, 94, 0.45);
    font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    color: #c4ffdf;
}

/* Variant – outline, low glow */
.htmb-block--outline {
    background: transparent;
    border-radius: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.5);
    box-shadow:
            0 0 0 rgba(0,0,0,0),
            0 18px 45px rgba(15, 23, 42, 0.9);
    padding: 1.25rem 1.5rem;
}

.htmb-block--outline .solo-block-title {
    color: rgba(209, 213, 219, 0.9);
    font-family: "Inter", system-ui, sans-serif;
    letter-spacing: 0.12em;
}

/*************************************************
 * 15. NEON BLOCK TITLE – GENERIC LB STYLE
 * Use class: lb-style--htmb-neon-title
 *************************************************/

.lb-style--htmb-neon-title .solo-block-title {
    position: relative;
    margin: 0 0 1.2rem;
    font-family: "Audiowide", system-ui, sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #38bdf8, #a855f7, #fb7185);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow:
            0 0 10px rgba(15, 23, 42, 0.9),
            0 0 18px rgba(56, 189, 248, 0.45);
}

.lb-style--htmb-neon-title .solo-block-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.4rem;
    width: 0px;
    height: 0px;
    border-radius: 999px;
    background: linear-gradient(90deg, #22d3ee, #a855f7, #fb7185);
    box-shadow:
            0 0 10px rgba(56, 189, 248, 0.85),
            0 0 18px rgba(129, 140, 248, 0.6);
}

/*************************************************
 * 16. SELENE INTRO – LAYOUT BUILDER STYLE
 * Style: lb-style--htmb-selene-intro
 *************************************************/

.lb-style--htmb-selene-intro {
    position: relative;
    border-radius: 1.5rem;
    padding: 1.7rem 1.9rem;
    margin-bottom: 2.1rem;

    background:
            radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.18), transparent 55%),
            radial-gradient(circle at 100% 100%, rgba(244, 63, 94, 0.18), transparent 55%),
            rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(148, 163, 255, 0.55);
    box-shadow:
            0 26px 70px rgba(15, 23, 42, 0.96),
            0 0 36px rgba(56, 189, 248, 0.28);
    backdrop-filter: blur(10px);
}

.lb-style--htmb-selene-intro .solo-block-title {
    position: relative;
    margin: 0 0 1.3rem;
    padding-left: 0.2rem;

    font-family: "Audiowide", system-ui, sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    background: linear-gradient(90deg, #38bdf8, #a855f7, #fb7185);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow:
            0 0 10px rgba(15, 23, 42, 0.9),
            0 0 18px rgba(56, 189, 248, 0.45);
}

.lb-style--htmb-selene-intro .solo-block-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.4rem;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #22d3ee, #a855f7, #fb7185);
    box-shadow:
            0 0 10px rgba(56, 189, 248, 0.85),
            0 0 18px rgba(129, 140, 248, 0.6);
}

.lb-style--htmb-selene-intro .block__content {
    margin-top: 0.4rem;
}

/* Reflection streaks across Selene intro content */
.path-frontpage .layout--twocol-section .layout__region--first .lb-style--htmb-selene-intro .block__content::before,
.path-frontpage .layout--twocol-section .layout__region--first .lb-style--htmb-selene-intro .block__content::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0.11;
    mix-blend-mode: screen;
}

.path-frontpage .layout--twocol-section .layout__region--first .lb-style--htmb-selene-intro .block__content::before {
    top: -10%;
    left: -20%;
    width: 60%;
    height: 40%;
    background: linear-gradient(120deg, rgba(255,255,255,0.12), transparent 70%);
    filter: blur(10px);
}

.path-frontpage .layout--twocol-section .layout__region--first .lb-style--htmb-selene-intro .block__content::after {
    bottom: -18%;
    right: -25%;
    width: 55%;
    height: 42%;
    background: linear-gradient(300deg, rgba(148,163,255,0.22), transparent 70%);
    filter: blur(14px);
}

/*************************************************
 * 17. FRONT PAGE 67–33 SHELL + SELENE OVERVIEW LABEL
 *************************************************/

/* Remove old full-frame box & divider on 67–33 section */
.layout--twocol-section.layout--twocol-section--67-33 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 2.2rem;
    position: relative;
}

/* Column padding tidy */
.layout--twocol-section .layout__region {
    padding-inline: 0;
}

@media (max-width: 992px) {
    .layout--twocol-section.layout--twocol-section--67-33 {
        padding-bottom: 2rem;
    }
}

/* Subtle neon "column guide" glow behind entire 67–33 region (homepage only) */
.path-frontpage .layout--twocol-section.layout--twocol-section--67-33::before {
    content: "";
    position: absolute;
    inset: -6px 6%;
    border-radius: 999px;
    background: linear-gradient(
            90deg,
            rgba(56, 189, 248, 0.14),
            rgba(168, 85, 247, 0.08),
            rgba(248, 113, 113, 0.14)
    );
    opacity: 0.55;
    filter: blur(26px);
    z-index: -1;
}

/* Left column: SELENE // OVERVIEW label above the main card */
.path-frontpage .layout--twocol-section .layout__region--first {
    position: relative;
}

.path-frontpage .layout--twocol-section .layout__region--first .htmb-block {
    margin-top: 3rem;
}

/* SELENE // OVERVIEW label */
.path-frontpage .layout--twocol-section .layout__region--first .htmb-block::before {
    content: "SELENE // OVERVIEW";
    position: absolute;
    top: -3.1rem;
    left: 0;
    font-family: "Audiowide", system-ui, sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #38bdf8, #a855f7, #fb7185);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow:
            0 0 10px rgba(15, 23, 42, 0.9),
            0 0 16px rgba(56, 189, 248, 0.5);
}

/* Underline bar */
.path-frontpage .layout--twocol-section .layout__region--first .htmb-block::after {
    content: "";
    position: absolute;
    top: -1.55rem;
    left: 0;
    width: 110px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #22d3ee, #a855f7, #fb7185);
    box-shadow:
            0 0 10px rgba(56, 189, 248, 0.85),
            0 0 18px rgba(129, 140, 248, 0.6);
}

/* Safety: remove any old label hacks on the region itself */
.path-frontpage .layout--twocol-section .layout__region--first::before,
.path-frontpage .layout--twocol-section .layout__region--first::after {
    content: none !important;
}

/*************************************************
 * 18. LATEST POSTS – SINGLE CHIP STACK
 * LB Style: lb-style--htmb-latest-posts
 *************************************************/

/* Kill the big outer HTMB card only for this block */
.lb-style--htmb-latest-posts .htmb-block {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Wrapper: no big outer glowing panel */
.lb-style--htmb-latest-posts {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Kill Solo / Views extra wrappers inside this block */
.lb-style--htmb-latest-posts .element-container-wrapper,
.lb-style--htmb-latest-posts .view-latest-blog-posts,
.lb-style--htmb-latest-posts .view-latest-blog-posts .view-content,
.lb-style--htmb-latest-posts .view-latest-blog-posts .views-row,
.lb-style--htmb-latest-posts .view-latest-blog-posts article,
.lb-style--htmb-latest-posts .view-latest-blog-posts .views-field {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Stack of chips */
.lb-style--htmb-latest-posts .view-latest-blog-posts .view-content {
    display: flex;
    flex-direction: column;
    gap: 0.7rem !important; /* tighter rhythm */
}

/* "LATEST NEWS" title – neon text, but NO underline bar */
.lb-style--htmb-latest-posts .solo-block-title {
    position: relative;
    margin: 0 0 1.15rem;
    font-family: "Audiowide", system-ui, sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #38bdf8, #a855f7, #fb7185);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow:
            0 0 10px rgba(15, 23, 42, 0.9),
            0 0 18px rgba(56, 189, 248, 0.45);
}

/* Remove the underline just for this block */
.lb-style--htmb-latest-posts .solo-block-title::after {
    content: none !important;
}

/* Each Views row (structural only now) */
.lb-style--htmb-latest-posts .view-latest-blog-posts .views-row {
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================
   CHIP CARD – SINGLE GLOWING CONTAINER
   (use this class in your Views field markup)
   ========================================= */

.htmb-blog-chip {
    background: rgba(3, 7, 18, 0.92);
    border-radius: 0.95rem;
    padding: 0.85rem 0.95rem 0.95rem;
    margin: 0;
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow:
            0 10px 28px rgba(15, 23, 42, 0.9),
            0 0 18px rgba(56, 189, 248, 0.25);
    backdrop-filter: blur(12px);
    transition:
            transform 0.22s ease,
            box-shadow 0.22s ease,
            border-color 0.22s ease;
    animation: htmb-fade-up 0.55s ease-out both;
}

/* Hover – gentle lift + brighter glow */
.htmb-blog-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, 0.7);
    box-shadow:
            0 14px 32px rgba(15, 23, 42, 0.95),
            0 0 24px rgba(56, 189, 248, 0.45);
}

/* Inner layout: title above image */
.htmb-blog-chip-inner {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Blog title – neon, no underline */
.htmb-blog-chip-inner > a:first-child {
    font-family: "Audiowide", system-ui, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #e6f6ff;
    text-decoration: none;
    line-height: 1.35;
    text-shadow: 0 0 6px rgba(140, 220, 255, 0.55);
}

/* Make sure no theme adds its own line */
.htmb-blog-chip-inner > a:first-child::after {
    content: none !important;
    display: none !important;
}

.htmb-blog-chip-inner > a:first-child:hover {
    color: #b9f2ff;
}

/* Featured image */
.htmb-blog-chip-inner img {
    width: 100%;
    height: auto;
    border-radius: 0.7rem;
    object-fit: cover;
    border: 1px solid rgba(56, 189, 248, 0.28);
    box-shadow:
            0 0 14px rgba(56, 189, 248, 0.28),
            inset 0 0 10px rgba(15, 23, 42, 0.95);
}

/* Any links in the chip layout are block-level for easy click */
.htmb-blog-chip-inner a {
    display: block;
}

/* =========================================
   "MORE" LINK – SMALL NEON PILL BUTTON
   ========================================= */

.lb-style--htmb-latest-posts .view-latest-blog-posts .more-link {
    text-align: right;
    margin-top: 1.4rem !important;
}

.lb-style--htmb-latest-posts .view-latest-blog-posts .more-link a {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-family: "Audiowide", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #a5f3fc;
    text-decoration: none;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    background: rgba(2, 6, 23, 0.7);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.6);
    transition: all 0.22s ease;
}

.lb-style--htmb-latest-posts .view-latest-blog-posts .more-link a:hover {
    color: #ffffff;
    border-color: rgba(56, 189, 248, 0.7);
    box-shadow: 0 0 18px rgba(56, 189, 248, 1);
}

/*************************************************
 * HARD NUKE OUTER BOX ON "LATEST NEWS" BLOCK
 *************************************************/

/* Target any block whose class contains the latest-blog-posts block id */
[class*="block-views-blocklatest-blog-posts"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 2rem 0 !important;
}

/* Also kill any htmb panel shell inside that block */
[class*="block-views-blocklatest-blog-posts"] .htmb-block,
[class*="block-views-blocklatest-blog-posts"] .htmb-block--panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Keep the chips themselves as the ONLY boxes – no wrapper box */
[class*="block-views-blocklatest-blog-posts"] .view-latest-blog-posts .views-row {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
/*************************************************
 * 19. NEWS FEED – CYBERPUNK CARD LAYOUT
 * Route: /news/feed (node 5)
 *************************************************/

.path-node-5 {
    --nf-card-bg: rgba(7, 11, 25, 0.82);
    --nf-border: rgba(148, 163, 255, 0.2);
    --nf-glow: rgba(56, 189, 248, 0.65);
    --nf-radius: 1.35rem;
}

/* Container spacing */
.path-node-5 .view-latest-blog-posts {
    max-width: 1050px;
    margin: 3rem auto;
    display: flex;
    flex-direction: column;
    gap: 2.8rem;
}

/* Each card */
.path-node-5 .view-latest-blog-posts .views-row {
    display: flex;
    background: var(--nf-card-bg);
    border-radius: var(--nf-radius);
    padding: 1.75rem;
    gap: 2rem;
    align-items: center;
    border: 1px solid var(--nf-border);
    box-shadow:
            0 0 35px rgba(0, 150, 255, 0.15),
            inset 0 0 18px rgba(255, 0, 180, 0.08);
    transition: 0.25s ease-out;
    backdrop-filter: blur(6px);
}

/* Hover glow */
.path-node-5 .view-latest-blog-posts .views-row:hover {
    border-color: var(--nf-glow);
    box-shadow:
            0 0 45px rgba(0, 220, 255, 0.45),
            inset 0 0 25px rgba(80, 0, 150, 0.35);
    transform: translateY(-2px);
}

/* Featured image */
.path-node-5 .view-latest-blog-posts .views-field-field-featured-image img {
    width: 280px;
    height: 180px;
    object-fit: cover;
    border-radius: var(--nf-radius);
    box-shadow:
            0 0 12px rgba(0, 200, 255, 0.55),
            0 0 0 2px rgba(0, 40, 80, 1);
    transition: 0.25s ease-out;
}

/* Slight scale on hover */
.path-node-5 .views-row:hover .views-field-field-featured-image img {
    transform: scale(1.02);
}

/* Right-side text container */
.path-node-5 .views-field-title,
.path-node-5 .views-field-created {
    flex: 1 1 auto;
}

/* Title */
.path-node-5 .views-field-title a {
    font-family: "Audiowide", sans-serif;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: #e5e7eb;
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
    display: block;
    margin-bottom: 0.65rem;
}

.path-node-5 .views-row:hover .views-field-title a {
    color: #8b5cf6;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.65);
}

/* Date */
.path-node-5 .views-field-created {
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    color: #8aa0b8;
    letter-spacing: 0.04em;
    margin-bottom: 1.1rem;
}

/* Summary text (if exists) */
.path-node-5 .views-field-body {
    font-family: "Inter", sans-serif;
    color: #cdd5e0;
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 95%;
}

/* Read more link (auto if you have one) */
.path-node-5 .views-field-view-node a {
    display: inline-block;
    margin-top: 1.25rem;
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    padding: 0.45rem 1.2rem;
    border-radius: 999px;
    background: rgba(0, 180, 255, 0.15);
    border: 1px solid rgba(0, 220, 255, 0.35);
    color: #b3e6ff;
    text-decoration: none;
    transition: 0.25s;
}

.path-node-5 .views-field-view-node a:hover {
    background: rgba(0, 220, 255, 0.35);
    border-color: rgba(139, 92, 246, 0.6);
    color: #fff;
}

/* MOBILE STACKING */
@media (max-width: 850px) {
    .path-node-5 .view-latest-blog-posts .views-row {
        flex-direction: column;
        text-align: center;
    }

    .path-node-5 .view-latest-blog-posts .views-field-field-featured-image img {
        width: 100%;
        height: auto;
    }
}
/*************************************************
 * THE "RECOVERY" HUD STYLE
 *************************************************/

/* 1. Target any list that follows a 'Related' header */
/* This works even if the specific 'selene' class is missing */
.selene-blog-article h3:contains("Related"),
.selene-blog-article .related-title,
.field--name-field-related-posts .field__label {
    font-family: 'Audiowide', sans-serif !important;
    color: #00f3ff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.6) !important;
    margin-top: 40px !important;
}

/* 2. Style the actual list items */
/* Targets the list inside the related posts area */
.field--name-field-related-posts ul,
.node__content ul.related-list,
section[class*="related"] ul {
    list-style: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.field--name-field-related-posts li,
.related-list li,
section[class*="related"] li {
    background: rgba(0, 243, 255, 0.05) !important;
    border: 1px solid rgba(0, 243, 255, 0.15) !important;
    border-left: 4px solid #00f3ff !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    list-style: none !important;
    transition: all 0.2s ease !important;
}

/* 3. The Links */
.field--name-field-related-posts a,
.related-list a {
    display: block !important;
    padding: 12px 20px !important;
    color: #a7f3d0 !important;
    font-family: 'JetBrains Mono', monospace !important;
    text-decoration: none !important;
}

/* 4. Hover State */
.field--name-field-related-posts li:hover,
.related-list li:hover {
    background: rgba(0, 243, 255, 0.12) !important;
    transform: translateX(8px) !important;
}

/* 5. Final Bullet Kill */
.field--name-field-related-posts li::before,
.related-list li::before {
    content: none !important;
    display: none !important;
}
/*************************************************
 * SELENE – INTERACTIVE PRECIS (GLITCH HUD)
 *************************************************/

/* The Container - Adding a subtle glow and border */
.selene-blog-precis {
    position: relative;
    background: rgba(0, 243, 255, 0.03) !important;
    border: 1px solid rgba(0, 243, 255, 0.15) !important;
    padding: 25px !important;
    overflow: hidden;
}

/* The Label (SELENE’S PRECIS) - Adding the Glitch */
.selene-blog-precis-label {
    font-family: 'Audiowide', sans-serif !important;
    color: #00f3ff !important;
    letter-spacing: 0.3em !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.8);
    animation: textFlicker 5s infinite;
}

/* Creating a "Scanline" overlay for the Precis box */
.selene-blog-precis::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(
            to bottom,
            transparent 50%,
            rgba(0, 243, 255, 0.03) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 2;
}

/* The "Glitch" Animation */
@keyframes textFlicker {
    0%   { opacity: 1; }
    94%  { opacity: 1; transform: skew(0deg); }
    95%  { opacity: 0.4; transform: skew(5deg); color: #ff00ff; } /* Quick pink shift */
    96%  { opacity: 1; transform: skew(0deg); }
    97%  { opacity: 0.8; }
    98%  { opacity: 1; filter: blur(1px); }
    100% { opacity: 1; filter: blur(0px); }
}
.selene-blog-precis-body {
    font-family: 'JetBrains Mono', monospace !important;
    color: #a7f3d0 !important; /* Mint terminal green */
    font-size: 0.95rem !important;
    line-height: 1.6;
    opacity: 0.9;
}
.selene-blog-precis:hover::after {
    animation: scanMove 0.2s linear infinite;
}

@keyframes scanMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}
/*************************************************
 * SELENE – NEON HUD NAVIGATION
 *************************************************/

/* 1. Reset the Menu Container */
.nav__menu,
#main-menu-inner,
li.nav__menu-item {
    background: transparent !important;
    border: none !important;
}

/* 2. Style the Menu Links */
li.nav__menu-item a {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: rgba(0, 243, 255, 0.6) !important; /* Dimmer cyan by default */
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    background: transparent !important;
}

/* 3. The Hover State: Glow and Brackets */
li.nav__menu-item a:hover {
    color: #00f3ff !important; /* Full brightness */
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.8) !important;
}

/* Left Bracket [ */
li.nav__menu-item a::before {
    content: "[";
    position: absolute;
    left: 0;
    opacity: 0;
    transition: all 0.2s ease;
    color: #ff00ff; /* Magenta hint for a bit of spice */
}

/* Right Bracket ] */
li.nav__menu-item a::after {
    content: "]";
    position: absolute;
    right: 0;
    opacity: 0;
    transition: all 0.2s ease;
    color: #ff00ff;
}

/* Show Brackets on Hover */
li.nav__menu-item a:hover::before {
    left: 5px;
    opacity: 1;
}

li.nav__menu-item a:hover::after {
    right: 5px;
    opacity: 1;
}

/* 4. Active Page Marker */
li.nav__menu-item a.is-active {
    color: #00f3ff !important;
    border-bottom: 2px solid #00f3ff !important;
}
/*************************************************
 * SELENE – TERMINAL FOOTER
 *************************************************/

/* 1. Reset the Footer Region */
#footer-wrapper {
    background-color: #000 !important; /* Deep black floor */
    color: rgba(167, 243, 208, 0.6) !important; /* Mint terminal green */
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
}

/* 2. Style the Footer Headers */
#footer-wrapper h2,
#footer-wrapper h3 {
    font-family: 'Audiowide', sans-serif !important;
    color: #00f3ff !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 1.5rem !important;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
}

/* 3. Footer Links as Selection Code */
#footer-wrapper a {
    color: rgba(167, 243, 208, 0.8) !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

#footer-wrapper a:hover {
    color: #fff !important;
    padding-left: 5px;
}

#footer-wrapper a:hover::before {
    content: "> ";
    color: #00f3ff;
}

/* 4. The "Copyright" as a System Serial Number */
#copyright {
    opacity: 0.4;
    letter-spacing: 0.1em;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* =========================================
   SELENE SINGLE POST FIXES
   Put in style.css, not htmb-feed.css
   ========================================= */

/* AMAZON CTA */
.selene-blog-body .field--name-field-article-body > .field__item > p > a[href*="amazon.com"],
.selene-blog-body .field--name-field-article-body > .field__item > p > a[href*="amzn.to"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px !important;
    padding: 12px 20px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
    color: #fff7ed !important;
    border: 1px solid rgba(255, 237, 213, 0.45) !important;
    box-shadow:
        0 0 0 1px rgba(249, 115, 22, 0.25),
        0 10px 24px rgba(249, 115, 22, 0.28),
        0 0 22px rgba(245, 158, 11, 0.22) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.selene-blog-body .field--name-field-article-body > .field__item > p > a[href*="amazon.com"]:hover,
.selene-blog-body .field--name-field-article-body > .field__item > p > a[href*="amzn.to"]:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.05) !important;
    box-shadow:
        0 0 0 1px rgba(255, 247, 237, 0.5),
        0 16px 34px rgba(249, 115, 22, 0.35),
        0 0 28px rgba(245, 158, 11, 0.3) !important;
}

/* TAGS ROW */
.selene-blog-tags-section {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.selene-blog-tags-header {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

.selene-blog-tags-label {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #38bdf8 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.selene-blog-tags-list {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
}

.selene-blog-tags-list .field__items {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.selene-blog-tags-list .field__item {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.selene-blog-tags-list .field__item a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(8, 47, 73, 0.68) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #dbeafe !important;
    text-decoration: none !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/*************************************************
 * 100. SELENE SINGLE POST – FINAL HARD OVERRIDES
 * Appended by ChatGPT to beat earlier conflicting rules.
 *************************************************/

.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item > p:last-of-type a,
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item > p a[href*="amazon"],
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item > p a[href*="amzn"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-top: 0.35rem !important;
    padding: 0.8rem 1.25rem !important;
    min-height: 42px !important;
    border: 1px solid rgba(251, 191, 36, 0.65) !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at top left, rgba(251, 191, 36, 0.28), transparent 55%),
        linear-gradient(135deg, rgba(245, 158, 11, 0.96), rgba(249, 115, 22, 0.96)) !important;
    color: #fff7ed !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0 !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow:
        0 0 0 1px rgba(255, 237, 213, 0.18),
        0 10px 24px rgba(249, 115, 22, 0.28),
        0 0 20px rgba(245, 158, 11, 0.22) !important;
    opacity: 1 !important;
    filter: none !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease !important;
}

.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item > p:last-of-type a::before,
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item > p a[href*="amazon"]::before,
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item > p a[href*="amzn"]::before {
    content: "Buy on Amazon";
    font-size: 0.78rem !important;
    line-height: 1 !important;
    color: #fff7ed !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item > p:last-of-type a:hover,
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item > p a[href*="amazon"]:hover,
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item > p a[href*="amzn"]:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.05) !important;
    box-shadow:
        0 0 0 1px rgba(255, 247, 237, 0.35),
        0 16px 34px rgba(249, 115, 22, 0.35),
        0 0 28px rgba(245, 158, 11, 0.30) !important;
}

.page-node-type-selene-blog .selene-blog-tags-section {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(148, 163, 255, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.page-node-type-selene-blog .selene-blog-tags-header {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

.page-node-type-selene-blog .selene-blog-tags-label {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #38bdf8 !important;
}

.page-node-type-selene-blog .selene-blog-tags-list,
.page-node-type-selene-blog .selene-blog-tags-list .field__items,
.page-node-type-selene-blog .selene-blog-tags-list.taxonomy-term-entity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
}

.page-node-type-selene-blog .selene-blog-tags-list .field__item {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page-node-type-selene-blog .selene-blog-tags-section .field__item::before,
.page-node-type-selene-blog .selene-blog-tags-section .field__item::after {
    content: none !important;
    display: none !important;
}

.page-node-type-selene-blog .selene-blog-tags-list .field__item a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 0 15px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(56, 189, 248, 0.10) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #dbeafe !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.page-node-type-selene-blog .selene-blog-tags-list .field__item a:hover {
    background: rgba(56, 189, 248, 0.20) !important;
    border-color: rgba(56, 189, 248, 0.55) !important;
    color: #ffffff !important;
}

.page-node-type-selene-blog .selene-related-posts {
    max-width: 720px !important;
    margin: 1.1rem auto 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
}

.page-node-type-selene-blog .selene-related-posts .related-title {
    margin: 0 0 0.9rem 0 !important;
    padding: 0 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    color: #f8fafc !important;
    text-shadow: none !important;
}

.page-node-type-selene-blog .selene-related-posts .related-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.page-node-type-selene-blog .selene-related-posts .related-item {
    list-style: none !important;
    margin: 0 0 0.7rem 0 !important;
    padding: 0 !important;
    background: rgba(0, 243, 255, 0.05) !important;
    border: 1px solid rgba(0, 243, 255, 0.15) !important;
    border-left: 4px solid #00f3ff !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.page-node-type-selene-blog .selene-related-posts .related-item::before,
.page-node-type-selene-blog .selene-related-posts .related-item::after,
.page-node-type-selene-blog .selene-related-posts .related-list li::before,
.page-node-type-selene-blog .selene-related-posts .related-list li::marker {
    content: none !important;
    display: none !important;
}

.page-node-type-selene-blog .selene-related-posts .related-link {
    display: block !important;
    padding: 12px 18px !important;
    color: #a7f3d0 !important;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
}

.page-node-type-selene-blog .selene-related-posts .related-item:hover {
    background: rgba(0, 243, 255, 0.12) !important;
    transform: translateX(6px) !important;
}

.page-node-type-selene-blog .selene-related-posts .related-link:hover {
    color: #d1fae5 !important;
    text-shadow: none !important;
}

@media (max-width: 768px) {
    .page-node-type-selene-blog .selene-blog-tags-section {
        gap: 10px !important;
    }

    .page-node-type-selene-blog .selene-blog-tags-list,
    .page-node-type-selene-blog .selene-blog-tags-list .field__items {
        gap: 8px !important;
    }

    .page-node-type-selene-blog .selene-related-posts .related-title {
        font-size: 1rem !important;
    }

    .page-node-type-selene-blog .selene-related-posts .related-link {
        font-size: 0.88rem !important;
    }
}


/*************************************************
 * 101. AMAZON CTA – FINAL VISIBILITY OVERRIDE
 * Targets a standalone link paragraph in the article body.
 *************************************************/

.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item p > a:only-child,
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item p > a[href*="amazon"],
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item p > a[href*="amzn"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    min-width: 220px !important;
    min-height: 50px !important;
    padding: 0.95rem 1.6rem !important;
    margin-top: 0.45rem !important;

    background:
        radial-gradient(circle at 15% 20%, rgba(255, 244, 200, 0.30), transparent 38%),
        linear-gradient(135deg, #fbbf24 0%, #f59e0b 36%, #f97316 72%, #ea580c 100%) !important;
    border: 1px solid rgba(255, 236, 179, 0.92) !important;
    border-radius: 999px !important;

    box-shadow:
        0 0 0 1px rgba(255, 247, 237, 0.16),
        0 14px 34px rgba(249, 115, 22, 0.42),
        0 0 34px rgba(251, 191, 36, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;

    color: #fff7ed !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 0 !important;
    font-weight: 900 !important;
    letter-spacing: 0.14em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18) !important;

    opacity: 1 !important;
    filter: none !important;
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease !important;
}

.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item p > a:only-child::before,
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item p > a[href*="amazon"]::before,
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item p > a[href*="amzn"]::before {
    content: "Buy on Amazon";
    font-size: 0.84rem !important;
    line-height: 1 !important;
    color: #fff7ed !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item p > a:only-child:hover,
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item p > a[href*="amazon"]:hover,
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item p > a[href*="amzn"]:hover {
    transform: translateY(-3px) scale(1.02) !important;
    filter: brightness(1.08) saturate(1.05) !important;
    border-color: rgba(255, 247, 220, 1) !important;
    box-shadow:
        0 0 0 1px rgba(255, 247, 237, 0.24),
        0 18px 40px rgba(249, 115, 22, 0.48),
        0 0 40px rgba(251, 191, 36, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item p > a:only-child:focus-visible,
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item p > a[href*="amazon"]:focus-visible,
.page-node-type-selene-blog .selene-blog-body .field--name-field-article-body > .field__item p > a[href*="amzn"]:focus-visible {
    outline: 2px solid rgba(255, 247, 237, 0.95) !important;
    outline-offset: 4px !important;
}
.selene-purchase-block {
    margin-top: 0.75rem;
}

.selene-purchase-block a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 46px;
    padding: 0.92rem 1.45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 231, 170, 0.82);
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 231, 170, 0.28), transparent 42%),
        linear-gradient(135deg, #f59e0b 0%, #fb923c 42%, #f97316 76%, #ea580c 100%);
    box-shadow:
        0 0 0 1px rgba(255, 247, 237, 0.12),
        0 10px 24px rgba(249, 115, 22, 0.34),
        0 0 24px rgba(245, 158, 11, 0.24);
    color: #fff7ed;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.selene-purchase-block a::before {
    content: "→";
    font-size: 0.92rem;
    line-height: 1;
}

.selene-purchase-block a:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    border-color: rgba(255, 243, 207, 0.96);
    box-shadow:
        0 0 0 1px rgba(255, 247, 237, 0.2),
        0 14px 32px rgba(249, 115, 22, 0.42),
        0 0 30px rgba(245, 158, 11, 0.3);
}