/* ==========================================================
   INSIGHT MEDIA — ÌRÁNTÍ V37

   Principles:
   1. Rhythm before decoration.
   2. Earth before artificial gloss.
   3. Memory through repetition.
   4. Strong nouns, short labels.
   5. Yoruba-rooted without costume imitation.
   ========================================================== */

:root{

    /* Earth / Ayé */
    --ira-aye:#f2eadc;
    --ira-aye-deep:#e8dcc7;
    --ira-paper:#fbf7ef;

    /* Indigo / structure */
    --ira-indigo:#18263c;
    --ira-indigo-soft:#263954;
    --ira-indigo-mist:#d9dfdf;

    /* Clay / live pulse */
    --ira-clay:#b94f3e;
    --ira-clay-deep:#873729;

    /* Palm / life */
    --ira-palm:#46684f;
    --ira-palm-soft:#d9e2d7;

    /* Brass / memory */
    --ira-brass:#b88631;
    --ira-brass-soft:#ead9ad;

    /* Ink */
    --ira-ink:#241f1a;
    --ira-muted:#756d63;

    --ira-border:
        rgba(38,30,24,.10);

    --ira-shadow:
        0 18px 55px
        rgba(42,31,22,.08);

    --ira-shadow-deep:
        0 28px 80px
        rgba(35,27,23,.16);

    --ira-r1:14px;
    --ira-r2:22px;
    --ira-r3:32px;

    --ira-space:8px;
}


/* ==========================================================
   ROOT CANVAS
   ========================================================== */

html{
    background:var(--ira-aye);
}

body{
    color:var(--ira-ink) !important;

    background:
        linear-gradient(
            90deg,
            rgba(24,38,60,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(24,38,60,.022) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 92% 4%,
            rgba(184,134,49,.12),
            transparent 25rem
        ),
        radial-gradient(
            circle at 5% 78%,
            rgba(70,104,79,.10),
            transparent 30rem
        ),
        var(--ira-aye) !important;

    background-size:
        34px 34px,
        34px 34px,
        auto,
        auto,
        auto;
}


/*
 * A very light woven-memory pattern.
 * No image request. No external asset.
 */

body::after{
    content:"";

    position:fixed;
    inset:0;

    z-index:-1;

    pointer-events:none;

    opacity:.16;

    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 30px,
            rgba(24,38,60,.035) 30px 31px
        );
}


/* ==========================================================
   TYPOGRAPHIC MEMORY
   ========================================================== */

h1,
h2,
h3,
h4,
strong{
    color:var(--ira-ink);
}

h1,
h2,
h3{
    text-wrap:balance;
}

small,
.v31-label,
.v35-heading small,
.v34-kicker,
.v36-share-brand,
.v35-hero-tag{
    letter-spacing:.16em !important;
}


/* ==========================================================
   AYÉ SURFACES
   ========================================================== */

.im-card,
.im-story-card,
.im-station-card,

.v30-moment,
.v31-card,
.v32-show,
.v34-card,
.v35-item,

.v30-empty,
.v34-empty,
.v35-empty{

    background:
        rgba(251,247,239,.94) !important;

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

    border-radius:
        var(--ira-r3) !important;

    box-shadow:
        none !important;
}


/* Cards gain depth only on intention */

.im-card:hover,
.im-story-card:hover,
.im-station-card:hover,

.v30-moment:hover,
.v32-show:hover,
.v34-card:hover,
.v35-item:hover{

    transform:
        translateY(-3px) !important;

    box-shadow:
        var(--ira-shadow) !important;
}


/* ==========================================================
   THE RHYTHM EDGE
   Small repeated marks = visual memory.
   ========================================================== */

.v30-moment,
.v31-card,
.v32-show,
.v34-card,
.v35-item{
    position:relative;
    overflow:hidden;
}

