/* ===== THE FOUNDATION ===== */

body {
    margin: 0;
    padding: 40px 20px;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(120, 65, 180, 0.25),
            transparent 60%
        ),
        linear-gradient(
            135deg,
            #0c0b10,
            #241335,
            #301934
        );

    background-size: 250% 250%;
    animation: etherealGlow 12s ease-in-out infinite alternate;

    min-height: 100vh;

    color: #e8dfe5;
    font-family: Georgia, serif;
}



/* ===== THE ARCHIVE ===== */

.archive {
    max-width: 900px;
    margin: 0 auto;
}


/* ===== THE HEADER ===== */

.archive-header {
    text-align: center;
    padding: 60px 0;
}

.subtitle {
    color: #b76e79;
    font-size: 12px;
    letter-spacing: 4px;
}

h1 {
    font-size: 42px;
    color: #e8dfe5;
    font-weight: normal;
    line-height: 1.4;
}

.archive-header p {
    line-height: 1.8;
}


/* ===== THE POETRY SECTION ===== */

.poems {
    margin-top: 60px;
}

h2 {
    font-weight: normal;
    color: #c9a0ac;

    border-bottom: 1px solid #393039;
    padding-bottom: 15px;
}


/* ===== THE POETRY CARD ===== */

.poem-card {
    position: relative;
    overflow: hidden;

    background: linear-gradient(
        145deg,
        #211527,
        #150f1d
    );

    border: 1px solid #65436f;
    border-radius: 12px;

    padding: 30px;
    margin-top: 30px;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.poem-card:hover {
    transform: translateY(-6px);

    border-color: #8e5bb5;

    box-shadow:
        0 0 20px rgba(142, 91, 181, 0.25),
        0 0 45px rgba(142, 91, 181, 0.12);
}


/* ===== THE MAGICAL GLOW ===== */

.poem-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background: radial-gradient(
        circle at 50% 0%,
        rgba(180, 110, 210, 0.18),
        transparent 70%
    );

    pointer-events: none;
}


/* ===== THE GOTHIC ROSE ===== */

.poem-card::after {
    content: "🥀";

    position: absolute;
    top: 15px;
    right: 20px;

    font-size: 24px;
    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;

    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .poem-card:hover::after {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== KEEP CONTENT ABOVE THE GLOW ===== */

.poem-card > * {
    position: relative;
    z-index: 1;
}


/* ===== CARD TYPOGRAPHY ===== */

.poem-category {
    color: #b76e79;
    font-size: 11px;
    letter-spacing: 3px;
}

.poem-card h3 {
    font-size: 26px;
    font-weight: normal;
}

.poem-card p {
    color: #b9aeb9;
    line-height: 1.8;
}

.poem-card a {
    color: #d9a5b0;
    text-decoration: none;
}

.poem-card a:hover {
    color: #ffffff;
}


/* ===== ANIMATED BACKGROUND ===== */

@keyframes etherealGlow {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 50% 50%;
    }

    100% {
        background-position: 100% 100%;
    }
}


/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }

    .poem-card,
    .poem-card::after {
        transition: none;
    }
}

/* ===== INDIVIDUAL POEM PAGES ===== */

.poem-page {
    max-width: 750px;
    margin: 0 auto;
}

.back-link {
    display: inline-block;
    margin-bottom: 40px;

    color: #c9a0ac;
    text-decoration: none;
}

.back-link:hover {
    color: #ffffff;
}

.full-poem {
    text-align: center;

    background: rgba(20, 12, 28, 0.8);

    border: 1px solid #65436f;
    border-radius: 12px;

    padding: 50px 25px;

    box-shadow:
        0 0 40px rgba(142, 91, 181, 0.12);
}

.poem-text {
    white-space: pre-line;

    font-size: 18px;
    line-height: 2;

    color: #e8dfe5;

    margin: 25px 0;
}

/* ===== AUTUMN LEAVES THEME ===== */

.theme-autumn {
    --theme-accent: #c58b68;
    --theme-border: #765044;
    --theme-text: #eaded5;
    --theme-card: #1e151b;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(170, 90, 65, 0.22),
            transparent 60%
        ),
        linear-gradient(
            135deg,
            #100c13,
            #291823,
            #3b242a
        );

    color: var(--theme-text);
}

.theme-autumn .full-poem {
    background: var(--theme-card);
    border-color: var(--theme-border);
}

.theme-autumn .poem-category {
    color: var(--theme-accent);
}

