/*
==========================================================================
HOTBBWS4YOU
STAGE 9.3D7E3 — REFERENCE CREATOR PROFILE
==========================================================================
*/


/* ======================================================================
   REFERENCE THEME TOKENS
   ====================================================================== */

:root{
    --ref-bg:#050505;
    --ref-panel:#090909;
    --ref-panel-soft:#111111;
    --ref-text:#f7f4ee;
    --ref-muted:#bdb5aa;

    --ref-gold:#d6a92e;
    --ref-gold-bright:#ffc957;
    --ref-gold-soft:rgba(214,169,46,.28);

    --ref-red:#c5162e;

    --ref-border:rgba(214,169,46,.88);

    --ref-shadow:
        0 0 8px rgba(214,169,46,.24),
        0 0 18px rgba(214,169,46,.10);
}

:root[data-theme="light"]{
    --ref-bg:#ffffff;
    --ref-panel:#ffffff;
    --ref-panel-soft:#fffaf0;
    --ref-text:#18120d;
    --ref-muted:#665a4b;

    --ref-gold:#a97f16;
    --ref-gold-bright:#c69317;
    --ref-gold-soft:rgba(169,127,22,.20);

    --ref-red:#c5162e;

    --ref-border:rgba(169,127,22,.82);

    --ref-shadow:
        0 4px 14px rgba(45,32,14,.09);
}


/* ======================================================================
   PAGE
   ====================================================================== */

.public-creator-page{
    background:var(--ref-bg) !important;
    color:var(--ref-text) !important;
}

.ref-main{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    padding:
        10px 8px
        24px !important;

    box-sizing:border-box;
}


/* ======================================================================
   TOP HEADER — REFERENCE STYLE
   ====================================================================== */

.public-site-header{
    position:sticky;

    top:0;

    z-index:100;

    width:100%;

    background:
        rgba(5,5,5,.97) !important;

    border-bottom:
        1px solid
        var(--ref-gold) !important;

    box-shadow:
        0 3px 14px
        rgba(0,0,0,.45);
}

:root[data-theme="light"] .public-site-header{
    background:
        rgba(255,255,255,.98) !important;

    box-shadow:
        0 3px 12px
        rgba(45,32,14,.08);
}

.public-header-inner{
    width:100% !important;

    max-width:none !important;

    min-height:68px;

    margin:0 !important;

    padding:
        8px 16px !important;

    box-sizing:border-box;

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    gap:22px !important;
}

.public-brand{
    color:
        var(--ref-gold-bright) !important;

    font-size:
        clamp(1.25rem,2vw,2rem) !important;

    font-weight:950 !important;

    letter-spacing:.01em;

    text-decoration:none !important;
}

.public-brand::before{
    content:"🔥";

    margin-right:7px;
}

.public-nav{
    display:flex !important;

    align-items:center !important;

    justify-content:flex-end !important;

    gap:
        clamp(12px,2vw,30px) !important;

    flex-wrap:wrap;
}

.public-nav a{
    color:
        var(--ref-text) !important;

    text-decoration:none !important;

    font-weight:700;

    font-size:.9rem;
}

.public-nav a:hover{
    color:
        var(--ref-gold-bright) !important;
}


/* ======================================================================
   DESKTOP APPLICATION SHELL
   ====================================================================== */

.ref-app-shell{
    width:100%;

    max-width:1600px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        220px
        minmax(0,1fr)
        270px;

    gap:12px;

    align-items:start;
}

.ref-left-rail,
.ref-right-rail{
    min-width:0;
}

.ref-left-rail{
    display:flex;

    flex-direction:column;

    gap:12px;
}

.ref-right-rail{
    display:flex;

    flex-direction:column;

    gap:12px;
}

.ref-center-column{
    min-width:0;
}


/* ======================================================================
   LEFT NAVIGATION
   ====================================================================== */

.ref-side-nav{
    border:
        1px solid
        var(--ref-border);

    border-radius:11px;

    background:
        var(--ref-panel);

    box-shadow:
        var(--ref-shadow);

    padding:8px;
}

.ref-side-nav a{
    min-height:45px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:
        8px 9px;

    border-radius:7px;

    color:
        var(--ref-text) !important;

    text-decoration:none !important;

    font-weight:650;
}

.ref-side-nav a:hover{
    background:
        var(--ref-panel-soft);

    color:
        var(--ref-gold-bright) !important;
}

.ref-nav-icon{
    width:23px;

    color:
        var(--ref-gold-bright);

    text-align:center;

    font-size:1.2rem;
}


/* ======================================================================
   LEFT COMMUNITY / FLAME AREA
   ====================================================================== */

.ref-community-callout{
    position:relative;

    overflow:hidden;

    border:
        1px solid
        var(--ref-border);

    border-radius:10px;

    background:
        var(--ref-panel);

    box-shadow:
        var(--ref-shadow);

    padding:
        16px 10px;

    text-align:center;
}

.ref-community-flame{
    font-size:2rem;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,117,0,.7)
        );
}

.ref-community-callout strong{
    display:block;

    color:
        var(--ref-text);

    font-size:1rem;
}

.ref-community-callout p{
    margin:
        8px 0 0;

    color:
        var(--ref-muted);

    line-height:1.4;

    font-size:.78rem;
}

.ref-left-flame-art{
    min-height:220px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    align-items:center;

    padding:
        20px 8px;

    border-radius:10px;

    background:
        radial-gradient(
            circle at 10% 100%,
            rgba(255,82,0,.34),
            transparent 45%
        );

    text-align:center;
}

.ref-left-flame-art span{
    font-size:4rem;

    filter:
        drop-shadow(
            0 0 12px
            rgba(255,102,0,.65)
        );
}

.ref-left-flame-art em{
    color:
        var(--ref-gold-bright);

    font-family:
        Georgia,
        serif;

    font-size:1.4rem;

    line-height:1.35;
}


/* ======================================================================
   CENTER — REMOVE LEGACY WIDTH RESTRICTIONS
   ====================================================================== */

.ref-center-column .creator-hero,
.ref-center-column .creator-feed-wrap{
    width:100% !important;

    max-width:none !important;

    margin:0 !important;

    padding:0 !important;
}


/* ======================================================================
   HERO FRAME
   ====================================================================== */

.ref-center-column .creator-hero{
    overflow:hidden;

    border:
        1px solid
        var(--ref-border);

    border-radius:11px;

    background:
        var(--ref-panel);

    box-shadow:
        var(--ref-shadow);
}


/* ======================================================================
   BANNER
   ====================================================================== */

.ref-center-column .creator-banner{
    position:relative;

    width:100%;

    height:
        clamp(230px,23vw,310px) !important;

    min-height:230px;

    overflow:hidden;

    border-radius:
        10px 10px 0 0 !important;

    border-bottom:
        1px solid
        var(--ref-gold);
}

.ref-center-column .creator-banner img{
    width:100% !important;
    height:100% !important;

    display:block;

    object-fit:cover !important;
}

.ref-center-column .creator-banner::before,
.ref-center-column .creator-banner::after{
    content:"🔥";

    position:absolute;

    z-index:3;

    bottom:-10px;

    font-size:
        clamp(3rem,7vw,7rem);

    line-height:1;

    filter:
        drop-shadow(
            0 0 14px
            rgba(255,85,0,.75)
        );

    pointer-events:none;
}

.ref-center-column .creator-banner::before{
    left:-12px;
}

.ref-center-column .creator-banner::after{
    right:-12px;
}


/* ======================================================================
   IDENTITY
   ====================================================================== */

.ref-center-column .creator-identity-wrap{
    position:relative;

    display:grid !important;

    grid-template-columns:
        175px
        minmax(0,1fr);

    gap:18px !important;

    align-items:start !important;

    padding:
        0 18px
        18px !important;

    background:
        var(--ref-panel) !important;

    color:
        var(--ref-text) !important;
}

.ref-center-column .creator-avatar{
    position:relative;

    z-index:5;

    width:160px !important;
    height:160px !important;

    margin:
        -70px 0 0 !important;

    border:
        3px solid
        var(--ref-gold-bright) !important;

    border-radius:50% !important;

    overflow:hidden;

    background:#050505;

    box-shadow:
        0 0 0 3px
        rgba(0,0,0,.70),

        0 0 18px
        rgba(255,190,57,.58) !important;
}

:root[data-theme="light"]
.ref-center-column .creator-avatar{
    box-shadow:
        0 0 0 3px
        #ffffff,

        0 0 16px
        rgba(169,127,22,.35) !important;
}

.ref-center-column .creator-avatar img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    border-radius:50% !important;
}

.ref-center-column .creator-copy{
    min-width:0;

    padding-top:12px;
}

.ref-center-column .creator-title-row{
    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    gap:16px !important;

    flex-wrap:wrap;
}

.ref-center-column .creator-title-row h1{
    margin:0 !important;

    color:
        var(--ref-gold-bright) !important;

    font-size:
        clamp(1.9rem,3vw,2.65rem) !important;

    line-height:1.05;
}

:root[data-theme="light"]
.ref-center-column .creator-title-row h1{
    color:
        var(--ref-text) !important;
}

.ref-center-column .creator-handle{
    color:
        var(--ref-gold-bright) !important;

    margin:
        4px 0 0 !important;
}

:root[data-theme="light"]
.ref-center-column .creator-handle{
    color:
        var(--ref-red) !important;
}

.ref-center-column .creator-headline{
    color:
        var(--ref-text) !important;

    margin:
        13px 0 7px !important;
}

.ref-center-column .creator-bio{
    max-width:none !important;

    color:
        var(--ref-text) !important;

    line-height:1.55 !important;
}


/* ======================================================================
   PROFILE DETAILS
   ====================================================================== */

.ref-center-column .creator-copy p,
.ref-center-column .creator-copy span,
.ref-center-column .creator-copy div{
    color:inherit;
}

.ref-center-column .creator-profile-links a{
    color:
        var(--ref-gold-bright) !important;
}

:root[data-theme="light"]
.ref-center-column .creator-profile-links a{
    color:
        var(--ref-red) !important;
}


/* ======================================================================
   STATS / ACTIONS
   ====================================================================== */

.ref-center-column .creator-stats{
    color:
        var(--ref-muted) !important;

    margin:
        14px 0 8px !important;
}

.ref-center-column .creator-stats strong{
    color:
        var(--ref-text) !important;
}

.ref-center-column .creator-actions{
    display:flex !important;

    align-items:center !important;

    gap:9px !important;

    flex-wrap:wrap;

    margin-top:10px !important;
}

.ref-center-column .creator-actions a,
.ref-center-column .creator-actions button,
.ref-center-column .creator-actions .subscription-badge{
    border-radius:7px !important;
}


/* ======================================================================
   PROFILE TAB STRIP

   Visual navigation only to sections that actually exist on this page.
   No fake Photos/Videos/About routes.
   ====================================================================== */

.ref-center-column .creator-identity-wrap::after{
    content:"Posts";

    position:absolute;

    left:0;
    right:0;

    bottom:-42px;

    height:42px;

    display:flex;

    align-items:center;

    padding-left:22px;

    border-top:
        1px solid
        rgba(214,169,46,.28);

    border-bottom:
        1px solid
        var(--ref-gold);

    background:
        var(--ref-panel-soft);

    color:
        var(--ref-gold-bright);

    font-weight:900;
}


/* ======================================================================
   FEED
   ====================================================================== */

.ref-center-column .creator-feed-wrap{
    margin-top:52px !important;

    border:
        1px solid
        var(--ref-border);

    border-radius:10px;

    background:
        var(--ref-panel);

    box-shadow:
        var(--ref-shadow);

    padding:
        12px !important;
}

.ref-center-column .creator-feed-heading{
    display:flex !important;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin:
        0 0 12px !important;

    padding:
        0 0 10px !important;

    border-bottom:
        1px solid
        rgba(214,169,46,.34) !important;
}

.ref-center-column .creator-feed-heading h2{
    margin:0 !important;

    color:
        var(--ref-gold-bright) !important;

    font-size:
        clamp(1.35rem,2vw,1.8rem) !important;
}

.ref-center-column .creator-feed-heading h2::before{
    content:"🔥";

    margin-right:8px;
}

.ref-center-column .creator-feed-heading p{
    margin:0 !important;

    color:
        var(--ref-muted) !important;

    font-size:.78rem;
}


/* ======================================================================
   THREE-CARD POST GRID
   ====================================================================== */

.ref-center-column .creator-feed{
    display:grid !important;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

    gap:12px !important;
}

.ref-center-column .external-post{
    min-width:0;

    margin:0 !important;

    padding:10px !important;

    border:
        1px solid
        var(--ref-border) !important;

    border-radius:8px !important;

    background:
        var(--ref-panel) !important;

    color:
        var(--ref-text) !important;

    box-shadow:none !important;
}

.ref-center-column .external-post h3{
    margin:
        8px 0 !important;

    color:
        var(--ref-text) !important;

    font-size:1rem !important;
}

.ref-center-column .post-topline{
    color:
        var(--ref-muted) !important;

    font-size:.72rem !important;
}

.ref-center-column .post-excerpt{
    color:
        var(--ref-muted) !important;

    font-size:.78rem !important;

    line-height:1.45 !important;
}

.ref-center-column .external-post img{
    width:100%;

    max-height:250px;

    object-fit:cover;

    border-radius:6px;
}

.ref-center-column .external-post a{
    color:
        var(--ref-gold-bright);
}

:root[data-theme="light"]
.ref-center-column .external-post a{
    color:
        var(--ref-red);
}


/* ======================================================================
   RIGHT RAIL
   ====================================================================== */

.ref-rail-card{
    position:relative;

    overflow:hidden;

    border:
        1px solid
        var(--ref-border);

    border-radius:10px;

    background:
        var(--ref-panel);

    color:
        var(--ref-text);

    box-shadow:
        var(--ref-shadow);

    padding:13px;
}

.ref-rail-card h2{
    margin:
        0 0 12px;

    color:
        var(--ref-gold-bright);

    font-size:1.05rem;

    line-height:1.25;
}

.ref-rail-card p{
    color:
        var(--ref-muted);

    line-height:1.45;

    font-size:.82rem;
}


/* ======================================================================
   SOCIAL
   ====================================================================== */

.ref-social-grid{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:7px;
}

.ref-social-grid a{
    min-height:55px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:4px;

    border-radius:6px;

    color:
        var(--ref-text) !important;

    text-decoration:none !important;

    font-size:.76rem;
}

.ref-social-grid a:hover{
    background:
        var(--ref-panel-soft);

    color:
        var(--ref-gold-bright) !important;
}

.ref-social-symbol{
    color:
        var(--ref-gold-bright);

    font-size:1.3rem;
}


/* ======================================================================
   SUBSCRIPTION
   ====================================================================== */

.ref-subscribe-card{
    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(255,92,0,.20),
            transparent 42%
        ),
        var(--ref-panel);
}

.ref-subscribe-card ul{
    margin:
        0 0 12px;

    padding-left:20px;

    color:
        var(--ref-text);

    font-size:.78rem;

    line-height:1.65;
}

.ref-subscribe-card li::marker{
    color:
        var(--ref-gold-bright);
}