.v30-moment::before,
.v31-card::before,
.v32-show::before,
.v34-card::before,
.v35-item::before{

    content:"";

    position:absolute;

    left:0;
    top:18px;
    bottom:18px;

    width:3px;

    border-radius:
        0 4px 4px 0;

    background:
        var(--ira-brass);

    opacity:.50;
}

.v31-room::before{
    background:
        var(--ira-indigo);
}

.v35-moment::before{
    background:
        var(--ira-clay);
}


/* ==========================================================
   ÌLÙ — LIVE SIGNAL
   ========================================================== */

.v29-live-island{

    background:
        rgba(251,247,239,.92) !important;

    border:
        1px solid
        rgba(76,53,37,.10) !important;

    box-shadow:
        0 14px 40px
        rgba(42,31,22,.09) !important;
}

.v29-live-art{

    border-radius:
        50% !important;

    background:
        var(--ira-clay) !important;

    box-shadow:
        inset 0 0 0 5px
        rgba(255,255,255,.13);
}

.v29-live-art.is-live{

    animation:
        iraDrum
        1.15s
        cubic-bezier(.45,0,.55,1)
        infinite !important;
}

@keyframes iraDrum{

    0%,100%{
        transform:scale(1);
    }

    45%{
        transform:scale(.88);
    }

    60%{
        transform:scale(1.06);
    }
}


/* ==========================================================
   MAIN PLAYER — DEEP INDIGO
   ========================================================== */

.v29-player,
.v34-panel{

    background:
        var(--ira-indigo) !important;

    color:
        #fff !important;

    box-shadow:
        var(--ira-shadow-deep) !important;
}

.v29-player-copy strong,
.v34-panel h2,
.v34-timeline-title{

    color:#fff !important;
}

.v29-play,
.v34-main-play{

    background:
        var(--ira-brass-soft) !important;

    color:
        var(--ira-indigo) !important;
}


/* ==========================================================
   LIVE CREATION RITUAL
   ========================================================== */

.v29-create-panel{

    background:
        var(--ira-paper) !important;
}

.v29-create-head h2{

    color:
        var(--ira-ink) !important;
}

.v29-create-grid{

    gap:12px !important;
}

.v29-create-card{

    position:relative;

    min-height:165px !important;

    border-radius:
        28px !important;

    overflow:hidden;
}

.v29-create-card::before{

    content:"";

    position:absolute;

    width:90px;
    height:90px;

    right:-30px;
    top:-28px;

    border-radius:50%;

    border:
        12px solid
        rgba(24,38,60,.08);
}

.v29-create-card:nth-child(1){

    background:
        #e7c7b6 !important;
}

.v29-create-card:nth-child(2){

    background:
        #cfd7d2 !important;
}

.v29-create-card:nth-child(3){

    background:
        #e3d5ad !important;
}

.v29-create-card:nth-child(4){

    background:
        #cfccd9 !important;
}

.v29-create-card b{

    font-size:19px !important;

    letter-spacing:
        -.03em;
}


/* ==========================================================
   ÀWÙJỌ — COMMUNITY
   ========================================================== */

.v31-community{

    position:relative;
}

.v31-person{

    background:
        var(--ira-aye-deep) !important;
}

.v31-avatar,
.v31-message-avatar{

    background:
        var(--ira-indigo) !important;

    color:white !important;
}

.v31-creator{

    background:
        var(--ira-indigo) !important;
}

.v31-creator-avatar{

    background:
        var(--ira-clay) !important;
}

.v31-follow.active{

    background:
        var(--ira-palm) !important;
}

.v31-notify.active{

    background:
        var(--ira-brass-soft) !important;
}


/* ==========================================================
   ÌTÀN — SHOWS / ARCHIVE
   ========================================================== */

.v32-current{

    background:
        var(--ira-indigo) !important;

    border-radius:
        var(--ira-r3) !important;
}

.v32-current.live
.v32-current-dot{

    background:
        var(--ira-clay) !important;
}

.v32-show-status{

    background:
        var(--ira-aye-deep) !important;
}