.theme-autumn .back-link {
    color: var(--theme-accent);
}

.theme-autumn .poem-text {
    color: var(--theme-text);
    text-align: left;
}

/* ===== POETRY READING EXPERIENCE ===== */

.poem-text {
    max-width: 560px;
    margin: 40px auto;

    white-space: pre-line;
    overflow-wrap: anywhere;

    font-size: 18px;
    line-height: 2;
}

@media (max-width: 600px) {
    .full-poem {
        padding: 35px 20px;
    }

    .poem-text {
        font-size: 16px;
        line-height: 1.9;
    }
}

/* ===== FALLING AUTUMN LEAVES ===== */

.falling-leaves {
    position: fixed;
    inset: 0;

    overflow: hidden;
    pointer-events: none;

    z-index: 0;
}

.theme-autumn .poem-page {
    position: relative;
    z-index: 1;
}

.leaf {
    position: absolute;
    top: -50px;

    font-size: 22px;
    opacity: 0;

    animation: fallingLeaf 18s linear infinite;
}

/* Individual leaf personalities */

.leaf:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    animation-duration: 17s;
}

.leaf:nth-child(2) {
    left: 75%;
    animation-delay: -8s;
    animation-duration: 22s;
}

.leaf:nth-child(3) {
    left: 35%;
    animation-delay: -14s;
    animation-duration: 20s;
}

.leaf:nth-child(4) {
    left: 90%;
    animation-delay: -5s;
    animation-duration: 25s;
}

.leaf:nth-child(5) {
    left: 55%;
    animation-delay: -18s;
    animation-duration: 23s;
}

/* The actual falling animation */

@keyframes fallingLeaf {

    0% {
        transform: translate(0, -50px) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.35;
    }

    45% {
        transform: translate(35px, 45vh) rotate(120deg);
    }

    85% {
        opacity: 0.35;
    }

    100% {
        transform: translate(-25px, 110vh) rotate(300deg);
        opacity: 0;
    }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .leaf {
        animation: none;
        opacity: 0;
    }
}
/* ===== GOTHIC ORNAMENTS ===== */

.theme-autumn .full-poem {
    position: relative;
}

.corner {
    position: absolute;

    color: #c58b68;
    font-size: 30px;

    opacity: 0.55;

    pointer-events: none;
}

.corner-top {
    top: 12px;
    left: 18px;
}

.corner-bottom {
    bottom: 12px;
    right: 18px;

    transform: rotate(180deg);
}

/* ===== VICTORIAN GOTHIC FILIGREE ===== */

.theme-autumn .full-poem {
    position: relative;
}

.filigree {
    position: absolute;

    width: 110px;
    height: 110px;

    color: var(--theme-accent);

    opacity: 0.45;

    pointer-events: none;
}

.filigree-top {
    top: 8px;
    left: 8px;
}

.filigree-bottom {
    bottom: 8px;
    right: 8px;

    transform: rotate(180deg);
}

@media (max-width: 600px) {
    .filigree {
        width: 75px;
        height: 75px;
        opacity: 0.3;
    }
}
/* ===== HAUNTED AUTUMN CARD GLOW ===== */

.theme-autumn .full-poem {
    animation: hauntedGlow 8s ease-in-out infinite alternate;
}

@keyframes hauntedGlow {
    0% {
        box-shadow:
            0 0 20px rgba(197, 139, 104, 0.05),
            0 0 40px rgba(197, 139, 104, 0.03);
    }

    100% {
        box-shadow:
            0 0 30px rgba(197, 139, 104, 0.16),
            0 0 65px rgba(197, 139, 104, 0.08);
    }
}

/* Keep things comfortable for people who prefer less movement */
@media (prefers-reduced-motion: reduce) {
    .theme-autumn .full-poem {
        animation: none;
    }
}

/* ===== MOONLIT ARCHIVE THEME ===== */

.theme-moonlight {
    --moon-accent: #9bb8e8;
    --moon-silver: #c8d8ee;
    --moon-muted: #94a5c0;
    --moon-border: #405477;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(76, 113, 181, 0.20),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #050811,
            #0b1426,
            #141a30
        );

    color: #dce5f2;
}

/* ===== MOONLIT HEADER ===== */

.theme-moonlight .archive-header {
    padding: 70px 0 80px;
}

.theme-moonlight .subtitle {
    color: var(--moon-accent);
}

.theme-moonlight h1 {
    color: #d6e2f5;

    text-shadow:
        0 0 18px rgba(155, 184, 232, 0.15),
        0 0 45px rgba(100, 145, 220, 0.08);
}