.ref-subscription-price{
    margin:
        10px 0;

    color:
        var(--ref-gold-bright);

    font-size:1.35rem;

    font-weight:900;
}

.ref-subscription-price small{
    color:
        var(--ref-muted);

    font-size:.72rem;

    font-weight:600;
}

.ref-subscribe-button{
    width:100%;

    min-height:42px;

    border:
        1px solid
        var(--ref-gold-bright);

    border-radius:7px;

    background:
        linear-gradient(
            135deg,
            #ffd56c,
            #d49b23
        );

    color:#151006;

    font-weight:950;

    cursor:pointer;

    box-shadow:
        0 0 14px
        rgba(255,194,62,.24);
}

.ref-subscribed-state{
    padding:10px;

    border:
        1px solid
        var(--ref-gold);

    border-radius:7px;

    color:
        var(--ref-gold-bright);

    text-align:center;

    font-weight:900;
}


/* ======================================================================
   ACCOUNT
   ====================================================================== */

.ref-outline-button{
    width:100%;

    min-height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-sizing:border-box;

    border:
        1px solid
        var(--ref-gold);

    border-radius:6px;

    color:
        var(--ref-text) !important;

    text-decoration:none !important;

    font-weight:800;
}

.ref-outline-button:hover{
    background:
        var(--ref-panel-soft);
}

.ref-login-prompt{
    text-align:center;
}

.ref-login-prompt a{
    color:
        var(--ref-gold-bright) !important;
}


/* ======================================================================
   FOOTER
   ====================================================================== */

.public-footer{
    background:
        var(--ref-bg) !important;

    color:
        var(--ref-muted) !important;

    border-top:
        1px solid
        var(--ref-gold) !important;
}


/* ======================================================================
   LIGHT MODE — SAME GEOMETRY
   ====================================================================== */

:root[data-theme="light"]
.ref-side-nav,

:root[data-theme="light"]
.ref-community-callout,

:root[data-theme="light"]
.ref-center-column .creator-hero,

:root[data-theme="light"]
.ref-center-column .creator-feed-wrap,

:root[data-theme="light"]
.ref-center-column .external-post,

:root[data-theme="light"]
.ref-rail-card{
    background:#ffffff !important;
}

:root[data-theme="light"]
.ref-center-column .creator-copy,

:root[data-theme="light"]
.ref-center-column .creator-headline,

:root[data-theme="light"]
.ref-center-column .creator-bio,

:root[data-theme="light"]
.ref-center-column .external-post h3,

:root[data-theme="light"]
.ref-subscribe-card ul{
    color:#18120d !important;
}

:root[data-theme="light"]
.ref-center-column .post-topline,

:root[data-theme="light"]
.ref-center-column .post-excerpt,

:root[data-theme="light"]
.ref-center-column .creator-stats{
    color:#665a4b !important;
}


/* ======================================================================
   TABLET
   ====================================================================== */

@media(max-width:1180px){

    .ref-app-shell{
        grid-template-columns:
            190px
            minmax(0,1fr);
    }

    .ref-right-rail{
        grid-column:2;

        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .ref-account-card{
        grid-column:
            1 / -1;
    }

    .ref-center-column .creator-feed{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }
}


/* ======================================================================
   MOBILE
   ====================================================================== */

@media(max-width:760px){

    .public-header-inner{
        align-items:flex-start !important;

        flex-direction:column;
    }

    .public-nav{
        width:100%;

        justify-content:flex-start !important;
    }

    .ref-main{
        padding:
            8px !important;
    }

    .ref-app-shell{
        display:flex;

        flex-direction:column;
    }

    .ref-left-rail{
        width:100%;
    }

    .ref-side-nav{
        display:grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .ref-side-nav a{
        justify-content:center;

        font-size:.78rem;
    }

    .ref-community-callout,
    .ref-left-flame-art{
        display:none;
    }

    .ref-center-column{
        width:100%;
    }

    .ref-center-column .creator-banner{
        height:200px !important;

        min-height:200px;
    }

    .ref-center-column .creator-identity-wrap{
        display:block !important;

        padding:
            0 13px
            14px !important;
    }

    .ref-center-column .creator-avatar{
        width:100px !important;
        height:100px !important;

        margin:
            -48px 0 8px !important;
    }

    .ref-center-column .creator-feed{
        grid-template-columns:
            1fr !important;
    }

    .ref-right-rail{
        width:100%;

        display:flex;

        flex-direction:column;
    }
}


/* ======================================================================
   SMALL PHONE
   ====================================================================== */

@media(max-width:480px){

    .ref-side-nav{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .ref-center-column .creator-banner{
        height:175px !important;

        min-height:175px;
    }

    .ref-center-column .creator-title-row h1{
        font-size:1.65rem !important;
    }
}



/*
==========================================================================
STAGE 9.3D7E4 — FLOWING FLAME TREATMENT
==========================================================================
The reference uses flames as part of the frame rather than isolated emoji.
These layers are decorative only.
*/


/* ======================================================================
   SHARED FLAME COLORS
   ====================================================================== */

:root{
    --flame-red:#b91d08;
    --flame-orange:#f05a08;
    --flame-hot:#ff9d13;
    --flame-yellow:#ffd45a;
}


/* ======================================================================
   BANNER
   Remove the giant emoji flames from D7E3.
   ====================================================================== */

.ref-center-column .creator-banner::before,
.ref-center-column .creator-banner::after{
    content:"" !important;

    position:absolute;

    z-index:4;

    bottom:-2px;

    width:105px;

    height:155px;

    pointer-events:none;

    opacity:.96;

    filter:
        drop-shadow(
            0 0 7px
            rgba(255,82,0,.60)
        );

    background:

        radial-gradient(
            ellipse at 50% 100%,
            rgba(255,207,62,.98) 0 10%,
            transparent 11%
        ),

        radial-gradient(
            ellipse at 34% 92%,
            rgba(255,132,10,.98) 0 18%,
            transparent 19%
        ),

        radial-gradient(
            ellipse at 68% 94%,
            rgba(255,82,4,.98) 0 22%,
            transparent 23%
        ),

        radial-gradient(
            ellipse at 22% 84%,
            rgba(255,73,0,.90) 0 18%,
            transparent 19%
        ),

        radial-gradient(
            ellipse at 79% 82%,
            rgba(255,118,4,.92) 0 20%,
            transparent 21%
        ),

        conic-gradient(
            from 205deg at 50% 100%,
            transparent 0 11%,
            var(--flame-red) 12% 18%,
            var(--flame-orange) 19% 25%,
            transparent 26% 33%,
            var(--flame-orange) 34% 41%,
            var(--flame-hot) 42% 47%,
            transparent 48% 56%,
            var(--flame-red) 57% 64%,
            transparent 65% 100%
        );

    clip-path:polygon(
        0% 100%,
        4% 74%,
        16% 88%,
        12% 53%,
        27% 72%,
        31% 27%,
        43% 60%,
        52% 4%,
        61% 59%,
        74% 25%,
        72% 72%,
        91% 49%,
        85% 83%,
        100% 68%,
        96% 100%
    );
}

.ref-center-column .creator-banner::before{
    left:-7px;
}

.ref-center-column .creator-banner::after{
    right:-7px;

    transform:scaleX(-1);
}


/* ======================================================================
   LEFT RAIL — FLOWING LOWER FLAME BED
   ====================================================================== */

.ref-left-flame-art{
    position:relative;

    min-height:250px;

    overflow:hidden;

    justify-content:flex-end;

    background:
        linear-gradient(
            to bottom,
            transparent 0 30%,
            rgba(117,22,0,.08) 58%,
            rgba(170,35,0,.20) 100%
        ) !important;
}


/*
The actual flame bed.
*/

.ref-left-flame-art::before{
    content:"";

    position:absolute;

    z-index:0;

    left:-14px;
    right:-14px;
    bottom:-4px;

    height:205px;

    opacity:.98;

    background:

        radial-gradient(
            ellipse at 8% 100%,
            #ffd452 0 8%,
            #ff8a08 9% 18%,
            #e83d04 19% 29%,
            transparent 30%
        ),

        radial-gradient(
            ellipse at 28% 100%,
            #ffc72e 0 7%,
            #ff6d05 8% 21%,
            #c92305 22% 33%,
            transparent 34%
        ),

        radial-gradient(
            ellipse at 52% 100%,
            #ffd759 0 8%,
            #ff8d08 9% 20%,
            #df3303 21% 34%,
            transparent 35%
        ),

        radial-gradient(
            ellipse at 76% 100%,
            #ffc837 0 7%,
            #ff7204 8% 20%,
            #c82204 21% 34%,
            transparent 35%
        ),

        radial-gradient(
            ellipse at 96% 100%,
            #ffd34d 0 7%,
            #ff8307 8% 18%,
            #d62d03 19% 31%,
            transparent 32%
        ),

        linear-gradient(
            to top,
            rgba(213,39,0,.80),
            rgba(255,86,0,.30) 45%,
            transparent 76%
        );

    clip-path:polygon(
        0 100%,
        0 58%,
        7% 73%,
        11% 25%,
        18% 66%,
        25% 43%,
        31% 79%,
        39% 14%,
        46% 66%,
        54% 32%,
        61% 76%,
        69% 19%,
        76% 62%,
        84% 37%,
        90% 72%,
        96% 30%,
        100% 59%,
        100% 100%
    );

    filter:
        drop-shadow(
            0 -5px 9px
            rgba(255,80,0,.45)
        );
}


/*
Hot inner tongues create more depth than a single silhouette.
*/

.ref-left-flame-art::after{
    content:"";

    position:absolute;

    z-index:1;

    left:8px;
    right:8px;
    bottom:-6px;

    height:128px;

    opacity:.86;

    background:
        linear-gradient(
            to top,
            rgba(255,211,73,.92),
            rgba(255,122,4,.70) 48%,
            transparent 82%
        );

    clip-path:polygon(
        0 100%,
        7% 64%,
        14% 91%,
        20% 35%,
        29% 88%,
        37% 56%,
        44% 94%,
        52% 26%,
        61% 88%,
        69% 49%,
        77% 92%,
        85% 40%,
        92% 81%,
        100% 58%,
        100% 100%
    );

    filter:
        blur(.25px);
}


.ref-left-flame-art span,
.ref-left-flame-art em{
    position:relative;

    z-index:3;
}


/*
The large standalone emoji is no longer necessary.
*/

.ref-left-flame-art > span{
    display:none;
}


.ref-left-flame-art em{
    margin-bottom:22px;

    color:
        var(--ref-gold-bright);

    text-shadow:
        0 0 8px rgba(0,0,0,.95),
        0 0 12px rgba(255,123,0,.35);
}


/* ======================================================================
   COMMUNITY CARD
   Small flame emerging from lower-left corner.
   ====================================================================== */

.ref-community-callout{
    isolation:isolate;
}

.ref-community-callout::after{
    content:"";

    position:absolute;

    z-index:-1;

    left:-8px;
    bottom:-5px;

    width:78px;
    height:95px;

    opacity:.72;

    background:
        linear-gradient(
            45deg,
            #c92403,
            #ff7205 48%,
            #ffd34a 72%,
            transparent 73%
        );

    clip-path:polygon(
        0 100%,
        4% 52%,
        19% 74%,
        25% 18%,
        40% 67%,
        55% 36%,
        65% 78%,
        83% 49%,
        100% 100%
    );

    filter:
        drop-shadow(
            0 0 7px
            rgba(255,83,0,.45)
        );
}


/* ======================================================================
   RIGHT SOCIAL PANEL — FLAME FLOW ON RIGHT / BOTTOM
   ====================================================================== */

.ref-social-card{
    isolation:isolate;
}

.ref-social-card::after{
    content:"";

    position:absolute;

    z-index:-1;

    right:-5px;
    bottom:-3px;

    width:95px;
    height:125px;

    opacity:.80;

    background:
        linear-gradient(
            55deg,
            #b91d08 5%,
            #ef4c05 35%,
            #ff9410 62%,
            #ffd54f 75%,
            transparent 76%
        );

    clip-path:polygon(
        100% 100%,
        27% 100%,
        43% 79%,
        22% 65%,
        57% 59%,
        38% 29%,
        72% 49%,
        68% 8%,
        87% 41%,
        100% 21%
    );

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,78,0,.55)
        );
}


/* ======================================================================
   SUBSCRIPTION PANEL — WIDER LOWER FLAME FLOW
   ====================================================================== */

.ref-subscribe-card{
    isolation:isolate;
}

.ref-subscribe-card::after{
    content:"";

    position:absolute;

    z-index:-1;

    right:-8px;
    bottom:-5px;

    width:145px;
    height:120px;

    opacity:.72;

    background:
        linear-gradient(
            50deg,
            #a91806,
            #ef4b04 38%,
            #ff8b0a 61%,
            #ffd04a 77%,
            transparent 78%
        );

    clip-path:polygon(
        100% 100%,
        9% 100%,
        28% 80%,
        14% 59%,
        44% 70%,
        37% 33%,
        61% 59%,
        66% 15%,
        79% 50%,
        93% 26%,
        100% 49%
    );

    filter:
        drop-shadow(
            0 0 9px
            rgba(255,79,0,.48)
        );
}


/* ======================================================================
   KEEP SMALL HEADING FLAMES
   ====================================================================== */

.ref-social-card h2 > span,
.ref-subscribe-card h2 > span{
    display:inline-block;

    transform:
        translateY(1px);

    filter:
        drop-shadow(
            0 0 5px
            rgba(255,101,0,.50)
        );
}


/* ======================================================================
   LIGHT MODE

   Keep the flame artwork saturated while the page becomes pure white.
   ====================================================================== */

:root[data-theme="light"]
.ref-left-flame-art{
    background:
        linear-gradient(
            to bottom,
            transparent 0 38%,
            rgba(255,112,0,.04) 70%,
            rgba(255,88,0,.10) 100%
        ) !important;
}

:root[data-theme="light"]
.ref-left-flame-art em{
    color:
        var(--ref-gold);

    text-shadow:
        0 1px 0 #ffffff,
        0 0 8px rgba(255,119,0,.22);
}


/* ======================================================================
   MOBILE

   Reduce decorative flame size rather than allowing it to cover content.
   ====================================================================== */

@media(max-width:760px){

    .ref-center-column .creator-banner::before,
    .ref-center-column .creator-banner::after{
        width:65px;
        height:95px;
    }

    .ref-social-card::after,
    .ref-subscribe-card::after{
        opacity:.42;
    }
}


/* ======================================================================
   REDUCED MOTION / ACCESSIBILITY

   No flame animation is used. Artwork remains static.
   ====================================================================== */

@media(prefers-reduced-motion:reduce){

    .ref-center-column .creator-banner::before,
    .ref-center-column .creator-banner::after,
    .ref-left-flame-art::before,
    .ref-left-flame-art::after,
    .ref-social-card::after,
    .ref-subscribe-card::after{
        animation:none !important;
    }
}



/*
==========================================================================
STAGE 9.3D7E5 — TRANSPARENT PNG FLAME ARTWORK
==========================================================================

Large decorative flames now use transparent raster artwork.

D7E4 CSS polygon flames remain in the stylesheet for rollback history,
but are disabled below.

Small heading flame icons remain available.

Assets:

/assets/creator/flames/flames-banner-left.png
/assets/creator/flames/flames-banner-right.png
/assets/creator/flames/flames-left-rail.png
/assets/creator/flames/flames-panel-corner.png
/assets/creator/flames/flames-wide-bottom.png
*/


/* ======================================================================
   DISABLE D7E4 GENERATED LARGE FLAMES
   ====================================================================== */

.ref-center-column .creator-banner::before,
.ref-center-column .creator-banner::after,
.ref-left-flame-art::before,
.ref-left-flame-art::after,
.ref-community-callout::after,
.ref-social-card::after,
.ref-subscribe-card::after{
    background:none !important;
    clip-path:none !important;
    filter:none !important;
}


/* ======================================================================
   BANNER FLAMES

   These rise from behind the lower banner frame instead of appearing as
   isolated flame icons.
   ====================================================================== */

.ref-center-column .creator-banner{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}


/* LEFT FIRE BANK */

.ref-center-column .creator-banner::before{
    content:"" !important;

    display:block !important;

    position:absolute;

    z-index:3;

    left:-34px;
    bottom:-135px;

    width:230px;
    height:330px;

    pointer-events:none;

    opacity:.94;

    background:
        url("/assets/creator/flames/flames-banner-left.png")
        left bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(
            0 0 9px
            rgba(255,77,0,.42)
        ) !important;
}


/* RIGHT FIRE BANK */

.ref-center-column .creator-banner::after{
    content:"" !important;

    display:block !important;

    position:absolute;

    z-index:3;

    right:-34px;
    bottom:-128px;

    width:265px;
    height:330px;

    pointer-events:none;

    opacity:.96;

    transform:none !important;

    background:
        url("/assets/creator/flames/flames-banner-right.png")
        right bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(
            0 0 10px
            rgba(255,75,0,.46)
        ) !important;
}


/* Keep banner content above flame banks */

.ref-center-column .creator-banner > *{
    position:relative;
    z-index:5;
}


/* ======================================================================
   LEFT RAIL FIRE

   Tall irregular flame bank rising from below the rail, similar to the
   reference artwork.
   ====================================================================== */

.ref-left-flame-art{
    position:relative;

    min-height:300px;

    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(108,19,0,.03) 38%,
            rgba(163,31,0,.10) 70%,
            rgba(202,45,0,.16) 100%
        ) !important;
}