.v32-show-status.live{

    background:
        var(--ira-clay) !important;
}


/* ==========================================================
   ÌRÁNTÍ — MOMENTS
   ========================================================== */

.v30-live-tag{

    background:
        var(--ira-aye-deep) !important;
}

.v30-live-tag.live{

    background:
        var(--ira-clay) !important;
}

.v30-actions button{

    background:
        var(--ira-aye-deep) !important;
}


/* ==========================================================
   DISCOVERY — MARKET / STREET LOGIC
   horizontal, glanceable, low cognitive load
   ========================================================== */

.v35-hero{

    background:
        var(--ira-indigo) !important;

    border-radius:
        38px !important;
}

.v35-hero::before{

    background:
        radial-gradient(
            circle,
            rgba(184,134,49,.30),
            transparent 68%
        ) !important;
}

.v35-hero-tag{

    color:
        var(--ira-brass-soft) !important;
}

.v35-listen{

    background:
        var(--ira-indigo) !important;
}

.v35-moment{

    background:
        #ead8c6 !important;
}

.v35-continue-card{

    background:
        #d8ddd5 !important;
}


/* ==========================================================
   SHARE
   ========================================================== */

.v36-share-panel{

    background:
        var(--ira-paper) !important;
}

.v36-share-preview{

    background:
        var(--ira-indigo) !important;
}

.v36-primary{

    background:
        var(--ira-indigo) !important;
}


/* ==========================================================
   COMMAND PALETTE
   ========================================================== */

.v29-command-panel{

    background:
        var(--ira-paper) !important;
}

.v29-command-search input{

    background:
        var(--ira-aye-deep) !important;
}

.v29-command-link:hover,
.v29-command-link.active{

    background:
        var(--ira-aye-deep) !important;
}

.v29-command-icon{

    background:
        #ded4c4 !important;
}


/* ==========================================================
   DOCK
   ========================================================== */

.v29-dock{

    background:
        rgba(251,247,239,.90) !important;

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

    box-shadow:
        var(--ira-shadow) !important;
}

.v29-dock-item.live{

    background:
        var(--ira-clay) !important;
}


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

.v29-mobile-nav{

    background:
        rgba(251,247,239,.95) !important;
}

.v29-mobile-nav
.go-live{

    background:
        var(--ira-clay) !important;
}


/* ==========================================================
   PROVERB / CULTURAL MICRO-LABELS
   ========================================================== */

.ira-cultural-note{

    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    margin:
        25px auto;

    padding:
        16px 18px;

    border-left:
        3px solid
        var(--ira-brass);

    color:
        var(--ira-muted);

    font-size:
        11px;

    line-height:
        1.65;
}

.ira-cultural-note strong{

    display:block;

    margin-bottom:4px;

    color:
        var(--ira-indigo);

    font-size:12px;
}


/* ==========================================================
   SECTION CULTURAL HEADINGS
   ========================================================== */

.ira-kicker{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:7px;

    color:
        var(--ira-brass);

    font-size:9px;

    font-weight:900;

    letter-spacing:.15em;
}

.ira-kicker::before{

    content:"";

    width:20px;
    height:2px;

    border-radius:99px;

    background:
        currentColor;
}


/* ==========================================================
   LIGHT PERFORMANCE RULES
   ========================================================== */

.v30-social,
.v31-community,
.v32-shows,
.v34-replays,
.v35-discovery{

    content-visibility:auto;

    contain-intrinsic-size:
        700px;
}

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

    .v29-live-art.is-live{

        animation:none !important;
    }
}


/* ==========================================================
   SMALL SCREEN LOCAL-FIRST
   ========================================================== */

@media(max-width:620px){

    body{

        background-size:
            26px 26px,
            26px 26px,
            auto,
            auto,
            auto !important;
    }

    .v29-create-card{

        min-height:
            130px !important;
    }

    .v35-heading h2{

        font-size:
            42px !important;
    }

    .ira-cultural-note{

        font-size:
            10px;
    }
}