.theme-moonlight .archive-header p {
    color: var(--moon-muted);
}

/* ===== THE MOONLIT GUARDIAN ===== */

.moonlit-butterfly {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0 auto 30px;

    font-size: 45px;

    filter:
        drop-shadow(0 0 12px rgba(125, 170, 255, 0.35));
}
/* ===== LUNAR CELESTIAL BUTTERFLY ===== */

.lunar-butterfly {
    display: block;

    width: 110px;
    height: auto;

    filter:
        drop-shadow(0 0 10px rgba(135, 185, 255, 0.25));
}
/* ===== MOONLIT POETRY CARDS ===== */

.theme-moonlight .poem-card {
    --card-accent: #9bb8e8;
    --card-glow: rgba(155, 184, 232, 0.18);

    background: linear-gradient(
        145deg,
        #0d1424,
        #080c18
    );

    border: 1px solid var(--card-accent);

    box-shadow:
        0 0 20px rgba(0, 0, 0, 0.2);
}

/* Each poem can choose its own colours */

.theme-moonlight .card-autumn {
    --card-accent: #a97558;
    --card-glow: rgba(197, 139, 104, 0.22);
}

/* A gentle glow when interacting */

.theme-moonlight .poem-card:hover,
.theme-moonlight .poem-card:focus-within {
    transform: translateY(-4px);

    border-color: var(--card-accent);

    box-shadow:
        0 0 20px var(--card-glow),
        0 0 45px rgba(0, 0, 0, 0.18);
}

/* A hint of the poem's colours */

.theme-moonlight .poem-card .poem-category,
.theme-moonlight .poem-card a {
    color: var(--card-accent);
}

/* Keep the card's heading moonlit */

.theme-moonlight .poem-card h3 {
    color: #d6e2f5;
}
/* ===== THE GLOW INSIDE EACH WORLD ===== */

.theme-moonlight .poem-card::before {
    background: radial-gradient(
        circle at 50% 0%,
        var(--card-glow),
        transparent 70%
    );
}
/* ===== THE MOONLIT TITLE CANOPY ===== */

.theme-moonlight .moonlit-title-frame {
    position: relative;

    width: 100%;
    max-width: 850px;

    margin: 35px auto 40px;

    padding: 75px 45px 45px;

    box-sizing: border-box;
}

/* Decorative SVG overlay */

.theme-moonlight .moonlit-canopy {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    filter:
        drop-shadow(
            0 0 5px rgba(155, 184, 232, 0.18)
        );
}

/* Keep the title above the vines */

.theme-moonlight .moonlit-title-frame h1 {
    position: relative;
    z-index: 1;

    margin: 0;
}
/* ==========================================
   ✨ THE WHISPERING STARS
   Moonlight shimmering through the canopy
   ========================================== */

/* All three celestial stars */

.theme-moonlight .canopy-star {
    opacity: 0.45;

    animation: moonlitShimmer 6s ease-in-out infinite;

    filter:
        drop-shadow(0 0 2px rgba(200, 223, 255, 0.2));
}

/* Each star awakens at a different moment */

.theme-moonlight .star-left {
    animation-delay: 0s;
}

.theme-moonlight .star-centre {
    animation-delay: -2s;
}

.theme-moonlight .star-right {
    animation-delay: -4s;
}

/* A gentle pulse of silver moonlight */

@keyframes moonlitShimmer {

    0%, 100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;

        filter:
            drop-shadow(
                0 0 5px rgba(200, 223, 255, 0.65)
            );
    }

}

/* Respect reduced-motion preferences */

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

    .theme-moonlight .canopy-star {
        animation: none;
        opacity: 0.8;
    }

}
/* ==========================================
   🌿 THE GARDEN THAT NOTICES YOU
   Mobile-friendly interaction
   ========================================== */

/* Mouse hover — only on devices with real hover */

@media (hover: hover) and (pointer: fine) {

    .theme-moonlight
    .moonlit-title-frame:hover
    .moonlit-canopy {

        filter:
            brightness(1.35)
            drop-shadow(0 0 7px rgba(190, 220, 255, 0.65))
            drop-shadow(0 0 14px rgba(135, 185, 255, 0.3))
            !important;
    }
}

/* Temporary glow when tapped */

