/* Jack of All Arts Studio homepage
   Illustrated interface: living artwork frames + symbolic navigation map.
   Homepage only. Interior pages and admin keep their normal layout. */

.home-illustrated {
    --void: #09070c;
    --void-soft: #100c14;
    --night: #17101d;
    --night-2: #21142a;
    --bone: #eee8df;
    --ash: #bcb3c0;
    --purple: #8450c5;
    --purple-hot: #a86ce9;
    --moss: #718a4b;
    --moss-light: #a5bd71;
    --rust: #b75b35;
    --gold: #d3a84e;
    --gold-light: #f0d37b;
    --trans-blue: #5bcefa;
    --trans-pink: #f5a9b8;
    --ace-purple: #8f5bc2;
    --queer-green: #73ad69;
    --red: #c74954;
    --image-stage: #100c14;
    color: var(--bone);
    background:
        radial-gradient(circle at 13% 9%, rgba(132,80,197,.15), transparent 25rem),
        radial-gradient(circle at 88% 20%, rgba(91,206,250,.055), transparent 22rem),
        radial-gradient(circle at 10% 66%, rgba(113,138,75,.08), transparent 26rem),
        radial-gradient(circle at 82% 78%, rgba(245,169,184,.045), transparent 23rem),
        radial-gradient(circle, rgba(238,232,223,.045) 1px, transparent 1.4px),
        linear-gradient(180deg, #09070c 0%, #100b14 48%, #08070a 100%);
    background-size: auto, auto, auto, auto, 28px 28px, auto;
}

.home-illustrated main {
    overflow: clip;
}

.home-illustrated .site-header {
    background: rgba(7,6,9,.97);
    border-bottom: 1px solid rgba(238,232,223,.12);
    box-shadow: 0 14px 36px rgba(0,0,0,.48);
}

.home-illustrated .site-header::after {
    content: "";
    position: absolute;
    left: 9%;
    right: 9%;
    bottom: -2px;
    height: 2px;
    opacity: .62;
    background: linear-gradient(90deg,
        transparent 0 8%,
        var(--trans-blue) 19%,
        var(--trans-pink) 26%,
        rgba(255,255,255,.82) 32%,
        transparent 38%,
        #27222b 44%,
        var(--ace-purple) 51%,
        transparent 61%,
        var(--queer-green) 76%,
        transparent 92%);
    pointer-events: none;
}

.home-illustrated .primary-nav a:hover,
.home-illustrated .primary-nav a.active {
    color: #d9baff;
    border-color: var(--ace-purple);
}

.home-illustrated .muted { color: var(--ash); }
.home-illustrated a { text-underline-offset: .18em; }

/* --------------------------------------------------------------------------
   LIVING HERO
   Three random images. Their images keep their own aspect ratios. The art is
   not clipped into themed silhouettes; the themed illustration lives around it.
   -------------------------------------------------------------------------- */

.living-hero {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 6vw, 5.8rem);
    position: relative;
}

.living-hero::before {
    content: "✦";
    position: absolute;
    left: -2rem;
    top: 8rem;
    color: rgba(132,80,197,.14);
    font-size: 11rem;
    line-height: 1;
    transform: rotate(-17deg);
    pointer-events: none;
}

.living-hero::after {
    content: "☾";
    position: absolute;
    right: -1rem;
    bottom: 2rem;
    color: rgba(113,138,75,.12);
    font-size: 12rem;
    line-height: 1;
    transform: rotate(11deg);
    pointer-events: none;
}

.living-gallery {
    display: grid;
    grid-template-columns: minmax(0,.88fr) minmax(0,1fr) minmax(0,1.15fr);
    grid-template-rows: auto auto auto;
    gap: clamp(1.2rem, 3.2vw, 3.3rem);
    align-items: start;
    position: relative;
    isolation: isolate;
}

.hero-mark {
    grid-column: 1 / 3;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: min(100%, 670px);
    position: relative;
    z-index: 7;
    padding: .4rem 1.2rem .8rem;
    text-align: center;
    transform: rotate(-.5deg);
}

.hero-mark .eyebrow {
    margin: 0 0 .35rem;
    color: #ddd3e2;
    background: transparent;
    padding: 0;
    box-shadow: none;
    font-size: .95rem;
    letter-spacing: .07em;
}

.hero-mark .display-title {
    color: var(--bone);
    font-family: "Spooky Punk", "Permanent Marker", cursive;
    font-size: clamp(3.9rem, 7vw, 7.2rem);
    line-height: .84;
    text-shadow: 4px 4px 0 #030204, 0 0 34px rgba(132,80,197,.19);
}

