@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Marcellus&family=Source+Sans+3:wght@400;500;600&display=swap');

/*
 * Just-N Illusion content-only page transitions.
 *
 * The aged-paper environment remains stationary.
 * Only the foreground content burns in and out.
 */

/*
 * Disable the previous full-screen transition surface.
 * Its markup can remain temporarily; it will not display.
 */
.jni-page-transition {
    display: none !important;
}

/* ---------------------------------------------------------
   STANDARD CUSTOMIZR PAGES
--------------------------------------------------------- */

body:not(.jni-entrance-page).jni-page-arriving #tc-page-wrap {
    opacity: 0;
    filter:
        brightness(2.15)
        contrast(1.18)
        saturate(0.12)
        sepia(0.32)
        blur(2px);
}

body:not(.jni-entrance-page).jni-page-arrival-active #tc-page-wrap {
    animation:
        jni-content-burn-in 1050ms
        cubic-bezier(0.22, 0.61, 0.36, 1)
        forwards;
}

body:not(.jni-entrance-page).jni-page-leaving #tc-page-wrap {
    animation:
        jni-content-burn-out 1150ms
        cubic-bezier(0.4, 0, 0.2, 1)
        forwards;

    pointer-events: none;
}

/* ---------------------------------------------------------
   ENTRANCE PAGE
   Burn only the foreground—not .jni-paper.
--------------------------------------------------------- */

body.jni-entrance-page.jni-page-leaving .jni-visual-stage,
body.jni-entrance-page.jni-page-leaving .jni-invitation,
body.jni-entrance-page.jni-page-leaving .jni-realm-reveal,
body.jni-entrance-page.jni-page-leaving .jni-skip {
    animation:
        jni-content-burn-out 1150ms
        cubic-bezier(0.4, 0, 0.2, 1)
        forwards;

    pointer-events: none;
}

/* ---------------------------------------------------------
   CONTENT BURN
--------------------------------------------------------- */

@keyframes jni-content-burn-out {
    0% {
        opacity: 1;
        filter:
            brightness(1)
            contrast(1)
            saturate(1)
            sepia(0)
            blur(0);
    }

    35% {
        opacity: 0.96;
        filter:
            brightness(1.08)
            contrast(1.02)
            saturate(0.92)
            sepia(0.04)
            blur(0);
    }

    68% {
        opacity: 0.66;
        filter:
            brightness(1.5)
            contrast(1.1)
            saturate(0.42)
            sepia(0.2)
            blur(0.6px);
    }

    100% {
        opacity: 0;
        filter:
            brightness(2.25)
            contrast(1.22)
            saturate(0.08)
            sepia(0.38)
            blur(2px);
    }
}

@keyframes jni-content-burn-in {
    0% {
        opacity: 0;
        filter:
            brightness(2.25)
            contrast(1.22)
            saturate(0.08)
            sepia(0.38)
            blur(2px);
    }

    35% {
        opacity: 0.52;
        filter:
            brightness(1.58)
            contrast(1.12)
            saturate(0.4)
            sepia(0.22)
            blur(0.8px);
    }

    72% {
        opacity: 0.94;
        filter:
            brightness(1.08)
            contrast(1.02)
            saturate(0.9)
            sepia(0.04)
            blur(0);
    }

    100% {
        opacity: 1;
        filter:
            brightness(1)
            contrast(1)
            saturate(1)
            sepia(0)
            blur(0);
    }
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:not(.jni-entrance-page).jni-page-arrival-active #tc-page-wrap,
    body:not(.jni-entrance-page).jni-page-leaving #tc-page-wrap,
    body.jni-entrance-page.jni-page-leaving .jni-visual-stage,
    body.jni-entrance-page.jni-page-leaving .jni-invitation,
    body.jni-entrance-page.jni-page-leaving .jni-realm-reveal,
    body.jni-entrance-page.jni-page-leaving .jni-skip {
        animation-duration: 140ms;
    }
}

/* =========================================================
   JNI PERSISTENT PAPER WORLD
   Prevent white/theme flash between pages
   ========================================================= */

html {
    background-color: #c9aa78 !important;
}

body:not(.jni-entrance-page) {
    background-color: #c9aa78 !important;

    background-image:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/07/vintage_paper_background_2708_generated.jpg") !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/*
 * Allow the persistent paper underneath to remain visible.
 */
body:not(.jni-entrance-page) #tc-page-wrap {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

/* =========================================================
   JNI PERSISTENT PAPER VIGNETTE
   Match the entrance paper treatment
   ========================================================= */

body:not(.jni-entrance-page)::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 244, 216, 0.04) 0%,
            rgba(38, 24, 13, 0.2) 65%,
            rgba(0, 0, 0, 0.52) 100%
        );
}

/* =========================================================
   JNI PAPER WORLD — GENERAL INK
   Ordinary text printed directly on aged paper
   ========================================================= */

/* Normal page copy */
body:not(.jni-entrance-page) .entry-content > p,
body:not(.jni-entrance-page) .entry-content > ul,
body:not(.jni-entrance-page) .entry-content > ol {
    color: #38271d !important;
    font-weight: 500;
    text-shadow:
        0 1px 0 rgba(255, 239, 204, 0.28);
}

/* Normal headings printed directly on paper */
body:not(.jni-entrance-page) .entry-content > h2,
body:not(.jni-entrance-page) .entry-content > h3,
body:not(.jni-entrance-page) .entry-content > h4 {
    color: #5a2f1d !important;
    text-shadow:
        0 1px 0 rgba(255, 239, 204, 0.32);
}

/* =========================================================
   JNI PAPER WORLD — READABLE TEXT AREA
   Subtle parchment wash behind standalone copy
   ========================================================= */

.jni-paper-copy {
    background:
        rgba(232, 211, 174, 0.30);

    padding: 24px 30px;

    border-radius: 6px;

    box-shadow:
        inset 0 0 28px rgba(92, 55, 29, 0.06),
        0 1px 0 rgba(255, 242, 211, 0.18);
}

/* Ordinary links on the paper */
body:not(.jni-entrance-page) .entry-content > p a {
    color: #70371f !important;
    font-weight: 600;
}

body:not(.jni-entrance-page) .entry-content > p a:hover {
    color: #9a4d2d !important;
}

/* =========================================================
   JNI PAPER WORLD — READABLE TEXT AREA
   Subtle parchment wash behind standalone copy
   ========================================================= */

.jni-paper-copy {
    width: min(92vw, 1100px);
    margin: 0 auto 46px;

    padding: 24px 30px;

    background:
        rgba(232, 211, 174, 0.30);

    border-radius: 6px;

    box-shadow:
        inset 0 0 28px rgba(92, 55, 29, 0.06),
        0 1px 0 rgba(255, 242, 211, 0.18);
}

/* Hide WordPress Site Title + Tagline visually everywhere */
.site-title,
.site-title a,
.site-description,
.navbar-brand-sitename,
.navbar-brand-sitename a {
    display: none !important;
}

/* =========================================================
   JNI REALM PAGE — HIDE DEFAULT PAGE TITLE
   Let the artwork arrive first
   ========================================================= */

/* Hide only the page title "The Realm" */
body.page-id-7786 .entry-title {
    display: none !important;
}

/* =========================================================
   JNI — HIDE DEFAULT WORDPRESS PAGE TITLES SITE-WIDE
   Custom JNI titles are created inside each page instead
   ========================================================= */

body.page .entry-title {
    display: none !important;
}

/* =========================================================
   JNI REALM PAGE 7786 — REMOVE CUSTOMIZR PAGE SHELL
   ========================================================= */


/* Remove Customizr's boxed-page appearance */
body.page-id-7786 #tc-page-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Release the normal Bootstrap/Customizr content container */
body.page-id-7786 #tc-page-wrap .container,
body.page-id-7786 #tc-page-wrap .container-fluid {
    width: 100% !important;
    max-width: none !important;

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

    padding-right: 0 !important;
    padding-left: 0 !important;

    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Remove leftover article/page framing */