.ref-left-flame-art::before{
    content:"" !important;

    display:block !important;

    position:absolute;

    z-index:1;

    left:-48px;
    right:-45px;
    bottom:-175px;

    height:445px;

    pointer-events:none;

    opacity:.95;

    background:
        url("/assets/creator/flames/flames-left-rail.png")
        center bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(
            0 -3px 12px
            rgba(255,74,0,.42)
        ) !important;
}


.ref-left-flame-art::after{
    content:"" !important;

    display:block !important;

    position:absolute;

    z-index:2;

    left:-25px;
    right:-25px;
    bottom:-95px;

    height:235px;

    pointer-events:none;

    opacity:.55;

    background:
        url("/assets/creator/flames/flames-wide-bottom.png")
        center bottom / 100% auto
        no-repeat !important;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,118,0,.32)
        ) !important;
}


.ref-left-flame-art em{
    position:relative;

    z-index:5;

    margin-bottom:28px;
}


/* D7E4 standalone flame span remains hidden */

.ref-left-flame-art > span{
    display:none !important;
}


/* ======================================================================
   COMMUNITY CALLOUT

   Small flame lick integrated with lower-left gold frame.
   ====================================================================== */

.ref-community-callout{
    position:relative;
    isolation:isolate;
    overflow:visible;
}


.ref-community-callout::after{
    content:"" !important;

    display:block !important;

    position:absolute;

    z-index:-1;

    left:-22px;
    bottom:-23px;

    width:125px;
    height:135px;

    pointer-events:none;

    opacity:.70;

    background:
        url("/assets/creator/flames/flames-panel-corner.png")
        left bottom / contain
        no-repeat !important;

    transform:scaleX(-1);

    filter:
        drop-shadow(
            0 0 7px
            rgba(255,77,0,.36)
        ) !important;
}


/* ======================================================================
   RIGHT RAIL CARDS

   Fire grows from the bottom/right frame instead of sitting inside the
   card as a flat decoration.
   ====================================================================== */

.ref-social-card,
.ref-subscribe-card{
    position:relative;
    isolation:isolate;
    overflow:visible;
}


/* FOLLOW ME ON */

.ref-social-card::after{
    content:"" !important;

    display:block !important;

    position:absolute;

    z-index:-1;

    right:-34px;
    bottom:-38px;

    width:175px;
    height:205px;

    pointer-events:none;

    opacity:.78;

    background:
        url("/assets/creator/flames/flames-panel-corner.png")
        right bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,73,0,.42)
        ) !important;
}


/* SUBSCRIBE */

.ref-subscribe-card::after{
    content:"" !important;

    display:block !important;

    position:absolute;

    z-index:-1;

    right:-42px;
    bottom:-45px;

    width:205px;
    height:230px;

    pointer-events:none;

    opacity:.82;

    background:
        url("/assets/creator/flames/flames-panel-corner.png")
        right bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(
            0 0 10px
            rgba(255,77,0,.44)
        ) !important;
}


/* ======================================================================
   LATEST POSTS / CONTENT FRAME

   Very restrained flame bed. This is intentionally weaker than the
   banner and side rails.
   ====================================================================== */

.ref-center-column .creator-feed-wrap{
    position:relative;
    isolation:isolate;
}


.ref-center-column .creator-feed-wrap::after{
    content:"";

    position:absolute;

    z-index:-1;

    left:3%;
    right:3%;
    bottom:-30px;

    height:95px;

    pointer-events:none;

    opacity:.18;

    background:
        url("/assets/creator/flames/flames-wide-bottom.png")
        center bottom / 100% auto
        no-repeat;

    filter:
        blur(.2px)
        drop-shadow(
            0 0 7px
            rgba(255,79,0,.25)
        );
}


/* ======================================================================
   LIGHT MODE

   Fire stays saturated. Glow is reduced against pure white so it does
   not turn into an orange haze.
   ====================================================================== */

:root[data-theme="light"]
.ref-center-column .creator-banner::before,
:root[data-theme="light"]
.ref-center-column .creator-banner::after{
    opacity:.91;

    filter:
        drop-shadow(
            0 1px 5px
            rgba(177,48,0,.25)
        ) !important;
}


:root[data-theme="light"]
.ref-left-flame-art::before{
    opacity:.90;

    filter:
        drop-shadow(
            0 0 5px
            rgba(177,48,0,.20)
        ) !important;
}


:root[data-theme="light"]
.ref-left-flame-art{
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255,255,255,0) 45%,
            rgba(255,112,0,.025) 76%,
            rgba(255,72,0,.055) 100%
        ) !important;
}


:root[data-theme="light"]
.ref-social-card::after,
:root[data-theme="light"]
.ref-subscribe-card::after,
:root[data-theme="light"]
.ref-community-callout::after{
    opacity:.68;

    filter:
        drop-shadow(
            0 1px 4px
            rgba(177,48,0,.22)
        ) !important;
}


/* ======================================================================
   TABLET
   ====================================================================== */

@media(max-width:1180px){

    .ref-center-column .creator-banner::before{
        width:185px;
        height:270px;
        left:-32px;
        bottom:-110px;
    }

    .ref-center-column .creator-banner::after{
        width:210px;
        height:275px;
        right:-30px;
        bottom:-108px;
    }

    .ref-social-card::after,
    .ref-subscribe-card::after{
        opacity:.60;
    }
}


/* ======================================================================
   MOBILE
   ====================================================================== */

@media(max-width:760px){

    .ref-center-column .creator-banner::before{
        width:125px;
        height:180px;
        left:-26px;
        bottom:-72px;
    }

    .ref-center-column .creator-banner::after{
        width:145px;
        height:190px;
        right:-25px;
        bottom:-75px;
    }

    .ref-left-flame-art{
        min-height:220px;
    }

    .ref-left-flame-art::before{
        height:310px;
        bottom:-145px;
    }

    .ref-left-flame-art::after{
        height:150px;
        bottom:-70px;
    }

    .ref-social-card::after,
    .ref-subscribe-card::after{
        width:130px;
        height:150px;

        right:-20px;
        bottom:-27px;

        opacity:.52;
    }

    .ref-center-column .creator-feed-wrap::after{
        opacity:.10;
    }
}


/* ======================================================================
   PRINT

   Decorative fire is not useful on printed pages.
   ====================================================================== */

@media print{

    .ref-center-column .creator-banner::before,
    .ref-center-column .creator-banner::after,
    .ref-left-flame-art::before,
    .ref-left-flame-art::after,
    .ref-community-callout::after,
    .ref-social-card::after,
    .ref-subscribe-card::after,
    .ref-center-column .creator-feed-wrap::after{
        display:none !important;
    }
}



/*
==========================================================================
STAGE 9.3D7E5B — PNG FLAME VISIBILITY / STACKING FIX
==========================================================================

D7E5 assets are valid and HTTP-accessible.

This layer corrects stacking so transparent flame artwork appears ABOVE
panel backgrounds while remaining BELOW interactive/text content.
*/


/* ======================================================================
   GENERAL STACKING
   ====================================================================== */

.ref-app-shell,
.ref-left-rail,
.ref-center-column,
.ref-right-rail{
    position:relative;
}


/* ======================================================================
   BANNER

   Flames inside banner:
   background/image < flames < banner content
   ====================================================================== */

.ref-center-column .creator-banner{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
}


.ref-center-column .creator-banner::before{
    content:"" !important;
    display:block !important;

    position:absolute !important;

    z-index:2 !important;

    left:-12px !important;
    bottom:-62px !important;

    width:210px !important;
    height:300px !important;

    opacity:1 !important;

    pointer-events:none !important;

    background-image:
        url("/assets/creator/flames/flames-banner-left.png") !important;

    background-repeat:no-repeat !important;
    background-position:left bottom !important;
    background-size:contain !important;

    clip-path:none !important;

    filter:
        drop-shadow(
            0 0 10px
            rgba(255,75,0,.58)
        ) !important;
}


.ref-center-column .creator-banner::after{
    content:"" !important;
    display:block !important;

    position:absolute !important;

    z-index:2 !important;

    right:-12px !important;
    bottom:-58px !important;

    width:245px !important;
    height:305px !important;

    opacity:1 !important;

    pointer-events:none !important;

    transform:none !important;

    background-image:
        url("/assets/creator/flames/flames-banner-right.png") !important;

    background-repeat:no-repeat !important;
    background-position:right bottom !important;
    background-size:contain !important;

    clip-path:none !important;

    filter:
        drop-shadow(
            0 0 11px
            rgba(255,75,0,.60)
        ) !important;
}


.ref-center-column .creator-banner > *{
    position:relative !important;
    z-index:4 !important;
}


/* ======================================================================
   LEFT FLAME DISPLAY

   Do NOT use negative z-index.
   ====================================================================== */

.ref-left-flame-art{
    position:relative !important;

    isolation:isolate !important;

    overflow:hidden !important;

    min-height:300px !important;
}


.ref-left-flame-art::before{
    content:"" !important;
    display:block !important;

    position:absolute !important;

    z-index:1 !important;

    left:-25px !important;
    right:-25px !important;
    bottom:-92px !important;

    height:390px !important;

    opacity:1 !important;

    pointer-events:none !important;

    background-image:
        url("/assets/creator/flames/flames-left-rail.png") !important;

    background-repeat:no-repeat !important;
    background-position:center bottom !important;
    background-size:contain !important;

    clip-path:none !important;

    filter:
        drop-shadow(
            0 -3px 11px
            rgba(255,74,0,.55)
        ) !important;
}


.ref-left-flame-art::after{
    content:"" !important;
    display:block !important;

    position:absolute !important;

    z-index:2 !important;

    left:-10px !important;
    right:-10px !important;
    bottom:-38px !important;

    height:175px !important;

    opacity:.62 !important;

    pointer-events:none !important;

    background-image:
        url("/assets/creator/flames/flames-wide-bottom.png") !important;

    background-repeat:no-repeat !important;
    background-position:center bottom !important;
    background-size:100% auto !important;

    clip-path:none !important;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,100,0,.40)
        ) !important;
}


.ref-left-flame-art em{
    position:relative !important;
    z-index:4 !important;
}


/* ======================================================================
   COMMUNITY CARD

   Flame sits above card background but below content.
   ====================================================================== */

.ref-community-callout{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
}


.ref-community-callout::before{
    content:"" !important;
    display:block !important;

    position:absolute !important;

    z-index:1 !important;

    left:-18px !important;
    bottom:-42px !important;

    width:135px !important;
    height:155px !important;

    opacity:.80 !important;

    pointer-events:none !important;

    background-image:
        url("/assets/creator/flames/flames-panel-corner.png") !important;

    background-repeat:no-repeat !important;
    background-position:left bottom !important;
    background-size:contain !important;

    transform:scaleX(-1) !important;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,74,0,.46)
        ) !important;
}


.ref-community-callout > *{
    position:relative !important;
    z-index:3 !important;
}


/* Disable old community after-layer */

.ref-community-callout::after{
    content:none !important;
    display:none !important;
}


/* ======================================================================
   RIGHT RAIL

   Previous negative z-index caused these layers to disappear behind
   the cards/page.
   ====================================================================== */

.ref-social-card,
.ref-subscribe-card{
    position:relative !important;

    isolation:isolate !important;

    overflow:hidden !important;
}


.ref-social-card::after{
    content:"" !important;
    display:block !important;

    position:absolute !important;

    z-index:1 !important;

    right:-25px !important;
    bottom:-48px !important;

    width:155px !important;
    height:185px !important;

    opacity:.72 !important;

    pointer-events:none !important;

    background-image:
        url("/assets/creator/flames/flames-panel-corner.png") !important;

    background-repeat:no-repeat !important;
    background-position:right bottom !important;
    background-size:contain !important;

    clip-path:none !important;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,75,0,.48)
        ) !important;
}


.ref-subscribe-card::after{
    content:"" !important;
    display:block !important;

    position:absolute !important;

    z-index:1 !important;

    right:-28px !important;
    bottom:-52px !important;

    width:175px !important;
    height:205px !important;

    opacity:.76 !important;

    pointer-events:none !important;

    background-image:
        url("/assets/creator/flames/flames-panel-corner.png") !important;

    background-repeat:no-repeat !important;
    background-position:right bottom !important;
    background-size:contain !important;

    clip-path:none !important;

    filter:
        drop-shadow(
            0 0 9px
            rgba(255,75,0,.52)
        ) !important;
}


.ref-social-card > *,
.ref-subscribe-card > *{
    position:relative !important;
    z-index:3 !important;
}


/* ======================================================================
   LATEST POSTS

   Keep this subtle, but make it visible.
   ====================================================================== */

.ref-center-column .creator-feed-wrap{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
}


