/* ==========================================================
   INSIGHT MEDIA — CULTURE PULSE
   human • expressive • local • warm
   ========================================================== */

:root{
    --cp-ink:#1c1716;
    --cp-earth:#754b35;
    --cp-clay:#b95f43;
    --cp-sun:#efb646;
    --cp-rose:#d87983;
    --cp-leaf:#597457;
    --cp-sky:#6694a8;

    --cp-cream:#fff8ef;
    --cp-warm:#f6ecdf;
    --cp-soft:#f1e4d4;
}

/* ----------------------------------------------------------
   BODY — warmer atmosphere
   ---------------------------------------------------------- */

body{
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(239,182,70,.10),
            transparent 30rem
        ),
        radial-gradient(
            circle at 4% 56%,
            rgba(216,121,131,.08),
            transparent 28rem
        ),
        radial-gradient(
            circle at 75% 87%,
            rgba(89,116,87,.07),
            transparent 26rem
        ),
        var(--im-bg);
}

/* ----------------------------------------------------------
   HERO — living culture canvas
   ---------------------------------------------------------- */

.im-hero{
    isolation:isolate;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(239,182,70,.30),
            transparent 30%
        ),
        radial-gradient(
            circle at 70% 95%,
            rgba(216,121,131,.25),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #211c26 0%,
            #4a3745 45%,
            #754b35 100%
        );
}

.im-hero::before{
    width:520px;
    height:520px;

    background:
        repeating-radial-gradient(
            circle,
            rgba(255,255,255,.08) 0 2px,
            transparent 3px 17px
        );

    transform:rotate(16deg);
    opacity:.45;
}

.im-hero::after{
    width:360px;
    height:360px;

    background:
        linear-gradient(
            45deg,
            rgba(255,255,255,.05) 25%,
            transparent 25% 50%,
            rgba(255,255,255,.05) 50% 75%,
            transparent 75%
        );

    background-size:28px 28px;
    border-radius:100px;
    transform:rotate(-13deg);
}

/* ----------------------------------------------------------
   CULTURE ORBIT
   ---------------------------------------------------------- */

.cp-orbit{
    position:absolute;
    right:25px;
    top:28px;

    width:190px;
    height:190px;

    border-radius:50%;

    border:
        1px solid
        rgba(255,255,255,.15);

    pointer-events:none;

    animation:
        cp-orbit-spin
        28s
        linear
        infinite;
}

.cp-orbit::before,
.cp-orbit::after{
    content:"";

    position:absolute;

    border-radius:50%;
}

.cp-orbit::before{
    width:16px;
    height:16px;

    background:#efb646;

    left:20px;
    top:28px;

    box-shadow:
        91px 119px 0 #d87983,
        139px 38px 0 #9bb292;
}

.cp-orbit::after{
    inset:35px;

    border:
        1px dashed
        rgba(255,255,255,.16);
}

@keyframes cp-orbit-spin{
    to{
        transform:rotate(360deg);
    }
}


/* ----------------------------------------------------------
   CULTURAL MOODS
   ---------------------------------------------------------- */

.cp-moods{
    display:flex;
    gap:10px;

    flex-wrap:wrap;

    margin-top:18px;
}

.cp-mood{
    border:0;

    min-height:46px;

    padding:0 18px;

    border-radius:18px;

    cursor:pointer;

    background:
        rgba(255,255,255,.80);

    color:#403838;

    box-shadow:
        0 5px 20px
        rgba(37,29,28,.05);

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.cp-mood:hover{
    transform:
        translateY(-3px)
        rotate(-1deg);

    box-shadow:
        0 16px 35px
        rgba(37,29,28,.09);
}

.cp-mood[data-active="true"]{
    color:white;

    background:
        linear-gradient(
            120deg,
            var(--cp-clay),
            var(--cp-rose)
        );
}


/* ----------------------------------------------------------
   CULTURE PULSE GRID
   ---------------------------------------------------------- */

.cp-grid{
    display:grid;

    grid-template-columns:
        1.15fr
        .85fr;

    gap:17px;
}

.cp-culture-card{
    min-height:330px;

    border-radius:34px;

    overflow:hidden;

    position:relative;

    padding:30px;

    color:white;

    background:
        linear-gradient(
            135deg,
            #51382e,
            #a85c42
        );

    box-shadow:
        0 25px 70px
        rgba(84,50,37,.16);
}

.cp-culture-card::after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-190px;
    bottom:-210px;

    border-radius:50%;

    background:
        repeating-radial-gradient(
            circle,
            rgba(255,255,255,.13) 0 3px,
            transparent 4px 16px
        );
}