body.page-id-7786 article,
body.page-id-7786 .article-container,
body.page-id-7786 .entry-content {
    width: 100% !important;
    max-width: none !important;

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

    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* =========================================================
   JNI REALM — DRAGON HERO SIZE
   Match Fine & Dandy visual footprint
   ========================================================= */

/* =========================================================
   JNI REALM — DRAGON STAGE
   ========================================================= */

body.page-id-7786 .jni-dragon-frame {
    position: relative !important;

    width: min(88vw, 1100px) !important;
    max-width: 1100px !important;

    aspect-ratio: 1280 / 853 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/* Dragon image */
body.page-id-7786 .entry-content img.jni-dragon-image {
    position: absolute !important;
    z-index: 1 !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;

    opacity: 1 !important;

    animation:
        jni-dragon-dim
        1800ms
        ease
        2800ms
        forwards;
}


/* =========================================================
   DRAGON — BURNT INNER EDGE
   ========================================================= */

body.page-id-7786 .jni-dragon-frame::after {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 0;

    pointer-events: none;

    background:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/ChatGPT-Image-Aug-8-2026-06_37_09-PM.png")
        center / 135% 215%
        no-repeat;

opacity: 0;

animation:
    jni-realm-edge-arrive
    700ms
    ease
    500ms
    forwards;
}

@keyframes jni-realm-edge-arrive {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================================
   REALM — JUST-N ILLUSION LOGO REVEAL
   ========================================================= */

body.page-id-7786 .jni-realm-logo {
    position: absolute !important;
    z-index: 3 !important;

   top: 39% !important;
left: 50% !important;

width: auto !important;
max-width: 66% !important;
height: clamp(120px, 17vw, 230px) !important;
    margin: 0 !important;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.94);

    pointer-events: none;

    filter:
        brightness(0.8)
        drop-shadow(0 3px 4px rgba(0, 0, 0, 0.9))
        drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));

    animation:
        jni-realm-logo-reveal
        1200ms
        ease-out
        3000ms
        forwards;
}


@keyframes jni-realm-logo-reveal {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.94);

        filter:
            brightness(0.8)
            drop-shadow(0 3px 4px rgba(0, 0, 0, 0.9));
    }

    22% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.015);

       filter:
    brightness(1.05)
    saturate(1.08)

    /* very slight warm edge */
    drop-shadow(0 0 2px rgba(255, 232, 185, 0.65))

    /* stronger separation from dragon */
    drop-shadow(0 4px 5px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 12px rgba(0, 0, 0, 0.78));
    }

    48% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);

        filter:
            brightness(1.25)
            saturate(1.1)
            drop-shadow(0 0 10px rgba(184, 95, 27, 0.4))
            drop-shadow(0 3px 5px rgba(0, 0, 0, 0.8));
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);

        filter:
    brightness(1.08)
    saturate(1.12)

    /* crisp ivory edge */
    drop-shadow(0 0 1px rgba(255, 248, 220, 1))

    /* visible warm-gold halo */
    drop-shadow(0 0 4px rgba(255, 205, 120, 0.95))

    /* softer rust glow */
    drop-shadow(0 0 9px rgba(184, 95, 27, 0.75))

    /* dark separation from dragon */
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.95));
    }
}

/* =========================================================
   DRAGON — DARKEN
   ========================================================= */

@keyframes jni-dragon-dim {

    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(0.52);
    }
}


/* =========================================================
   REALM — THREE CLOUD CHOICES
   ========================================================= */

/* Holds all three clouds above the dragon, burnt edge, and logo */
body.page-id-7786 .jni-realm-clouds {
    position: absolute !important;
    z-index: 4 !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    pointer-events: none;
    overflow: visible;
}

body.page-id-7786 .jni-realm-cloud {
    pointer-events: auto;
    cursor: pointer;
    scale: 1;
    transition: scale 300ms ease;
}

body.page-id-7786 .jni-realm-cloud:hover {
    scale: 1.25;
    z-index: 5;
}

body.page-id-7786 .jni-realm-cloud {
    position: absolute;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: inherit !important;
    opacity: 0;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    filter:
        drop-shadow(0 8px 14px rgba(45, 25, 12, 0.22))
        drop-shadow(0 0 18px rgba(255, 240, 205, 0.16));

    overflow: visible;
}

/* Cloud titles */
body.page-id-7786 .jni-realm-cloud span {
    position: relative;
    z-index: 2;

    max-width: 68%;
    padding: 0 6px;

    opacity: 0;

    color: #5f321d;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.2rem, 1.85vw, 1.95rem);
    font-weight: 600;
    line-height: 1.05;
    text-align: center;

    text-shadow:
        0 1px 0 rgba(255,255,255,0.55);

    animation:
        jni-cloud-title-reveal
        900ms
        ease
        5100ms
        forwards;
}

/* LEFT CLOUD — TEXT POSITION ONLY */
body.page-id-7786 .jni-realm-cloud--create span {
    position: relative;
    left: -28px;
    top: 21px;
}

/* LEFT CLOUD */
body.page-id-7786 .jni-realm-cloud--create {
    left: 2.5%;
    bottom: 7.5%;

    width: 38%;
    min-height: 235px;

    background-image: url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/ChatGPT-Image-Aug-10-2026-03_30_52-PM-1.png");

    animation:
        jni-cloud-left-in
        1800ms
        ease-out
        3000ms
        forwards;
}


/* CENTER CLOUD */
body.page-id-7786 .jni-realm-cloud--behind {
    left: 34%;
    bottom: 1.5%;

    width: 35%;
    min-height: 235px;

    background-image: url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/ChatGPT-Image-Aug-10-2026-03_30_52-PM-2.png");

    animation:
        jni-cloud-center-in
        1800ms
        ease-out
        3200ms
        forwards;
}

/* CENTER CLOUD — TEXT POSITION ONLY */
body.page-id-7786 .jni-realm-cloud--behind span {
    top: 10px;
}

/* RIGHT CLOUD */
body.page-id-7786 .jni-realm-cloud--explore {
    right: 2.5%;
    bottom: 7.5%;

    width: 31%;
    min-height: 195px;

    background-image: url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/ChatGPT-Image-Aug-10-2026-03_30_52-PM-3.png");

    animation:
        jni-cloud-right-in
        1800ms
        ease-out
        3400ms
        forwards;
}

/* =========================================================
   REALM CLOUDS — INVITATION SHIMMER
   ========================================================= */

body.page-id-7786 .jni-realm-cloud::after {
    content: "";

    position: absolute;
    z-index: 1;
    inset: 0;

    pointer-events: none;

    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255, 248, 220, 0) 38%,
        rgba(255, 250, 225, 0.8) 49%,
        rgba(255, 214, 145, 0.5) 53%,
        rgba(255, 248, 220, 0) 64%,
        transparent 72%
    );

    background-size: 260% 100%;
    background-position: 140% center;

    opacity: 0;

    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;

    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;

    animation:
        jni-cloud-shimmer
        4.5s
        ease-in-out
        6s
        infinite;
}


/* LEFT CLOUD SHAPE */
body.page-id-7786 .jni-realm-cloud--create::after {
    -webkit-mask-image:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/ChatGPT-Image-Aug-10-2026-03_30_52-PM-1.png");

    mask-image:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/ChatGPT-Image-Aug-10-2026-03_30_52-PM-1.png");
}


/* CENTER CLOUD SHAPE */
body.page-id-7786 .jni-realm-cloud--behind::after {
    -webkit-mask-image:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/ChatGPT-Image-Aug-10-2026-03_30_52-PM-2.png");

    mask-image:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/ChatGPT-Image-Aug-10-2026-03_30_52-PM-2.png");

    animation-delay: 6.25s;
}


/* RIGHT CLOUD SHAPE */
body.page-id-7786 .jni-realm-cloud--explore::after {
    -webkit-mask-image:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/ChatGPT-Image-Aug-10-2026-03_30_52-PM-3.png");

    mask-image:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/ChatGPT-Image-Aug-10-2026-03_30_52-PM-3.png");

    animation-delay: 6.5s;
}

    
    /* RIGHT CLOUD — TEXT POSITION ONLY */
body.page-id-7786 .jni-realm-cloud--explore span {
    left: -30px;
    top: 15px;
}



@keyframes jni-cloud-shimmer {

    0% {
        opacity: 0;
        background-position: 140% center;
    }

    4% {
        opacity: 0.25;
    }

    12% {
        opacity: 0.9;
    }

    25% {
        opacity: 0.4;
        background-position: -45% center;
    }

    30%,
    100% {
        opacity: 0;
        background-position: -45% center;
    }
}
/* =========================================================
   CLOUD MOVEMENT
   ========================================================= */

@keyframes jni-cloud-left-in {

    from {
        opacity: 0;

        transform:
            translate(-140px, 45px)
            scale(0.82);
    }

    to {
        opacity: 1;

        transform:
            translate(0, 0)
            scale(1);
    }
}


