:root {
    color-scheme: dark;

    --black: #050407;
    --ash: #17141d;
    --ash-soft: #25202d;
    --gold: #d5ad53;
    --gold-bright: #ffe2a0;
    --lavender: #c8a9ff;
    --purple: #7e47bc;
    --purple-deep: #291538;
    --pink: #f06fd4;
    --white: #faf7ff;
    --muted: #b9afc3;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--black);
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--white);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(126, 71, 188, 0.38),
            transparent 39rem
        ),
        radial-gradient(
            circle at 8% 42%,
            rgba(240, 111, 212, 0.13),
            transparent 28rem
        ),
        radial-gradient(
            circle at 92% 48%,
            rgba(213, 173, 83, 0.1),
            transparent 24rem
        ),
        linear-gradient(
            145deg,
            #040306,
            #121018 51%,
            #08070b
        );
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -3;
    content: "";
    pointer-events: none;
    opacity: 0.31;
    background-image:
        radial-gradient(
            circle,
            rgba(255, 226, 160, 0.75) 0 1px,
            transparent 1.6px
        );
    background-size: 58px 58px;
    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 82%
        );
}

.tarot-atmosphere {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.76),
            transparent 23% 77%,
            rgba(0, 0, 0, 0.76)
        );
}

.tarot-shell {
    width: min(1220px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 44px;
}

.tarot-header {
    position: relative;
    max-width: 900px;
    margin: 0 auto 24px;
    text-align: center;
}

.return-link {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--gold-bright);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.return-link:hover,
.return-link:focus-visible {
    color: var(--white);
    text-shadow: 0 0 12px rgba(200, 169, 255, 0.8);
}

.eyebrow {
    margin: 0;
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.32em;
}

h1 {
    margin: 9px 0 8px;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(2.4rem, 7vw, 5rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: 0.035em;
    text-shadow:
        0 0 20px rgba(200, 169, 255, 0.48),
        0 0 44px rgba(240, 111, 212, 0.18);
}

.intro {
    max-width: 700px;
    margin: 14px auto 0;
    color: var(--muted);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: clamp(0.95rem, 2.2vw, 1.12rem);
    line-height: 1.65;
}

.question-panel {
    width: min(760px, 100%);
    margin: 0 auto 24px;
    padding: 15px;
    border: 1px solid rgba(213, 173, 83, 0.29);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(37, 31, 45, 0.94),
            rgba(11, 9, 15, 0.91)
        );
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.36),
        inset 0 1px rgba(255, 255, 255, 0.045),
        0 0 28px rgba(126, 71, 188, 0.08);
}

.question-panel label {
    display: block;
    margin-bottom: 9px;
    color: var(--gold-bright);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.question-panel input {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid rgba(200, 169, 255, 0.28);
    border-radius: 12px;
    outline: none;
    color: var(--white);
    font: inherit;
    background: rgba(0, 0, 0, 0.36);
}

.question-panel input:focus {
    border-color: var(--lavender);
    box-shadow:
        0 0 0 3px rgba(200, 169, 255, 0.13),
        0 0 20px rgba(126, 71, 188, 0.18);
}

.question-panel input::placeholder {
    color: #93889d;
}

.question-panel p {
    margin: 8px 2px 0;
    color: #918899;
    font-size: 0.72rem;
}

.reading-table {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 28px);
    max-width: 1050px;
    margin: 0 auto;
}

.reading-position {
    min-width: 0;
    text-align: center;
}

.position-label {
    margin: 0 0 9px;
    color: var(--gold-bright);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.card-stage {
    width: min(100%, 238px);
    aspect-ratio: 7 / 12;
    margin: 0 auto;
    perspective: 1300px;
}

.empty-card,
.tarot-card {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(213, 173, 83, 0.51);
    border-radius: 16px;
}

.empty-card {
    display: grid;
    place-content: center;
    gap: 8px;
    color: rgba(255, 226, 160, 0.7);
    background:
        repeating-radial-gradient(
            circle at center,
            rgba(213, 173, 83, 0.12) 0 2px,
            transparent 3px 14px
        ),
        linear-gradient(
            145deg,
            rgba(32, 26, 40, 0.86),
            rgba(7, 5, 10, 0.95)
        );
    box-shadow:
        inset 0 0 42px rgba(200, 169, 255, 0.1),
        0 20px 45px rgba(0, 0, 0, 0.46);
}

.empty-card span {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 3rem;
}

.empty-card small {
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.tarot-card {
    display: block;
    padding: 0;
    cursor: pointer;
    appearance: none;
    color: inherit;
    background: transparent;
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.56),
        0 0 26px rgba(126, 71, 188, 0.16);
}

.tarot-card:focus-visible {
    outline: 3px solid var(--pink);
    outline-offset: 5px;
}

.card-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transform-style: preserve-3d;
    transition:
        transform 760ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tarot-card.is-flipped .card-inner {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    backface-visibility: hidden;
}

.card-back {
    display: grid;
    place-content: center;
    border: 7px solid #17121f;
    background:
        radial-gradient(
            circle,
            rgba(255, 226, 160, 0.98) 0 4px,
            transparent 5px
        ),
        repeating-conic-gradient(
            from 0deg,
            rgba(213, 173, 83, 0.54) 0deg 4deg,
            transparent 4deg 15deg
        ),
        radial-gradient(
            circle at center,
            #653887,
            #2b1738 55%,
            #0c0811
        );
    box-shadow:
        inset 0 0 0 2px rgba(213, 173, 83, 0.76),
        inset 0 0 0 9px rgba(7, 5, 10, 0.74);
}

.card-back::before,
.card-back::after {
    position: absolute;
    inset: 15%;
    content: "";
    border: 1px solid rgba(255, 226, 160, 0.66);
    transform: rotate(45deg);
}

.card-back::after {
    inset: 25%;
    border-color: rgba(240, 111, 212, 0.59);
    transform: rotate(0deg);
}

.card-back-mark {
    position: relative;
    z-index: 2;
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 2.1rem;
    text-shadow:
        0 0 16px rgba(255, 226, 160, 0.74),
        0 0 28px rgba(200, 169, 255, 0.46);
}

.card-front {
    background: #09070c;
    transform: rotateY(180deg);
}

.card-front img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-front img.is-reversed {
    transform: rotate(180deg);
}

.orientation-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 999px;
    color: white;
    font-size: 0.57rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    background: rgba(28, 9, 20, 0.86);
    backdrop-filter: blur(8px);
}