.cp-card-kicker{
    font-size:11px;

    font-weight:900;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:
        rgba(255,255,255,.69);
}

.cp-culture-card h3{
    max-width:580px;

    font-size:
        clamp(29px,4vw,46px);

    letter-spacing:-.045em;

    line-height:1.04;

    margin:
        15px
        0
        12px;
}

.cp-culture-card p{
    max-width:530px;

    color:
        rgba(255,255,255,.72);

    font-size:15px;

    line-height:1.6;
}

.cp-place-row{
    position:absolute;

    left:30px;
    right:30px;
    bottom:27px;

    z-index:2;

    display:flex;

    gap:9px;

    flex-wrap:wrap;
}

.cp-place{
    padding:
        8px
        12px;

    border-radius:999px;

    background:
        rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    font-size:12px;
}


/* ----------------------------------------------------------
   COMMUNITY VOICE CARD
   ---------------------------------------------------------- */

.cp-voices{
    background:
        linear-gradient(
            160deg,
            #e9dfd2,
            #fff8ef
        );

    border-radius:34px;

    padding:27px;

    position:relative;

    overflow:hidden;
}

.cp-voices::before{
    content:"";

    position:absolute;

    width:190px;
    height:190px;

    right:-70px;
    top:-65px;

    border-radius:58px;

    transform:rotate(28deg);

    background:
        rgba(239,182,70,.18);
}

.cp-voices h3{
    font-size:27px;

    letter-spacing:-.04em;

    margin:
        9px
        0
        20px;
}

.cp-voice{
    display:flex;

    gap:12px;

    align-items:center;

    padding:
        12px
        0;

    border-bottom:
        1px solid
        rgba(0,0,0,.06);
}

.cp-avatar{
    width:43px;
    height:43px;

    border-radius:17px;

    display:grid;

    place-items:center;

    flex:none;

    color:white;

    font-weight:900;
}

.cp-avatar:nth-child(1){
    background:var(--cp-clay);
}

.cp-voice:nth-of-type(2) .cp-avatar{
    background:var(--cp-leaf);
}

.cp-voice:nth-of-type(3) .cp-avatar{
    background:var(--cp-sky);
}

.cp-voice-meta{
    min-width:0;

    flex:1;
}

.cp-voice-meta strong{
    display:block;
}

.cp-voice-meta span{
    display:block;

    font-size:12px;

    color:#77706d;

    margin-top:3px;
}

.cp-listen-dot{
    width:9px;
    height:9px;

    border-radius:50%;

    background:var(--cp-clay);
}


/* ----------------------------------------------------------
   MOMENTS
   ---------------------------------------------------------- */

.cp-moments{
    display:grid;

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

    gap:15px;
}