.theme-moonlight
.moonlit-title-frame.garden-awake
.moonlit-canopy {

    filter:
        brightness(1.35)
        drop-shadow(0 0 7px rgba(190, 220, 255, 0.65))
        drop-shadow(0 0 14px rgba(135, 185, 255, 0.3))
        !important;
}
/* ==========================================
   🦋 LADY VESPERA'S STARDUST
   Three delicate celestial sparks
   ========================================== */

/* Keep the stardust anchored to Vespera */

.theme-moonlight .moonlit-butterfly {
    position: relative;
}

/* Decorative particle layer */

.theme-moonlight .vespera-stardust {
    position: absolute;

    width: 110px;
    height: 40px;

    left: 50%;
    bottom: -12px;

    transform: translateX(-50%);

    pointer-events: none;
}

/* Individual silver-blue sparks */

.theme-moonlight .stardust-mote {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #d9ecff;

    box-shadow:
        0 0 5px rgba(200, 225, 255, 0.8),
        0 0 10px rgba(135, 185, 255, 0.4);

    opacity: 0;

    animation: vesperaStardust 5s ease-out infinite;
}

/* Left spark */

.theme-moonlight .stardust-mote:nth-child(1) {
    left: 25%;
    top: 0;

    animation-delay: 0s;
}

/* Centre spark */

.theme-moonlight .stardust-mote:nth-child(2) {
    left: 55%;
    top: 5px;

    animation-delay: -1.7s;
}

/* Right spark */

.theme-moonlight .stardust-mote:nth-child(3) {
    left: 78%;
    top: 0;

    animation-delay: -3.4s;
}

/* ✨ Stardust gently drifts and disappears */

@keyframes vesperaStardust {

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

    20% {
        opacity: 0.85;
        transform: translateY(5px) scale(1);
    }

    65% {
        opacity: 0.45;
    }

    100% {
        opacity: 0;
        transform: translateY(22px) scale(0.4);
    }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .theme-moonlight .stardust-mote {
        animation: none;
    }
}

/* ==========================================
   🌫️ THE MIDNIGHT VEIL
   A drifting mist behind the canopy
   ========================================== */

/* Keep the mist contained in the title frame */

.theme-moonlight .moonlit-title-frame {
    isolation: isolate;
}

/* The mist itself */

.theme-moonlight .moonlit-title-frame::before {
    content: "";

    position: absolute;
    inset: 12% 8%;

    z-index: 0;
    pointer-events: none;

    border-radius: 50%;

    background:
    radial-gradient(
        ellipse at 30% 45%,
        rgba(125, 165, 215, 0.38),
        transparent 65%
    ),
    radial-gradient(
        ellipse at 70% 55%,
        rgba(175, 195, 235, 0.28),
        transparent 70%
    );

    filter: blur(9px);

    /* Animated opacity is defined in the keyframes below. */
    animation:
        midnightVeil 18s ease-in-out infinite alternate;
}

/* Keep the silver canopy above the mist */

.theme-moonlight .moonlit-canopy {
    z-index: 1;
}

/* Keep the title above everything */

.theme-moonlight .moonlit-title-frame h1 {
    z-index: 2;
}

/* The veil slowly wanders through the garden */

@keyframes midnightVeil {

    0% {
        transform: translateX(-3%) translateY(0);
        opacity: 0.65;
    }

    50% {
        transform: translateX(2%) translateY(-3%);
        opacity: 0.9;
    }

    100% {
        transform: translateX(4%) translateY(2%);
        opacity: 0.7;
    }

}

/* Keep the veil still for reduced-motion users */

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

    .theme-moonlight .moonlit-title-frame::before {
        animation: none;
        opacity: 0.45;
    }

}
/* ==========================================
   🍂 AUTUMN LEAVES — COPPER ENCHANTMENT
   A quiet invitation into another world
   ========================================== */

/* Keep the card perfectly still */