.card-caption {
    min-height: 54px;
    margin-top: 10px;
}

.card-caption strong,
.card-caption span {
    display: block;
}

.card-caption strong {
    color: var(--white);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 1rem;
}

.card-caption span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.75rem;
}

.reading-summary {
    width: min(820px, 100%);
    margin: 24px auto 0;
    padding: 14px 18px;
    border-top: 1px solid rgba(213, 173, 83, 0.23);
    border-bottom: 1px solid rgba(213, 173, 83, 0.23);
    text-align: center;
}

#question-echo {
    margin: 0;
    color: var(--gold-bright);
    font-family:
        Georgia,
        "Times New Roman",
        serif;
    font-size: 1rem;
}

#reading-status {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.reading-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.reading-controls button {
    min-width: 138px;
    padding: 11px 18px;
    border: 1px solid rgba(213, 173, 83, 0.45);
    border-radius: 999px;
    cursor: pointer;
    color: var(--gold-bright);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    background:
        linear-gradient(
            145deg,
            rgba(46, 36, 55, 0.96),
            rgba(14, 11, 18, 0.96)
        );
}

.reading-controls button:hover:not(:disabled),
.reading-controls button:focus-visible:not(:disabled) {
    border-color: var(--gold-bright);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.38),
        0 0 18px rgba(200, 169, 255, 0.2);
}

.reading-controls button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.reading-controls .primary-control {
    color: #160f1d;
    border-color: var(--gold-bright);
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-bright)
        );
}

.foundation-note {
    width: min(820px, 100%);
    margin: 20px auto 0;
    padding: 12px 15px;
    border: 1px solid rgba(200, 169, 255, 0.21);
    border-radius: 13px;
    color: #aaa1b3;
    font-size: 0.72rem;
    line-height: 1.55;
    background: rgba(11, 9, 14, 0.62);
}

.foundation-note strong {
    color: var(--lavender);
}

footer {
    max-width: 760px;
    margin: 22px auto 0;
    color: #79717f;
    font-size: 0.66rem;
    line-height: 1.5;
    text-align: center;
}

.deal-in {
    animation: deal-in 620ms both;
}