@keyframes jni-cloud-center-in {

    from {
        opacity: 0;

        transform:
            translateY(120px)
            scale(0.82);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes jni-cloud-right-in {

    from {
        opacity: 0;

        transform:
            translate(140px, 45px)
            scale(0.82);
    }

    to {
        opacity: 1;

        transform:
            translate(0, 0)
            scale(1);
    }
}


@keyframes jni-cloud-title-reveal {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   JNI ENTRANCE — PORTRAIT ON RUM RUNNER LANDING ONLY
   ========================================================= */

.jni-portrait-cameo {
    position: absolute;

    left: auto;
    right: 8%;
    top: 7%;

    width: clamp(150px, 15vw, 215px);
    height: auto;

    z-index: 20;

    pointer-events: none;
    user-select: none;

    /* Hidden during black intro and all later scenes */
    opacity: 0;
    visibility: hidden;

    filter:
        drop-shadow(0 5px 10px rgba(35, 20, 10, 0.28));

    transition:
        opacity 900ms ease,
        visibility 0s linear 900ms;
}

/* Show ONLY while the Rum Runner landing is active */
.jni-entrance.is-landing .jni-portrait-cameo {
    opacity: 0.92;
    visibility: visible;

    transition:
        opacity 900ms ease,
        visibility 0s;
}

/* Remove it as soon as the Rum Runner transition begins */
.jni-entrance.is-burning .jni-portrait-cameo {
    opacity: 0;
    visibility: hidden;

    transition:
        opacity 500ms ease,
        visibility 0s linear 500ms;
}

@media (max-width: 768px) {
    .jni-portrait-cameo {
        left: 4%;
        top: 12%;
        width: clamp(105px, 27vw, 155px);
    }
}

/* =========================================================
   JNI — SLIM FOOTER
   Realm + Behind the Illusion + Talk To The Artist
   ========================================================= */

/* Remove the bulky footer appearance */
body.page-id-7786 footer#footer,
body:has(.jni-behind-hero) footer#footer,
body:has(.jni-contact-page) footer#footer {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Make the copyright strip much thinner */
body.page-id-7786 footer#footer .colophon,
body:has(.jni-behind-hero) footer#footer .colophon,
body:has(.jni-contact-page) footer#footer .colophon {
    min-height: 30px !important;
    padding: 4px 0 !important;
    margin: 0 !important;

    background: rgba(55, 34, 20, 0.28) !important;
}

/* Put footer content on one line */
body.page-id-7786 footer#footer .colophon .container,
body:has(.jni-behind-hero) footer#footer .colophon .container,
body:has(.jni-contact-page) footer#footer .colophon .container {
    width: 100% !important;
    max-width: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 6px;

    padding: 0 16px !important;
    margin: 0 auto !important;

    white-space: nowrap;
}

/* Compress anything Customizr puts inside the copyright area */
body.page-id-7786 footer#footer .colophon .container > *,
body:has(.jni-behind-hero) footer#footer .colophon .container > *,
body:has(.jni-contact-page) footer#footer .colophon .container > * {
    display: inline-flex !important;
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}

/* Smaller, quieter footer text */
body.page-id-7786 footer#footer .colophon,
body.page-id-7786 footer#footer .colophon a,
body:has(.jni-behind-hero) footer#footer .colophon,
body:has(.jni-behind-hero) footer#footer .colophon a,
body:has(.jni-contact-page) footer#footer .colophon,
body:has(.jni-contact-page) footer#footer .colophon a {
    font-size: 12px !important;
    line-height: 20px !important;
}


/* =========================================================
   WHAT CAN I CREATE FOR YOU? — HYDROPLANE HERO
   Full color → title fade in → sepia settle → two choices
   ========================================================= */

.jni-create-hero {
    position: relative;

    width: min(92vw, 1200px);

    left: 50%;
    transform: translateX(-50%);

    margin: 0 0 42px;
    padding: 0;
}

/* Return to Realm navigation */
/* =========================================================
   JNI — BACK TO THE REALM BUTTON
   ========================================================= */

.jni-realm-return {
    display: inline-block;

    position: absolute;
    z-index: 20;

    left: 18px;
    bottom: 16px;

    margin: 0;
    padding: 9px 17px 8px;

    border: 1px solid rgba(57, 39, 25, 0.62);
    border-radius: 3px;

    background:
        rgba(215, 190, 145, 0.22);

    color: #5b321f !important;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    font-weight: 600;

    letter-spacing: 0.08em;

    text-decoration: none !important;

    box-shadow:
        0 2px 5px rgba(57, 39, 25, 0.18),
        inset 0 0 10px rgba(255, 235, 190, 0.10);

    backdrop-filter: blur(2px);

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        background-color 300ms ease,
        box-shadow 300ms ease;
}


.jni-realm-return:hover,
.jni-realm-return:focus-visible {
    color: #4a2818 !important;

    border-color: rgba(57, 39, 25, 0.88);

    background:
        rgba(232, 207, 160, 0.42);

    transform:
        translateY(-2px)
        scale(1.04);

    box-shadow:
        0 5px 10px rgba(57, 39, 25, 0.26),
        0 0 14px rgba(184, 95, 27, 0.15);

    text-decoration: none !important;
}

/* =========================================================
   BEHIND THE ILLUSION — RETURN TO REALM
   ========================================================= */

.jni-behind-return-row {
    width: min(92vw, 1200px);
    margin: -22px auto 38px;

    text-align: center;
}

.jni-behind-return-row .jni-realm-return {
    position: static;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0;
    padding: 10px 20px 9px !important;

    font-size: clamp(0.95rem, 1.05vw, 1.08rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Create page — keep Return to the Realm OUTSIDE the photo */
.jni-create-return-row {
    width: 100%;
    margin: 16px auto 0;
    text-align: center;
}

.jni-create-return-row .jni-realm-return {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0;
    padding: 10px 20px 9px !important;

    font-size: clamp(0.95rem, 1.05vw, 1.08rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.jni-create-stage {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    aspect-ratio: 16 / 9;

    background: #1b120c;

    border-radius: 18px;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(98, 62, 33, 0.28);
}

/* Main image */
.jni-create-photo {
    position: absolute;
    inset: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        sepia(0)
        saturate(1)
        contrast(1)
        brightness(1);

    transform: scale(1.015);

    animation:
        jni-create-photo-settle 1200ms ease-out forwards,
        jni-create-photo-sepia 2200ms ease 2800ms forwards;
}

/* Warm atmospheric overlay */
.jni-create-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 236, 198, 0.00) 0%,
            rgba(49, 28, 15, 0.10) 56%,
            rgba(19, 11, 7, 0.42) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(33, 20, 11, 0.10) 0%,
            rgba(56, 34, 18, 0.04) 34%,
            rgba(32, 20, 12, 0.18) 72%,
            rgba(16, 10, 6, 0.38) 100%
        );

    opacity: 0.5;

    animation:
        jni-create-overlay-warm 2200ms ease 2800ms forwards;
}


/* Two-part Create page title */
.jni-create-title-wrap {
    position: absolute;
    z-index: 4;

    top: 9%;
    left: 5%;
    right: 5%;

    display: grid;
    grid-template-columns: 38% 62%;
    align-items: start;display: flex;
    flex-direction: column;
    align-items: center;
}

.jni-create-title-lead {
    margin: -7px 0 0 5%;

    color: #efe0b8;

    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(1.9rem, 3vw, 3rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;

    text-shadow:
        0 1px 0 rgba(60, 34, 18, 0.45),
        0 3px 8px rgba(0, 0, 0, 0.25);
        opacity: 0;
        transform: translateY(18px);

        animation: jni-create-title-in 900ms ease 700ms forwards;
}

.jni-create-title {
    margin: 0;

    color: #efe0b8;
    opacity: 0;
    transform: translateY(20px);

    animation:
    jni-create-title-in 1100ms ease 2200ms forwards;
    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(2.2rem, 4.4vw, 4.3rem);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: 0.01em;
    text-align: center;

    text-shadow:
        0 1px 0 rgba(60, 34, 18, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.28);
}

/* Choice row — two centered paths */
.jni-create-choices {
    position: absolute;
    z-index: 5;

    left: 50%;
    right: auto;
    bottom: 4.2%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 5%;

    width: 78%;
    padding: 0;
    box-sizing: border-box;

    transform: translateX(-50%);
}

.jni-create-choice:hover {
    scale: 1.25;
    z-index: 10;
}

/* Each choice */
.jni-create-choice {
    position: relative;
    scale: 1;
    transition: scale 650ms ease;

    /* Let the grid track determine the real width */
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 170px;
    padding: 22px 24px 20px;

    box-sizing: border-box;
    overflow: visible;

    display: flex !important;
    align-items: center;
    justify-content: center;

    text-decoration: none !important;
    opacity: 0;
    transform: translateY(26px) scale(0.96);

    animation:
        jni-create-choice-in
        1000ms
        ease
        forwards;
}

.jni-create-choice--dream {
    animation-delay: 5000ms;
    top: -14px;
}

.jni-create-choice--contact {
    animation-delay: 5300ms;
    top: -14px;
}


/* =========================================================
   CREATE PAGE — CHOICE PLAQUES
   Single authoritative treatment — do not stack overrides
   ========================================================= */

/* Driftwood board image */
.jni-create-choice::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: -20px;
    bottom: -20px;
    left: -9%;
    right: -9%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: scaleY(1.35);
    transform-origin: center center;

    filter:
    brightness(1.10)
    contrast(0.78)
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.42))
    drop-shadow(0 1px 2px rgba(45, 25, 12, 0.32));

    pointer-events: none;
}