.theme-moonlight .card-autumn {
    --card-accent: #b98260;
    --card-glow: rgba(205, 137, 92, 0.32);

    transition:
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

/* Mouse interaction — computers only */

@media (hover: hover) and (pointer: fine) {

    .theme-moonlight .card-autumn:hover {
        transform: none;

        border-color: #d9a17b;

        box-shadow:
            0 0 12px rgba(205, 137, 92, 0.3),
            0 0 28px rgba(205, 137, 92, 0.16);
    }
}

/* Keyboard focus — accessible and elegant */

.theme-moonlight .card-autumn:focus-within {
    transform: none;

    border-color: #d9a17b;

    box-shadow:
        0 0 12px rgba(205, 137, 92, 0.3),
        0 0 28px rgba(205, 137, 92, 0.16);
}

/* Touchscreens: a brief copper shimmer */

@media (hover: none) {

    .theme-moonlight .card-autumn:hover {
        transform: none;
    }

    .theme-moonlight .card-autumn:active {
        border-color: #d9a17b;

        box-shadow:
            0 0 12px rgba(205, 137, 92, 0.3),
            0 0 28px rgba(205, 137, 92, 0.16);
    }
}

/* Keep the card still even during interaction */

.theme-moonlight .card-autumn:hover,
.theme-moonlight .card-autumn:focus-within {
    transform: none;
}
/* ==========================================
   🥀 THE POETRY COLLECTION
   Individual worlds, shared architecture
   ========================================== */

/* 🌙 Silver-blue: moonlit poems */

.theme-moonlight .card-moonlight {
    --card-accent: #a7c7e7;
    --card-glow: rgba(150, 195, 245, 0.25);
}

/* 🥀 Crimson: darker, gothic poems */

.theme-moonlight .card-crimson {
    --card-accent: #b87888;
    --card-glow: rgba(185, 85, 115, 0.25);
}

/* 🦋 Lavender: softer, dreamlike poems */

.theme-moonlight .card-lavender {
    --card-accent: #b6a0d9;
    --card-glow: rgba(175, 145, 220, 0.25);
}

/* 🕯️ Antique gold: nostalgic poems */

.theme-moonlight .card-antique {
    --card-accent: #c5aa7c;
    --card-glow: rgba(195, 160, 100, 0.23);
}
/* ==========================================
   🍁 GERALD — AUTUMN LEAVES EMBLEM
   Visible by default on every device
   ========================================== */

/* The rose remains the default decoration for other poem cards. */
.theme-moonlight .card-autumn::after {
    content: "🍁";
    display: block;
    visibility: visible;
    z-index: 2;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    pointer-events: none;
    opacity: 0.95;
    transform: translateY(0) rotate(12deg);
    transition: transform 0.8s ease, opacity 0.6s ease;
}

/* Desktop hover adds a gentle flourish, never hides Gerald. */
@media (hover: hover) and (pointer: fine) {
    .theme-moonlight .card-autumn:hover::after {
        opacity: 1;
        transform: translateY(-3px) rotate(20deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-moonlight .card-autumn::after {
        transition: none;
    }
}

/* Smaller screens */

@media (max-width: 600px) {

    .theme-moonlight .moonlit-title-frame {
        padding: 65px 35px 40px;
    }

}



/* ==========================================
   QUIET VIOLET — SECOND POEM PAGE
   ========================================== */
.theme-quiet-violet {
    background: radial-gradient(ellipse at 50% 8%, rgba(101, 82, 139, .16), transparent 58%),
                linear-gradient(155deg, #080910, #11101c 55%, #090a11);
    color: #dedbe6;
    background-attachment: fixed;
}
.theme-quiet-violet .poem-page { max-width: 780px; }
.theme-quiet-violet .back-link { color: #b9aecb; }
.theme-quiet-violet .back-link:hover,
.theme-quiet-violet .back-link:focus-visible { color: #f2edfa; }
.theme-quiet-violet .full-poem {
    background: linear-gradient(155deg, rgba(28, 25, 39, .90), rgba(13, 13, 23, .94));
    border: 1px solid rgba(173, 161, 194, .32);
    box-shadow: 0 0 38px rgba(92, 77, 124, .10);
    padding: clamp(30px, 6vw, 60px) clamp(20px, 5vw, 55px);
}
.theme-quiet-violet .poem-category { color: #b9aecb; }
.theme-quiet-violet .full-poem h1 {
    font-size: clamp(1.65rem, 4.5vw, 2.55rem);
    line-height: 1.4;
    font-weight: normal;
    color: #e4dfea;
    margin: 18px auto 24px;
    max-width: 620px;
}
.theme-quiet-violet .quiet-divider {
    width: 70px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #9b8aaa, transparent);
    margin: 26px auto 34px;
}
.theme-quiet-violet .poem-text {
    text-align: left;
    color: #d5cfde;
    max-width: 560px;
    line-height: 1.95;
    white-space: pre-line;
}
@media (max-width: 600px) {
    .theme-quiet-violet { padding: 26px 16px; }
    .theme-quiet-violet .full-poem { padding: 34px 20px; }
    .theme-quiet-violet .poem-text { font-size: 16px; }
}

/* ==========================================
   🥀 QUIET VIOLET — READING REFINEMENTS
   ========================================== */

/* 🥀 QUIET VIOLET — READABLE POETRY */

.theme-quiet-violet .poem-text {
    color: #e4dfeb;
    margin-top: 20px;
}

/* Reduce the space beneath the title */

.theme-quiet-violet .quiet-divider {
    margin-top: 20px;
    margin-bottom: 20px;
}
/* 🌫️ MIDNIGHT VEIL — SOFTER MOONLIT MIST */

.theme-moonlight .moonlit-title-frame::before {
  background:
    radial-gradient(
      ellipse at 30% 45%,
      rgba(125, 165, 215, 0.16),
      transparent 65%
    ),
    radial-gradient(
      ellipse at 70% 55%,
      rgba(175, 195, 235, 0.12),
      transparent 70%
    );

  opacity: 0.35 !important;
  filter: blur(16px);
}

/* =========================================================
   🕯️ RAMPANT — THE FRACTURED SANCTUARY CARD
   ========================================================= */

.theme-moonlight .card-rampant {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 75% 20%,
      rgba(105, 47, 69, 0.18),
      transparent 65%
    ),
    linear-gradient(
      145deg,
      #21141d,
      #120e17 65%,
      #0b0c13
    );

  border: 1px solid rgba(158, 96, 119, 0.32);

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.25),
    inset 0 0 24px rgba(101, 39, 61, 0.08);

  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* Faint fractured-glass decoration */

.theme-moonlight .card-rampant::before {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      118deg,
      transparent 47%,
      rgba(178, 125, 146, 0.12) 48%,
      transparent 49%
    ),
    linear-gradient(
      42deg,
      transparent 62%,
      rgba(178, 125, 146, 0.09) 63%,
      transparent 64%
    );

  opacity: 0.35;

  transition: opacity 0.5s ease;
}

/* Typography */

.theme-moonlight .card-rampant h3 {
  color: #d6a9b9;
}

.theme-moonlight .card-rampant p {
  color: #c8b7c2;
}

.theme-moonlight .card-rampant .read-more {
  color: #c38da3;
}

/* Reveal the fractures when noticed */

@media (hover: hover) and (pointer: fine) {
  .theme-moonlight .card-rampant:hover {
    transform: translateY(-4px);

    border-color: rgba(190, 125, 151, 0.55);

    box-shadow:
      0 12px 36px rgba(0, 0, 0, 0.35),
      0 0 22px rgba(113, 43, 72, 0.12);
  }

  .theme-moonlight .card-rampant:hover::before {
    opacity: 0.85;
  }
}

/* Keyboard accessibility */

.theme-moonlight .card-rampant:focus-visible {
  outline: 2px solid #c38da3;
  outline-offset: 4px;
}

.theme-moonlight .card-rampant:focus-visible::before {
  opacity: 0.85;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .theme-moonlight .card-rampant,
  .theme-moonlight .card-rampant::before {
    transition: none;
  }
}


/* =========================================================
   ✨ AN OPEN NERVE — LYRAETH'S HOMEPAGE CARD
   ========================================================= */

.theme-moonlight .card-open-nerve {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 50% 30%,
      rgba(151, 113, 211, 0.17),
      transparent 70%
    ),
    linear-gradient(
      155deg,
      #1a1633,
      #090d1d
    );

  border: 1px solid rgba(182, 151, 230, 0.55);

  box-shadow:
    0 0 28px rgba(142, 101, 208, 0.09);
}

.theme-moonlight .card-open-nerve h3 {
  color: #e5d5ff;
}

.theme-moonlight .card-open-nerve .read-more {
  color: #cbb0f3;
}

/* A faint constellation-like glow behind the text */
.theme-moonlight .card-open-nerve::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 25% 25%,
      rgba(203, 176, 243, 0.22) 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 70% 65%,
      rgba(203, 176, 243, 0.18) 1px,
      transparent 3px
    ),
    linear-gradient(
      125deg,
      transparent 35%,
      rgba(185, 150, 235, 0.07) 50%,
      transparent 65%
    );

  pointer-events: none;
}
/* =========================================================
   🦋 A LIGHT OUT OF REACH — AURELLE'S HOMEPAGE CARD

   Aurelle, the Moonbound Wanderer.
   Forever drawn towards a gentle, distant light.

   Her wings carry the colours of the moon.
   Her journey continues beneath the stars.
   ========================================================= */

.theme-moonlight .card-aurelle {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 65% 20%,
      rgba(184, 197, 255, 0.17),
      transparent 55%
    ),
    linear-gradient(
      155deg,
      #17213b,
      #080d20
    );

  border: 1px solid rgba(166, 185, 230, 0.5);

  box-shadow:
    0 0 30px rgba(137, 161, 225, 0.09);
}

/* Soft moonlit heading */
.theme-moonlight .card-aurelle h3 {
  color: #e0e8ff;
}

/* Pale lavender invitation */
.theme-moonlight .card-aurelle .read-more {
  color: #bfc9f4;
}

/* A distant moonlight glow */
.theme-moonlight .card-aurelle::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 75% 18%,
      rgba(235, 240, 255, 0.25),
      transparent 18%
    );

  pointer-events: none;
}