.ref-center-column .creator-feed-wrap::after{
    content:"" !important;
    display:block !important;

    position:absolute !important;

    z-index:1 !important;

    left:5% !important;
    right:5% !important;
    bottom:-45px !important;

    height:105px !important;

    opacity:.15 !important;

    pointer-events:none !important;

    background-image:
        url("/assets/creator/flames/flames-wide-bottom.png") !important;

    background-repeat:no-repeat !important;
    background-position:center bottom !important;
    background-size:100% auto !important;
}


.ref-center-column .creator-feed-wrap > *{
    position:relative !important;
    z-index:3 !important;
}


/* ======================================================================
   LIGHT MODE
   ====================================================================== */

:root[data-theme="light"]
.ref-center-column .creator-banner::before,
:root[data-theme="light"]
.ref-center-column .creator-banner::after{
    opacity:.94 !important;
}


:root[data-theme="light"]
.ref-left-flame-art::before{
    opacity:.92 !important;
}


:root[data-theme="light"]
.ref-social-card::after,
:root[data-theme="light"]
.ref-subscribe-card::after{
    opacity:.64 !important;
}


/* ======================================================================
   MOBILE
   ====================================================================== */

@media(max-width:760px){

    .ref-center-column .creator-banner::before{
        width:120px !important;
        height:175px !important;

        left:-10px !important;
        bottom:-40px !important;
    }

    .ref-center-column .creator-banner::after{
        width:140px !important;
        height:180px !important;

        right:-10px !important;
        bottom:-40px !important;
    }

    .ref-left-flame-art::before{
        height:280px !important;
        bottom:-75px !important;
    }

    .ref-left-flame-art::after{
        height:125px !important;
        bottom:-25px !important;
    }

    .ref-social-card::after,
    .ref-subscribe-card::after{
        width:120px !important;
        height:145px !important;

        right:-18px !important;
        bottom:-38px !important;
    }
}



/*
==========================================================================
STAGE 9.3D7E5C
TRADITIONAL DESKTOP RESPONSIVE WIDTH + ORGANIC FLAME COMPOSITION
==========================================================================

Primary visual targets:

1920x1080
1600x900
1440x900
1366x768

Ultrawide:
Centered application with controlled maximum width.

Tablet/mobile:
Existing responsive collapse preserved.

No PHP functionality is changed.
*/


/* ======================================================================
   1. APPLICATION WIDTH

   Use the screen properly at normal desktop resolutions without
   stretching uncontrollably on ultrawide monitors.
   ====================================================================== */

.ref-main{
    width:100% !important;

    max-width:none !important;

    margin:0 auto !important;

    padding:
        18px
        clamp(16px, 2.1vw, 38px)
        42px !important;

    box-sizing:border-box !important;
}


.ref-app-shell{
    width:100% !important;

    max-width:1540px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    display:grid !important;

    grid-template-columns:
        220px
        minmax(0, 1fr)
        280px !important;

    gap:16px !important;

    align-items:start !important;
}


/*
At 1920px this gives the site a substantial desktop footprint while
leaving intentional outer breathing room.

At ultrawide resolutions it stops growing at 1540px.
*/


/* ======================================================================
   2. CENTER COLUMN
   ====================================================================== */

.ref-center-column{
    width:100% !important;

    min-width:0 !important;

    max-width:none !important;
}


/* ======================================================================
   3. SIDE RAILS
   ====================================================================== */

.ref-left-rail{
    width:220px !important;
    min-width:0 !important;
}


.ref-right-rail{
    width:280px !important;
    min-width:0 !important;
}


/* ======================================================================
   4. BANNER PROPORTIONS

   Traditional desktop gets a wider, shallower hero like the reference.
   ====================================================================== */

.ref-center-column .creator-banner{
    position:relative !important;

    width:100% !important;

    min-height:235px !important;
    max-height:285px !important;

    overflow:hidden !important;

    border-radius:10px 10px 0 0 !important;

    isolation:isolate !important;
}


.ref-center-column .creator-banner img{
    width:100% !important;
    height:100% !important;

    min-height:235px !important;
    max-height:285px !important;

    object-fit:cover !important;

    object-position:center 34% !important;
}


/* ======================================================================
   5. BANNER FLAMES

   Wider horizontal flame banks rather than narrow vertical decals.
   ====================================================================== */

.ref-center-column .creator-banner::before{
    content:"" !important;

    position:absolute !important;

    display:block !important;

    z-index:2 !important;

    left:-45px !important;
    bottom:-125px !important;

    width:320px !important;
    height:350px !important;

    opacity:.92 !important;

    pointer-events:none !important;

    background:
        url("/assets/creator/flames/flames-banner-left.png")
        left bottom / contain
        no-repeat !important;

    clip-path:none !important;

    filter:
        drop-shadow(
            0 0 9px
            rgba(255,73,0,.48)
        ) !important;
}


.ref-center-column .creator-banner::after{
    content:"" !important;

    position:absolute !important;

    display:block !important;

    z-index:2 !important;

    right:-55px !important;
    bottom:-125px !important;

    width:350px !important;
    height:355px !important;

    opacity:.94 !important;

    pointer-events:none !important;

    background:
        url("/assets/creator/flames/flames-banner-right.png")
        right bottom / contain
        no-repeat !important;

    clip-path:none !important;

    transform:none !important;

    filter:
        drop-shadow(
            0 0 10px
            rgba(255,73,0,.50)
        ) !important;
}


.ref-center-column .creator-banner > *{
    position:relative !important;

    z-index:4 !important;
}


/* ======================================================================
   6. LEFT RAIL

   Remove the large rectangular fire-poster appearance.

   The flame artwork now originates below the navigation/promo region
   and fades into the page instead of occupying a rectangular block.
   ====================================================================== */

.ref-left-flame-art{
    position:relative !important;

    min-height:185px !important;

    margin-top:12px !important;

    overflow:visible !important;

    isolation:isolate !important;

    background:none !important;

    border:0 !important;

    box-shadow:none !important;
}


/*
Disable the wide rectangular second layer.
*/

.ref-left-flame-art::after{
    content:none !important;

    display:none !important;
}


/*
Primary irregular flame bank.
*/

.ref-left-flame-art::before{
    content:"" !important;

    display:block !important;

    position:absolute !important;

    z-index:1 !important;

    left:-65px !important;
    bottom:-95px !important;

    width:330px !important;
    height:330px !important;

    opacity:.82 !important;

    pointer-events:none !important;

    background:
        url("/assets/creator/flames/flames-left-rail.png")
        center bottom / contain
        no-repeat !important;

    clip-path:none !important;

    filter:
        drop-shadow(
            0 0 10px
            rgba(255,70,0,.40)
        ) !important;
}


/*
Text stays above the artwork.
*/

.ref-left-flame-art em,
.ref-left-flame-art strong,
.ref-left-flame-art p{
    position:relative !important;

    z-index:4 !important;
}


/*
Remove the previous separate flame artwork/icon block if present.
*/

.ref-left-flame-art > span{
    display:none !important;
}


/* ======================================================================
   7. COMMUNITY PROMO

   Keep a restrained flame accent instead of filling the card.
   ====================================================================== */

.ref-community-callout{
    position:relative !important;

    overflow:hidden !important;

    isolation:isolate !important;
}


.ref-community-callout::before{
    content:"" !important;

    display:block !important;

    position:absolute !important;

    z-index:1 !important;

    left:-45px !important;
    bottom:-90px !important;

    width:160px !important;
    height:175px !important;

    opacity:.52 !important;

    pointer-events:none !important;

    background:
        url("/assets/creator/flames/flames-panel-corner.png")
        left bottom / contain
        no-repeat !important;

    transform:scaleX(-1) !important;

    filter:
        drop-shadow(
            0 0 6px
            rgba(255,75,0,.32)
        ) !important;
}


.ref-community-callout::after{
    content:none !important;

    display:none !important;
}


.ref-community-callout > *{
    position:relative !important;

    z-index:3 !important;
}


/* ======================================================================
   8. RIGHT RAIL

   The flame should appear to escape the bottom/right edge instead of
   becoming a vertical rectangular stripe.
   ====================================================================== */

.ref-social-card,
.ref-subscribe-card{
    position:relative !important;

    isolation:isolate !important;

    overflow:hidden !important;
}


.ref-social-card::after{
    content:"" !important;

    display:block !important;

    position:absolute !important;

    z-index:1 !important;

    right:-58px !important;
    bottom:-105px !important;

    width:190px !important;
    height:205px !important;

    opacity:.55 !important;

    pointer-events:none !important;

    background:
        url("/assets/creator/flames/flames-panel-corner.png")
        right bottom / contain
        no-repeat !important;

    clip-path:none !important;

    filter:
        drop-shadow(
            0 0 7px
            rgba(255,72,0,.36)
        ) !important;
}


.ref-subscribe-card::after{
    content:"" !important;

    display:block !important;

    position:absolute !important;

    z-index:1 !important;

    right:-62px !important;
    bottom:-105px !important;

    width:205px !important;
    height:220px !important;

    opacity:.58 !important;

    pointer-events:none !important;

    background:
        url("/assets/creator/flames/flames-panel-corner.png")
        right bottom / contain
        no-repeat !important;

    clip-path:none !important;

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,72,0,.38)
        ) !important;
}


.ref-social-card > *,
.ref-subscribe-card > *{
    position:relative !important;

    z-index:3 !important;
}


/* ======================================================================
   9. LATEST POSTS

   Remove the broad flame bed from the entire content panel.

   The small heading flame remains.
   ====================================================================== */

.ref-center-column .creator-feed-wrap::after{
    content:none !important;

    display:none !important;
}


/* ======================================================================
   10. PROFILE IDENTITY AREA

   Reduce excessive vertical height so desktop proportions more closely
   match the reference.
   ====================================================================== */

.ref-center-column .creator-identity-wrap{
    position:relative !important;

    padding-top:18px !important;
    padding-bottom:18px !important;
}


.ref-center-column .creator-copy{
    min-width:0 !important;
}


.ref-center-column .creator-title-row{
    margin-bottom:6px !important;
}


.ref-center-column .creator-stats{
    margin-top:10px !important;
    margin-bottom:8px !important;
}


.ref-center-column .creator-actions{
    margin-top:10px !important;
}


/* ======================================================================
   11. NORMAL DESKTOP
   1366px - 1599px

   Slightly narrower rails preserve the center content.
   ====================================================================== */