.jni-create-choice::after {
    content: "";

    position: absolute;
    z-index: 1;

    top: -20px;
    bottom: -20px;
    left: -9%;
    right: -9%;

    pointer-events: none;

    background:
    linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 205, 105, 0.15) 35%,
        rgba(255, 225, 155, 0.95) 47%,
        rgba(184, 82, 28, 0.85) 52%,
        rgba(45, 19, 8, 0.78) 58%,
        transparent 72%
    );
    
    transform: scaleY(1.35);
    transform-origin: center;

background-size: 260% 100%;
background-repeat: no-repeat;

    animation:
        jni-driftwood-burn-smoke
        2000ms
        linear
        5000ms
        forwards;
}

.jni-create-choice--dream::after {
    animation-delay: 6500ms;
    -webkit-mask: url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/driftwood_1-1.png") center / contain no-repeat;
    mask: url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/driftwood_1-1.png") center / contain no-repeat;
}

.jni-create-choice--contact::after {
    animation-delay: 7200ms;
    -webkit-mask: url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/driftwood_3.png") center / contain no-repeat;
    mask: url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/driftwood_3.png") center / contain no-repeat;
}

/* Individual driftwood boards */

.jni-create-choice--dream::before {
    background-image:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/driftwood_1-1.png");
}

.jni-create-choice--contact::before {
    background-image:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/driftwood_3.png");
}

/* Choice text — sits above driftwood */
/* Driftwood choice lettering */
.jni-create-choice span {
    position: relative;
    z-index: 2;

    width: 82%;
    max-width: 82%;

    color: #ea9a60 !important;
    -webkit-text-stroke: 0.7px rgba(118, 56, 31, 0.98);

    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(1.3rem, 1.75vw, 1.85rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: 0.01em;
    text-align: center;

    text-decoration: none !important;

   text-shadow:
    0 0 2px rgba(168, 86, 50, 1),
    0 0 5px rgba(168, 86, 50, 0.85),
    1px 2px 2px rgba(0, 0, 0, 0.75),
    2px 3px 5px rgba(0, 0, 0, 0.48);
    
    pointer-events: none;
}

.jni-create-choice,
.jni-create-choice:hover,
.jni-create-choice:focus,
.jni-create-choice:visited {
    color: #4a2b1a !important;
    text-decoration: none !important;
}

/* Contact driftwood text — slight vertical correction */
.jni-create-choice--contact span {
    transform: translateY(3px);
}

@keyframes jni-driftwood-burn-smoke {

    0% {
        opacity: 0;
        background-position: 130% center;
        filter: blur(5px) brightness(1.5);
    }

    15% {
        opacity: 1;
        background-position: 95% center;
        filter: blur(1px) brightness(1.35);
    }

    50% {
        opacity: 0.8;
        background-position: 15% center;
        filter: blur(1px) brightness(1.05);
    }

    85% {
        opacity: 0.7;
        background-position: -65% center;
        filter: blur(2px) brightness(0.85);
    }

    100% {
        opacity: 0;
        background-position: -100% center;
        filter: blur(5px) brightness(0.7);
    }
}



/* =========================================================
   ANIMATION KEYFRAMES
   ========================================================= */

@keyframes jni-create-photo-settle {
    from {
        transform: scale(1.03);
    }
    to {
        transform: scale(1.015);
    }
}

@keyframes jni-create-title-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes jni-create-photo-sepia {
    from {
        filter:
            sepia(0)
            saturate(1)
            contrast(1)
            brightness(1);
    }
    to {
        filter:
            sepia(0.62)
            saturate(0.82)
            contrast(1.03)
            brightness(0.78);
    }
}

@keyframes jni-create-overlay-warm {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 0.92;
    }
}

@keyframes jni-create-choice-in {
    from {
        opacity: 0;
        transform: translateY(26px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   SMALLER SCREENS
   ========================================================= */

@media (max-width: 900px) {

    .jni-create-stage {
        aspect-ratio: 4 / 5;
    }

    .jni-create-title-wrap {
        top: 6%;
        left: 8%;
        right: 8%;

        display: block;
    }

    .jni-create-title-lead {
        margin: 0 0 10px 0;
        font-size: clamp(1.3rem, 4.8vw, 2rem);
    }

    .jni-create-title {
        font-size: clamp(2.3rem, 9vw, 4.3rem);
        text-align: center;
    }

    .jni-create-choices {
        left: 0;
        right: 0;
        bottom: 3.2%;

        width: 100%;
        transform: none;

        grid-template-columns: 1fr;
        align-items: center;
        gap: 12px;
        padding: 0 5% 3%;
    }

    .jni-create-choice {
        width: min(90%, 460px) !important;
        min-width: 0 !important;
        max-width: 460px !important;
        min-height: 132px;
        justify-self: center;
    }

    .jni-create-choice span {
        width: 88%;
        max-width: 88%;
        font-size: clamp(1.35rem, 5vw, 2rem);
    }
}

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

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

    .jni-create-photo,
    .jni-create-overlay,
    .jni-create-title,
    .jni-create-choice {
        animation: none !important;
        transition: none !important;
    }

    .jni-create-photo {
        filter:
            sepia(0.62)
            saturate(0.82)
            contrast(1.03)
            brightness(0.78);
    }

    .jni-create-overlay {
        opacity: 0.92;
    }

    .jni-create-title,
    .jni-create-choice {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   BEHIND THE ILLUSION — HERO
   ========================================================= */

.jni-behind-hero {
    position: relative;

    width: min(92vw, 1200px);
    margin: 0 auto 42px;

    overflow: hidden;
     clip-path: inset(0 round 18px);
    isolation: isolate;
    border-radius: 18px;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(98, 62, 33, 0.28);
}

/* Collapse WordPress/Classic Editor wrapper paragraphs inside the hero.
   This makes the hero clipping edge match the actual top of the arena photo,
   so Justin and the rope enter through the picture instead of appearing above it. */
.jni-behind-hero > p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.jni-behind-hero > p > br {
    display: none !important;
}

.jni-behind-photo {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 !important;
    padding: 0 !important;
}


/* Floating biography card */
.jni-behind-card {
    position: absolute;
    z-index: 3;

    left: 4%;
    top: 52%;

    width: 38%;
    max-width: 430px;

    padding: 24px 28px;

    transform: translateY(-50%);

    background:
        rgba(226, 199, 151, 0.93);

    border: 1px solid rgba(91, 52, 27, 0.42);
    border-radius: 8px;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.42),
        inset 0 0 22px rgba(96, 57, 28, 0.12);

    color: #482819;
}


/* Title */
.jni-behind-card h1 {
    margin: 0 0 14px;

    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(1.7rem, 2.5vw, 2.7rem);
    font-weight: 400;
    line-height: 1;

    color: #6e351f;
}


/* Main copy */
.jni-behind-card p {
    margin: 0 0 12px;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.05rem, 1.35vw, 1.3rem);
    font-weight: 500;
    line-height: 1.22;
}


/* Final thought */
.jni-behind-card .jni-behind-statement {
    margin-bottom: 0;

    font-weight: 600;
    font-style: italic;

    color: #7c3d24;
}

/* =========================================================
   BEHIND THE ILLUSION — CONTINUE CUE
   ========================================================= */

.jni-behind-continue {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: max-content;
    margin: 16px auto 0;

    color: #6e351f !important;

    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    font-weight: 400;
    letter-spacing: 0.12em;

    text-decoration: none !important;

    opacity: 0;
    transform: translateY(8px);

    pointer-events: auto;
}

/* Small downward invitation */
.jni-behind-continue::after {
    content: "▼";

    display: block;

    margin-top: 2px;

    font-size: 0.85em;
line-height: 1;
letter-spacing: 0;

    animation:
        jni-behind-continue-pulse
        1800ms
        ease-in-out
        infinite;
}

/* Appear after Justin finishes dropping */
.jni-behind-hero.jni-behind-ready .jni-behind-continue {
    animation:
        jni-behind-continue-in
        700ms
        ease
        3900ms
        forwards;
}

.jni-behind-continue:hover,
.jni-behind-continue:focus-visible {
    color: #9a4d2d !important;
    text-decoration: none !important;
}

/* Warm shimmer across Continue + arrow */
.jni-behind-continue span,
.jni-behind-continue::after {
    background:
        linear-gradient(
            105deg,
            #6e351f 0%,
            #6e351f 38%,
            #f1dfc2 47%,
            #ffd98a 51%,
            #f1dfc2 55%,
            #6e351f 64%,
            #6e351f 100%
        );

    background-size: 260% 100%;
    background-position: 140% center;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    animation:
        jni-behind-continue-shimmer
        3.2s
        ease-in-out
        5.1s
        infinite;
}

@keyframes jni-behind-continue-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes jni-behind-continue-pulse {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.55;
    }

    50% {
        transform: translateY(5px);
        opacity: 1;
    }
}

@keyframes jni-behind-continue-shimmer {

    0%,
    18% {
        background-position: 140% center;
    }

    42% {
        background-position: -40% center;
    }

    100% {
        background-position: -40% center;
    }
}
 
/* =========================================================
   BEHIND THE ILLUSION — RIGGER DROP
   ========================================================= */
.jni-behind-rope {
    position: absolute;
    z-index: 49;
    

    left: 47.2%;
    top: 0%;

    width: 3px;
    height: 22.5%;
    background:
        linear-gradient(
            90deg,
            #10324f 0%,
            #2f79b1 35%,
            #1b4f7a 70%,
            #0d2a45 100%
        );

    box-shadow:
        1px 0 2px rgba(0, 0, 0, 0.45);
        opacity: 0;
        animation: none;

    pointer-events: none;
}


.jni-behind-rigger {
    display: block !important;

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

    width: 18% !important;
    aspect-ratio: 2 / 3;

    left: 40% !important;
    top: 22% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: none;

    opacity: 0;

    transform-origin: 50% 0%;

    filter:
        drop-shadow(0 8px 8px rgba(0, 0, 0, 0.38));

    animation: none;

    pointer-events: none;
}

/* Start Behind sequence only after hero photo is ready */
.jni-behind-hero.jni-behind-ready .jni-behind-rope {
    animation:
        jni-behind-rope-drop
        3200ms
        cubic-bezier(0.22, 0.61, 0.36, 1)
        450ms
        forwards;
}

.jni-behind-hero.jni-behind-ready .jni-behind-rigger {
    animation:
        jni-rigger-drop
        3200ms
        cubic-bezier(0.22, 0.61, 0.36, 1)
        450ms
        forwards;
}

/* Rigger artwork sits above the lower rope */
.jni-behind-rigger::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    background:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/Everetteventcenter_ME_only.png")
        center / contain
        no-repeat;

    pointer-events: none;
}