/* A gentle response to interaction */
@media (hover: hover) and (pointer: fine) {
  .theme-moonlight .card-aurelle:hover {
    border-color: rgba(207, 218, 255, 0.8);

    box-shadow:
      0 0 38px rgba(159, 182, 245, 0.18);
  }
}
/* =========================================
   TIRED — NOCTIS'S 3:17 AM PORTAL
   ========================================= */

.theme-moonlight .card-tired {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 75% 18%,
      rgba(91, 125, 160, 0.11),
      transparent 55%
    ),
    linear-gradient(
      160deg,
      #07101c,
      #030812 75%,
      #02050b
    );

  border: 1px solid rgba(122, 151, 181, 0.28);

  box-shadow:
    0 0 28px rgba(58, 92, 135, 0.06);

  transition:
    border-color 0.8s ease,
    box-shadow 0.8s ease,
    transform 0.8s ease;
}

/* Noctis's quiet little clock */

.theme-moonlight .card-tired .tired-clock {
  position: absolute;
  top: 22px;
  right: 24px;

  font-family: monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;

  color: rgba(147, 178, 207, 0.55);

  text-shadow:
    0 0 10px rgba(124, 165, 205, 0.15);

  pointer-events: none;
}

/* Title */

.theme-moonlight .card-tired h3 {
  color: #dce6f0;
}