@keyframes deal-in {
    from {
        opacity: 0;
        transform:
            translateY(-28px)
            rotate(-3deg)
            scale(0.94);
    }

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

@media (max-width: 760px) {
    .tarot-shell {
        width: min(100% - 20px, 560px);
        padding-top: 18px;
    }

    .tarot-header {
        padding-top: 30px;
    }

    .return-link {
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .reading-table {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .card-stage {
        width: min(68vw, 238px);
    }

    .card-caption {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

/* SAGE_TAROT_DESKTOP_VIEWPORT_FIT_20260729 START */

/*
 * Desktop only:
 * Fit the entire reading interface inside the visible browser area.
 * Mobile and narrow screens retain normal document scrolling.
 */

@media (min-width: 900px) and (min-height: 650px) {
    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .tarot-shell {
        width: min(
            1280px,
            calc(100% - 28px)
        );

        height: 100vh;
        height: 100dvh;

        margin: 0 auto;
        padding: 10px 0 8px;

        display: grid;

        grid-template-rows:
            auto
            auto
            minmax(0, 1fr)
            auto
            auto
            auto;

        align-content: stretch;
        row-gap: 6px;

        overflow: hidden;
    }

    .tarot-header {
        max-width: 1080px;
        margin: 0 auto;
    }

    .return-link {
        top: 2px;
        font-size: 0.61rem;
    }

    .eyebrow {
        font-size: 0.57rem;
        letter-spacing: 0.28em;
    }

    h1 {
        margin: 4px 0;
        font-size: clamp(
            2.45rem,
            4.15vw,
            4rem
        );
        line-height: 0.92;
    }

    .intro {
        max-width: 900px;
        margin: 6px auto 0;
        font-size: 0.84rem;
        line-height: 1.3;
    }

    .question-panel {
        width: min(820px, 100%);
        margin: 0 auto;
        padding: 8px 10px;
        border-radius: 14px;
    }

    .question-panel label {
        margin-bottom: 5px;
        font-size: 0.61rem;
    }

    .question-panel input {
        padding: 8px 11px;
        border-radius: 10px;
        font-size: 0.82rem;
    }

    .question-panel p {
        margin: 4px 2px 0;
        font-size: 0.6rem;
    }

    .reading-table {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-width: 1120px;

        margin: 0 auto;

        gap: clamp(
            16px,
            2vw,
            26px
        );

        align-items: start;
    }

    .reading-position {
        min-height: 0;

        display: grid;

        grid-template-rows:
            auto
            minmax(0, 1fr)
            auto;

        align-items: start;
    }

    .position-label {
        margin: 0 0 4px;
        font-size: 0.82rem;
    }

    .card-stage {
        width: auto;
        height: clamp(
            225px,
            36vh,
            320px
        );

        max-width: 100%;
        margin: 0 auto;

        aspect-ratio: 7 / 12;
    }

    .card-caption {
        min-height: 36px;
        margin-top: 5px;
    }

    .card-caption strong {
        font-size: 0.84rem;
    }

    .card-caption span {
        margin-top: 1px;
        font-size: 0.63rem;
    }

    .reading-summary {
        width: min(880px, 100%);
        margin: 0 auto;
        padding: 5px 12px;
    }

    #question-echo {
        font-size: 0.82rem;
    }

    #reading-status {
        margin: 2px 0 0;
        font-size: 0.66rem;
    }

    .reading-controls {
        margin: 0;
        gap: 8px;
    }

    .reading-controls button {
        min-width: 124px;
        padding: 8px 14px;
        font-size: 0.62rem;
    }

    .foundation-note {
        width: min(880px, 100%);
        margin: 0 auto;
        padding: 6px 10px;
        font-size: 0.59rem;
        line-height: 1.3;
    }

    footer {
        max-width: 900px;
        margin: 0 auto;
        font-size: 0.56rem;
        line-height: 1.2;
    }
}

@media (
    min-width: 900px
) and (
    min-height: 650px
) and (
    max-height: 740px
) {
    .tarot-shell {
        padding-top: 7px;
        padding-bottom: 5px;
        row-gap: 4px;
    }

    h1 {
        font-size: clamp(
            2.2rem,
            3.7vw,
            3.25rem
        );
    }

    .intro {
        margin-top: 3px;
        font-size: 0.75rem;
    }

    .question-panel {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .question-panel p {
        font-size: 0.55rem;
    }

    .card-stage {
        height: clamp(
            205px,
            33vh,
            255px
        );
    }

    .foundation-note {
        padding-top: 4px;
        padding-bottom: 4px;
        font-size: 0.55rem;
    }

    footer {
        font-size: 0.52rem;
    }
}

/* SAGE_TAROT_DESKTOP_VIEWPORT_FIT_20260729 END */

/* SAGE_TAROT_CUSTOM_ART_PREVIEW_20260729
   Custom SAGE reading-room background and face-down card artwork.
   Visual layer only. Tarot engine and deck faces remain unchanged.
*/

html {
    background: #050207;
}

body {
    background-color: #050207 !important;
    background-image:
        linear-gradient(
            180deg,
            rgba(3, 1, 5, 0.28) 0%,
            rgba(5, 2, 8, 0.42) 34%,
            rgba(3, 1, 5, 0.67) 72%,
            rgba(2, 1, 4, 0.82) 100%
        ),
        radial-gradient(
            circle at 50% 44%,
            rgba(71, 26, 90, 0.08) 0%,
            rgba(8, 3, 12, 0.28) 48%,
            rgba(2, 1, 4, 0.70) 100%
        ),
        url("/static/tarot/art/sage-tarot-room-background.png") !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-position:
        center,
        center,
        center 42% !important;

    background-size:
        cover,
        cover,
        cover !important;

    background-attachment:
        fixed,
        fixed,
        fixed !important;
}

.tarot-shell {
    background:
        linear-gradient(
            180deg,
            rgba(5, 2, 8, 0.18) 0%,
            rgba(7, 3, 11, 0.28) 43%,
            rgba(3, 1, 5, 0.52) 100%
        ) !important;
}

.question-panel {
    background:
        linear-gradient(
            135deg,
            rgba(11, 5, 16, 0.84),
            rgba(5, 2, 9, 0.73)
        ) !important;

    border-color:
        rgba(220, 166, 65, 0.48) !important;

    box-shadow:
        0 0 0 1px rgba(148, 67, 174, 0.08),
        0 18px 50px rgba(0, 0, 0, 0.34),
        inset 0 0 28px rgba(103, 35, 128, 0.08) !important;

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);
}

.card-back {
    overflow: hidden !important;

    background-color:
        #050306 !important;

    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02),
            rgba(0, 0, 0, 0.12)
        ),
        url("/static/tarot/art/sage-tarot-card-back.png") !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-position:
        center,
        center !important;

    background-size:
        cover,
        cover !important;

    border-color:
        rgba(229, 178, 77, 0.76) !important;

    box-shadow:
        0 0 0 1px rgba(255, 213, 122, 0.10),
        0 14px 35px rgba(0, 0, 0, 0.48),
        0 0 28px rgba(126, 42, 147, 0.14),
        inset 0 0 24px rgba(0, 0, 0, 0.20) !important;
}

.card-back > * {
    opacity: 0 !important;
    visibility: hidden !important;
}

.card-back::before,
.card-back::after {
    pointer-events: none;
}

@media (max-width: 899px) {
    body {
        background-position:
            center,
            center,
            center top !important;

        background-attachment:
            scroll,
            scroll,
            scroll !important;
    }
}

/* SAGE_TAROT_READING_TABLE_REDESIGN_20260729
   Full visitor-facing reading-table redesign.
   Uses the existing Tarot engine and existing card-face deck.
*/

/* ------------------------------------------------------------
   CLEAN VISITOR EXPERIENCE
------------------------------------------------------------ */

.eyebrow,
.intro,
.question-panel > p,
footer {
    display: none !important;
}

.question-panel label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.reading-position:has(.empty-card) .card-caption {
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.reading-summary {
    display: none !important;
}

.tarot-shell:has(.tarot-card.is-flipped) .reading-summary {
    display: block !important;
}

#reveal-button:disabled,
#clear-button:disabled {
    display: none !important;
}

/* ------------------------------------------------------------
   REAL CUSTOM FACE-DOWN CARD
   Applies before dealing and after dealing.
------------------------------------------------------------ */

.empty-card,
.card-back {
    overflow: hidden !important;

    color: transparent !important;

    border:
        1px solid rgba(255, 205, 103, 0.88) !important;

    border-radius:
        13px !important;

    background-color:
        #030204 !important;

    background-image:
        url("/static/tarot/art/sage-tarot-card-back.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        contain !important;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.66),
        0 0 22px rgba(222, 159, 47, 0.22),
        0 0 36px rgba(139, 40, 166, 0.17),
        inset 0 0 0 1px rgba(255, 220, 143, 0.14) !important;
}

.empty-card > *,
.card-back > * {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.empty-card::before,
.empty-card::after,
.card-back::before,
.card-back::after {
    display: none !important;
    content: none !important;
}

/* Position-specific light so each place feels alive. */

.reading-position[data-position="Past"] .card-stage {
    filter:
        drop-shadow(0 0 18px rgba(236, 54, 132, 0.18))
        drop-shadow(0 12px 24px rgba(0, 0, 0, 0.42));
}

.reading-position[data-position="Present"] .card-stage {
    filter:
        drop-shadow(0 0 20px rgba(238, 181, 60, 0.22))
        drop-shadow(0 12px 24px rgba(0, 0, 0, 0.42));
}

.reading-position[data-position="Future"] .card-stage {
    filter:
        drop-shadow(0 0 20px rgba(151, 76, 219, 0.22))
        drop-shadow(0 12px 24px rgba(0, 0, 0, 0.42));
}

.reading-position[data-position="Past"] .position-label {
    color: #ff8fc9 !important;
    text-shadow:
        0 0 13px rgba(255, 55, 156, 0.42);
}

.reading-position[data-position="Present"] .position-label {
    color: #ffd877 !important;
    text-shadow:
        0 0 13px rgba(255, 191, 52, 0.44);
}

.reading-position[data-position="Future"] .position-label {
    color: #d9adff !important;
    text-shadow:
        0 0 13px rgba(166, 80, 255, 0.43);
}

/* ------------------------------------------------------------
   DESKTOP READING CHAMBER
------------------------------------------------------------ */

@media (min-width: 900px) and (min-height: 650px) {
    html,
    body {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body {
        background-color:
            #030104 !important;

        background-image:
            linear-gradient(
                180deg,
                rgba(2, 1, 4, 0.04) 0%,
                rgba(3, 1, 6, 0.08) 22%,
                rgba(3, 1, 6, 0.14) 48%,
                rgba(3, 1, 5, 0.38) 82%,
                rgba(2, 1, 4, 0.58) 100%
            ),
            radial-gradient(
                ellipse at 50% 58%,
                rgba(123, 47, 135, 0.03) 0%,
                rgba(3, 1, 5, 0.08) 58%,
                rgba(2, 1, 4, 0.24) 100%
            ),
            url("/static/tarot/art/sage-tarot-room-background.png") !important;

        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat !important;

        background-position:
            center,
            center,
            center top !important;

        background-size:
            cover,
            cover,
            cover !important;

        background-attachment:
            fixed,
            fixed,
            fixed !important;
    }

    .tarot-shell {
        position: relative !important;

        display: block !important;

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

        height: 100vh !important;
        height: 100dvh !important;

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

        background:
            linear-gradient(
                180deg,
                rgba(4, 1, 7, 0.00) 0%,
                rgba(4, 1, 7, 0.00) 62%,
                rgba(3, 1, 5, 0.15) 78%,
                rgba(2, 1, 4, 0.36) 100%
            ) !important;
    }

    .return-link {
        position: fixed !important;
        z-index: 20 !important;

        top: 14px !important;
        left: 18px !important;

        transform: none !important;

        padding:
            7px 11px !important;

        border:
            1px solid rgba(238, 190, 83, 0.35) !important;

        border-radius:
            999px !important;

        color:
            #ffe09a !important;

        font-size:
            0.65rem !important;

        letter-spacing:
            0.09em !important;

        background:
            rgba(6, 2, 10, 0.48) !important;

        box-shadow:
            0 8px 26px rgba(0, 0, 0, 0.27) !important;

        backdrop-filter:
            blur(8px);

        -webkit-backdrop-filter:
            blur(8px);
    }

    .tarot-header {
        position: absolute !important;
        z-index: 7 !important;

        top:
            clamp(145px, 19.5vh, 188px) !important;

        left:
            50% !important;

        width:
            min(760px, 76vw) !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        transform:
            translateX(-50%) !important;

        text-align:
            center !important;
    }

    h1 {
        margin:
            0 !important;

        color:
            #fff7ff !important;

        font-size:
            clamp(2.35rem, 3.75vw, 4.15rem) !important;

        line-height:
            0.92 !important;

        letter-spacing:
            0.015em !important;

        text-shadow:
            0 3px 2px rgba(0, 0, 0, 0.85),
            0 0 22px rgba(164, 92, 205, 0.34),
            0 0 36px rgba(244, 191, 75, 0.15) !important;
    }

    .question-panel {
        position:
            absolute !important;

        z-index:
            8 !important;

        top:
            clamp(205px, 27.5vh, 260px) !important;

        left:
            50% !important;

        width:
            min(880px, 70vw) !important;

        margin:
            0 !important;

        padding:
            6px !important;

        transform:
            translateX(-50%) !important;

        border:
            1px solid rgba(236, 186, 76, 0.56) !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                90deg,
                rgba(7, 2, 11, 0.66),
                rgba(15, 5, 23, 0.76),
                rgba(7, 2, 11, 0.66)
            ) !important;

        box-shadow:
            0 12px 34px rgba(0, 0, 0, 0.34),
            0 0 20px rgba(140, 53, 168, 0.11),
            inset 0 0 0 1px rgba(255, 229, 170, 0.04) !important;

        backdrop-filter:
            blur(8px);

        -webkit-backdrop-filter:
            blur(8px);
    }

    .question-panel input {
        width:
            100% !important;

        height:
            38px !important;

        padding:
            7px 17px !important;

        border:
            1px solid rgba(212, 168, 255, 0.20) !important;

        border-radius:
            999px !important;

        color:
            #ffffff !important;

        font-size:
            0.88rem !important;

        background:
            rgba(0, 0, 0, 0.35) !important;

        box-shadow:
            inset 0 0 16px rgba(0, 0, 0, 0.24) !important;
    }

    .reading-table {
        position:
            absolute !important;

        z-index:
            6 !important;

        top:
            clamp(270px, 35.5vh, 330px) !important;

        left:
            50% !important;

        display:
            grid !important;

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

        align-items:
            start !important;

        width:
            min(1240px, 89vw) !important;

        height:
            auto !important;

        max-width:
            none !important;

        margin:
            0 !important;

        gap:
            clamp(46px, 7vw, 125px) !important;

        transform:
            translateX(-50%) !important;
    }

    .reading-position {
        display:
            grid !important;

        grid-template-rows:
            auto auto auto !important;

        align-items:
            start !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        text-align:
            center !important;
    }

    .position-label {
        margin:
            0 0 7px !important;

        font-size:
            clamp(0.85rem, 1vw, 1rem) !important;

        font-weight:
            800 !important;

        letter-spacing:
            0.25em !important;
    }

    .card-stage {
        width:
            auto !important;

        height:
            clamp(280px, 42vh, 390px) !important;

        max-width:
            100% !important;

        margin:
            0 auto !important;

        aspect-ratio:
            7 / 12 !important;

        perspective:
            1500px !important;
    }

    .empty-card,
    .tarot-card {
        border-radius:
            13px !important;
    }

    .card-caption {
        min-height:
            39px !important;

        margin-top:
            7px !important;
    }

    .card-caption strong {
        color:
            #fff8ff !important;

        font-size:
            0.94rem !important;

        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.85) !important;
    }

    .card-caption span {
        margin-top:
            2px !important;

        color:
            #d6c6da !important;

        font-size:
            0.68rem !important;

        text-shadow:
            0 2px 8px rgba(0, 0, 0, 0.9) !important;
    }

    .reading-summary {
        position:
            absolute !important;

        z-index:
            10 !important;

        left:
            50% !important;

        bottom:
            clamp(55px, 7.5vh, 75px) !important;

        width:
            min(760px, 68vw) !important;

        margin:
            0 !important;

        padding:
            7px 16px !important;

        transform:
            translateX(-50%) !important;

        border:
            1px solid rgba(232, 182, 74, 0.30) !important;

        border-radius:
            999px !important;

        color:
            #fff1c8 !important;

        background:
            rgba(6, 2, 10, 0.64) !important;

        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.32) !important;

        backdrop-filter:
            blur(8px);

        -webkit-backdrop-filter:
            blur(8px);
    }

    #question-echo {
        margin:
            0 !important;

        font-size:
            0.75rem !important;

        line-height:
            1.2 !important;
    }

    #reading-status {
        margin:
            2px 0 0 !important;

        font-size:
            0.62rem !important;

        line-height:
            1.2 !important;
    }

    .reading-controls {
        position:
            absolute !important;

        z-index:
            12 !important;

        left:
            50% !important;

        bottom:
            clamp(13px, 2.2vh, 23px) !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            auto !important;

        margin:
            0 !important;

        gap:
            10px !important;

        transform:
            translateX(-50%) !important;
    }

    .reading-controls button {
        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        min-width:
            150px !important;

        min-height:
            38px !important;

        padding:
            8px 18px !important;

        border:
            1px solid rgba(241, 191, 82, 0.56) !important;

        border-radius:
            999px !important;

        color:
            #ffe3a1 !important;

        font-size:
            0.69rem !important;

        letter-spacing:
            0.10em !important;

        background:
            linear-gradient(
                135deg,
                rgba(46, 17, 57, 0.89),
                rgba(10, 4, 15, 0.94)
            ) !important;

        box-shadow:
            0 10px 25px rgba(0, 0, 0, 0.34),
            0 0 16px rgba(152, 65, 181, 0.12) !important;

        backdrop-filter:
            blur(7px);

        -webkit-backdrop-filter:
            blur(7px);
    }

    .reading-controls .primary-control {
        color:
            #180d1d !important;

        border-color:
            #ffd370 !important;

        background:
            linear-gradient(
                135deg,
                #e7ac3f,
                #ffe08c,
                #d58e2c
            ) !important;

        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.38),
            0 0 22px rgba(237, 178, 60, 0.28) !important;
    }

    .reading-controls button:disabled {
        cursor:
            wait !important;

        opacity:
            0.64 !important;
    }

    #reveal-button:disabled,
    #clear-button:disabled {
        display:
            none !important;
    }
}