@media
(min-width:1366px)
and
(max-width:1599px){

    .ref-main{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .ref-app-shell{
        max-width:1325px !important;

        grid-template-columns:
            190px
            minmax(0, 1fr)
            245px !important;

        gap:12px !important;
    }

    .ref-left-rail{
        width:190px !important;
    }

    .ref-right-rail{
        width:245px !important;
    }

    .ref-center-column .creator-banner{
        min-height:215px !important;
    }

    .ref-center-column .creator-banner img{
        min-height:215px !important;
    }
}


/* ======================================================================
   12. LARGE TRADITIONAL DESKTOP
   1600px - 2199px
   ====================================================================== */

@media
(min-width:1600px)
and
(max-width:2199px){

    .ref-app-shell{
        max-width:1540px !important;

        grid-template-columns:
            220px
            minmax(0, 1fr)
            280px !important;

        gap:16px !important;
    }
}


/* ======================================================================
   13. ULTRAWIDE
   2200px+

   Do NOT stretch the application indefinitely.
   ====================================================================== */

@media(min-width:2200px){

    .ref-main{
        padding-left:32px !important;
        padding-right:32px !important;
    }

    .ref-app-shell{
        width:1540px !important;

        max-width:1540px !important;

        grid-template-columns:
            220px
            minmax(0, 1fr)
            280px !important;

        gap:16px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }
}


/* ======================================================================
   14. SMALL DESKTOP / LARGE TABLET
   ====================================================================== */

@media
(min-width:1181px)
and
(max-width:1365px){

    .ref-main{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .ref-app-shell{
        max-width:1240px !important;

        grid-template-columns:
            175px
            minmax(0, 1fr)
            225px !important;

        gap:10px !important;
    }

    .ref-left-rail{
        width:175px !important;
    }

    .ref-right-rail{
        width:225px !important;
    }

    .ref-center-column .creator-banner{
        min-height:200px !important;
    }

    .ref-center-column .creator-banner img{
        min-height:200px !important;
    }
}


/* ======================================================================
   15. TABLET

   Allow existing responsive design to collapse the right rail.
   ====================================================================== */

@media(max-width:1180px){

    .ref-main{
        padding:
            14px
            14px
            32px !important;
    }

    .ref-app-shell{
        width:100% !important;

        max-width:100% !important;
    }

    .ref-left-rail,
    .ref-right-rail{
        width:auto !important;
    }

    .ref-center-column .creator-banner::before{
        width:220px !important;
        height:260px !important;

        left:-40px !important;
        bottom:-95px !important;
    }

    .ref-center-column .creator-banner::after{
        width:240px !important;
        height:270px !important;

        right:-45px !important;
        bottom:-95px !important;
    }
}


/* ======================================================================
   16. MOBILE
   ====================================================================== */

@media(max-width:760px){

    .ref-main{
        padding:
            8px
            8px
            24px !important;
    }

    .ref-app-shell{
        width:100% !important;

        max-width:100% !important;

        display:block !important;
    }

    .ref-left-rail,
    .ref-right-rail,
    .ref-center-column{
        width:100% !important;
        max-width:100% !important;
    }

    .ref-center-column .creator-banner{
        min-height:165px !important;
        max-height:210px !important;
    }

    .ref-center-column .creator-banner img{
        min-height:165px !important;
        max-height:210px !important;
    }

    .ref-center-column .creator-banner::before{
        width:130px !important;
        height:170px !important;

        left:-28px !important;
        bottom:-65px !important;
    }

    .ref-center-column .creator-banner::after{
        width:145px !important;
        height:180px !important;

        right:-30px !important;
        bottom:-68px !important;
    }

    .ref-left-flame-art{
        min-height:120px !important;
    }

    .ref-left-flame-art::before{
        width:230px !important;
        height:225px !important;

        left:50% !important;
        bottom:-90px !important;

        transform:translateX(-50%) !important;

        opacity:.55 !important;
    }

    .ref-social-card::after,
    .ref-subscribe-card::after{
        width:135px !important;
        height:145px !important;

        right:-40px !important;
        bottom:-75px !important;

        opacity:.45 !important;
    }
}


/* ======================================================================
   17. LIGHT MODE

   Pure white remains the base. Reduce glow only; keep actual flame
   colors saturated.
   ====================================================================== */

:root[data-theme="light"] .ref-main{
    background:#fff !important;
}


:root[data-theme="light"]
.ref-center-column .creator-banner::before,
:root[data-theme="light"]
.ref-center-column .creator-banner::after{
    opacity:.88 !important;

    filter:
        drop-shadow(
            0 1px 5px
            rgba(170,45,0,.22)
        ) !important;
}


:root[data-theme="light"]
.ref-left-flame-art::before{
    opacity:.72 !important;

    filter:
        drop-shadow(
            0 1px 5px
            rgba(170,45,0,.20)
        ) !important;
}


:root[data-theme="light"]
.ref-social-card::after,
:root[data-theme="light"]
.ref-subscribe-card::after{
    opacity:.48 !important;
}


/* ======================================================================
   18. PRINT
   ====================================================================== */

@media print{

    .ref-center-column .creator-banner::before,
    .ref-center-column .creator-banner::after,
    .ref-left-flame-art::before,
    .ref-left-flame-art::after,
    .ref-community-callout::before,
    .ref-community-callout::after,
    .ref-social-card::after,
    .ref-subscribe-card::after{
        display:none !important;
    }
}



/*
==========================================================================
STAGE 9.3D7E5D — V2 ORGANIC EDGE FLAMES
==========================================================================

V2 artwork characteristics:

- substantially more transparent negative space
- fire concentrated at edges rather than filling rectangular canvases
- asymmetric banner flames
- left-edge rail flame
- L-shaped panel corner flame
- low horizontal flame bed

D7E5C responsive width strategy remains authoritative.
*/


/* ======================================================================
   BANNER — V2
   ====================================================================== */

.ref-center-column .creator-banner::before{
    left:-10px !important;
    bottom:-92px !important;

    width:300px !important;
    height:315px !important;

    opacity:.96 !important;

    background-image:
        url("/assets/creator/flames/flames-banner-left.png?v=2") !important;

    background-position:left bottom !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
}


.ref-center-column .creator-banner::after{
    right:-12px !important;
    bottom:-90px !important;

    width:345px !important;
    height:320px !important;

    opacity:.97 !important;

    background-image:
        url("/assets/creator/flames/flames-banner-right.png?v=2") !important;

    background-position:right bottom !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
}


/* ======================================================================
   LEFT RAIL — V2

   No rectangular fire poster.
   ====================================================================== */

.ref-left-flame-art{
    min-height:135px !important;

    margin-top:4px !important;

    background:none !important;

    border:0 !important;

    box-shadow:none !important;

    overflow:visible !important;
}


.ref-left-flame-art::before{
    left:-30px !important;
    right:auto !important;

    bottom:-78px !important;

    width:255px !important;
    height:285px !important;

    opacity:.75 !important;

    background-image:
        url("/assets/creator/flames/flames-left-rail.png?v=2") !important;

    background-position:left bottom !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
}


.ref-left-flame-art::after{
    content:none !important;
    display:none !important;
}


/*
The previous Curves Ignite Connections presentation is removed from
visual flow. We retain the DOM rather than modifying PHP.
*/

.ref-left-flame-art em{
    display:none !important;
}


.ref-left-flame-art > span{
    display:none !important;
}


/* ======================================================================
   COMMUNITY CARD — V2
   ====================================================================== */

.ref-community-callout::before{
    left:-20px !important;
    bottom:-65px !important;

    width:145px !important;
    height:150px !important;

    opacity:.48 !important;

    background-image:
        url("/assets/creator/flames/flames-panel-corner.png?v=2") !important;

    background-position:left bottom !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
}


/* ======================================================================
   FOLLOW ME — V2
   ====================================================================== */

.ref-social-card{
    overflow:hidden !important;
}


.ref-social-card::after{
    right:-35px !important;
    bottom:-60px !important;

    width:160px !important;
    height:165px !important;

    opacity:.52 !important;

    background-image:
        url("/assets/creator/flames/flames-panel-corner.png?v=2") !important;

    background-position:right bottom !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
}


/* ======================================================================
   SUBSCRIBE — V2
   ====================================================================== */

.ref-subscribe-card{
    overflow:hidden !important;
}


.ref-subscribe-card::after{
    right:-35px !important;
    bottom:-65px !important;

    width:175px !important;
    height:180px !important;

    opacity:.56 !important;

    background-image:
        url("/assets/creator/flames/flames-panel-corner.png?v=2") !important;

    background-position:right bottom !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
}


/* ======================================================================
   LATEST POSTS

   No large fire field. Heading flame remains.
   ====================================================================== */

.ref-center-column .creator-feed-wrap::after{
    content:none !important;
    display:none !important;
}


/* ======================================================================
   LIGHT MODE
   ====================================================================== */

:root[data-theme="light"]
.ref-center-column .creator-banner::before,
:root[data-theme="light"]
.ref-center-column .creator-banner::after{
    opacity:.90 !important;
}


:root[data-theme="light"]
.ref-left-flame-art::before{
    opacity:.64 !important;
}


:root[data-theme="light"]
.ref-community-callout::before,
:root[data-theme="light"]
.ref-social-card::after,
:root[data-theme="light"]
.ref-subscribe-card::after{
    opacity:.43 !important;
}


/* ======================================================================
   TABLET
   ====================================================================== */

@media(max-width:1180px){

    .ref-center-column .creator-banner::before{
        width:225px !important;
        height:245px !important;

        left:-8px !important;
        bottom:-72px !important;
    }

    .ref-center-column .creator-banner::after{
        width:255px !important;
        height:250px !important;

        right:-8px !important;
        bottom:-70px !important;
    }

}


/* ======================================================================
   MOBILE
   ====================================================================== */

@media(max-width:760px){

    .ref-center-column .creator-banner::before{
        width:130px !important;
        height:150px !important;

        left:-5px !important;
        bottom:-48px !important;
    }

    .ref-center-column .creator-banner::after{
        width:145px !important;
        height:155px !important;

        right:-5px !important;
        bottom:-48px !important;
    }


    .ref-left-flame-art{
        min-height:80px !important;
    }


    .ref-left-flame-art::before{
        width:180px !important;
        height:190px !important;

        left:0 !important;
        bottom:-70px !important;

        transform:none !important;

        opacity:.46 !important;
    }


    .ref-social-card::after,
    .ref-subscribe-card::after{
        width:115px !important;
        height:120px !important;

        right:-28px !important;
        bottom:-48px !important;

        opacity:.40 !important;
    }

}


/*
==========================================================================
STAGE 9.3D7E5E — INTEGRATED FLAME FRAMING
==========================================================================
*/

/* Remove detached flame object completely. */
.ref-left-flame-art {
    display: none !important;
}


/* ----------------------------------------------------------
   LEFT COMMUNITY CARD
   ---------------------------------------------------------- */

.ref-community-callout {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
    margin-bottom: 42px !important;
}

.ref-community-callout::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    left: -42px !important;
    bottom: -92px !important;

    width: 245px !important;
    height: 255px !important;

    pointer-events: none !important;
    opacity: .88 !important;

    background:
        url("/assets/creator/flames/flames-left-rail.png?v=3")
        left bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 10px rgba(255,72,0,.46))
        !important;
}

.ref-community-callout::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: 1 !important;

    left: -18px !important;
    right: -14px !important;
    bottom: -30px !important;

    height: 92px !important;

    pointer-events: none !important;
    opacity: .50 !important;

    background:
        url("/assets/creator/flames/flames-wide-bottom.png?v=3")
        center bottom / 100% auto
        no-repeat !important;
}

.ref-community-callout > * {
    position: relative !important;
    z-index: 4 !important;
}


/* ----------------------------------------------------------
   HERO BANNER
   ---------------------------------------------------------- */

.ref-center-column .creator-banner::before {
    left: -20px !important;
    bottom: -68px !important;

    width: 330px !important;
    height: 345px !important;

    opacity: 1 !important;

    background:
        url("/assets/creator/flames/flames-banner-left.png?v=3")
        left bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 12px rgba(255,70,0,.58))
        !important;
}

.ref-center-column .creator-banner::after {
    right: -22px !important;
    bottom: -66px !important;

    width: 380px !important;
    height: 350px !important;

    opacity: 1 !important;

    background:
        url("/assets/creator/flames/flames-banner-right.png?v=3")
        right bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 12px rgba(255,70,0,.60))
        !important;
}


/* ----------------------------------------------------------
   RIGHT RAIL
   ---------------------------------------------------------- */

.ref-social-card,
.ref-subscribe-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
}

.ref-social-card::after {
    right: -22px !important;
    bottom: -38px !important;

    width: 175px !important;
    height: 180px !important;

    opacity: .72 !important;

    background:
        url("/assets/creator/flames/flames-panel-corner.png?v=3")
        right bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 9px rgba(255,73,0,.48))
        !important;
}

.ref-subscribe-card::after {
    right: -24px !important;
    bottom: -42px !important;

    width: 195px !important;
    height: 200px !important;

    opacity: .76 !important;

    background:
        url("/assets/creator/flames/flames-panel-corner.png?v=3")
        right bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 10px rgba(255,73,0,.52))
        !important;
}

.ref-social-card > *,
.ref-subscribe-card > * {
    position: relative !important;
    z-index: 4 !important;
}


/* Latest Posts retains only its small heading flame. */
.ref-center-column .creator-feed-wrap::after {
    content: none !important;
    display: none !important;
}


/* ----------------------------------------------------------
   LIGHT MODE
   ---------------------------------------------------------- */

:root[data-theme="light"] .ref-community-callout::before {
    opacity: .74 !important;
}

:root[data-theme="light"] .ref-community-callout::after {
    opacity: .38 !important;
}

:root[data-theme="light"]
.ref-center-column .creator-banner::before,
:root[data-theme="light"]
.ref-center-column .creator-banner::after {
    opacity: .91 !important;
}

:root[data-theme="light"] .ref-social-card::after,
:root[data-theme="light"] .ref-subscribe-card::after {
    opacity: .60 !important;
}


/* ----------------------------------------------------------
   1366–1599 DESKTOP
   ---------------------------------------------------------- */

@media (min-width:1366px) and (max-width:1599px) {

    .ref-community-callout::before {
        width: 205px !important;
        height: 220px !important;
        left: -32px !important;
        bottom: -82px !important;
    }

    .ref-center-column .creator-banner::before {
        width: 270px !important;
        height: 290px !important;
        bottom: -62px !important;
    }

    .ref-center-column .creator-banner::after {
        width: 305px !important;
        height: 295px !important;
        bottom: -60px !important;
    }
}


/* ----------------------------------------------------------
   SMALL DESKTOP / TABLET
   ---------------------------------------------------------- */

@media (max-width:1365px) {

    .ref-community-callout {
        margin-bottom: 24px !important;
    }

    .ref-community-callout::before {
        width: 175px !important;
        height: 190px !important;
        left: -25px !important;
        bottom: -70px !important;
        opacity: .68 !important;
    }

    .ref-community-callout::after {
        height: 70px !important;
        bottom: -22px !important;
    }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:760px) {

    .ref-community-callout {
        margin-bottom: 18px !important;
    }

    .ref-community-callout::before {
        width: 135px !important;
        height: 145px !important;
        left: -12px !important;
        bottom: -52px !important;
        opacity: .48 !important;
    }

    .ref-community-callout::after {
        height: 52px !important;
        bottom: -15px !important;
        opacity: .30 !important;
    }

    .ref-center-column .creator-banner::before {
        width: 145px !important;
        height: 165px !important;
        left: -8px !important;
        bottom: -40px !important;
    }

    .ref-center-column .creator-banner::after {
        width: 165px !important;
        height: 170px !important;
        right: -8px !important;
        bottom: -40px !important;
    }

    .ref-social-card::after,
    .ref-subscribe-card::after {
        width: 120px !important;
        height: 125px !important;
        right: -15px !important;
        bottom: -28px !important;
        opacity: .45 !important;
    }
}


/* ----------------------------------------------------------
   PRINT
   ---------------------------------------------------------- */

@media print {

    .ref-community-callout::before,
    .ref-community-callout::after,
    .ref-center-column .creator-banner::before,
    .ref-center-column .creator-banner::after,
    .ref-social-card::after,
    .ref-subscribe-card::after {
        display: none !important;
    }
}


/*
==========================================================================
STAGE 9.3D7E5F — EDGE-FRAMED FLAME COMPOSITION
==========================================================================
*/

/* LEFT RAIL */

.ref-left-rail {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
}

/* Remove D7E5E flames attached directly to community card. */

.ref-community-callout::before,
.ref-community-callout::after {
    content: none !important;
    display: none !important;
}

.ref-community-callout {
    margin-bottom: 14px !important;
}


/*
Use the existing decorative element as a rail-level flame.
It is absolute and therefore consumes no layout space.
*/

.ref-left-flame-art {
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    left: -78px !important;
    bottom: -48px !important;

    width: 300px !important;
    height: 390px !important;

    min-height: 0 !important;
    margin: 0 !important;

    pointer-events: none !important;

    border: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;

    opacity: .82 !important;

    background:
        url("/assets/creator/flames/flames-left-rail.png?v=4")
        left bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 13px rgba(255,70,0,.46))
        !important;
}

.ref-left-flame-art::before,
.ref-left-flame-art::after {
    content: none !important;
    display: none !important;
}

.ref-left-flame-art > *,
.ref-left-flame-art span,
.ref-left-flame-art em {
    display: none !important;
}


/* HERO BANNER */

.ref-center-column .creator-banner {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
}

.ref-center-column .creator-banner::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: 3 !important;

    left: -52px !important;
    bottom: -14px !important;

    width: 300px !important;
    height: 300px !important;

    opacity: .96 !important;
    pointer-events: none !important;

    background:
        url("/assets/creator/flames/flames-banner-left.png?v=4")
        left bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 12px rgba(255,72,0,.52))
        !important;
}

.ref-center-column .creator-banner::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: 3 !important;

    right: -55px !important;
    bottom: -14px !important;

    width: 345px !important;
    height: 305px !important;

    opacity: .98 !important;
    pointer-events: none !important;

    background:
        url("/assets/creator/flames/flames-banner-right.png?v=4")
        right bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 13px rgba(255,72,0,.55))
        !important;
}

.ref-center-column .creator-banner > * {
    position: relative !important;
    z-index: 4 !important;
}


/* RIGHT RAIL */

.ref-social-card,
.ref-subscribe-card {
    overflow: visible !important;
}

.ref-social-card::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    right: -62px !important;
    bottom: -42px !important;

    width: 190px !important;
    height: 205px !important;

    opacity: .76 !important;
    pointer-events: none !important;

    background:
        url("/assets/creator/flames/flames-panel-corner.png?v=4")
        right bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 10px rgba(255,72,0,.48))
        !important;
}

.ref-subscribe-card::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    right: -68px !important;
    bottom: -52px !important;

    width: 215px !important;
    height: 225px !important;

    opacity: .82 !important;
    pointer-events: none !important;

    background:
        url("/assets/creator/flames/flames-panel-corner.png?v=4")
        right bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 11px rgba(255,72,0,.52))
        !important;
}


/* Keep Latest Posts clean. */

.ref-center-column .creator-feed-wrap::after {
    content: none !important;
    display: none !important;
}


/* LIGHT MODE */

:root[data-theme="light"] .ref-left-flame-art {
    opacity: .67 !important;
}

:root[data-theme="light"]
.ref-center-column .creator-banner::before,
:root[data-theme="light"]
.ref-center-column .creator-banner::after {
    opacity: .88 !important;
}

:root[data-theme="light"] .ref-social-card::after,
:root[data-theme="light"] .ref-subscribe-card::after {
    opacity: .64 !important;
}


/* 1366–1599 */