/* Description */

.theme-moonlight .card-tired p {
  color: #a4afbe;
}

/* Portal invitation */

.theme-moonlight .card-tired .poem-link {
  color: #9bb5d0;
}

/* A subtle response when someone approaches */

@media (hover: hover) and (pointer: fine) {
  .theme-moonlight .card-tired:hover {
    border-color: rgba(155, 188, 219, 0.55);

    box-shadow:
      0 0 38px rgba(90, 130, 175, 0.13);

    transform: translateY(-3px);
  }
}

/* Keyboard accessibility */

.theme-moonlight .card-tired:focus-visible {
  outline: 2px solid #9bb5d0;
  outline-offset: 4px;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .theme-moonlight .card-tired {
    transition: none;
  }
}
/* =====================================
   UNRETURNED ECHO — HOMEPAGE PORTAL
   RESON · THE UNANSWERED VOICE
===================================== */

.poem-card.card-unreturned-echo {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 50% 35%,
      rgba(91, 66, 139, 0.25),
      transparent 65%
    ),
    linear-gradient(
      145deg,
      #11101c,
      #080810
    );

  border: 1px solid rgba(165, 139, 207, 0.2);

  transition:
    box-shadow 0.4s ease,
    border-color 0.4s ease,
    transform 0.4s ease;
}

/* Gentle atmospheric glow */

.poem-card.card-unreturned-echo:hover,
.poem-card.card-unreturned-echo:focus-within,
.poem-card.card-unreturned-echo:active {
  border-color: rgba(190, 162, 236, 0.45);

  box-shadow:
    0 0 28px rgba(124, 88, 186, 0.17),
    inset 0 0 35px rgba(102, 74, 151, 0.08);
}

/* RESON */

.echo-card-reson {
  position: absolute;
  top: 22px;
  right: 25px;

  width: 18px;
  height: 18px;
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #f2eaff 0%,
      #c7b2f0 35%,
      #7757ae 70%,
      transparent 100%
    );

  box-shadow:
    0 0 12px rgba(194, 169, 244, 0.5),
    0 0 26px rgba(136, 100, 206, 0.25);

  pointer-events: none;
  z-index: 1;
}

/* RESON'S ECHO */

.echo-card-reson::after {
  content: "";
  position: absolute;
  inset: -6px;

  border: 1px solid rgba(191, 164, 238, 0.5);
  border-radius: 50%;

  opacity: 0;
  transform: scale(0.5);

  pointer-events: none;
}