/* ------------------------------------------------------------
   SHORTER DESKTOP WINDOWS
------------------------------------------------------------ */

@media (
    min-width: 900px
) and (
    min-height: 650px
) and (
    max-height: 750px
) {
    .tarot-header {
        top:
            130px !important;
    }

    h1 {
        font-size:
            clamp(2.1rem, 3.4vw, 3.3rem) !important;
    }

    .question-panel {
        top:
            187px !important;
    }

    .reading-table {
        top:
            242px !important;
    }

    .card-stage {
        height:
            clamp(255px, 40vh, 305px) !important;
    }

    .reading-summary {
        bottom:
            50px !important;
    }

    .reading-controls {
        bottom:
            9px !important;
    }
}

/* ------------------------------------------------------------
   MOBILE AND NARROW SCREENS
------------------------------------------------------------ */

@media (max-width: 899px) {
    body {
        background-image:
            linear-gradient(
                180deg,
                rgba(2, 1, 4, 0.16),
                rgba(3, 1, 5, 0.56)
            ),
            url("/static/tarot/art/sage-tarot-room-background.png") !important;

        background-position:
            center,
            center top !important;

        background-size:
            cover,
            cover !important;

        background-attachment:
            scroll,
            scroll !important;
    }

    .empty-card,
    .card-back {
        background-size:
            contain !important;
    }

    .reading-controls {
        gap:
            8px !important;
    }

    .reading-controls button {
        min-width:
            132px !important;
    }
}