@media (min-width:1366px) and (max-width:1599px) {

    .ref-left-flame-art {
        left: -54px !important;
        bottom: -38px !important;
        width: 235px !important;
        height: 310px !important;
    }

    .ref-center-column .creator-banner::before {
        left: -38px !important;
        width: 245px !important;
        height: 250px !important;
    }

    .ref-center-column .creator-banner::after {
        right: -40px !important;
        width: 275px !important;
        height: 255px !important;
    }

    .ref-social-card::after {
        right: -45px !important;
        width: 155px !important;
        height: 170px !important;
    }

    .ref-subscribe-card::after {
        right: -48px !important;
        width: 175px !important;
        height: 185px !important;
    }
}


/* <= 1365 */

@media (max-width:1365px) {

    .ref-left-flame-art {
        left: -30px !important;
        bottom: -25px !important;
        width: 175px !important;
        height: 235px !important;
        opacity: .60 !important;
    }

    .ref-center-column .creator-banner::before {
        left: -24px !important;
        width: 185px !important;
        height: 195px !important;
    }

    .ref-center-column .creator-banner::after {
        right: -25px !important;
        width: 205px !important;
        height: 200px !important;
    }

    .ref-social-card::after,
    .ref-subscribe-card::after {
        right: -30px !important;
        width: 135px !important;
        height: 145px !important;
        opacity: .60 !important;
    }
}


/* MOBILE */

@media (max-width:760px) {

    .ref-left-flame-art {
        display: none !important;
    }

    .ref-center-column .creator-banner::before {
        left: -10px !important;
        bottom: -6px !important;
        width: 120px !important;
        height: 135px !important;
        opacity: .68 !important;
    }

    .ref-center-column .creator-banner::after {
        right: -10px !important;
        bottom: -6px !important;
        width: 135px !important;
        height: 140px !important;
        opacity: .70 !important;
    }

    .ref-social-card::after,
    .ref-subscribe-card::after {
        right: -15px !important;
        bottom: -18px !important;
        width: 105px !important;
        height: 115px !important;
        opacity: .45 !important;
    }
}


/* PRINT */

@media print {

    .ref-left-flame-art,
    .ref-center-column .creator-banner::before,
    .ref-center-column .creator-banner::after,
    .ref-social-card::after,
    .ref-subscribe-card::after {
        display: none !important;
    }
}


/*
==========================================================================
STAGE 9.3D7E5G2 — TIGHT-CROPPED V5 FLAME COMPOSITION
==========================================================================

Uses cropped V5 transparent flame artwork.

No application-grid or functional changes.
*/


/* ======================================================================
   LEFT RAIL

   Cropped asset is naturally narrow/tall, so render it as an edge accent
   rather than stretching it into a rectangular decorative panel.
   ====================================================================== */

.ref-left-flame-art {
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    left: -50px !important;
    bottom: -24px !important;

    width: 118px !important;
    height: 335px !important;

    margin: 0 !important;
    min-height: 0 !important;

    pointer-events: none !important;

    border: 0 !important;
    box-shadow: none !important;

    opacity: .90 !important;

    background-image:
        url("/assets/creator/flames/v5/flames-left-rail.png?v=5")
        !important;

    background-repeat: no-repeat !important;
    background-position: left bottom !important;
    background-size: contain !important;

    filter:
        drop-shadow(0 0 11px rgba(255,70,0,.44))
        !important;
}

.ref-left-flame-art::before,
.ref-left-flame-art::after {
    content: none !important;
    display: none !important;
}

.ref-left-flame-art > * {
    display: none !important;
}


/*
D7E5E community-card flame layers remain disabled.
*/

.ref-community-callout::before,
.ref-community-callout::after {
    content: none !important;
    display: none !important;
}


/* ======================================================================
   HERO BANNER LEFT

   V5 source ratio approximately 213:483.
   Keep it narrow enough to read as edge fire rather than a flame wall.
   ====================================================================== */

.ref-center-column .creator-banner::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: 3 !important;

    left: -20px !important;
    bottom: -8px !important;

    width: 110px !important;
    height: 250px !important;

    opacity: .94 !important;
    pointer-events: none !important;

    background-image:
        url("/assets/creator/flames/v5/flames-banner-left.png?v=5")
        !important;

    background-repeat: no-repeat !important;
    background-position: left bottom !important;
    background-size: contain !important;

    filter:
        drop-shadow(0 0 10px rgba(255,72,0,.46))
        !important;
}


/* ======================================================================
   HERO BANNER RIGHT

   V5 source ratio approximately 298:501.
   ====================================================================== */

.ref-center-column .creator-banner::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: 3 !important;

    right: -22px !important;
    bottom: -8px !important;

    width: 145px !important;
    height: 245px !important;

    opacity: .95 !important;
    pointer-events: none !important;

    background-image:
        url("/assets/creator/flames/v5/flames-banner-right.png?v=5")
        !important;

    background-repeat: no-repeat !important;
    background-position: right bottom !important;
    background-size: contain !important;

    filter:
        drop-shadow(0 0 11px rgba(255,72,0,.48))
        !important;
}


/* ======================================================================
   RIGHT RAIL

   V5 corner artwork is broad rather than tall. Use it as a corner lick
   extending outside each highlighted card.
   ====================================================================== */

.ref-social-card::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    right: -35px !important;
    bottom: -19px !important;

    width: 150px !important;
    height: 106px !important;

    opacity: .76 !important;
    pointer-events: none !important;

    background-image:
        url("/assets/creator/flames/v5/flames-panel-corner.png?v=5")
        !important;

    background-repeat: no-repeat !important;
    background-position: right bottom !important;
    background-size: contain !important;

    filter:
        drop-shadow(0 0 8px rgba(255,72,0,.42))
        !important;
}


.ref-subscribe-card::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    right: -39px !important;
    bottom: -22px !important;

    width: 170px !important;
    height: 120px !important;

    opacity: .82 !important;
    pointer-events: none !important;

    background-image:
        url("/assets/creator/flames/v5/flames-panel-corner.png?v=5")
        !important;

    background-repeat: no-repeat !important;
    background-position: right bottom !important;
    background-size: contain !important;

    filter:
        drop-shadow(0 0 9px rgba(255,72,0,.46))
        !important;
}


/* ======================================================================
   LATEST POSTS

   Keep the broad flame bed disabled.
   ====================================================================== */

.ref-center-column .creator-feed-wrap::after {
    content: none !important;
    display: none !important;
}


/* ======================================================================
   LIGHT MODE
   ====================================================================== */

:root[data-theme="light"] .ref-left-flame-art {
    opacity: .72 !important;

    filter:
        drop-shadow(0 1px 5px rgba(165,44,0,.22))
        !important;
}

:root[data-theme="light"]
.ref-center-column .creator-banner::before,
:root[data-theme="light"]
.ref-center-column .creator-banner::after {
    opacity: .84 !important;

    filter:
        drop-shadow(0 1px 5px rgba(165,44,0,.24))
        !important;
}

:root[data-theme="light"] .ref-social-card::after,
:root[data-theme="light"] .ref-subscribe-card::after {
    opacity: .62 !important;
}


/* ======================================================================
   1366–1599 DESKTOP
   ====================================================================== */

@media (min-width:1366px) and (max-width:1599px) {

    .ref-left-flame-art {
        left: -38px !important;
        bottom: -18px !important;

        width: 95px !important;
        height: 270px !important;
    }

    .ref-center-column .creator-banner::before {
        left: -14px !important;

        width: 88px !important;
        height: 200px !important;
    }

    .ref-center-column .creator-banner::after {
        right: -16px !important;

        width: 116px !important;
        height: 195px !important;
    }

    .ref-social-card::after {
        right: -27px !important;

        width: 120px !important;
        height: 85px !important;
    }

    .ref-subscribe-card::after {
        right: -30px !important;

        width: 136px !important;
        height: 96px !important;
    }
}


/* ======================================================================
   <=1365
   ====================================================================== */

@media (max-width:1365px) {

    .ref-left-flame-art {
        left: -24px !important;
        bottom: -12px !important;

        width: 72px !important;
        height: 205px !important;

        opacity: .65 !important;
    }

    .ref-center-column .creator-banner::before {
        left: -8px !important;

        width: 67px !important;
        height: 152px !important;
    }

    .ref-center-column .creator-banner::after {
        right: -9px !important;

        width: 88px !important;
        height: 148px !important;
    }

    .ref-social-card::after {
        right: -18px !important;

        width: 96px !important;
        height: 68px !important;
    }

    .ref-subscribe-card::after {
        right: -20px !important;

        width: 108px !important;
        height: 76px !important;
    }
}


/* ======================================================================
   MOBILE
   ====================================================================== */

@media (max-width:760px) {

    .ref-left-flame-art {
        display: none !important;
    }

    .ref-center-column .creator-banner::before {
        left: -5px !important;
        bottom: -3px !important;

        width: 52px !important;
        height: 118px !important;

        opacity: .60 !important;
    }

    .ref-center-column .creator-banner::after {
        right: -5px !important;
        bottom: -3px !important;

        width: 68px !important;
        height: 114px !important;

        opacity: .62 !important;
    }

    .ref-social-card::after,
    .ref-subscribe-card::after {
        right: -10px !important;
        bottom: -8px !important;

        width: 82px !important;
        height: 58px !important;

        opacity: .44 !important;
    }
}


/* ======================================================================
   PRINT
   ====================================================================== */

@media print {

    .ref-left-flame-art,
    .ref-center-column .creator-banner::before,
    .ref-center-column .creator-banner::after,
    .ref-social-card::after,
    .ref-subscribe-card::after {
        display: none !important;
    }
}


/*
==========================================================================
STAGE 9.3D7E5H — V6 HORIZONTAL FLOWING FLAME COMPOSITION
==========================================================================

V6 artwork is intentionally wide and lateral.

The fire travels along panel/banner edges instead of appearing as
independent vertical flame columns.

Responsive application widths from D7E5C remain unchanged.
*/


/* ======================================================================
   LEFT RAIL

   Wide fire bank begins behind/below the navigation/community rail and
   flows horizontally toward the center.
   ====================================================================== */

.ref-left-rail {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
}

.ref-left-flame-art {
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    left: -105px !important;
    bottom: -36px !important;

    width: 345px !important;
    height: 173px !important;

    margin: 0 !important;
    min-height: 0 !important;

    pointer-events: none !important;

    border: 0 !important;
    box-shadow: none !important;

    opacity: .88 !important;

    background:
        url("/assets/creator/flames/v6/flames-left-rail.png?v=6")
        left bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 12px rgba(255,70,0,.43))
        !important;
}

.ref-left-flame-art::before,
.ref-left-flame-art::after {
    content: none !important;
    display: none !important;
}

.ref-left-flame-art > * {
    display: none !important;
}


/*
Do not put another independent flame directly on the community card.
The V6 rail artwork supplies the fire around this area.
*/

.ref-community-callout::before,
.ref-community-callout::after {
    content: none !important;
    display: none !important;
}


/* ======================================================================
   BANNER

   These are wide edge banks. The left artwork sweeps inward/right and
   the right artwork sweeps inward/left.
   ====================================================================== */

.ref-center-column .creator-banner {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
}

.ref-center-column .creator-banner::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: 3 !important;

    left: -48px !important;
    bottom: -16px !important;

    width: 390px !important;
    height: 147px !important;

    opacity: .90 !important;
    pointer-events: none !important;

    background:
        url("/assets/creator/flames/v6/flames-banner-left.png?v=6")
        left bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 11px rgba(255,70,0,.47))
        !important;
}

.ref-center-column .creator-banner::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: 3 !important;

    right: -52px !important;
    bottom: -16px !important;

    width: 430px !important;
    height: 138px !important;

    opacity: .92 !important;
    pointer-events: none !important;

    background:
        url("/assets/creator/flames/v6/flames-banner-right.png?v=6")
        right bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 12px rgba(255,70,0,.49))
        !important;
}


/* Keep actual banner content above decorative fire. */

.ref-center-column .creator-banner > * {
    position: relative !important;
    z-index: 4 !important;
}


/* ======================================================================
   RIGHT RAIL

   Fire now runs underneath the cards and sweeps inward/left rather than
   producing vertical towers along their right edges.
   ====================================================================== */

.ref-social-card,
.ref-subscribe-card {
    position: relative !important;
    overflow: visible !important;
}

.ref-social-card::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    right: -46px !important;
    bottom: -37px !important;

    width: 255px !important;
    height: 108px !important;

    opacity: .72 !important;
    pointer-events: none !important;

    background:
        url("/assets/creator/flames/v6/flames-panel-right.png?v=6")
        right bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 9px rgba(255,70,0,.41))
        !important;
}

.ref-subscribe-card::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    z-index: -1 !important;

    right: -50px !important;
    bottom: -40px !important;

    width: 285px !important;
    height: 121px !important;

    opacity: .79 !important;
    pointer-events: none !important;

    background:
        url("/assets/creator/flames/v6/flames-panel-right.png?v=6")
        right bottom / contain
        no-repeat !important;

    filter:
        drop-shadow(0 0 10px rgba(255,70,0,.45))
        !important;
}


/* ======================================================================
   LATEST POSTS

   Do not create another large decorative fire wall here.
   Small heading flame remains.
   ====================================================================== */

.ref-center-column .creator-feed-wrap::after {
    content: none !important;
    display: none !important;
}


/* ======================================================================
   LIGHT MODE

   Same artwork, reduced density so pure-white presentation stays clean.
   ====================================================================== */

:root[data-theme="light"] .ref-left-flame-art {
    opacity: .64 !important;

    filter:
        drop-shadow(0 1px 5px rgba(170,45,0,.20))
        !important;
}

:root[data-theme="light"]
.ref-center-column .creator-banner::before,
:root[data-theme="light"]
.ref-center-column .creator-banner::after {
    opacity: .77 !important;

    filter:
        drop-shadow(0 1px 5px rgba(170,45,0,.22))
        !important;
}

:root[data-theme="light"] .ref-social-card::after,
:root[data-theme="light"] .ref-subscribe-card::after {
    opacity: .56 !important;
}


/* ======================================================================
   1366–1599

   Traditional laptop/desktop displays remain the priority.
   ====================================================================== */

@media (min-width:1366px) and (max-width:1599px) {

    .ref-left-flame-art {
        left: -76px !important;
        bottom: -28px !important;

        width: 275px !important;
        height: 138px !important;
    }

    .ref-center-column .creator-banner::before {
        left: -34px !important;
        bottom: -12px !important;

        width: 315px !important;
        height: 119px !important;
    }

    .ref-center-column .creator-banner::after {
        right: -36px !important;
        bottom: -12px !important;

        width: 345px !important;
        height: 111px !important;
    }

    .ref-social-card::after {
        right: -32px !important;
        bottom: -28px !important;

        width: 205px !important;
        height: 87px !important;
    }

    .ref-subscribe-card::after {
        right: -35px !important;
        bottom: -31px !important;

        width: 225px !important;
        height: 95px !important;
    }
}


/* ======================================================================
   <=1365
   ====================================================================== */