/* Release a ripple when the card is activated */

.poem-card.card-unreturned-echo:hover
.echo-card-reson::after,

.poem-card.card-unreturned-echo:focus-within
.echo-card-reson::after,

.poem-card.card-unreturned-echo:active
.echo-card-reson::after {
  animation: echo-card-ripple 2.5s ease-out infinite;
}

@keyframes echo-card-ripple {
  0% {
    transform: scale(0.5);
    opacity: 0.7;
  }

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

/* Keep card text above atmospheric effects */

.poem-card.card-unreturned-echo h3,
.poem-card.card-unreturned-echo p,
.poem-card.card-unreturned-echo a {
  position: relative;
  z-index: 2;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .poem-card.card-unreturned-echo
  .echo-card-reson::after {
    animation: none;
  }
}

/* =====================================
   BROWSTER — THE FORBIDDEN DOORWAY
===================================== */

.browster {
  position: absolute;
  top: 115px;
  right: 9%;
  width: 44px;
  height: 44px;
  z-index: 50;

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

  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.browster-body {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;

  background: linear-gradient(
    145deg,
    #a99abb,
    #5e4b75
  );

  clip-path: polygon(
    50% 0%,
    100% 100%,
    0% 100%
  );

  filter: drop-shadow(0 0 5px rgba(190, 160, 225, 0.4));

  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.browster:hover .browster-body,
.browster:focus-visible .browster-body {
  transform: translateY(-3px) rotate(5deg);
}

.browster:focus-visible {
  outline: 2px solid #e2caff;
  outline-offset: 5px;
  border-radius: 4px;
}

/* EYES */

.browster-eyes {
  position: absolute;
  top: 17px;
  left: 7px;
  width: 20px;

  display: flex;
  justify-content: space-between;
}

.browster-eye {
  width: 6px;
  height: 7px;
  border-radius: 50%;
  background: #eee5f6;

  box-shadow: 0 0 5px rgba(255,255,255,0.4);
}

.browster-eye::after {
  content: "";
  display: block;
  width: 2px;
  height: 3px;
  margin: 2px auto;
  border-radius: 50%;
  background: #24192f;
}

/* MOUTH */

.browster-mouth {
  position: absolute;
  bottom: 5px;
  left: 14px;

  width: 6px;
  height: 4px;

  border-radius: 50%;
  background: #e7b9cb;
}

/* BLINKING */

@keyframes browster-blink {
  0%, 35%, 55%, 100% {
    transform: scaleY(1);
  }

  43%, 63% {
    transform: scaleY(0.1);
  }
}

.browster.is-awake .browster-eye {
  animation: browster-blink 0.8s ease-in-out;
}

/* SECRET REVEAL */

.browster-reveal {
  position: fixed;
  inset: 0;
  z-index: 9999;

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

  background: #07050d;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.65s ease;
}

.browster-reveal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.browster-message {
  padding: 20px;
  color: #d8c3ec;
  font-family: Georgia, serif;
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  font-style: italic;
  text-align: center;
  letter-spacing: 0.06em;

  opacity: 0;
  transition: opacity 0.45s ease;
}

.browster-message.is-visible {
  opacity: 1;
}

/* MOBILE */

@media (max-width: 600px) {
  .browster {
    top: 90px;
    right: 7%;
  }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  .browster-body,
  .browster-reveal,
  .browster-message {
    transition: none;
  }

  .browster.is-awake .browster-eye {
    animation: none;
  }
}
/* 🔺 Browster's hiding place in the Whispering Canopy */

.moonlit-title-frame {
  position: relative;
}

.moonlit-title-frame .browster {
  position: absolute;
  top: 9%;
  right: 7%;
  width: 44px;
  height: 44px;
  z-index: 10;
}

.moonlit-title-frame .browster-body {
  transform: scale(0.75);
  opacity: 0.65;
}

.moonlit-title-frame .browster:hover .browster-body,
.moonlit-title-frame .browster:focus-visible .browster-body {
  transform: scale(0.9) rotate(5deg);
  opacity: 1;
}

@media (max-width: 600px) {
  .moonlit-title-frame .browster {
    top: 7%;
    right: 4%;
  }
}
/* Browster's moonlit camouflage */

.moonlit-title-frame .browster-body {
  background: linear-gradient(
    145deg,
    #a3a9c2,
    #525a7d
  );

  transform: scale(0.75);
  opacity: 0.65;
}