/* JOAA hand-drawn homepage integration
   One clean pass: the PNGs define the shapes; CSS only positions and animates them. */

@font-face {
    font-family: "Thur";
    src: url("/assets/fonts/text.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* ---------- PAGE ---------- */
.home-illustrated {
    background:
        radial-gradient(ellipse at 12% 16%, rgba(104, 72, 126, .25), transparent 34rem),
        radial-gradient(ellipse at 86% 18%, rgba(91, 108, 72, .20), transparent 36rem),
        radial-gradient(ellipse at 78% 76%, rgba(125, 66, 82, .14), transparent 34rem),
        radial-gradient(ellipse at 18% 82%, rgba(65, 91, 89, .13), transparent 34rem),
        radial-gradient(circle, rgba(238,232,223,.045) 1px, transparent 1.35px),
        linear-gradient(145deg, #251b2a 0%, #1e1b24 44%, #23261f 72%, #2a1d25 100%) !important;
    background-size: auto, auto, auto, auto, 30px 30px, auto !important;
    background-attachment: fixed !important;
}

.home-illustrated .site-header {
    background: rgba(18,13,21,.94) !important;
}

/* ---------- HERO ---------- */
.living-gallery {
    display: grid !important;
    grid-template-columns: minmax(250px,.9fr) minmax(285px,1fr) minmax(330px,1.08fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: clamp(1.5rem,2.8vw,3rem) !important;
    row-gap: clamp(1rem,2vw,1.8rem) !important;
    align-items: start !important;
}

.hero-mark {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    width: min(100%,700px) !important;
    margin: 0 auto !important;
}

.hero-ribbon {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    width: min(100%,720px) !important;
    margin: .25rem auto 0 !important;
}

/* The frame PNG itself now sets the parent height/aspect ratio.
   That fixes the artwork and frame becoming two separate objects. */
.living-frame {
    position: relative !important;
    isolation: isolate !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    display: block !important;
    filter: drop-shadow(0 16px 20px rgba(0,0,0,.32)) !important;
}

.handdrawn-frame-overlay {
    position: relative !important;
    inset: auto !important;
    z-index: 4 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

.living-frame .living-frame-art {
    position: absolute !important;
    z-index: 1 !important;
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.living-frame .living-frame-art img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
}

.frame-tentacle {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: min(100%,355px) !important;
    justify-self: end !important;
    transform: rotate(-1.4deg) !important;
}
.frame-tentacle .living-frame-art { inset: 9% 9% 9% 9% !important; }

.frame-chain {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: min(100%,385px) !important;
    justify-self: center !important;
    margin-top: .5rem !important;
    transform: rotate(.8deg) !important;
}
.frame-chain .living-frame-art { inset: 8% 8% 9% 8% !important; }
.frame-chain::after { display: none !important; }

.frame-vines {
    grid-column: 3 !important;
    grid-row: 1 / 4 !important;
    width: min(100%,430px) !important;
    justify-self: start !important;
    margin-top: .3rem !important;
    transform: rotate(1deg) !important;
    aspect-ratio: auto !important;
}
.frame-vines .living-frame-art { inset: 10% 11% 10% 11% !important; }

/* ---------- MAP ---------- */
.portal-section {
    padding-top: clamp(2.6rem,4vw,4rem) !important;
}

.portal-heading {
    margin-bottom: .75rem !important;
}

.portal-map {
    position: relative !important;
    display: block !important;
    width: min(100%,1180px) !important;
    height: 830px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.portal-map::before {
    inset: 0 !important;
    opacity: .26 !important;
}

.portal {
    position: absolute !important;
    display: grid !important;
    place-items: center !important;
    aspect-ratio: 1 / 1 !important;
    color: var(--bone) !important;
    text-decoration: none !important;
    isolation: isolate !important;
    border-radius: 46% !important;
    transition: transform .18s ease, filter .18s ease !important;
}

.portal:hover {
    filter: brightness(1.12) drop-shadow(0 10px 15px rgba(0,0,0,.30)) !important;
}

.handdrawn-portal-frame {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    pointer-events: none !important;
    filter: drop-shadow(0 7px 11px rgba(0,0,0,.30)) !important;
}

.portal-label {
    position: relative !important;
    font-family: "Thur", "Permanent Marker", cursive !important;
    z-index: 5 !important;
    padding: .14rem .35rem !important;
    font-size: clamp(1.45rem,1.75vw,1.95rem) !important;
    line-height: .95 !important;
    color: var(--bone) !important;
    text-align: center !important;
    text-shadow: 3px 3px 0 #050406, 0 0 7px rgba(0,0,0,.78) !important;
    background: rgba(8,6,10,.28) !important;
    border-radius: 7px !important;
}

.portal-sub { display:none !important; }

/* old generated frames are completely dead */
.portal-shell,
.gothic-crown,
.dice-lines,
.nav-collab .flame,
.nav-spooky::before,
.nav-spooky::after,
.nav-fan::before,
.nav-fan::after,
.nav-queer::before,
.nav-queer::after,
.nav-myth::before,
.nav-myth::after,
.nav-surreal::before,
.nav-surreal::after,
.nav-leftist::before,
.nav-leftist::after,
.nav-collab::before,
.nav-collab::after {
    display:none !important;
    content:none !important;
}

/* ALL: use Jack's sun/universe art as the object.
   Keep only subtle moving orbits INSIDE it; kill the old second sun. */
.universe-link {
    position:absolute !important;
    left:40% !important;
    top:45% !important;
    width:360px !important;
    aspect-ratio:1 / 1 !important;
    transform:translate(-50%,-50%) !important;
    z-index:4 !important;
    display:grid !important;
    place-items:center !important;
}

.handdrawn-universe-frame {
    position:absolute !important;
    inset:0 !important;
    z-index:4 !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    pointer-events:none !important;
    filter:drop-shadow(0 0 14px rgba(211,168,78,.17)) !important;
    animation:joaaUniverseTurn 55s linear infinite !important;
}

@keyframes joaaUniverseTurn { to { transform:rotate(360deg); } }

.universe-link .starfield {
    inset:16% !important;
    z-index:1 !important;
    opacity:.58 !important;
}

.universe-link .orbit {
    z-index:2 !important;
    border-color:rgba(220,210,226,.18) !important;
}

.universe-link .orbit-one { width:42% !important; height:42% !important; margin:-21% 0 0 -21% !important; }
.universe-link .orbit-two { width:58% !important; height:58% !important; margin:-29% 0 0 -29% !important; }
.universe-link .orbit-three { width:72% !important; height:72% !important; margin:-36% 0 0 -36% !important; }
.universe-link .orbit-four { width:82% !important; height:64% !important; margin:-32% 0 0 -41% !important; }

.universe-link .sun-core {
    z-index:7 !important;
    width:30% !important;
    aspect-ratio:1 !important;
    color:#efe7ef !important;
    background:rgba(18,13,21,.74) !important;
    border:1px solid rgba(238,232,223,.15) !important;
    box-shadow:0 0 18px rgba(132,80,197,.18) !important;
}
.universe-link .sun-core::before { display:none !important; }
.universe-link .sun-core strong {
    font-family:"Thur","Permanent Marker",cursive !important;
    font-size:clamp(1.7rem,3vw,2.7rem) !important;
}
.universe-link .universe-caption {
    z-index:8 !important;
    bottom:-4% !important;
    font-size:.62rem !important;
}

/* soft contrast halos */
.nav-spooky { background:radial-gradient(circle,rgba(128,116,138,.17),transparent 70%) !important; }
.nav-fan { background:radial-gradient(circle,rgba(109,136,77,.18),transparent 70%) !important; }
.nav-myth { background:radial-gradient(circle,rgba(125,105,71,.18),transparent 70%) !important; }
.nav-queer {
    background:
      radial-gradient(circle at 30% 35%,rgba(91,206,250,.14),transparent 36%),
      radial-gradient(circle at 68% 35%,rgba(245,169,184,.13),transparent 38%),
      radial-gradient(circle at 50% 68%,rgba(143,91,194,.16),transparent 42%) !important;
}
.nav-surreal { background:radial-gradient(circle,rgba(76,88,145,.19),transparent 70%) !important; }
.nav-cute { background:radial-gradient(circle,rgba(189,118,67,.18),transparent 70%) !important; }
.nav-leftist { background:radial-gradient(circle,rgba(173,59,65,.18),transparent 70%) !important; }
.nav-collab { background:radial-gradient(circle,rgba(65,122,116,.16),transparent 70%) !important; }
.nav-projects { background:radial-gradient(circle,rgba(86,124,143,.16),transparent 70%) !important; }
.nav-series { background:radial-gradient(circle,rgba(125,76,94,.16),transparent 70%) !important; }

/* A deliberate collage around the central ALL object */
.nav-spooky {
    left:2% !important;
    top:6% !important;
    width:220px !important;
    transform:rotate(-4deg) !important;
}
.nav-fan {
    left:28% !important;
    top:1% !important;
    width:225px !important;
    transform:rotate(2.5deg) !important;
}
.nav-myth {
    right:3% !important;
    top:4% !important;
    width:245px !important;
    transform:rotate(3deg) !important;
}
.nav-queer {
    left:1% !important;
    top:39% !important;
    width:230px !important;
    transform:rotate(-2.5deg) !important;
}
.nav-surreal {
    left:55% !important;
    right:auto !important;
    top:8% !important;
    width:205px !important;
    transform:rotate(-3deg) !important;
}
.nav-cute {
    left:61% !important;
    top:37% !important;
    width:210px !important;
    transform:rotate(1.5deg) !important;
}
.nav-leftist {
    right:1% !important;
    top:48% !important;
    width:225px !important;
    transform:rotate(2deg) !important;
}
.nav-collab {
    left:7% !important;
    top:69% !important;
    width:220px !important;
    transform:rotate(-2.5deg) !important;
}
.nav-projects {
    left:30% !important;
    top:70% !important;
    width:205px !important;
    transform:rotate(1.5deg) !important;
}
.nav-series {
    left:52% !important;
    top:70% !important;
    width:195px !important;
    transform:rotate(-3deg) !important;
}
.portal-frame-series { inset:0 !important; }

.nav-spooky:hover,
.nav-fan:hover,
.nav-myth:hover,
.nav-queer:hover,
.nav-surreal:hover,
.nav-cute:hover,
.nav-leftist:hover,
.nav-collab:hover,
.nav-projects:hover,
.nav-series:hover {
    transform:translateY(-6px) scale(1.025) !important;
}

.eventspromos-button-link {
    position:absolute !important;
    right:2% !important;
    top:72% !important;
    bottom:auto !important;
    z-index:7 !important;
    display:block !important;
    width:280px !important;
    padding:.55rem .7rem !important;
    border-radius:44% 56% 47% 53% / 55% 44% 56% 45% !important;
    background:radial-gradient(ellipse at center,rgba(161,120,174,.22),rgba(95,67,105,.11) 48%,transparent 75%) !important;
    text-decoration:none !important;
    transform:rotate(-2deg) !important;
    transition:transform .18s ease,filter .18s ease !important;
}
.eventspromos-button-link:hover {
    transform:rotate(0) translateY(-6px) scale(1.02) !important;
    filter:brightness(1.1) !important;
}
.eventspromos-button-link img {
    display:block !important;
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    filter:drop-shadow(0 2px 0 rgba(238,232,223,.14)) drop-shadow(0 9px 14px rgba(0,0,0,.28)) !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1050px) and (min-width:761px) {
    .living-gallery { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .hero-mark { grid-column:1 / 3 !important; }
    .frame-tentacle { grid-column:1 !important; grid-row:2 !important; justify-self:center !important; }
    .frame-chain { grid-column:2 !important; grid-row:2 !important; }
    .frame-vines { grid-column:1 / 3 !important; grid-row:3 !important; width:min(55%,390px) !important; justify-self:center !important; }
    .hero-ribbon { grid-column:1 / 3 !important; grid-row:4 !important; }

    .portal-map { height:900px !important; }
    .universe-link { left:41% !important; top:44% !important; width:340px !important; }
    .nav-spooky { left:1% !important; top:6% !important; width:205px !important; }
    .nav-fan { left:29% !important; top:1% !important; width:205px !important; }
    .nav-myth { right:1% !important; top:4% !important; width:220px !important; }
    .nav-queer { left:1% !important; top:40% !important; width:210px !important; }
    .nav-surreal { left:55% !important; right:auto !important; top:9% !important; width:185px !important; }
    .nav-cute { left:60% !important; top:38% !important; width:190px !important; }
    .nav-leftist { right:1% !important; top:51% !important; width:205px !important; }
    .nav-collab { left:5% !important; top:70% !important; width:205px !important; }
    .nav-projects { left:31% !important; top:72% !important; width:185px !important; }
    .nav-series { left:53% !important; top:72% !important; width:175px !important; }
    .eventspromos-button-link { right:1% !important; top:76% !important; width:255px !important; }
}

@media (max-width:760px) {
    .home-illustrated {
        background:
            radial-gradient(circle at 15% 14%,rgba(101,66,124,.27),transparent 24rem),
            radial-gradient(circle at 84% 44%,rgba(88,105,67,.17),transparent 26rem),
            radial-gradient(circle at 28% 82%,rgba(126,62,77,.12),transparent 24rem),
            linear-gradient(155deg,#251b2a 0%,#1f1b23 48%,#22261f 100%) !important;
    }

    .living-gallery {
        display:flex !important;
        flex-direction:column !important;
        gap:2rem !important;
    }
    .hero-mark { order:0 !important; }
    .frame-tentacle,
    .frame-chain {
        width:min(82vw,360px) !important;
        margin:0 auto !important;
        transform:none !important;
    }
    .frame-vines {
        width:min(72vw,360px) !important;
        margin:0 auto !important;
        transform:none !important;
    }
    .hero-ribbon { width:100% !important; }

    .portal-map {
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:1.7rem .65rem !important;
        height:auto !important;
        padding:.5rem 0 1rem !important;
    }

    .portal,
    .universe-link,
    .eventspromos-button-link {
        position:relative !important;
        left:auto !important;
        right:auto !important;
        top:auto !important;
        bottom:auto !important;
        transform:none !important;
    }

    .universe-link {
        grid-column:1 / -1 !important;
        grid-row:1 !important;
        justify-self:center !important;
        width:min(78vw,350px) !important;
    }

    .portal {
        width:min(45vw,205px) !important;
        justify-self:center !important;
    }

    .nav-spooky { grid-column:1 !important; grid-row:2 !important; }
    .nav-fan { grid-column:2 !important; grid-row:2 !important; }
    .nav-queer { grid-column:1 !important; grid-row:3 !important; }
    .nav-myth { grid-column:2 !important; grid-row:3 !important; }
    .nav-surreal { grid-column:1 !important; grid-row:4 !important; }
    .nav-cute { grid-column:2 !important; grid-row:4 !important; }
    .nav-leftist { grid-column:1 !important; grid-row:5 !important; }
    .nav-collab { grid-column:2 !important; grid-row:5 !important; }
    .nav-projects { grid-column:1 !important; grid-row:6 !important; }
    .nav-series { grid-column:2 !important; grid-row:6 !important; }

    .eventspromos-button-link {
        grid-column:1 / -1 !important;
        grid-row:7 !important;
        justify-self:center !important;
        width:min(82vw,340px) !important;
        padding:.5rem !important;
    }

    .portal-label { font-size:clamp(1.35rem,5.8vw,1.85rem) !important; }
}

@media (max-width:480px) {
    .portal-map { gap:1.25rem .3rem !important; }
    .portal { width:min(46vw,176px) !important; }
    .eventspromos-button-link { width:min(88vw,320px) !important; }
}


/* Make COLLABS unmistakably two Ls. */
.nav-collab .portal-label {
    font-family: "Thur", "Permanent Marker", cursive !important;
    font-size: 1.55rem !important;
    letter-spacing: .08em !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}