@media (max-width:1365px) {

    .ref-left-flame-art {
        left: -50px !important;
        bottom: -20px !important;

        width: 210px !important;
        height: 105px !important;

        opacity: .70 !important;
    }

    .ref-center-column .creator-banner::before {
        left: -22px !important;
        bottom: -8px !important;

        width: 235px !important;
        height: 89px !important;
    }

    .ref-center-column .creator-banner::after {
        right: -24px !important;
        bottom: -8px !important;

        width: 255px !important;
        height: 82px !important;
    }

    .ref-social-card::after {
        right: -22px !important;
        bottom: -20px !important;

        width: 160px !important;
        height: 68px !important;
    }

    .ref-subscribe-card::after {
        right: -24px !important;
        bottom: -22px !important;

        width: 175px !important;
        height: 74px !important;
    }
}


/* ======================================================================
   MOBILE
   ====================================================================== */

@media (max-width:760px) {

    .ref-left-flame-art {
        display: none !important;
    }

    .ref-center-column .creator-banner::before {
        left: -10px !important;
        bottom: -4px !important;

        width: 155px !important;
        height: 59px !important;

        opacity: .58 !important;
    }

    .ref-center-column .creator-banner::after {
        right: -10px !important;
        bottom: -4px !important;

        width: 170px !important;
        height: 55px !important;

        opacity: .60 !important;
    }

    .ref-social-card::after,
    .ref-subscribe-card::after {
        right: -10px !important;
        bottom: -11px !important;

        width: 120px !important;
        height: 51px !important;

        opacity: .42 !important;
    }
}


/* ======================================================================
   PRINT
   ====================================================================== */

@media print {

    .ref-left-flame-art,
    .ref-center-column .creator-banner::before,
    .ref-center-column .creator-banner::after,
    .ref-social-card::after,
    .ref-subscribe-card::after {
        display: none !important;
    }
}


/*
==========================================================================
STAGE 9.3D7E5I — REMOVE LARGE DECORATIVE FLAMES
==========================================================================

Temporarily removes the large PNG/CSS flame compositions.

Small inline/heading flame icons are intentionally preserved.

All V5/V6 artwork remains installed for possible future use.
*/


/* ----------------------------------------------------------------------
   LEFT RAIL DECORATIVE FIRE
   ---------------------------------------------------------------------- */

.ref-left-flame-art,
.ref-left-flame-art::before,
.ref-left-flame-art::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}


/* ----------------------------------------------------------------------
   COMMUNITY CALLOUT DECORATIVE FIRE
   ---------------------------------------------------------------------- */

.ref-community-callout::before,
.ref-community-callout::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}


/* ----------------------------------------------------------------------
   HERO / BANNER DECORATIVE FIRE
   ---------------------------------------------------------------------- */

.ref-center-column .creator-banner::before,
.ref-center-column .creator-banner::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}


/* ----------------------------------------------------------------------
   RIGHT-RAIL DECORATIVE FIRE
   ---------------------------------------------------------------------- */

.ref-social-card::before,
.ref-social-card::after,
.ref-subscribe-card::before,
.ref-subscribe-card::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}


/* ----------------------------------------------------------------------
   FEED / LATEST POSTS DECORATIVE FIRE
   ---------------------------------------------------------------------- */

.ref-center-column .creator-feed-wrap::before,
.ref-center-column .creator-feed-wrap::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}


/* ----------------------------------------------------------------------
   Restore clean stacking after flame removal.
   ---------------------------------------------------------------------- */

.ref-left-rail,
.ref-center-column .creator-banner,
.ref-social-card,
.ref-subscribe-card,
.ref-center-column .creator-feed-wrap {
    isolation: auto !important;
}


/*
Do NOT suppress normal inline flame characters/icons.

Examples such as the small flame preceding "Latest from..."
remain part of the normal page content.
*/

/*
==========================================================================
STAGE 9.3D7E5J — PROFILE LAYOUT REFINEMENT
==========================================================================

Goals:

- Optimize primary presentation for traditional desktop resolutions.
- Preserve the ultrawide maximum-width strategy.
- Strengthen the center creator profile hierarchy.
- Improve proportions of left and right rails.
- Tighten banner/profile transition.
- Align Latest Posts with the center profile.
- Keep all large decorative flames disabled.
- Preserve light/dark themes.
*/


/* ======================================================================
   APPLICATION SHELL
   ====================================================================== */

.ref-main {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.ref-app-shell {
    width: min(1540px, calc(100vw - 48px)) !important;
    max-width: 1540px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    display: grid !important;
    grid-template-columns:
        minmax(210px, 230px)
        minmax(0, 1fr)
        minmax(260px, 285px)
        !important;

    column-gap: 18px !important;
    align-items: start !important;
}


/* ======================================================================
   LEFT RAIL
   ====================================================================== */

.ref-left-rail {
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 14px !important;
}

.ref-left-rail > * {
    width: 100% !important;
    box-sizing: border-box !important;
}

.ref-left-rail nav,
.ref-community-callout {
    border-radius: 10px !important;
}


/* ======================================================================
   CENTER COLUMN
   ====================================================================== */

.ref-center-column {
    min-width: 0 !important;
    width: 100% !important;
}

.ref-center-column .creator-hero {
    width: 100% !important;
    margin: 0 !important;

    border-radius: 12px !important;
    overflow: visible !important;
}


/* ======================================================================
   BANNER
   ====================================================================== */

.ref-center-column .creator-banner {
    width: 100% !important;

    min-height: 230px !important;
    height: clamp(230px, 16vw, 285px) !important;
    max-height: 285px !important;

    border-radius: 11px 11px 0 0 !important;
    overflow: hidden !important;
}

.ref-center-column .creator-banner img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center 32% !important;
}


/* ======================================================================
   IDENTITY AREA

   Pull identity toward the banner so avatar/profile information reads as
   one unified creator header instead of two independent blocks.
   ====================================================================== */

.ref-center-column .creator-identity-wrap {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 142px minmax(0, 1fr) !important;
    gap: 18px !important;

    align-items: start !important;

    padding:
        22px
        26px
        24px
        26px
        !important;

    margin: 0 !important;
}

.ref-center-column .creator-avatar {
    position: relative !important;

    width: 132px !important;
    height: 132px !important;

    margin-top: -76px !important;

    z-index: 5 !important;
}

.ref-center-column .creator-avatar img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    border-radius: 50% !important;
}

.ref-center-column .creator-copy {
    min-width: 0 !important;
    width: 100% !important;
}

.ref-center-column .creator-title-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 18px !important;

    width: 100% !important;
}

.ref-center-column .creator-title-row h1 {
    margin-top: 0 !important;
    margin-bottom: 4px !important;

    line-height: 1.08 !important;

    font-size: clamp(1.55rem, 2vw, 2.15rem) !important;
}


/* ======================================================================
   PROFILE METADATA
   ====================================================================== */

.ref-center-column .creator-copy p {
    max-width: 820px !important;
}

.ref-center-column .creator-profile-links {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 8px !important;

    margin-top: 14px !important;
}

.ref-center-column .creator-stats {
    margin-top: 16px !important;
    padding-top: 13px !important;

    display: flex !important;
    flex-wrap: wrap !important;

    gap: 14px !important;
}


/* ======================================================================
   PROFILE ACTIONS
   ====================================================================== */

.ref-center-column .creator-actions {
    display: flex !important;
    flex-wrap: wrap !important;

    align-items: center !important;

    gap: 9px !important;

    margin-top: 13px !important;
}

.ref-center-column .creator-actions a,
.ref-center-column .creator-actions button {
    min-height: 38px !important;

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


/* ======================================================================
   RIGHT RAIL
   ====================================================================== */

.ref-right-rail {
    width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 14px !important;
}

.ref-right-rail > * {
    width: 100% !important;
    box-sizing: border-box !important;
}

.ref-rail-card {
    border-radius: 10px !important;

    padding: 16px !important;
}

.ref-rail-card h2,
.ref-rail-card h3 {
    margin-top: 0 !important;
}

.ref-subscribe-card form {
    width: 100% !important;
}

.ref-subscribe-card button {
    width: 100% !important;
    min-height: 42px !important;
}


/* ======================================================================
   LATEST POSTS

   This stays aligned exactly to the center profile column.
   ====================================================================== */

.ref-center-column .creator-feed-wrap {
    width: 100% !important;

    margin-top: 18px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 18px !important;

    box-sizing: border-box !important;

    border-radius: 12px !important;
}

.ref-center-column .creator-feed-heading {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 16px !important;

    margin-bottom: 15px !important;
}


/* ======================================================================
   POST GRID
   ====================================================================== */

.ref-center-column .creator-feed-wrap .posts-grid,
.ref-center-column .creator-feed-wrap .creator-post-grid,
.ref-center-column .creator-feed-wrap .post-grid {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 14px !important;

    width: 100% !important;
}

.ref-center-column .external-post {
    min-width: 0 !important;

    border-radius: 10px !important;

    overflow: hidden !important;
}


/* ======================================================================
   FLAMES REMAIN OFF

   Explicit final override so none of the earlier experimental flame
   stages can reappear because of specificity changes above.
   ====================================================================== */

.ref-left-flame-art,
.ref-left-flame-art::before,
.ref-left-flame-art::after,
.ref-community-callout::before,
.ref-community-callout::after,
.ref-center-column .creator-banner::before,
.ref-center-column .creator-banner::after,
.ref-social-card::before,
.ref-social-card::after,
.ref-subscribe-card::before,
.ref-subscribe-card::after,
.ref-center-column .creator-feed-wrap::before,
.ref-center-column .creator-feed-wrap::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}


/* ======================================================================
   1600–1919 DESKTOP

   Main traditional desktop range.
   ====================================================================== */

@media (min-width:1600px) and (max-width:1919px) {

    .ref-app-shell {
        width: min(1480px, calc(100vw - 48px)) !important;

        grid-template-columns:
            220px
            minmax(0, 1fr)
            275px
            !important;

        column-gap: 17px !important;
    }

    .ref-center-column .creator-banner {
        height: 250px !important;
    }
}


/* ======================================================================
   1366–1599 DESKTOP

   Traditional laptop / smaller desktop presentation.
   ====================================================================== */

@media (min-width:1366px) and (max-width:1599px) {

    .ref-main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ref-app-shell {
        width: calc(100vw - 32px) !important;

        grid-template-columns:
            190px
            minmax(0, 1fr)
            245px
            !important;

        column-gap: 14px !important;
    }

    .ref-center-column .creator-banner {
        min-height: 205px !important;
        height: 220px !important;
    }

    .ref-center-column .creator-identity-wrap {
        grid-template-columns: 118px minmax(0, 1fr) !important;

        gap: 15px !important;

        padding:
            18px
            20px
            21px
            20px
            !important;
    }

    .ref-center-column .creator-avatar {
        width: 110px !important;
        height: 110px !important;

        margin-top: -60px !important;
    }

    .ref-rail-card {
        padding: 13px !important;
    }

    .ref-center-column .creator-feed-wrap {
        padding: 15px !important;
    }
}


/* ======================================================================
   1181–1365

   Keep three columns where space permits, but reduce rail footprint.
   ====================================================================== */

@media (min-width:1181px) and (max-width:1365px) {

    .ref-main {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .ref-app-shell {
        width: calc(100vw - 24px) !important;

        grid-template-columns:
            175px
            minmax(0, 1fr)
            220px
            !important;

        column-gap: 12px !important;
    }

    .ref-center-column .creator-banner {
        min-height: 190px !important;
        height: 205px !important;
    }

    .ref-center-column .creator-identity-wrap {
        grid-template-columns: 105px minmax(0, 1fr) !important;

        gap: 13px !important;

        padding: 16px !important;
    }

    .ref-center-column .creator-avatar {
        width: 98px !important;
        height: 98px !important;

        margin-top: -52px !important;
    }
}


/* ======================================================================
   TABLET

   Center profile becomes primary. Rails stack below/around it according
   to their existing DOM order.
   ====================================================================== */

@media (max-width:1180px) {

    .ref-main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ref-app-shell {
        width: 100% !important;

        grid-template-columns:
            minmax(170px, 210px)
            minmax(0, 1fr)
            !important;

        gap: 16px !important;
    }

    .ref-right-rail {
        grid-column: 1 / -1 !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr))
            !important;

        gap: 14px !important;
    }

    .ref-center-column .creator-banner {
        min-height: 190px !important;
        height: 220px !important;
    }

    .ref-center-column .creator-feed-wrap .posts-grid,
    .ref-center-column .creator-feed-wrap .creator-post-grid,
    .ref-center-column .creator-feed-wrap .post-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr))
            !important;
    }
}


/* ======================================================================
   MOBILE
   ====================================================================== */