/* SAGE_TAROT_FINAL_TABLE_COMPOSITION_20260729
   Final desktop composition correction:
   full card artwork, question below cards, gold title,
   return doorway isolated in upper-left corner.
*/

/* Remove the repeated message strip from this stage. */

.reading-summary,
.tarot-shell:has(.tarot-card.is-flipped) .reading-summary {
    display: none !important;
}

/* Replace white card-caption text with warmer room colors. */

.card-caption strong {
    color: #f7d681 !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.95),
        0 0 13px rgba(225, 159, 44, 0.20) !important;
}

.card-caption span {
    color: #d8b8e7 !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.95) !important;
}

/* The generated Tarot button must not create another outer box. */

.tarot-card {
    padding: 0 !important;

    border: 0 !important;

    border-radius: 13px !important;

    background: transparent !important;

    box-shadow: none !important;
}

/* Fill the entire face-down card with the artwork.
   The mild zoom removes the built-in black margin from the source art. */

.empty-card,
.card-face.card-back {
    padding: 0 !important;

    border:
        1px solid rgba(255, 211, 112, 0.90) !important;

    border-radius:
        13px !important;

    background-color:
        #020102 !important;

    background-image:
        url("/static/tarot/art/sage-tarot-card-back.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center !important;

    background-size:
        auto 108% !important;

    box-shadow:
        0 17px 39px rgba(0, 0, 0, 0.66),
        0 0 19px rgba(241, 181, 55, 0.25),
        0 0 34px rgba(150, 46, 176, 0.16),
        inset 0 0 0 1px rgba(255, 234, 186, 0.12) !important;
}

.empty-card > *,
.card-face.card-back > * {
    display: none !important;
}

.empty-card::before,
.empty-card::after,
.card-face.card-back::before,
.card-face.card-back::after {
    display: none !important;
    content: none !important;
}

/* ------------------------------------------------------------
   DESKTOP FINAL PLACEMENT
------------------------------------------------------------ */

@media (min-width: 900px) and (min-height: 650px) {
    body {
        background-image:
            linear-gradient(
                180deg,
                rgba(1, 0, 3, 0.01) 0%,
                rgba(2, 1, 4, 0.025) 24%,
                rgba(3, 1, 6, 0.07) 48%,
                rgba(3, 1, 5, 0.18) 77%,
                rgba(2, 1, 4, 0.38) 100%
            ),
            radial-gradient(
                ellipse at 50% 61%,
                rgba(116, 40, 132, 0.025) 0%,
                rgba(3, 1, 5, 0.05) 58%,
                rgba(2, 1, 4, 0.17) 100%
            ),
            url("/static/tarot/art/sage-tarot-room-background.png") !important;

        background-position:
            center,
            center,
            center top !important;

        background-size:
            cover,
            cover,
            cover !important;
    }

    .tarot-shell {
        background:
            linear-gradient(
                180deg,
                rgba(3, 1, 5, 0.00) 0%,
                rgba(3, 1, 5, 0.00) 69%,
                rgba(2, 1, 4, 0.14) 85%,
                rgba(2, 1, 4, 0.30) 100%
            ) !important;
    }

    /* Doorway isolated away from the artwork and title. */

    .return-link {
        position: fixed !important;

        top: 13px !important;
        left: 14px !important;
        right: auto !important;

        z-index: 50 !important;

        transform: none !important;

        width: auto !important;

        margin: 0 !important;

        padding:
            7px 12px !important;

        border:
            1px solid rgba(238, 184, 68, 0.46) !important;

        border-radius:
            999px !important;

        color:
            #f7cf6f !important;

        font-size:
            0.64rem !important;

        font-weight:
            800 !important;

        letter-spacing:
            0.09em !important;

        background:
            rgba(5, 2, 8, 0.58) !important;

        box-shadow:
            0 8px 23px rgba(0, 0, 0, 0.30),
            0 0 14px rgba(141, 55, 167, 0.10) !important;

        backdrop-filter:
            blur(8px);

        -webkit-backdrop-filter:
            blur(8px);
    }

    /* Title beneath the eyes instead of across them. */

    .tarot-header {
        position:
            absolute !important;

        top:
            clamp(200px, 25.5vh, 228px) !important;

        left:
            50% !important;

        z-index:
            9 !important;

        width:
            min(760px, 72vw) !important;

        margin:
            0 !important;

        padding:
            0 !important;

        transform:
            translateX(-50%) !important;
    }

    h1 {
        margin:
            0 !important;

        color:
            #efbd57 !important;

        font-size:
            clamp(2.15rem, 3.05vw, 3.35rem) !important;

        font-weight:
            600 !important;

        line-height:
            0.96 !important;

        letter-spacing:
            0.025em !important;

        text-shadow:
            0 3px 2px rgba(0, 0, 0, 0.92),
            0 0 15px rgba(235, 164, 45, 0.26),
            0 0 26px rgba(182, 67, 194, 0.22),
            0 0 38px rgba(244, 51, 139, 0.09) !important;
    }

    /* Cards sit below the title and directly across the reading table. */

    .reading-table {
        position:
            absolute !important;

        top:
            clamp(272px, 34.5vh, 310px) !important;

        left:
            50% !important;

        z-index:
            8 !important;

        display:
            grid !important;

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

        align-items:
            start !important;

        width:
            min(1380px, 93vw) !important;

        height:
            auto !important;

        max-width:
            none !important;

        margin:
            0 !important;

        gap:
            clamp(48px, 8vw, 138px) !important;

        transform:
            translateX(-50%) !important;
    }

    .reading-position {
        display:
            grid !important;

        grid-template-rows:
            auto auto auto !important;

        min-height:
            0 !important;

        align-items:
            start !important;
    }

    .position-label {
        margin:
            0 0 8px !important;

        font-size:
            clamp(0.86rem, 1.05vw, 1.02rem) !important;

        font-weight:
            900 !important;

        letter-spacing:
            0.27em !important;
    }

    .card-stage {
        width:
            auto !important;

        height:
            clamp(330px, 46vh, 410px) !important;

        max-width:
            100% !important;

        margin:
            0 auto !important;

        aspect-ratio:
            7 / 12 !important;

        perspective:
            1600px !important;
    }

    .empty-card,
    .tarot-card,
    .card-face {
        border-radius:
            13px !important;
    }

    .card-caption {
        min-height:
            38px !important;

        margin-top:
            7px !important;
    }

    /* Question bar moved below the cards. */

    .question-panel {
        position:
            absolute !important;

        top:
            auto !important;

        right:
            auto !important;

        bottom:
            62px !important;

        left:
            50% !important;

        z-index:
            15 !important;

        width:
            min(920px, 68vw) !important;

        margin:
            0 !important;

        padding:
            5px !important;

        transform:
            translateX(-50%) !important;

        border:
            1px solid rgba(236, 183, 68, 0.57) !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                90deg,
                rgba(6, 2, 10, 0.73),
                rgba(17, 5, 25, 0.82),
                rgba(6, 2, 10, 0.73)
            ) !important;

        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.38),
            0 0 19px rgba(155, 54, 179, 0.14),
            inset 0 0 0 1px rgba(255, 228, 167, 0.05) !important;

        backdrop-filter:
            blur(9px);

        -webkit-backdrop-filter:
            blur(9px);
    }

    .question-panel input {
        width:
            100% !important;

        height:
            39px !important;

        padding:
            7px 18px !important;

        border:
            1px solid rgba(211, 164, 255, 0.20) !important;

        border-radius:
            999px !important;

        color:
            #f7e9fb !important;

        font-size:
            0.88rem !important;

        background:
            rgba(0, 0, 0, 0.40) !important;

        box-shadow:
            inset 0 0 15px rgba(0, 0, 0, 0.26) !important;
    }

    .question-panel input::placeholder {
        color:
            #c1a9c8 !important;
    }

    /* Shuffle sits directly under the question bar. */

    .reading-controls {
        position:
            absolute !important;

        top:
            auto !important;

        right:
            auto !important;

        bottom:
            10px !important;

        left:
            50% !important;

        z-index:
            16 !important;

        width:
            auto !important;

        margin:
            0 !important;

        transform:
            translateX(-50%) !important;
    }

    .reading-controls button {
        min-width:
            158px !important;

        min-height:
            40px !important;

        padding:
            8px 19px !important;

        font-size:
            0.70rem !important;
    }

    .reading-controls .primary-control {
        color:
            #170c1d !important;

        border-color:
            #ffda7f !important;

        background:
            linear-gradient(
                135deg,
                #d9962d,
                #ffe18c,
                #e4a43b
            ) !important;

        box-shadow:
            0 10px 27px rgba(0, 0, 0, 0.39),
            0 0 23px rgba(239, 174, 48, 0.31) !important;
    }
}