/* =========================================================
   BEHIND THE ILLUSION — ROPE CONTINUES BELOW RIGGER
   ========================================================= */

.jni-behind-rigger::after {
    content: "";

    position: absolute;
    z-index: -1;

    /* Starting point near bottom of left foot */
    left: 43%;
    top: 66%;

    width: 3px;

    /* Continue rope only to bottom of photo */
    height: 136%;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            #10324f 0%,
            #2f79b1 35%,
            #1b4f7a 70%,
            #0d2a45 100%
        );

    box-shadow:
        1px 0 2px rgba(0, 0, 0, 0.45);

    pointer-events: none;
}

@keyframes jni-rigger-drop {

    0% {
        opacity: 1;
        transform: translateY(-165%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes jni-behind-rope-drop {

    0% {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top center;
    }

    12% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top center;
    }
}


/* =========================================================
   BEHIND THE ILLUSION — GALLERY
   BEHIND THE SHOW
   ========================================================= */

.jni-gallery {
    width: min(92vw, 1100px);
    margin: 18px auto 68px;
}


/* ---------------------------------------------------------
   GALLERY HEADING
   --------------------------------------------------------- */

.jni-gallery-heading {
    width: min(90%, 760px);
    margin: 0 auto 22px;
    text-align: center;
}

.jni-gallery-heading .jni-project-eyebrow {
    margin-bottom: 5px;
}

.jni-gallery-heading h2 {
    margin: 0 0 10px;

    color: #61331f;

    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    font-weight: 400;
    line-height: 1;
}

.jni-gallery-intro {
    margin: 0;

    color: #4c3325;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    font-weight: 500;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   IMAGE STAGE
   --------------------------------------------------------- */

.jni-gallery-stage {
    position: relative;

    width: 100%;
    aspect-ratio: 1170 / 500;

    overflow: hidden;

    border-radius: 12px;

    background: rgba(48, 29, 17, 0.16);

    box-shadow:
        0 12px 28px rgba(45, 25, 12, 0.28),
        0 0 0 1px rgba(86, 50, 27, 0.24);
}

.jni-gallery-track {
    position: absolute;
    inset: 0;
}

.jni-gallery-slide {
    position: absolute;
    inset: 0;

    margin: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 700ms ease,
        visibility 0s linear 700ms;
}

.jni-gallery-slide.is-active {
    opacity: 1;
    visibility: visible;

    transition:
        opacity 700ms ease,
        visibility 0s;
}

.jni-gallery-slide img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;
    object-position: center;

    user-select: none;
}


/* ---------------------------------------------------------
   PREVIOUS / NEXT
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   PREVIOUS / NEXT — BELOW IMAGE
   --------------------------------------------------------- */

.jni-gallery-arrow {
    position: static;

    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0 0 3px;

    transform: none;

    border: 1px solid rgba(91, 52, 27, 0.48);
    border-radius: 50%;

    background: rgba(215, 190, 145, 0.24);

    color: #6e351f;

    font-family: Georgia, serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 2px 5px rgba(57, 39, 25, 0.16);

    transition:
        background-color 250ms ease,
        border-color 250ms ease,
        transform 250ms ease;
}

.jni-gallery-arrow:hover,
.jni-gallery-arrow:focus-visible {
    background: rgba(232, 207, 160, 0.48);
    border-color: rgba(91, 52, 27, 0.78);

    transform: scale(1.08);

    outline: none;
}


/* ---------------------------------------------------------
   DOTS + COUNTER
   --------------------------------------------------------- */

.jni-gallery-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    width: 100%;
    margin: 14px auto 0;
}

.jni-gallery-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.jni-gallery-dot {
    width: 9px;
    height: 9px;

    padding: 0;

    border: 1px solid rgba(91, 52, 27, 0.55);
    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition:
        background-color 250ms ease,
        transform 250ms ease;
}

.jni-gallery-dot.is-active {
    background: #8a4a2b;
    transform: scale(1.25);
}

.jni-gallery-count {
    margin: 0;

    color: #6e351f;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
   SMALL SCREENS
   --------------------------------------------------------- */

@media (max-width: 700px) {

    .jni-gallery {
        width: 94vw;
        margin-bottom: 52px;
    }

    .jni-gallery-heading {
        width: 92%;
        margin-bottom: 16px;
    }

    .jni-gallery-stage {
        border-radius: 8px;
    }

    .jni-gallery-arrow {
        width: 38px;
        height: 48px;

        font-size: 1.9rem;
    }

    .jni-gallery-arrow--previous {
        left: 6px;
    }

    .jni-gallery-arrow--next {
        right: 6px;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

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

    .jni-gallery-slide,
    .jni-gallery-arrow,
    .jni-gallery-dot {
        transition: none !important;
    }
}

/* =========================================================
   BEHIND THE ILLUSION — PROJECT STORY
   PAINTING LIGHT
   ========================================================= */

.jni-project-story {
    width: min(92vw, 1100px);
    margin: 34px auto 56px;

    display: grid;

    /* 34/66 split AFTER accounting for the gap */
    grid-template-columns:
        minmax(0, 34fr)
        minmax(0, 66fr);

    align-items: center;
    gap: 34px;

    padding: 28px 30px;
    box-sizing: border-box;

    border-top: 1px solid rgba(104, 60, 31, 0.30);
    border-bottom: 1px solid rgba(104, 60, 31, 0.22);
}


/* Reverse row — WIDE video left / narrow text right */
.jni-project-story.jni-project-story--reverse {
    grid-template-columns:
        minmax(0, 66fr)
        minmax(0, 34fr);
}

.jni-project-story--reverse .jni-project-video {
    grid-column: 1;
    grid-row: 1;
}

.jni-project-story--reverse .jni-project-story-copy {
    grid-column: 2;
    grid-row: 1;
}
.jni-project-story--reverse .jni-project-story-copy {
    grid-column: 2;
    grid-row: 1;
}

/* ---------------------------------------------------------
   PROJECT TEXT
   --------------------------------------------------------- */

.jni-project-story-copy {
    position: relative;
    z-index: 2;
}

.jni-project-eyebrow {
    margin: 0 0 8px;

    color: #8a4a2b;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.05em;
}

.jni-project-story-copy h2 {
    margin: 0 0 14px;

    color: #61331f;

    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 400;
    line-height: 1;
}

.jni-project-story-copy p {
    color: #4c3325;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.05rem, 1.35vw, 1.25rem);
    font-weight: 500;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   PROJECT VIDEO
   --------------------------------------------------------- */

.jni-project-video {
    position: relative;

    overflow: hidden;

    border-radius: 10px;
    width: 100%;
    aspect-ratio: 16 / 9;
    box-shadow:
        0 10px 24px rgba(45, 25, 12, 0.30),
        0 0 0 1px rgba(86, 50, 27, 0.34);
}

.jni-project-video-link {
    position: absolute;
    inset: 0;

    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0;

    overflow: hidden;

    background: #17100c;

    cursor: pointer;
    font: inherit;
    text-decoration: none !important;
}

.jni-project-video-link img {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    vertical-align: top !important;

    transition:
        transform 700ms ease,
        filter 700ms ease;
}


/* Play button */
.jni-project-play {
    position: absolute;
    z-index: 3;

    left: 50%;
    top: 50%;

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 5px;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(241, 223, 194, 0.82);
    border-radius: 50%;

    background: rgba(38, 21, 12, 0.72);

    color: #f1dfc2;

    font-size: 24px;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.42),
        0 0 16px rgba(168, 86, 50, 0.20);

    transition:
        transform 400ms ease,
        background-color 400ms ease;
}


/* Watch caption */
.jni-project-watch {
    position: absolute;
    z-index: 3;

    left: 50%;
    bottom: 7%;

    transform: translateX(-50%);

    color: #f1dfc2;

    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    letter-spacing: 0.07em;
    white-space: nowrap;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95);
}


/* Video hover */
.jni-project-video-link:hover img {
    transform: scale(1.035);

    filter:
        brightness(0.82)
        sepia(0.15);
}

.jni-project-video-link:hover .jni-project-play {
    transform:
        translate(-50%, -50%)
        scale(1.10);

    background: rgba(112, 53, 29, 0.84);
}

.jni-project-video iframe {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}  

/* ---------------------------------------------------------
   SMALL SCREENS
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .jni-project-story {
        grid-template-columns: 1fr;

        gap: 20px;

        padding: 22px 16px;
    }

    .jni-project-story-copy {
        text-align: center;
    }

    .jni-project-play {
        width: 58px;
        height: 58px;

        font-size: 20px;
    }
}

/* =========================================================
   TALK TO THE ARTIST — CONTACT HERO
   ========================================================= */

.jni-contact-hero {
    position: relative;

    width: min(88vw, 1100px);
    margin: 0 auto 12px;

    overflow: hidden;

    border-radius: 18px;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(98, 62, 33, 0.28);
}

/* Remove WordPress spacing around the Contact hero image */
.jni-contact-hero > p:first-child {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.jni-contact-hero > br:first-child {
    display: none !important;
}

/* Back to The Realm — row below Contact hero */
.jni-contact-return-row {
    width: min(88vw, 1100px);
    margin: 18px auto 42px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    text-align: center;
}

.jni-contact-return-row .jni-realm-return {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0;
    padding: 10px 20px 9px !important;

    font-size: clamp(0.95rem, 1.05vw, 1.08rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.jni-contact-photo {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 !important;
    padding: 0 !important;
    filter:
    sepia(0)
    saturate(1)
    contrast(1)
    brightness(1);

animation:
    jni-contact-photo-sepia 2200ms ease 1800ms forwards;
}

@keyframes jni-contact-photo-sepia {
    from {
        filter:
            sepia(0)
            saturate(1)
            contrast(1)
            brightness(1);
    }

    to {
        filter:
            sepia(0.62)
            saturate(0.82)
            contrast(1.03)
            brightness(0.78);
    }
}

/* Contact page custom title */
.jni-contact-title {
    position: absolute;
    z-index: 3;

    top: 11%;
    left: 8%;

   display: flex;
   flex-direction: row;
      gap: 0.22em;

    color: #f1dfc2;

    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(1.9rem, 3.3vw, 3.6rem);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;

   -webkit-text-stroke: 1px rgba(55, 30, 15, 0.88);

text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.90),
    0 4px 8px rgba(0, 0, 0, 0.65),
    0 0 10px rgba(168, 86, 50, 0.28);

    pointer-events: none;
}

.jni-contact-title span {
    display: block;
    margin: 0;
    padding: 0;
}

/* =========================================================
   TALK TO THE ARTIST — HANGING CONTACT REVEAL
   ========================================================= */

.jni-contact-lines {
    position: absolute;
    z-index: 5;

    inset: 0;

    pointer-events: none;
}


/* Individual hanging contact item */
.jni-contact-drop {
    --jni-drop-depth: calc(clamp(170px, 22vw, 250px) + 60px);

    position: absolute;
    top: 0;
    width: max-content;

    gap: 0 !important;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: var(--jni-drop-depth);

    text-decoration: none !important;

    opacity: 0;
    transform: translateY(-180px);

    pointer-events: auto;
}

/* Chain — anchored to the top of the Contact hero */
/* Do not draw chain from the drop container */
.jni-contact-drop::before {
    display: none !important;
}

/* EMAIL */
.jni-contact-drop--email {
    left: 12%;

    animation:
        jni-contact-drop-in
        1100ms
        cubic-bezier(.22,.85,.32,1.12)
        4300ms
        forwards;
}


/* PHONE */
.jni-contact-drop--phone {
    left: 70%;

    animation:
        jni-contact-drop-in
        1100ms
        cubic-bezier(.22,.85,.32,1.12)
        4850ms
        forwards;
}


/* Hanging rope */
/* Old rope span no longer draws anything */
.jni-contact-rope {
    display: none !important;
}

/* Rigging-style contact plate */
.jni-contact-tag {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 245px;
    min-height: 155px;

    padding: 18px 24px 20px;

    box-sizing: border-box;
    justify-content: center;

    margin: 0 !important;
    overflow: visible;

    border: 1px solid rgba(55, 48, 41, .95);
    border-radius: 2px;

    background:
    radial-gradient(
        circle at 12px 12px,
        rgba(205, 198, 185, 0.95) 0 1.5px,
        rgba(120, 113, 102, 0.95) 2.2px,
        rgba(38, 37, 34, 0) 4.6px
    ),
    radial-gradient(
        circle at calc(100% - 12px) 12px,
        rgba(205, 198, 185, 0.95) 0 1.5px,
        rgba(120, 113, 102, 0.95) 2.2px,
        rgba(38, 37, 34, 0) 4.6px
    ),
    radial-gradient(
        circle at 12px calc(100% - 12px),
        rgba(205, 198, 185, 0.95) 0 1.5px,
        rgba(120, 113, 102, 0.95) 2.2px,
        rgba(38, 37, 34, 0) 4.6px
    ),
    radial-gradient(
        circle at calc(100% - 12px) calc(100% - 12px),
        rgba(205, 198, 185, 0.95) 0 1.5px,
        rgba(120, 113, 102, 0.95) 2.2px,
        rgba(38, 37, 34, 0) 4.6px
    ),
    linear-gradient(
        180deg,
        rgba(73, 70, 64, .96) 0%,
        rgba(38, 37, 34, .97) 48%,
        rgba(24, 23, 21, .98) 100%
    );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(0,0,0,.75),
        0 7px 14px rgba(0,0,0,.38);

    color: #f1dfc2;

    font-family: "Cormorant Garamond", Georgia, serif;
    text-align: center;

    text-shadow:
        0 1px 2px rgba(0,0,0,.9);
}


/* Metal eye / shackle where the rope meets the plate */
.jni-contact-tag::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 50%;

    width: 20px;
    height: 15px;

    transform: translateX(-50%);

    border: 3px solid #777066;
    border-bottom: 0;

    border-radius: 12px 12px 0 0;

    box-shadow:
        inset 1px 0 rgba(255,255,255,.25),
        0 1px 2px rgba(0,0,0,.65);
}

/* Chain — centered directly over the shackle */
.jni-contact-tag::after {
    content: "";

    position: absolute;
    z-index: -1;

    left: 50%;
    bottom: calc(100% + 9px);

    width: 18px;
    height: calc(var(--jni-drop-depth) + 70px);

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse 5px 7px at center,
            transparent 42%,
            rgba(205, 200, 192, 0.98) 43% 55%,
            rgba(92, 88, 82, 0.96) 56% 68%,
            transparent 69%
        ) center top / 14px 22px repeat-y,

        radial-gradient(
            ellipse 5px 7px at center,
            transparent 42%,
            rgba(170, 165, 156, 0.96) 43% 55%,
            rgba(70, 67, 62, 0.96) 56% 68%,
            transparent 69%
        ) center 11px / 14px 22px repeat-y;

    filter:
        drop-shadow(0 1px 1px rgba(255,255,255,.12))
        drop-shadow(0 1px 2px rgba(0,0,0,.45));

    pointer-events: none;
}

.jni-contact-tag small {
    margin-bottom: 2px;

    color: #c77a48;

    font-family: "Marcellus", Georgia, serif;
    font-size: 1rem;
    font-weight: 600;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.jni-contact-tag strong {
    margin-top: 12px;

    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(1.25rem, 1.65vw, 1.6rem);
    font-weight: 400;

    line-height: 1.15;
    white-space: nowrap;

    color: #f6e7ca;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, .95),
        0 0 5px rgba(0, 0, 0, .55);
}


/* Drop-and-settle */
@keyframes jni-contact-drop-in {

    0% {
        opacity: 0;
        transform: translateY(-180px);
    }

    70% {
        opacity: 1;
        transform: translateY(7px);
    }

    86% {
        transform: translateY(-3px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =========================================================
   TELL ME YOUR DREAMS — HERO + STORY
   ========================================================= */

.jni-dream-page {
    position: relative;

    width: min(92vw, 1200px);

    left: 50%;
    transform: translateX(-50%);

    margin: 0 0 48px;
}

.jni-dream-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    isolation: isolate;
    border-radius: 18px;
    background: #1b120c;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(98, 62, 33, 0.28);
}

.jni-dream-photo {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    object-position: center center;

    /* Begin in full color and full brightness. */
    filter:
        brightness(1)
        contrast(1)
        saturate(1);

    transform: scale(1.025);

    animation:
        jni-dream-photo-settle
        7200ms
        cubic-bezier(0.22, 0.61, 0.36, 1)
        forwards,

        jni-dream-photo-darken
        1900ms
        ease
        4900ms
        forwards;
}

.jni-dream-shade {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(12, 8, 5, 0.20) 0%,
            rgba(12, 8, 5, 0.28) 32%,
            rgba(12, 8, 5, 0.42) 58%,
            rgba(8, 5, 3, 0.78) 100%
        ),
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 224, 165, 0.00) 0%,
            rgba(10, 6, 4, 0.36) 100%
        );

    opacity: 0;

    animation:
        jni-dream-shade-in
        1900ms
        ease
        4900ms
        forwards;
}

.jni-dream-title {
    position: absolute;
    z-index: 4;
    top: clamp(26px, 5vw, 68px);
    right: 6%;
    left: 6%;
    margin: 0;
    color: #f3dfbf !important;
    -webkit-text-stroke: 0.45px rgba(77, 39, 18, 0.58);
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(2.8rem, 6vw, 5.8rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: 0.015em;
    text-align: center;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.88),
        0 0 10px rgba(255, 225, 178, 0.34),
        0 0 24px rgba(255, 206, 132, 0.24);
    opacity: 0;

    transform:
        translateY(18px)
        scale(0.94);animation:
        jni-dream-title-dream-in
        3600ms
        cubic-bezier(0.22, 0.61, 0.36, 1)
        1800ms
        forwards;
}

.jni-dream-invitation {
    position: absolute;
    z-index: 4;
    left: 7%;
    bottom: 16%;
    width: min(82%, 900px);
    margin: 0;
    color: #ffffff !important;
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(1.65rem, 2.8vw, 2.7rem);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: 0.01em;
    text-shadow:
        0 2px 3px rgba(0, 0, 0, 1),
        0 0 6px rgba(0, 0, 0, 0.96),
        0 0 14px rgba(0, 0, 0, 0.82);
    opacity: 0;
    transform: translateY(16px);

    animation:
        jni-dream-copy-in
        1500ms
        ease
        6500ms
        forwards;
}

.jni-dream-invitation span {
    display: block;
}

.jni-dream-actions {
    position: absolute;
    z-index: 5;

    left: 50%;
    bottom: 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    width: min(92%, 620px);

    opacity: 0;
    transform: translate(-50%, 10px);

    animation:
        jni-dream-continue-in
        1100ms
        ease
        8300ms
        forwards;
}

.jni-dream-continue,
.jni-dream-contact {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 220px;
    padding: 10px 24px 8px;

    border: 1px solid rgba(139, 78, 39, 0.82);
    border-radius: 3px;

    background: rgba(27, 16, 9, 0.58);
    color: #e3b06f !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(1.05rem, 1.45vw, 1.3rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.10em;
    text-align: center;
    text-decoration: none !important;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.36),
        inset 0 0 12px rgba(255, 235, 190, 0.08);

    backdrop-filter: blur(3px);

    transition:
        border-color 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease,
        letter-spacing 250ms ease;
}

.jni-dream-continue::after {
    content: "▼";
    display: block;
    margin-top: 5px;
    font-size: 0.72em;
    line-height: 1;
    letter-spacing: 0;
    animation: jni-dream-arrow-pulse 1800ms ease-in-out infinite;
}

.jni-dream-contact::after {
    content: "→";
    display: block;

    margin-top: 5px;

    font-size: 0.78em;
    line-height: 1;
    letter-spacing: 0;

    opacity: 0.78;
}

.jni-dream-continue:hover,
.jni-dream-continue:focus-visible,
.jni-dream-contact:hover,
.jni-dream-contact:focus-visible {
    color: #fff1d3 !important;
    border-color: rgba(255, 235, 198, 0.96);
    background: rgba(52, 28, 14, 0.54);
    letter-spacing: 0.13em;
    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.38),
        0 0 16px rgba(184, 95, 27, 0.18);
    text-decoration: none !important;
}