@media (max-width:760px) {

    .ref-main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ref-app-shell {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 12px !important;
    }

    .ref-center-column {
        order: 1 !important;
    }

    .ref-left-rail {
        order: 2 !important;
    }

    .ref-right-rail {
        order: 3 !important;

        display: flex !important;
        flex-direction: column !important;
    }

    .ref-center-column .creator-banner {
        min-height: 160px !important;
        height: 180px !important;
    }

    .ref-center-column .creator-identity-wrap {
        display: block !important;

        padding: 16px !important;
    }

    .ref-center-column .creator-avatar {
        width: 92px !important;
        height: 92px !important;

        margin-top: -58px !important;
        margin-bottom: 10px !important;
    }

    .ref-center-column .creator-title-row {
        display: block !important;
    }

    .ref-center-column .creator-feed-wrap {
        margin-top: 12px !important;

        padding: 13px !important;
    }

    .ref-center-column .creator-feed-wrap .posts-grid,
    .ref-center-column .creator-feed-wrap .creator-post-grid,
    .ref-center-column .creator-feed-wrap .post-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ======================================================================
   SMALL MOBILE
   ====================================================================== */

@media (max-width:480px) {

    .ref-main {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .ref-center-column .creator-banner {
        min-height: 140px !important;
        height: 155px !important;
    }

    .ref-center-column .creator-actions {
        align-items: stretch !important;
    }

    .ref-center-column .creator-actions > * {
        flex: 1 1 auto !important;
    }
}


/*
==========================================================================
STAGE 9.3D7E5K2 — DESKTOP SCALE AND PRESENCE
==========================================================================

Purpose:

- Increase visual presence on 1920-class and larger displays.
- Keep traditional 1366/1440/1600 layouts controlled.
- Preserve a finite ultrawide width.
- Increase header/logo presence.
- Give the creator banner, avatar, rails and post cards more breathing room.
- Keep all large decorative flame artwork disabled.
*/


/* ======================================================================
   HEADER
   ====================================================================== */

.public-site-header {
    min-height: 72px !important;
}

.public-header-inner {
    width: min(1680px, calc(100vw - 48px)) !important;
    max-width: 1680px !important;

    min-height: 72px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

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

    gap: 28px !important;
}

.public-brand {
    display: inline-flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;
}

.public-brand img {
    display: block !important;

    width: 190px !important;
    max-width: 190px !important;

    height: auto !important;
    max-height: 48px !important;
}

.public-nav {
    display: flex !important;
    align-items: center !important;

    gap: 22px !important;
}

.public-nav a {
    font-size: 0.93rem !important;
}


/* ======================================================================
   MAIN APPLICATION — LARGE DESKTOP
   ====================================================================== */

@media (min-width:1920px) {

    .ref-main {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .ref-app-shell {
        width: min(1680px, calc(100vw - 48px)) !important;
        max-width: 1680px !important;

        grid-template-columns:
            245px
            minmax(0, 1fr)
            300px
            !important;

        column-gap: 20px !important;
    }


    /* --------------------------------------------------------------
       LEFT RAIL
       -------------------------------------------------------------- */

    .ref-side-nav {
        padding: 12px !important;
    }

    .ref-side-nav a {
        min-height: 44px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;

        font-size: 0.94rem !important;
    }

    .ref-community-callout {
        padding: 18px !important;
    }


    /* --------------------------------------------------------------
       CREATOR BANNER
       -------------------------------------------------------------- */

    .ref-center-column .creator-banner {
        min-height: 285px !important;
        height: 300px !important;
        max-height: 300px !important;
    }


    /* --------------------------------------------------------------
       CREATOR IDENTITY
       -------------------------------------------------------------- */

    .ref-center-column .creator-identity-wrap {
        grid-template-columns:
            160px
            minmax(0, 1fr)
            !important;

        gap: 22px !important;

        padding:
            24px
            30px
            28px
            30px
            !important;
    }

    .ref-center-column .creator-avatar {
        width: 150px !important;
        height: 150px !important;

        margin-top: -88px !important;
    }

    .ref-center-column .creator-title-row h1 {
        font-size: 2.15rem !important;
    }

    .ref-center-column .creator-copy {
        font-size: 0.98rem !important;
    }

    .ref-center-column .creator-copy p {
        line-height: 1.55 !important;
    }

    .ref-center-column .creator-profile-links {
        gap: 9px !important;
    }

    .ref-center-column .creator-stats {
        gap: 18px !important;
    }

    .ref-center-column .creator-actions {
        gap: 10px !important;
    }

    .ref-center-column .creator-actions a,
    .ref-center-column .creator-actions button {
        min-height: 41px !important;

        padding-left: 16px !important;
        padding-right: 16px !important;

        font-size: 0.92rem !important;
    }


    /* --------------------------------------------------------------
       RIGHT RAIL
       -------------------------------------------------------------- */

    .ref-right-rail {
        gap: 16px !important;
    }

    .ref-rail-card {
        padding: 18px !important;
    }

    .ref-rail-card h2,
    .ref-rail-card h3 {
        line-height: 1.2 !important;
    }

    .ref-subscribe-card button {
        min-height: 44px !important;
    }


    /* --------------------------------------------------------------
       LATEST POSTS
       -------------------------------------------------------------- */

    .ref-center-column .creator-feed-wrap {
        margin-top: 20px !important;

        padding: 20px !important;
    }

    .ref-center-column .creator-feed-heading {
        margin-bottom: 17px !important;
    }

    .ref-center-column .creator-feed-heading h2,
    .ref-center-column .creator-feed-heading h3 {
        font-size: 1.45rem !important;
    }

    .ref-center-column .creator-feed-wrap .posts-grid,
    .ref-center-column .creator-feed-wrap .creator-post-grid,
    .ref-center-column .creator-feed-wrap .post-grid {
        gap: 16px !important;
    }

    .ref-center-column .external-post {
        min-height: 250px !important;
    }
}


/* ======================================================================
   1600–1919

   Retain the traditional desktop geometry from D7E5J. Only the header
   receives a modest presence increase.
   ====================================================================== */

@media (min-width:1600px) and (max-width:1919px) {

    .public-header-inner {
        width: min(1480px, calc(100vw - 48px)) !important;
        max-width: 1480px !important;
    }

    .public-brand img {
        width: 175px !important;
        max-width: 175px !important;
    }
}


/* ======================================================================
   1366–1599
   ====================================================================== */

@media (min-width:1366px) and (max-width:1599px) {

    .public-site-header,
    .public-header-inner {
        min-height: 66px !important;
    }

    .public-header-inner {
        width: calc(100vw - 32px) !important;
        max-width: none !important;
    }

    .public-brand img {
        width: 160px !important;
        max-width: 160px !important;
        max-height: 42px !important;
    }

    .public-nav {
        gap: 17px !important;
    }

    .public-nav a {
        font-size: 0.88rem !important;
    }
}


/* ======================================================================
   TABLET
   ====================================================================== */

@media (max-width:1180px) {

    .public-site-header,
    .public-header-inner {
        min-height: 62px !important;
    }

    .public-header-inner {
        width: calc(100vw - 32px) !important;
        max-width: none !important;

        gap: 18px !important;
    }

    .public-brand img {
        width: 150px !important;
        max-width: 150px !important;
    }

    .public-nav {
        gap: 13px !important;
    }
}


/* ======================================================================
   MOBILE
   ====================================================================== */

@media (max-width:760px) {

    .public-site-header {
        min-height: 60px !important;
    }

    .public-header-inner {
        width: calc(100vw - 20px) !important;
        max-width: none !important;

        min-height: 60px !important;

        gap: 10px !important;
    }

    .public-brand img {
        width: 128px !important;
        max-width: 128px !important;
    }

    .public-nav {
        gap: 8px !important;
    }

    .public-nav a {
        font-size: 0.8rem !important;
    }
}


/* ======================================================================
   KEEP LARGE DECORATIVE FLAMES OFF
   ====================================================================== */

.ref-left-flame-art,
.ref-left-flame-art::before,
.ref-left-flame-art::after,
.ref-community-callout::before,
.ref-community-callout::after,
.ref-center-column .creator-banner::before,
.ref-center-column .creator-banner::after,
.ref-social-card::before,
.ref-social-card::after,
.ref-subscribe-card::before,
.ref-subscribe-card::after,
.ref-center-column .creator-feed-wrap::before,
.ref-center-column .creator-feed-wrap::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}


/*
==========================================================================
STAGE 9.3D7E5K4 — ULTRAWIDE REFINEMENT
==========================================================================

Measured viewport:
3388 x 1309 CSS pixels
DPR: 1
Visual viewport scale: 1

The browser is not zoomed out.

Strategy:
- Preserve traditional desktop layouts.
- Expand only on genuinely wide viewports.
- Cap the application at 1920px.
- Keep the creator center column readable.
- Give additional width to navigation and right rail.
- Keep large decorative flames disabled.
*/


/* ======================================================================
   2560+ ULTRAWIDE
   ====================================================================== */

@media (min-width:2560px) {

    .public-header-inner {
        width: min(1920px, calc(100vw - 64px)) !important;
        max-width: 1920px !important;
    }

    .ref-app-shell {
        width: min(1920px, calc(100vw - 64px)) !important;
        max-width: 1920px !important;

        grid-template-columns:
            280px
            minmax(0, 1fr)
            320px
            !important;

        column-gap: 20px !important;
    }

    .public-brand img {
        width: 205px !important;
        max-width: 205px !important;
    }

    .public-nav {
        gap: 24px !important;
    }

    .ref-side-nav a {
        min-height: 46px !important;
        font-size: 0.97rem !important;
    }

    .ref-community-callout {
        padding: 20px !important;
    }

    .ref-center-column .creator-banner {
        min-height: 320px !important;
        height: 330px !important;
        max-height: 330px !important;
    }

    .ref-center-column .creator-identity-wrap {
        grid-template-columns:
            170px
            minmax(0, 1fr)
            !important;

        gap: 24px !important;

        padding:
            26px
            34px
            30px
            34px
            !important;
    }

    .ref-center-column .creator-avatar {
        width: 160px !important;
        height: 160px !important;

        margin-top: -94px !important;
    }

    .ref-center-column .creator-title-row h1 {
        font-size: 2.3rem !important;
    }

    .ref-center-column .creator-copy {
        font-size: 1rem !important;
    }

    .ref-rail-card {
        padding: 20px !important;
    }

    .ref-center-column .creator-feed-wrap {
        padding: 22px !important;
    }

    .ref-center-column .creator-feed-wrap .posts-grid,
    .ref-center-column .creator-feed-wrap .creator-post-grid,
    .ref-center-column .creator-feed-wrap .post-grid {
        gap: 18px !important;
    }
}


/* ======================================================================
   LARGE DECORATIVE FLAMES REMAIN DISABLED
   ====================================================================== */

.ref-left-flame-art,
.ref-left-flame-art::before,
.ref-left-flame-art::after,
.ref-community-callout::before,
.ref-community-callout::after,
.ref-center-column .creator-banner::before,
.ref-center-column .creator-banner::after,
.ref-social-card::before,
.ref-social-card::after,
.ref-subscribe-card::before,
.ref-subscribe-card::after,
.ref-center-column .creator-feed-wrap::before,
.ref-center-column .creator-feed-wrap::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}


/*
==========================================================================
STAGE 9.3D7E5L — CREATOR IDENTITY COMPACTION
==========================================================================

The horizontal architecture established by K4 is retained.

This stage concentrates the creator information vertically and strengthens
the visual relationship between:

banner
avatar
creator identity
profile metadata
actions
Latest Posts

No application behavior or data is changed.
*/


/* ======================================================================
   HEADER PRESENCE
   ====================================================================== */

.public-site-header {
    border-bottom-width: 1px !important;
}

.public-header-inner {
    min-height: 78px !important;
}

.public-brand img {
    width: 215px !important;
    max-width: 215px !important;
    max-height: 52px !important;
}

.public-nav a {
    font-weight: 600 !important;
}


/* ======================================================================
   CREATOR HERO
   ====================================================================== */

.ref-center-column .creator-hero {
    overflow: hidden !important;
}


/* ======================================================================
   BANNER

   Reduce some of the banner dominance introduced during scale testing.
   ====================================================================== */

@media (min-width:1920px) {

    .ref-center-column .creator-banner {
        min-height: 285px !important;
        height: 285px !important;
        max-height: 285px !important;
    }
}

@media (min-width:2560px) {

    .ref-center-column .creator-banner {
        min-height: 290px !important;
        height: 290px !important;
        max-height: 290px !important;
    }
}


/* ======================================================================
   CREATOR IDENTITY
   ====================================================================== */

.ref-center-column .creator-identity-wrap {
    position: relative !important;

    align-items: start !important;

    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

@media (min-width:1920px) {

    .ref-center-column .creator-identity-wrap {
        grid-template-columns:
            156px
            minmax(0, 1fr)
            !important;

        gap: 20px !important;

        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .ref-center-column .creator-avatar {
        width: 146px !important;
        height: 146px !important;

        margin-top: -78px !important;
    }
}

@media (min-width:2560px) {

    .ref-center-column .creator-identity-wrap {
        grid-template-columns:
            166px
            minmax(0, 1fr)
            !important;

        gap: 22px !important;

        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .ref-center-column .creator-avatar {
        width: 156px !important;
        height: 156px !important;

        margin-top: -82px !important;
    }
}


/* ======================================================================
   CREATOR COPY
   ====================================================================== */

.ref-center-column .creator-copy {
    display: block !important;

    min-width: 0 !important;
}

.ref-center-column .creator-title-row {
    margin: 0 0 4px 0 !important;
}

.ref-center-column .creator-title-row h1 {
    margin: 0 !important;

    line-height: 1.05 !important;
}

@media (min-width:1920px) {

    .ref-center-column .creator-title-row h1 {
        font-size: 2rem !important;
    }
}

@media (min-width:2560px) {

    .ref-center-column .creator-title-row h1 {
        font-size: 2.15rem !important;
    }
}


/* ======================================================================
   PROFILE TEXT DENSITY
   ====================================================================== */

.ref-center-column .creator-copy > p {
    margin-top: 5px !important;
    margin-bottom: 7px !important;

    line-height: 1.4 !important;
}

.ref-center-column .creator-profile-links {
    margin-top: 8px !important;
    margin-bottom: 0 !important;

    gap: 6px !important;
}


/* ======================================================================
   DISCOVERY / ATTRIBUTE PILLS
   ====================================================================== */

.ref-center-column .profile-pills,
.ref-center-column .creator-pills,
.ref-center-column .discovery-pills {
    margin-top: 8px !important;
    margin-bottom: 6px !important;

    gap: 6px !important;
}


/* ======================================================================
   STATS
   ====================================================================== */

.ref-center-column .creator-stats {
    margin-top: 10px !important;

    padding-top: 9px !important;

    gap: 14px !important;
}


/* ======================================================================
   ACTIONS
   ====================================================================== */

.ref-center-column .creator-actions {
    margin-top: 9px !important;
    margin-bottom: 0 !important;

    gap: 8px !important;
}

.ref-center-column .creator-actions a,
.ref-center-column .creator-actions button {
    min-height: 36px !important;

    padding-top: 7px !important;
    padding-bottom: 7px !important;
}


/* ======================================================================
   RIGHT RAIL

   Slightly tighter cards keep the upper rail visually aligned with the
   creator hero instead of extending unnecessarily.
   ====================================================================== */

.ref-right-rail {
    gap: 12px !important;
}

.ref-rail-card {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.ref-rail-card h2,
.ref-rail-card h3 {
    margin-bottom: 9px !important;
}


/* ======================================================================
   LATEST POSTS

   Pull the feed closer to the creator identity card.
   ====================================================================== */

.ref-center-column .creator-feed-wrap {
    margin-top: 12px !important;

    padding-top: 17px !important;
}

.ref-center-column .creator-feed-heading {
    margin-bottom: 12px !important;
}


/* ======================================================================
   LARGE POST CARDS
   ====================================================================== */

@media (min-width:1920px) {

    .ref-center-column .external-post {
        min-height: 230px !important;
    }
}


/* ======================================================================
   1600–1919

   Keep the same compact identity philosophy without altering D7E5J's
   established column geometry.
   ====================================================================== */

@media (min-width:1600px) and (max-width:1919px) {

    .public-header-inner {
        min-height: 70px !important;
    }

    .public-brand img {
        width: 180px !important;
        max-width: 180px !important;
    }

    .ref-center-column .creator-identity-wrap {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .ref-center-column .creator-feed-wrap {
        margin-top: 11px !important;
    }
}


/* ======================================================================
   1366–1599
   ====================================================================== */

@media (min-width:1366px) and (max-width:1599px) {

    .public-header-inner {
        min-height: 66px !important;
    }

    .public-brand img {
        width: 160px !important;
        max-width: 160px !important;
    }

    .ref-center-column .creator-identity-wrap {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .ref-center-column .creator-feed-wrap {
        margin-top: 10px !important;
    }
}


/* ======================================================================
   LARGE DECORATIVE FLAMES REMAIN OFF
   ====================================================================== */

.ref-left-flame-art,
.ref-left-flame-art::before,
.ref-left-flame-art::after,
.ref-community-callout::before,
.ref-community-callout::after,
.ref-center-column .creator-banner::before,
.ref-center-column .creator-banner::after,
.ref-social-card::before,
.ref-social-card::after,
.ref-subscribe-card::before,
.ref-subscribe-card::after,
.ref-center-column .creator-feed-wrap::before,
.ref-center-column .creator-feed-wrap::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}