/* Short desktop windows retain the same order without overlap. */

@media (
    min-width: 900px
) and (
    min-height: 650px
) and (
    max-height: 780px
) {
    .tarot-header {
        top:
            188px !important;
    }

    h1 {
        font-size:
            clamp(2rem, 2.8vw, 2.9rem) !important;
    }

    .reading-table {
        top:
            248px !important;
    }

    .card-stage {
        height:
            clamp(285px, 43vh, 330px) !important;
    }

    .question-panel {
        bottom:
            57px !important;
    }

    .reading-controls {
        bottom:
            7px !important;
    }
}

/* Mobile keeps its natural scrolling arrangement. */

@media (max-width: 899px) {
    .empty-card,
    .card-face.card-back {
        background-size:
            auto 108% !important;
    }
}

/* SAGE_TAROT_RETURN_BUTTON_FIX_20260729
   Compact RETURN control in the true upper-left corner.
*/

.return-link {
    position: fixed !important;

    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 100 !important;

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

    margin: 0 !important;
    padding: 6px 11px !important;

    transform: none !important;

    border:
        1px solid rgba(238, 184, 68, 0.52) !important;

    border-radius:
        999px !important;

    color:
        #f5ca68 !important;

    font-size:
        0.62rem !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    letter-spacing:
        0.11em !important;

    text-transform:
        uppercase !important;

    white-space:
        nowrap !important;

    background:
        rgba(5, 2, 8, 0.70) !important;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.38),
        0 0 12px rgba(148, 57, 173, 0.13) !important;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.return-link:hover,