.jni-dream-story {
    width: min(88%, 900px);
    max-width: 900px;

    margin: 42px auto 0;
    padding: clamp(28px, 4vw, 48px);

    box-sizing: border-box;

    scroll-margin-top: 28px;
    color: #38271d;

    background: rgba(238, 217, 177, 0.24);
    border: 1px solid rgba(92, 55, 29, 0.18);
    border-radius: 12px;

    box-shadow:
        inset 0 0 30px rgba(255, 241, 211, 0.10),
        0 10px 24px rgba(58, 35, 20, 0.08);
}

.jni-dream-story p {
    max-width: 760px;
    margin: 0 auto 1.25em;
    color: #38271d !important;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.18rem, 1.7vw, 1.45rem);
    font-weight: 500;
    line-height: 1.55;
    text-shadow: 0 1px 0 rgba(255, 239, 204, 0.32);
}

.jni-dream-story strong {
    color: #5f321d;
    font-weight: 700;
}

.jni-dream-story em {
    color: #6b3b25;
}

.jni-dream-story-callout {
    margin: 1.7em auto !important;
    color: #5f321d !important;
    font-size: clamp(1.35rem, 2vw, 1.7rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center;
}

.jni-dream-lessons {
    max-width: 720px;
    margin: 0 auto 1.8em;
    padding: 20px 24px;
    border-top: 1px solid rgba(92, 55, 29, 0.20);
    border-bottom: 1px solid rgba(92, 55, 29, 0.20);
}

.jni-dream-lessons p {
    margin-bottom: 0.4em;
}

.jni-dream-questions {
    max-width: 680px;
    margin: 1.8em auto;
    padding: 20px 24px;
    text-align: center;
    background: rgba(255, 244, 218, 0.16);
    border-radius: 8px;
}

.jni-dream-closing {
    margin-top: 2em !important;
    margin-bottom: 0 !important;
    color: #5f321d !important;
    font-size: clamp(1.45rem, 2.2vw, 1.9rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center;
}

.jni-dream-return-row {
    width: 100%;
    margin: 18px auto 0;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    text-align: center;
}

.jni-dream-return-row .jni-realm-return {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0;
    padding: 10px 20px 9px !important;
    font-size: clamp(0.95rem, 1.05vw, 1.08rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .jni-dream-return-row {
        gap: 10px;
    }

    .jni-dream-return-row .jni-realm-return {
        padding: 9px 14px 8px !important;
        font-size: 0.92rem !important;
    }
}


@keyframes jni-dream-photo-darken {
    from {
        filter:
            brightness(1)
            contrast(1)
            saturate(1);
    }

    to {
        filter:
            brightness(0.58)
            contrast(1.06)
            saturate(0.82);
    }
}

@keyframes jni-dream-shade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes jni-dream-title-dream-in {
    0% {
        opacity: 0;
        transform:
            translateY(10px)
            scale(0.975);
    }

    42% {
        opacity: 0.48;
        transform:
            translateY(5px)
            scale(0.988);
    }

    78% {
        opacity: 0.90;
        transform:
            translateY(1px)
            scale(0.998);
    }

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

@keyframes jni-dream-photo-settle {
    from { transform: scale(1.025); }
    to { transform: scale(1); }
}

@keyframes jni-dream-title-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes jni-dream-copy-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes jni-dream-continue-in {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes jni-dream-arrow-pulse {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50% { transform: translateY(4px); opacity: 1; }
}

@media (max-width: 900px) {
    .jni-dream-hero {
        aspect-ratio: 4 / 5;
    }

    .jni-dream-title {
        top: 5%;
        right: 5%;
        left: 5%;
        font-size: clamp(2.45rem, 10vw, 4.2rem);
    }

    .jni-dream-invitation {
        left: 7%;
        right: 7%;
        bottom: 16%;
        width: auto;
        font-size: clamp(1.35rem, 5.6vw, 2.05rem);
    }

    .jni-dream-actions {
        bottom: 14px;
        gap: 10px;
        width: 92%;
    }

    .jni-dream-continue,
    .jni-dream-contact {
        min-width: 0;
        width: 50%;
        padding: 9px 12px 7px;
        font-size: clamp(0.92rem, 3.8vw, 1.12rem);
    }

    .jni-dream-story {
        width: 94%;
        margin-top: 28px;
        padding: 24px 20px;
    }

    .jni-dream-lessons,
    .jni-dream-questions {
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jni-dream-photo,
    .jni-dream-title,
    .jni-dream-invitation,
    .jni-dream-actions,
    .jni-dream-continue::after {
        animation: none !important;
        transition: none !important;
    }

    .jni-dream-photo {
        transform: scale(1);

        filter:
            brightness(0.58)
            contrast(1.06)
            saturate(0.82);
    }

    .jni-dream-shade {
        opacity: 1;
    }

    .jni-dream-title,
    .jni-dream-invitation,
    .jni-dream-actions {
        opacity: 1;
    }

    .jni-dream-title,
    .jni-dream-invitation {
        transform: none;
    }

    .jni-dream-actions {
        transform: translate(-50%, 0);
    }
}


/* =========================================================
   TALK TO THE ARTIST — CONVERSATION + DIRECT CONTACT FORM
   ========================================================= */

.jni-contact-page {
    width: 100%;
}

.jni-contact-conversation {
    width: min(88vw, 900px);
    margin: 34px auto 0;
    padding: clamp(28px, 4vw, 48px);

    box-sizing: border-box;

    color: #38271d;

    background: rgba(238, 217, 177, 0.24);

    border: 1px solid rgba(92, 55, 29, 0.18);
    border-radius: 12px;

    box-shadow:
        inset 0 0 30px rgba(255, 241, 211, 0.10),
        0 10px 24px rgba(58, 35, 20, 0.08);
}

.jni-contact-conversation h2 {
    max-width: 760px;
    margin: 0 auto 22px;

    color: #5f321d !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 600;
    line-height: 1.12;
    text-align: center;

    text-shadow: 0 1px 0 rgba(255, 239, 204, 0.35);
}

.jni-contact-conversation > p {
    max-width: 720px;
    margin: 0 auto 1.15em;

    color: #38271d !important;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.18rem, 1.7vw, 1.45rem);
    font-weight: 500;
    line-height: 1.5;

    text-shadow: 0 1px 0 rgba(255, 239, 204, 0.28);
}

.jni-contact-quick-actions {
    max-width: 660px;
    margin: 28px auto 30px;

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

.jni-contact-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 78px;
    padding: 12px 18px;

    box-sizing: border-box;

    border: 1px solid rgba(90, 52, 29, 0.62);
    border-radius: 3px;

    background: rgba(215, 190, 145, 0.22);

    color: #5b321f !important;
    text-decoration: none !important;

    box-shadow:
        0 2px 5px rgba(57, 39, 25, 0.16),
        inset 0 0 12px rgba(255, 235, 190, 0.10);

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}

.jni-contact-action span {
    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(1.35rem, 1.9vw, 1.65rem);
    font-weight: 600;
    letter-spacing: 0.07em;
}

.jni-contact-action small {
    margin-top: 8px;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.22rem, 1.65vw, 1.48rem);
    font-weight: 700;
    letter-spacing: 0.03em;

    opacity: 0.96;
}

.jni-contact-action:hover,
.jni-contact-action:focus-visible {
    color: #4a2818 !important;

    border-color: rgba(57, 39, 25, 0.88);
    background: rgba(232, 207, 160, 0.44);

    transform: translateY(-2px);

    box-shadow:
        0 5px 10px rgba(57, 39, 25, 0.22),
        0 0 14px rgba(184, 95, 27, 0.13);

    text-decoration: none !important;
}

.jni-contact-form-intro {
    margin-top: 32px !important;
    margin-bottom: 22px !important;

    text-align: center;
}

.jni-contact-form-wrap {
    max-width: 720px;
    margin: 0 auto;
}

.jni-contact-form-status {
    margin: 0 0 18px;
    padding: 11px 14px;

    border: 1px solid rgba(92, 55, 29, 0.26);
    border-radius: 4px;

    background: rgba(255, 244, 218, 0.28);

    color: #4e2d1e;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.jni-contact-form-status--success {
    padding: 14px 18px;

    border: 2px solid rgba(92, 111, 68, 0.88);

    background:
        rgba(226, 226, 186, 0.78);

    color: #354225;

    font-size: clamp(1.12rem, 1.5vw, 1.3rem);
    font-weight: 700;

    box-shadow:
        0 5px 14px rgba(55, 68, 39, 0.18),
        inset 0 0 14px rgba(255, 252, 222, 0.34);
}

.jni-contact-form-status--success::before {
    content: "✓";
    display: inline-block;

    margin-right: 9px;

    font-family: Arial, sans-serif;
    font-size: 1.15em;
    font-weight: 700;
}

.jni-contact-form-status--error {
    border-color: rgba(132, 62, 42, 0.48);
}

.jni-contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
}

.jni-contact-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.jni-contact-field--message,
.jni-contact-submit-row {
    grid-column: 1 / -1;
}

.jni-contact-field label {
    color: #5f321d;

    font-family: "Marcellus", Georgia, serif;
    font-size: 0.96rem;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.jni-contact-field input,
.jni-contact-field textarea {
    width: 100%;

    padding: 11px 12px;

    box-sizing: border-box;

    border: 1px solid rgba(86, 52, 31, 0.42);
    border-radius: 4px;

    background: rgba(255, 246, 224, 0.52);
    color: #322118;

    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.4;

    box-shadow:
        inset 0 1px 3px rgba(60, 35, 20, 0.08);

    outline: none;

    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.jni-contact-field textarea {
    min-height: 170px;
    resize: vertical;
}

.jni-contact-field input:focus,
.jni-contact-field textarea:focus {
    border-color: rgba(184, 95, 27, 0.72);
    background: rgba(255, 248, 231, 0.72);

    box-shadow:
        inset 0 1px 3px rgba(60, 35, 20, 0.06),
        0 0 0 3px rgba(184, 95, 27, 0.10);
}

.jni-contact-hp {
    position: absolute !important;
    left: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}

.jni-contact-submit-row {
    display: flex;
    justify-content: center;

    margin-top: 4px;
}

.jni-contact-submit {
    min-width: 245px;
    padding: 12px 24px 11px;

    border: 1px solid rgba(57, 39, 25, 0.72);
    border-radius: 3px;

    background: rgba(74, 43, 26, 0.07);

    color: #5b321f;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.05rem, 1.45vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.10em;

    cursor: pointer;

    box-shadow:
        0 2px 5px rgba(57, 39, 25, 0.16),
        inset 0 0 12px rgba(255, 235, 190, 0.08);

    transition:
        transform 250ms ease,
        border-color 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}

.jni-contact-submit:hover,
.jni-contact-submit:focus-visible {
    border-color: rgba(57, 39, 25, 0.94);
    background: rgba(184, 95, 27, 0.08);

    transform: translateY(-2px);

    box-shadow:
        0 5px 10px rgba(57, 39, 25, 0.22),
        0 0 14px rgba(184, 95, 27, 0.13);
}

@media (max-width: 700px) {
    .jni-contact-conversation {
        width: 92vw;
        padding: 26px 20px;
    }

    .jni-contact-quick-actions,
    .jni-contact-form {
        grid-template-columns: 1fr;
    }

    .jni-contact-field--message,
    .jni-contact-submit-row {
        grid-column: auto;
    }

    .jni-contact-action {
        min-height: 70px;
    }

    .jni-contact-return-row {
        gap: 10px;
    }

    .jni-contact-return-row .jni-realm-return {
        padding: 9px 14px 8px !important;
        font-size: 0.92rem !important;
    }
}


/* =========================================================
   CONTACT PAGE — FINAL READABILITY OVERRIDES
   High specificity is intentional: these must win over
   inherited theme typography.
   ========================================================= */

.jni-contact-conversation
.jni-contact-quick-actions
a.jni-contact-action
span {
    font-family: "Marcellus", Georgia, serif !important;
    font-size: clamp(1.6rem, 2.25vw, 2rem) !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.055em !important;
}

.jni-contact-conversation
.jni-contact-quick-actions
a.jni-contact-action
small {
    display: block !important;

    margin-top: 12px !important;

    color: #4b291b !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(1.38rem, 1.9vw, 1.7rem) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.02em !important;

    opacity: 1 !important;
}

.jni-contact-conversation
.jni-contact-form-wrap
.jni-contact-form-status.jni-contact-form-status--success {
    position: relative;

    margin: 0 0 24px !important;
    padding: 17px 22px 17px 58px !important;

    border: 2px solid #667845 !important;
    border-radius: 6px !important;

    background:
        linear-gradient(
            135deg,
            rgba(229, 232, 191, 0.96),
            rgba(208, 216, 164, 0.92)
        ) !important;

    color: #26331c !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(1.25rem, 1.7vw, 1.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: left !important;

    box-shadow:
        0 5px 15px rgba(43, 56, 29, 0.22),
        inset 0 0 18px rgba(255, 255, 224, 0.35) !important;
}

.jni-contact-conversation
.jni-contact-form-wrap
.jni-contact-form-status.jni-contact-form-status--success::before {
    content: "✓";

    position: absolute;
    top: 50%;
    left: 20px;

    transform: translateY(-50%);

    color: #405528 !important;

    font-family: Arial, sans-serif !important;
    font-size: 1.7rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}