.hero-mark .display-title .title-line,
.hero-mark .display-title .title-arts { color: var(--bone); }
.hero-mark .display-title .title-studio {
    color: var(--purple-hot);
    text-shadow: 3px 3px 0 #030204;
}

.hero-mark::before,
.hero-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(45px, 8vw, 110px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(238,232,223,.42));
}
.hero-mark::before { right: 100%; }
.hero-mark::after { left: 100%; transform: scaleX(-1); }

.living-frame {
    position: relative;
    z-index: 3;
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    filter: drop-shadow(0 22px 26px rgba(0,0,0,.32));
}

.living-frame-art {
    position: relative;
    z-index: 2;
    display: block;
    padding: 7px;
    background: #120e16;
    border: 2px solid rgba(238,232,223,.70);
    box-shadow: 7px 9px 0 rgba(0,0,0,.38);
}

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

.living-frame-svg {
    position: absolute;
    z-index: 5;
    inset: -12%;
    width: 124%;
    height: 124%;
    overflow: visible;
    pointer-events: none;
}

.frame-tentacle {
    grid-column: 1;
    grid-row: 2;
    width: 94%;
    justify-self: center;
    transform: rotate(-2.3deg);
}
.frame-tentacle .living-frame-art { border-radius: 44% 34% 48% 37% / 35% 42% 33% 49%; }
.frame-tentacle .tentacle-stroke {
    fill: none;
    stroke: #705087;
    stroke-width: 9;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.frame-tentacle .tentacle-highlight {
    fill: none;
    stroke: #ad79c7;
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: .6;
    vector-effect: non-scaling-stroke;
}
.frame-tentacle .sucker {
    fill: #17101d;
    stroke: #c198d5;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.frame-tentacle .tentacle-one { transform-origin: 25% 75%; animation: tentacleDrift 8.5s ease-in-out infinite alternate; }
.frame-tentacle .tentacle-two { transform-origin: 76% 23%; animation: tentacleDrift 10.5s ease-in-out -3s infinite alternate-reverse; }

.frame-chain {
    grid-column: 2;
    grid-row: 2 / 4;
    width: 96%;
    justify-self: center;
    margin-top: clamp(2.2rem, 5vw, 5rem);
    transform: rotate(.8deg);
}
.frame-chain .living-frame-art {
    border-radius: 8px 28px 11px 21px;
    border-color: rgba(188,179,192,.58);
    box-shadow: 8px 10px 0 rgba(0,0,0,.44), inset 0 0 0 1px rgba(199,73,84,.15);
}
.frame-chain::after {
    content: "NOPE. STAY IN THE FRAME.";
    position: absolute;
    z-index: 9;
    right: -1rem;
    bottom: -1.4rem;
    padding: .3rem .55rem;
    color: #d9cedd;
    background: #0a080c;
    border: 1px solid rgba(199,73,84,.48);
    font-family: "Permanent Marker", cursive;
    font-size: .66rem;
    transform: rotate(3deg);
}
.frame-chain .chain-line {
    fill: none;
    stroke: #85808a;
    stroke-width: 8;
    stroke-dasharray: 3 12;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(2px 3px 0 #030204);
}
.frame-chain .chain-line.chain-a { animation: chainTension 4.8s ease-in-out infinite; }
.frame-chain .chain-line.chain-b { animation: chainTension 5.6s ease-in-out -2s infinite reverse; }
.frame-chain .anchor {
    fill: #18131c;
    stroke: #bbb4bf;
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
}

.frame-vines {
    grid-column: 3;
    grid-row: 1 / 4;
    width: 96%;
    justify-self: center;
    margin-top: clamp(2.5rem, 6vw, 6.2rem);
    transform: rotate(1.8deg);
}
.frame-vines .living-frame-art { border-radius: 26px 8px 34px 13px; }
.frame-vines .vine {
    fill: none;
    stroke: #718a4b;
    stroke-width: 6;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.frame-vines .vine-light {
    fill: none;
    stroke: #a5bd71;
    stroke-width: 2;
    opacity: .72;
    vector-effect: non-scaling-stroke;
}
.frame-vines .leaf { fill: #708e4f; stroke: #b2c986; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.frame-vines .flower { fill: #be7ac5; stroke: #f1caef; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.frame-vines .vine-group { transform-origin: 50% 80%; animation: vineSway 10s ease-in-out infinite alternate; }

.hero-ribbon {
    grid-column: 1 / 3;
    grid-row: 3;
    position: relative;
    z-index: 6;
    align-self: start;
    margin-top: clamp(.5rem, 2vw, 1.5rem);
    padding: 1rem clamp(1.2rem, 3vw, 2.4rem);
    color: #d8cfe0;
    background: linear-gradient(100deg, #23142c, #110d16 62%, #1a1020);
    border: 1px solid rgba(168,108,233,.42);
    border-radius: 48% 13% 38% 17% / 21% 49% 24% 41%;
    box-shadow: 7px 8px 0 rgba(0,0,0,.26);
    transform: rotate(-1.1deg);
}
.hero-ribbon::before {
    content: "";
    position: absolute;
    left: -1.2rem;
    top: 50%;
    width: 2.4rem;
    height: 2.2rem;
    background: #23142c;
    clip-path: polygon(100% 0, 100% 100%, 0 72%, 38% 48%, 0 22%);
}
.hero-ribbon p { margin: 0; font-size: clamp(.95rem, 1.6vw, 1.15rem); }
.hero-ribbon .hero-intro-quiet { color: #a9a0ad; margin-top: .35rem; font-size: .9em; }

@keyframes tentacleDrift {
    from { transform: rotate(-1.2deg) translateY(-1px); }
    to { transform: rotate(1.8deg) translateY(4px); }
}
@keyframes vineSway {
    from { transform: rotate(-.7deg); }
    to { transform: rotate(1.1deg); }
}
@keyframes chainTension {
    0%, 82%, 100% { transform: translate(0,0); }
    87% { transform: translate(2px,-2px); }
    92% { transform: translate(-1px,1px); }
}

/* --------------------------------------------------------------------------
   PORTAL MAP
   The navigation objects are the interface, not cards with decorations.
   -------------------------------------------------------------------------- */

.portal-section {
    padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 7rem);
    position: relative;
}

.portal-heading {
    width: min(760px, 100%);
    margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
    text-align: center;
}
.portal-heading .eyebrow {
    color: #bfb3c6;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.portal-heading h2 {
    margin: 0;
    font-family: "Spooky Punk", "Permanent Marker", cursive;
    font-size: clamp(3rem, 6vw, 5.6rem);
    font-weight: 400;
    line-height: .95;
}
.portal-heading p { color: #aaa0ae; max-width: 40rem; margin: .8rem auto 0; }

.portal-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    grid-template-areas:
        "spooky . fan . myth"
        ". universe universe surreal ."
        "queer universe universe . leftist"
        ". collab projects rope rope";
    align-items: center;
    justify-items: center;
    gap: clamp(1.1rem, 3vw, 3.4rem);
    min-height: 880px;
    padding: clamp(1rem, 3vw, 2.5rem);
}

.portal-map::before {
    content: "";
    position: absolute;
    inset: 4% 3%;
    z-index: -1;
    opacity: .26;
    background:
        radial-gradient(circle at 20% 20%, #fff 0 1px, transparent 1.7px),
        radial-gradient(circle at 72% 18%, #fff 0 1px, transparent 1.6px),
        radial-gradient(circle at 83% 66%, #fff 0 1px, transparent 1.7px),
        radial-gradient(circle at 31% 79%, #fff 0 1px, transparent 1.6px),
        radial-gradient(circle at 51% 41%, rgba(168,108,233,.7) 0 1px, transparent 2px);
    background-size: 83px 83px, 113px 113px, 137px 137px, 97px 97px, 151px 151px;
    pointer-events: none;
}

.portal {
    position: relative;
    width: clamp(145px, 15vw, 205px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: var(--bone);
    isolation: isolate;
    transition: transform .18s ease, filter .18s ease;
}
.portal:hover { transform: translateY(-6px) scale(1.025); filter: brightness(1.12); }
.portal-label {
    position: relative;
    z-index: 6;
    font-family: "Spooky Punk", "Permanent Marker", cursive;
    font-size: clamp(1.65rem, 2.7vw, 2.6rem);
    font-weight: 400;
    text-align: center;
    text-shadow: 3px 3px 0 #050406;
}
.portal-sub {
    position: absolute;
    z-index: 7;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    font-size: .65rem;
    color: #aaa0ae;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* All: the label itself lives inside the sun, then the universe moves outside it. */
.universe-link {
    grid-area: universe;
    position: relative;
    width: clamp(300px, 31vw, 430px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: inherit;
    text-decoration: none;
    isolation: isolate;
}
.universe-link:hover .sun-core { transform: scale(1.07); }
.starfield {
    position: absolute;
    inset: 3%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 18% 29%, #fff 0 1px, transparent 1.8px),
        radial-gradient(circle at 79% 22%, #fff 0 1px, transparent 1.8px),
        radial-gradient(circle at 73% 77%, #fff 0 1px, transparent 1.8px),
        radial-gradient(circle at 28% 75%, #fff 0 1px, transparent 1.8px),
        radial-gradient(circle at 56% 15%, var(--trans-blue) 0 1px, transparent 2px),
        radial-gradient(circle at 89% 52%, var(--trans-pink) 0 1px, transparent 2px),
        radial-gradient(circle at 14% 54%, var(--ace-purple) 0 1px, transparent 2px);
    opacity: .75;
    animation: starPulse 5s ease-in-out infinite alternate;
}
.orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(205,194,214,.25);
    border-radius: 50%;
    transform-origin: center;
}
.orbit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--planet, #a989ca);
    box-shadow: 0 0 11px color-mix(in srgb, var(--planet, #a989ca) 55%, transparent);
}
.orbit-one {
    width: 46%; height: 46%; margin: -23% 0 0 -23%;
    --planet: var(--trans-blue);
    animation: orbitSpin 13s linear infinite;
}
.orbit-two {
    width: 66%; height: 66%; margin: -33% 0 0 -33%;
    --planet: var(--ace-purple);
    border-style: dashed;
    animation: orbitSpin 22s linear infinite reverse;
}
.orbit-three {
    width: 84%; height: 84%; margin: -42% 0 0 -42%;
    --planet: var(--queer-green);
    animation: orbitSpin 33s linear infinite;
}
.orbit-four {
    width: 98%; height: 78%; margin: -39% 0 0 -49%;
    --planet: var(--trans-pink);
    transform: rotate(21deg);
    animation: orbitSpinTilt 41s linear infinite;
}
.sun-core {
    position: relative;
    z-index: 5;
    width: 31%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #140d0b;
    background: radial-gradient(circle at 38% 32%, #ffe7a0, var(--gold-light) 32%, #d69435 71%, #a75228 100%);
    box-shadow: 0 0 28px rgba(240,211,123,.42), 0 0 75px rgba(183,91,53,.18);
    transition: transform .2s ease;
}
.sun-core::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -23%;
    border-radius: 50%;
    background: repeating-conic-gradient(from 3deg, rgba(240,211,123,.92) 0 3deg, transparent 3deg 9deg);
    mask: radial-gradient(circle, transparent 0 61%, #000 62% 100%);
    -webkit-mask: radial-gradient(circle, transparent 0 61%, #000 62% 100%);
    animation: sunTurn 38s linear infinite;
}
.sun-core strong {
    font-family: "Spooky Punk", "Permanent Marker", cursive;
    font-size: clamp(2.1rem, 4.5vw, 4rem);
    font-weight: 400;
}
.universe-caption {
    position: absolute;
    z-index: 8;
    bottom: 4%;
    color: #a89fab;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitSpinTilt { from { transform: rotate(21deg); } to { transform: rotate(381deg); } }
@keyframes sunTurn { to { transform: rotate(360deg); } }
@keyframes starPulse { from { opacity: .44; } to { opacity: .9; } }

/* Spooky: gothic arch, thorns and cathedral points. */
.nav-spooky { grid-area: spooky; transform: rotate(-2deg); }
.nav-spooky .portal-shell {
    position: absolute;
    inset: 7% 12% 5%;
    z-index: 1;
    border: 2px solid #8e6ca6;
    border-radius: 48% 48% 13% 13% / 32% 32% 12% 12%;
    background: radial-gradient(circle at 50% 80%, #27132c, #0d0911 70%);
    box-shadow: inset 0 0 0 6px #0b090d, inset 0 0 0 8px rgba(142,108,166,.28), 0 0 24px rgba(132,80,197,.15);
}
.nav-spooky .portal-shell::before,
.nav-spooky .portal-shell::after {
    content: "";
    position: absolute;
    top: -31px;
    width: 38px;
    height: 60px;
    border: 2px solid #8e6ca6;
    border-bottom: 0;
    background: #0b090d;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.nav-spooky .portal-shell::before { left: 7%; transform: rotate(-10deg); }
.nav-spooky .portal-shell::after { right: 7%; transform: rotate(10deg); }
.gothic-crown {
    position: absolute;
    z-index: 3;
    top: 4%; left: 50%;
    width: 9px; height: 49px;
    transform: translateX(-50%);
    background: #8e6ca6;
    clip-path: polygon(50% 0, 100% 35%, 68% 35%, 68% 100%, 32% 100%, 32% 35%, 0 35%);
}
.nav-spooky::after {
    content: "✦  †  ✦";
    position: absolute;
    bottom: 5%;
    z-index: 4;
    color: rgba(174,135,194,.65);
    font-size: .7rem;
    letter-spacing: .3rem;
}

/* Fan art: a D20 plate with tiny sword marks. */
.nav-fan { grid-area: fan; transform: rotate(1.5deg); }
.nav-fan .portal-shell {
    position: absolute;
    inset: 5%;
    z-index: 1;
    background: linear-gradient(145deg, #b28a4e, #6f4f2d);
    clip-path: polygon(50% 0, 92% 23%, 100% 70%, 74% 100%, 26% 100%, 0 70%, 8% 23%);
}
.nav-fan .portal-shell::before {
    content: "";
    position: absolute;
    inset: 5px;
    background: #151019;
    clip-path: inherit;
}
.nav-fan .portal-shell::after {
    content: "20";
    position: absolute;
    inset: 26%;
    display: grid;
    place-items: center;
    color: rgba(211,168,78,.17);
    border: 1px solid rgba(211,168,78,.34);
    clip-path: polygon(50% 0, 100% 28%, 82% 100%, 18% 100%, 0 28%);
    font: 700 2.5rem/1 Georgia, serif;
}
.nav-fan .dice-lines {
    position: absolute;
    inset: 18%;
    z-index: 3;
    background:
        linear-gradient(32deg, transparent 49%, rgba(211,168,78,.34) 50% 51%, transparent 52%),
        linear-gradient(-32deg, transparent 49%, rgba(211,168,78,.34) 50% 51%, transparent 52%);
}
.nav-fan::before,
.nav-fan::after {
    position: absolute;
    z-index: 5;
    top: 9%;
    color: #c6a063;
    font-size: 1.55rem;
}
.nav-fan::before { content: "⚔"; left: 5%; transform: rotate(-18deg); }
.nav-fan::after { content: "⚔"; right: 5%; transform: scaleX(-1) rotate(-18deg); }

/* Queer: mostly dark, with glowing trans + ace + queer accents around the edge. */
.nav-queer { grid-area: queer; transform: rotate(-1deg); }
.nav-queer .portal-shell {
    position: absolute;
    inset: 3%;
    z-index: 1;
    border-radius: 52% 48% 47% 53% / 42% 56% 44% 58%;
    background: conic-gradient(from 18deg,
        #17131b 0 9%,
        var(--trans-blue) 9% 12%,
        #17131b 12% 23%,
        var(--trans-pink) 23% 26%,
        #17131b 26% 38%,
        rgba(255,255,255,.88) 38% 40%,
        #17131b 40% 52%,
        var(--ace-purple) 52% 56%,
        #17131b 56% 70%,
        var(--queer-green) 70% 74%,
        #17131b 74% 100%);
    box-shadow: 0 0 19px rgba(91,206,250,.12), 0 0 28px rgba(143,91,194,.12);
    animation: queerGlow 5.8s ease-in-out infinite alternate;
}
.nav-queer .portal-shell::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: inherit;
    background: radial-gradient(circle, #1c1222, #0c090f 75%);
    border: 1px solid rgba(255,255,255,.09);
}
.nav-queer::after {
    content: "✦";
    position: absolute;
    z-index: 5;
    right: 8%;
    top: 12%;
    color: var(--trans-pink);
    text-shadow: -15px 22px 0 var(--trans-blue), -33px -4px 0 var(--ace-purple), -55px 42px 0 var(--queer-green);
}
@keyframes queerGlow {
    from { filter: drop-shadow(0 0 2px rgba(91,206,250,.12)); }
    to { filter: drop-shadow(0 0 9px rgba(245,169,184,.22)); }
}

/* Mythology: shield / old relic. */
.nav-myth { grid-area: myth; transform: rotate(1.4deg); }
.nav-myth .portal-shell {
    position: absolute;
    inset: 3% 9%;
    z-index: 1;
    background: #9b7c47;
    clip-path: polygon(50% 0, 92% 14%, 88% 69%, 50% 100%, 12% 69%, 8% 14%);
}
.nav-myth .portal-shell::before {
    content: "";
    position: absolute;
    inset: 5px;
    background: radial-gradient(circle at 50% 32%, #271d27, #100c13 74%);
    clip-path: inherit;
}
.nav-myth .portal-shell::after {
    content: "ᚠ ᚱ ᚨ\A ᛉ ᛞ";
    white-space: pre;
    position: absolute;
    inset: 12%;
    display: grid;
    place-items: center;
    text-align: center;
    color: rgba(211,168,78,.24);
    font: 1.15rem/2 Georgia, serif;
    letter-spacing: .35rem;
}

/* Surreal: soft blob frame with physical drips. */
.nav-surreal { grid-area: surreal; transform: rotate(-1.7deg); }
.nav-surreal .portal-shell {
    position: absolute;
    inset: 5%;
    z-index: 1;
    border-radius: 54% 46% 61% 39% / 44% 57% 43% 56%;
    background: linear-gradient(150deg, #64428c, #2b1936 72%);
    border: 2px solid #9f75c8;
    box-shadow: inset 0 0 30px rgba(0,0,0,.28);
}
.nav-surreal .portal-shell::before {
    content: "";
    position: absolute;
    left: 20%;
    right: 12%;
    bottom: -23px;
    height: 42px;
    background:
        radial-gradient(ellipse at 12px 0, #513071 0 11px, transparent 12px),
        radial-gradient(ellipse at 54px 4px, #513071 0 8px, transparent 9px),
        radial-gradient(ellipse at 102px 0, #513071 0 14px, transparent 15px);
    background-repeat: no-repeat;
    animation: dripWobble 5s ease-in-out infinite alternate;
}
.nav-surreal::after {
    content: "?";
    position: absolute;
    z-index: 5;
    left: 15%;
    bottom: 18%;
    color: rgba(238,232,223,.13);
    font: 5rem/1 "Spooky Punk", cursive;
    transform: rotate(18deg);
}
@keyframes dripWobble { to { transform: translateY(5px) scaleY(1.08); } }

/* Leftist: the anarchy A is the border/object itself. */
.nav-leftist { grid-area: leftist; transform: rotate(2.2deg); }
.nav-leftist .portal-shell {
    position: absolute;
    inset: 1%;
    z-index: 1;
    display: grid;
    place-items: center;
    border: 5px solid #bb3f4b;
    border-radius: 50%;
    background: #0b090d;
    box-shadow: 0 0 0 2px rgba(187,63,75,.22), 0 0 24px rgba(187,63,75,.13);
}
.nav-leftist .portal-shell::before {
    content: "A";
    color: transparent;
    -webkit-text-stroke: 5px #bb3f4b;
    paint-order: stroke fill;
    font: 700 clamp(7rem, 12vw, 10rem)/.9 Arial Black, sans-serif;
    transform: translateY(-2%);
}
.nav-leftist .portal-label {
    padding: .25rem .5rem;
    color: #eee8df;
    background: rgba(9,7,12,.84);
    font-size: clamp(1.25rem, 2.2vw, 2rem);
}

/* Collabs: ring of fire, deliberately illustrative rather than emoji. */
.nav-collab { grid-area: collab; transform: rotate(-1.6deg); }
.nav-collab .portal-shell {
    position: absolute;
    inset: 8%;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #161019 0 58%, #5b241c 59% 64%, transparent 65%);
    border: 2px solid #aa4f32;
}
.nav-collab .flame {
    position: absolute;
    z-index: 2;
    width: 18%;
    height: 32%;
    bottom: 4%;
    left: 41%;
    border-radius: 62% 38% 64% 36% / 76% 52% 48% 24%;
    background: linear-gradient(180deg, #e99d45, #bd4e2d 58%, #65211d);
    clip-path: polygon(50% 0, 78% 35%, 100% 59%, 80% 100%, 20% 100%, 0 59%, 28% 37%);
    transform-origin: 50% 100%;
    animation: flameFlicker 1.8s ease-in-out infinite alternate;
}
.nav-collab .flame.f2 { left: 17%; bottom: 15%; transform: rotate(-48deg) scale(.72); animation-delay: -.6s; }
.nav-collab .flame.f3 { left: 68%; bottom: 15%; transform: rotate(48deg) scale(.72); animation-delay: -1.1s; }
.nav-collab .flame.f4 { left: 41%; bottom: 66%; transform: rotate(180deg) scale(.58); animation-delay: -.2s; }
@keyframes flameFlicker { from { scale: 1 .94; } to { scale: .95 1.08; } }

/* Projects: only the floating bubble lettering is clickable. */
.projects-bubble-link {
    grid-area: projects;
    position: relative;
    z-index: 4;
    display: inline-block;
    padding: 1rem 1.2rem;
    text-decoration: none;
    font-family: "Spooky Punk", "Permanent Marker", cursive;
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    line-height: .9;
    color: rgba(91,206,250,.08);
    -webkit-text-stroke: 1.5px rgba(170,222,244,.76);
    paint-order: stroke fill;
    text-shadow: 0 0 10px rgba(91,206,250,.28), 0 0 25px rgba(132,80,197,.13);
    transform: rotate(-4deg);
    transition: transform .18s ease, text-shadow .18s ease;
}
.projects-bubble-link:hover { transform: rotate(-1deg) translateY(-5px) scale(1.04); text-shadow: 0 0 16px rgba(91,206,250,.46), 0 0 30px rgba(132,80,197,.2); }
.projects-bubble-link::before,
.projects-bubble-link::after {
    content: "";
    position: absolute;
    border: 1.5px solid rgba(170,222,244,.55);
    border-radius: 50%;
}
.projects-bubble-link::before { width: 18px; height: 18px; right: 3%; top: -4%; box-shadow: -21px -19px 0 -5px rgba(91,206,250,.18); }
.projects-bubble-link::after { width: 10px; height: 10px; left: 8%; bottom: -2%; box-shadow: 19px 15px 0 -2px rgba(91,206,250,.22); }

/* Events & Promo: rope-striped letters, not a card. */
.rope-link {
    grid-area: rope;
    position: relative;
    z-index: 4;
    display: inline-block;
    padding: 1rem 1.3rem;
    text-decoration: none;
    font-family: "Permanent Marker", cursive;
    font-size: clamp(1.9rem, 3.4vw, 3.35rem);
    font-weight: 700;
    line-height: 1;
    background: repeating-linear-gradient(45deg, #e0bd73 0 5px, #a87337 5px 9px, #f0d18a 9px 13px);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px #4b2f19;
    paint-order: stroke fill;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,.45));
    transform: rotate(2deg);
    transition: transform .18s ease;
}
.rope-link:hover { transform: rotate(0) translateY(-5px) scale(1.025); }
.rope-link::before,
.rope-link::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 21px;
    height: 21px;
    border: 4px solid #b58445;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: inset 0 0 0 2px #6c4525;
}
.rope-link::before { left: -10px; }
.rope-link::after { right: -10px; }

/* Keep Series discoverable without forcing another circular portal. */
.series-scratch-link {
    position: absolute;
    left: 7%;
    bottom: 24%;
    z-index: 6;
    color: #8f8893;
    font-family: "Permanent Marker", cursive;
    font-size: 1rem;
    text-decoration: none;
    transform: rotate(-76deg);
}
.series-scratch-link::after { content: " ↗"; color: var(--purple-hot); }
.series-scratch-link:hover { color: var(--bone); }

/* --------------------------------------------------------------------------
   FEATURED CONTENT BELOW THE MAP
   Still admin-driven, but the containers stop reverting to beige portfolio cards.
   -------------------------------------------------------------------------- */

.home-illustrated .homepage-type-section {
    padding: clamp(1.6rem, 3vw, 2.8rem) 0;
}
.home-illustrated .homepage-section-shell {
    position: relative;
    padding: clamp(1.1rem, 2.7vw, 2.2rem);
    background: linear-gradient(130deg, rgba(29,20,36,.86), rgba(12,9,15,.72));
    border: 1px solid rgba(238,232,223,.13);
    border-radius: 10px 28px 13px 21px;
    box-shadow: 0 20px 44px rgba(0,0,0,.22);
}
.home-illustrated .homepage-section-shell::before {
    content: "✦";
    position: absolute;
    right: 1rem;
    top: .2rem;
    color: rgba(132,80,197,.23);
    font-size: 2.4rem;
}
.home-illustrated .section-heading h2 { color: var(--bone); }
.home-illustrated .section-heading a { color: #caa6ee; }
.home-illustrated .art-grid { gap: 1.2rem; }
.home-illustrated .art-card,
.home-illustrated .homepage-collection-grid .collection-card {
    color: var(--bone);
    background: #151019;
    border-color: rgba(238,232,223,.38);
    box-shadow: 5px 5px 0 #030204;
}
.home-illustrated .art-card:nth-child(4n+1) { transform: rotate(-.45deg); }
.home-illustrated .art-card:nth-child(4n+2) { transform: rotate(.4deg); }
.home-illustrated .art-card:nth-child(4n+3) { transform: rotate(-.2deg); }
.home-illustrated .art-card:nth-child(4n) { transform: rotate(.25deg); }
.home-illustrated .art-card:hover { transform: translateY(-5px) rotate(0); }
.home-illustrated .art-card-image {
    aspect-ratio: auto !important;
    height: auto !important;
    background: var(--image-stage) !important;
}
.home-illustrated .art-card-image img,
.home-illustrated .homepage-collection-grid .collection-card img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: var(--image-stage) !important;
}
.home-illustrated .art-card-copy,
.home-illustrated .homepage-collection-grid .collection-card-copy {
    background: #151019;
    border-top: 1px solid rgba(238,232,223,.10);
}
.home-illustrated .art-card p { color: #a9a0ad; }
.home-illustrated .tag { color: #c49be9; }
.home-illustrated .homepage-collection-grid {
    grid-template-columns: repeat(auto-fit, minmax(255px, 325px));
    justify-content: start;
    gap: 1.25rem;
    padding-bottom: 0;
}

.home-illustrated .lower-home-section { padding: 2.3rem 0 1rem; }
.home-illustrated .split-feature-single { grid-template-columns: minmax(0, 780px); justify-content: center; }
.home-illustrated .paper-panel {
    color: var(--bone);
    background: linear-gradient(135deg, #18111d, #0d0a10);
    border-color: rgba(238,232,223,.24);
}
.home-illustrated .feature-row:hover { background: rgba(132,80,197,.11); }
.home-illustrated .feature-row img { background: var(--image-stage) !important; }
.home-illustrated .collab-panel {
    background: linear-gradient(145deg, #160e16, #0a090c);
    box-shadow: 7px 7px 0 rgba(183,91,53,.22), var(--shadow);
}
.home-illustrated .closed-note {
    color: #1a1010;
    background: #d9ad53;
}
.home-illustrated .about-home-section { padding: 2rem 0 4.5rem; }
.home-illustrated .about-strip {
    position: relative;
    color: var(--bone);
    background: linear-gradient(120deg, #1b1320, #100c14);
    transform: rotate(.25deg);
}
.home-illustrated .about-strip::before {
    content: "small creature • alarming number of ideas";
    position: absolute;
    right: 1.2rem;
    top: -.7rem;
    padding: .25rem .55rem;
    color: #d9cfdd;
    background: #24142c;
    border: 1px solid rgba(168,108,233,.45);
    font-family: "Permanent Marker", cursive;
    font-size: .7rem;
    transform: rotate(-2deg);
}
.home-illustrated .about-strip img { background: var(--image-stage) !important; }

@media (max-width: 1050px) {
    .living-gallery {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    .hero-mark { grid-column: 1 / 3; grid-row: 1; }
    .frame-tentacle { grid-column: 1; grid-row: 2; }
    .frame-chain { grid-column: 2; grid-row: 2; margin-top: 2rem; }
    .frame-vines { grid-column: 1 / 3; grid-row: 3; width: min(64%, 580px); margin-top: 1.2rem; }
    .hero-ribbon { grid-column: 1 / 3; grid-row: 4; }

    .portal-map {
        grid-template-columns: repeat(4, minmax(120px,1fr));
        grid-template-areas:
            "spooky fan myth surreal"
            "universe universe queer leftist"
            "universe universe collab projects"
            "rope rope rope rope";
        min-height: 760px;
    }
    .series-scratch-link { left: 2%; bottom: 18%; }
}

@media (max-width: 760px) {
    .living-hero { padding-top: 2.4rem; }
    .living-gallery { display: flex; flex-direction: column; gap: 2.6rem; }
    .hero-mark { order: 0; width: 100%; padding-inline: 0; }
    .hero-mark::before, .hero-mark::after { display: none; }
    .frame-tentacle, .frame-chain, .frame-vines {
        order: 1;
        width: min(88%, 520px);
        align-self: center;
        margin-top: 0;
        transform: none;
    }
    .frame-chain { order: 2; }
    .frame-vines { order: 3; }
    .hero-ribbon { order: 4; width: 100%; transform: none; }

    .portal-map {
        grid-template-columns: repeat(2, minmax(0,1fr));
        grid-template-areas:
            "universe universe"
            "spooky fan"
            "queer myth"
            "surreal leftist"
            "collab projects"
            "rope rope";
        min-height: 0;
        gap: 2.2rem 1rem;
        padding-inline: 0;
    }
    .universe-link { width: min(88vw, 390px); }
    .portal { width: min(42vw, 190px); }
    .series-scratch-link {
        position: static;
        grid-column: 1 / -1;
        transform: none;
        justify-self: center;
        margin-top: -.5rem;
    }
    .rope-link { font-size: clamp(1.65rem, 8vw, 2.65rem); text-align: center; }
    .projects-bubble-link { font-size: clamp(2.1rem, 10vw, 3.6rem); }
    .home-illustrated .homepage-section-shell { padding: 1rem; }
}

@media (max-width: 480px) {
    .living-frame-svg { inset: -8%; width: 116%; height: 116%; }
    .frame-tentacle, .frame-chain, .frame-vines { width: 91%; }
    .frame-chain::after { right: 0; font-size: .58rem; }
    .portal-map { gap: 1.8rem .45rem; }
    .portal { width: min(44vw, 170px); }
    .portal-label { font-size: 1.55rem; }
    .portal-sub { display: none; }
    .home-illustrated .homepage-collection-grid { grid-template-columns: 1fr; }
    .home-illustrated .about-strip::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .home-illustrated *,
    .home-illustrated *::before,
    .home-illustrated *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}