.cp-moment-card{
    min-height:250px;

    border-radius:28px;

    padding:22px;

    position:relative;

    overflow:hidden;

    cursor:pointer;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

.cp-moment-card:hover{
    transform:
        translateY(-5px)
        rotate(-.35deg);

    box-shadow:
        0 24px 55px
        rgba(28,23,22,.12);
}

.cp-moment-card:nth-child(1){
    background:#f5d7cf;
}

.cp-moment-card:nth-child(2){
    background:#dce8da;
}

.cp-moment-card:nth-child(3){
    background:#e5ddf1;
}

.cp-moment-time{
    font-size:11px;

    font-weight:850;

    letter-spacing:.08em;

    text-transform:uppercase;

    opacity:.65;
}

.cp-moment-card h4{
    font-size:22px;

    letter-spacing:-.035em;

    margin:
        25px
        0
        10px;
}

.cp-moment-card p{
    line-height:1.5;

    color:#605957;

    font-size:14px;
}

.cp-share{
    position:absolute;

    right:18px;
    bottom:18px;

    width:43px;
    height:43px;

    border:0;

    border-radius:16px;

    background:
        rgba(255,255,255,.67);

    cursor:pointer;
}


/* ----------------------------------------------------------
   GO LIVE — emotional creation object
   ---------------------------------------------------------- */

.im-go-live{
    overflow:hidden;

    background:
        linear-gradient(
            120deg,
            #a74335,
            #c55f50
        );
}

.im-go-live::before{
    content:"";

    position:absolute;

    width:90px;
    height:90px;

    border-radius:50%;

    background:
        rgba(255,255,255,.13);

    left:-40px;
    top:-44px;
}

.im-go-live:hover{
    box-shadow:
        0 20px 50px
        rgba(166,65,53,.36);
}


/* ----------------------------------------------------------
   CULTURE DRAWER
   ---------------------------------------------------------- */

.cp-live-sheet{
    position:fixed;

    inset:0;

    z-index:100;

    display:none;

    background:
        rgba(20,17,18,.34);

    backdrop-filter:blur(13px);

    align-items:flex-end;

    justify-content:center;
}

.cp-live-sheet.open{
    display:flex;
}

.cp-live-panel{
    width:
        min(
            720px,
            calc(100% - 24px)
        );

    margin-bottom:18px;

    padding:28px;

    border-radius:36px;

    background:#fffaf4;

    box-shadow:
        0 35px 100px
        rgba(20,17,18,.25);

    animation:
        cp-rise
        .32s
        cubic-bezier(.2,.75,.25,1);
}

@keyframes cp-rise{
    from{
        transform:translateY(45px);
        opacity:0;
    }
}

.cp-live-header{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:24px;
}

.cp-live-header h2{
    margin:0;

    font-size:32px;

    letter-spacing:-.045em;
}

.cp-close{
    width:44px;
    height:44px;

    border:0;

    border-radius:16px;

    background:#eee5dc;

    cursor:pointer;
}

.cp-live-options{
    display:grid;

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

    gap:11px;
}

.cp-live-option{
    min-height:115px;

    border:0;

    border-radius:25px;

    padding:18px;

    text-align:left;

    cursor:pointer;

    background:#f1e6d9;

    transition:.17s ease;
}

.cp-live-option:hover{
    transform:translateY(-3px);

    background:#ead8c5;
}

.cp-live-option strong{
    display:block;

    font-size:17px;

    margin-bottom:7px;
}

.cp-live-option span{
    color:#716963;

    font-size:13px;

    line-height:1.45;
}


/* ----------------------------------------------------------
   CULTURAL BRAND WORDMARK
   ---------------------------------------------------------- */

.cp-human-line{
    display:inline-flex;

    align-items:center;

    gap:9px;

    margin-top:12px;

    color:rgba(255,255,255,.68);

    font-size:13px;
}

.cp-human-line::before{
    content:"";

    width:28px;
    height:2px;

    background:#efb646;

    border-radius:999px;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media(max-width:900px){

    .cp-grid{
        grid-template-columns:1fr;
    }

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

@media(max-width:650px){

    .cp-moments{
        grid-template-columns:1fr;
    }

    .cp-live-options{
        grid-template-columns:1fr;
    }

    .cp-orbit{
        width:130px;
        height:130px;

        opacity:.55;
    }

    .cp-culture-card{
        min-height:390px;
    }
}