.return-link:focus-visible {
    color:
        #fff0bd !important;

    border-color:
        #f6c960 !important;

    box-shadow:
        0 8px 23px rgba(0, 0, 0, 0.42),
        0 0 18px rgba(231, 171, 54, 0.24) !important;
}


/* ============================================================
   SAGE_TAROT_VISIBLE_EDITORIAL_V1
   Permanent crawlable page content.
   ============================================================ */

.tarot-editorial {
    width:
        min(
            1080px,
            100%
        );

    margin:
        42px auto 12px;

    padding:
        clamp(
            22px,
            3vw,
            36px
        );

    border:
        1px solid
        rgba(213, 173, 83, .30);

    border-radius:
        24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(126, 71, 188, .17),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(24, 15, 31, .94),
            rgba(7, 6, 10, .97)
        );

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, .40),
        inset 0 0 55px
        rgba(200, 169, 255, .035);
}


.tarot-editorial-intro {
    width:
        min(
            860px,
            100%
        );

    margin:
        0 auto 28px;

    text-align:
        center;
}


.tarot-editorial-kicker {
    margin:
        0 0 7px;

    color:
        var(--pink);

    font-size:
        .70rem;

    font-weight:
        900;

    letter-spacing:
        .19em;

    text-transform:
        uppercase;
}


.tarot-editorial h2 {
    margin:
        0 0 16px;

    color:
        var(--gold-bright);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    font-weight:
        500;

    line-height:
        1.02;

    text-shadow:
        0 0 24px
        rgba(213, 173, 83, .16);
}


.tarot-editorial p {
    color:
        #d0c6d7;

    font-size:
        clamp(
            .94rem,
            1.3vw,
            1.03rem
        );

    line-height:
        1.72;
}


.tarot-position-guide {
    display:
        grid;

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

    gap:
        14px;

    margin:
        0 0 18px;
}


.tarot-position-guide article,
.tarot-info-card {
    border:
        1px solid
        rgba(213, 173, 83, .22);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(55, 30, 66, .32),
            rgba(8, 6, 12, .84)
        );

    box-shadow:
        inset 0 0 30px
        rgba(126, 71, 188, .05);
}


.tarot-position-guide article {
    padding:
        22px 20px;
}


.tarot-guide-number {
    display:
        inline-grid;

    width:
        34px;

    height:
        34px;

    place-items:
        center;

    margin:
        0 0 11px;

    border:
        1px solid
        rgba(255, 226, 160, .42);

    border-radius:
        50%;

    color:
        var(--gold-bright);

    font-size:
        .68rem;

    font-weight:
        900;

    background:
        rgba(126, 71, 188, .15);
}


.tarot-position-guide h3,
.tarot-info-card h3 {
    margin:
        0 0 10px;

    color:
        #f1c86c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight:
        600;
}


.tarot-position-guide h3 {
    font-size:
        1.4rem;
}


.tarot-info-card h3 {
    font-size:
        clamp(
            1.25rem,
            2vw,
            1.55rem
        );
}


.tarot-position-guide p,
.tarot-info-card p {
    margin:
        0;
}


.tarot-position-guide p + p,
.tarot-info-card p + p {
    margin-top:
        12px;
}


.tarot-editorial-grid {
    display:
        grid;

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

    gap:
        14px;
}


.tarot-info-card {
    padding:
        24px;
}


@media (
    max-width: 820px
) {

    .tarot-position-guide,
    .tarot-editorial-grid {
        grid-template-columns:
            1fr;
    }

    .tarot-editorial {
        margin-top:
            30px;

        padding:
            20px 16px;
    }

}

/* SAGE_TAROT_VISIBLE_EDITORIAL_V1 END */


/* ============================================================
   SAGE_TAROT_EDITORIAL_PLACEMENT_V2

   Tarot interaction occupies the hero.
   Editorial information lives beneath it.
   ============================================================ */


/* ------------------------------------------------------------
   PAGE CAN NOW CONTINUE BELOW THE READING EXPERIENCE
   ------------------------------------------------------------ */

html,
body {
    min-height:
        100%;

    overflow-x:
        hidden;
}


body {
    overflow-y:
        auto !important;
}



/* ------------------------------------------------------------
   INFORMATION ZONE
   ------------------------------------------------------------ */

.tarot-editorial-zone {
    position:
        relative;

    z-index:
        10;

    width:
        100%;

    padding:
        42px 18px 58px;

    border-top:
        1px solid
        rgba(216, 174, 74, .24);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(113, 63, 137, .18),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #09070d 0%,
            #050408 100%
        );

    box-shadow:
        0 -18px 45px
        rgba(0, 0, 0, .35);
}



/*
 * Reset any positioning inherited from the
 * interactive Tarot layout.
 */

.tarot-editorial-zone .tarot-editorial,
.tarot-editorial-zone .tarot-editorial-intro,
.tarot-editorial-zone .tarot-position-guide,
.tarot-editorial-zone .tarot-editorial-grid,
.tarot-editorial-zone .tarot-position-guide article,
.tarot-editorial-zone .tarot-info-card {
    position:
        relative !important;

    inset:
        auto !important;

    transform:
        none !important;
}



/* ------------------------------------------------------------
   MAIN INFORMATION FRAME
   ------------------------------------------------------------ */

.tarot-editorial-zone .tarot-editorial {
    width:
        min(
            1180px,
            100%
        ) !important;

    margin:
        0 auto !important;

    padding:
        clamp(
            24px,
            3vw,
            38px
        ) !important;

    overflow:
        visible;

    border:
        1px solid
        rgba(218, 176, 75, .30) !important;

    border-radius:
        22px !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(112, 63, 146, .14),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(18, 11, 24, .96),
            rgba(5, 5, 9, .98)
        ) !important;

    box-shadow:
        0 24px 65px
        rgba(0, 0, 0, .42),
        inset 0 0 50px
        rgba(208, 167, 255, .025) !important;
}



/* ------------------------------------------------------------
   INTRO
   ------------------------------------------------------------ */

.tarot-editorial-zone
.tarot-editorial-intro {
    width:
        min(
            850px,
            100%
        ) !important;

    margin:
        0 auto
        30px !important;

    text-align:
        center;
}


.tarot-editorial-zone
.tarot-editorial-kicker {
    margin:
        0 0
        8px !important;

    color:
        #dc92cf !important;

    font-size:
        .70rem !important;

    font-weight:
        900 !important;

    letter-spacing:
        .18em !important;

    line-height:
        1.2 !important;

    text-transform:
        uppercase;
}


.tarot-editorial-zone
.tarot-editorial h2 {
    margin:
        0 0
        17px !important;

    color:
        #f1c969 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        clamp(
            2rem,
            3.4vw,
            3.25rem
        ) !important;

    font-weight:
        500 !important;

    line-height:
        1.05 !important;

    text-shadow:
        0 0 22px
        rgba(223, 174, 61, .15);
}


.tarot-editorial-zone
.tarot-editorial p {
    color:
        #d1c9d2 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        .98rem !important;

    font-weight:
        400 !important;

    line-height:
        1.68 !important;
}


.tarot-editorial-zone
.tarot-editorial-intro p {
    margin:
        0 !important;
}


.tarot-editorial-zone
.tarot-editorial-intro p + p {
    margin-top:
        12px !important;
}



/* ------------------------------------------------------------
   PAST / PRESENT / FUTURE
   ------------------------------------------------------------ */

.tarot-editorial-zone
.tarot-position-guide {
    display:
        grid !important;

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

    gap:
        13px !important;

    margin:
        0 0
        16px !important;
}


.tarot-editorial-zone
.tarot-position-guide article {
    min-width:
        0;

    padding:
        19px !important;

    border:
        1px solid
        rgba(217, 173, 70, .22) !important;

    border-radius:
        15px !important;

    background:
        linear-gradient(
            145deg,
            rgba(53, 29, 62, .28),
            rgba(7, 6, 10, .88)
        ) !important;

    box-shadow:
        none !important;
}


.tarot-editorial-zone
.tarot-guide-number {
    width:
        32px !important;

    height:
        32px !important;

    display:
        grid !important;

    place-items:
        center;

    margin:
        0 0
        9px !important;

    border:
        1px solid
        rgba(240, 201, 105, .44) !important;

    border-radius:
        50% !important;

    color:
        #f0c96e !important;

    background:
        rgba(115, 62, 139, .19) !important;

    font-size:
        .67rem !important;

    font-weight:
        900;
}


.tarot-editorial-zone
.tarot-position-guide h3 {
    margin:
        0 0
        8px !important;

    color:
        #f0c868 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        1.35rem !important;

    font-weight:
        600 !important;
}


.tarot-editorial-zone
.tarot-position-guide p {
    margin:
        0 !important;

    font-size:
        .90rem !important;

    line-height:
        1.56 !important;
}



/* ------------------------------------------------------------
   LOWER INFORMATION CARDS
   ------------------------------------------------------------ */

.tarot-editorial-zone
.tarot-editorial-grid {
    display:
        grid !important;

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

    gap:
        13px !important;
}


.tarot-editorial-zone
.tarot-info-card {
    min-width:
        0;

    padding:
        21px !important;

    border:
        1px solid
        rgba(215, 171, 69, .20) !important;

    border-radius:
        15px !important;

    background:
        linear-gradient(
            145deg,
            rgba(36, 21, 45, .32),
            rgba(6, 6, 10, .88)
        ) !important;

    box-shadow:
        none !important;
}


.tarot-editorial-zone
.tarot-info-card h3 {
    margin:
        0 0
        10px !important;

    color:
        #edc56a !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        1.28rem !important;

    line-height:
        1.2 !important;
}


.tarot-editorial-zone
.tarot-info-card p {
    margin:
        0 !important;

    font-size:
        .90rem !important;

    line-height:
        1.58 !important;
}


.tarot-editorial-zone
.tarot-info-card p + p {
    margin-top:
        11px !important;
}



/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 820px) {

    .tarot-editorial-zone {
        padding:
            28px 10px
            42px;
    }


    .tarot-editorial-zone
    .tarot-editorial {
        padding:
            20px 15px !important;
    }


    .tarot-editorial-zone
    .tarot-position-guide,
    .tarot-editorial-zone
    .tarot-editorial-grid {
        grid-template-columns:
            1fr !important;
    }


    .tarot-editorial-zone
    .tarot-editorial h2 {
        font-size:
            clamp(
                1.8rem,
                9vw,
                2.6rem
            ) !important;
    }

}

/* END SAGE_TAROT_EDITORIAL_PLACEMENT_V2 */


/* ============================================================
   SAGE_TAROT_DOCUMENT_SCROLL_UNLOCK_V3
   ============================================================ */

@media (min-width: 900px) and (min-height: 650px) {

    html {
        width:
            100% !important;

        height:
            auto !important;

        min-height:
            100% !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;
    }


    body {
        width:
            100% !important;

        height:
            auto !important;

        min-height:
            100vh !important;

        overflow-x:
            hidden !important;

        overflow-y:
            visible !important;
    }


    /*
     * Keep the reading room itself full-screen.
     */

    .tarot-shell {
        height:
            100vh !important;

        height:
            100dvh !important;

        min-height:
            100vh !important;

        overflow:
            hidden !important;
    }


    /*
     * Writing becomes normal document content underneath.
     */

    .tarot-editorial-zone {
        display:
            block !important;

        position:
            relative !important;

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        overflow:
            visible !important;
    }

}


@media (max-width: 899px), (max-height: 649px) {

    html,
    body {
        height:
            auto !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;
    }

}

/* END SAGE_TAROT_DOCUMENT_SCROLL_UNLOCK_V3 */