/* ===========================================================
       Theme: Constellation Map — antique celestial atlas
       Activated by body.pk-page--con
       =========================================================== */
    body.pk-page--con {
        --con-ink:      #050617;
        --con-ink-2:    #0b0e2c;
        --con-ink-3:    #14193e;
        --con-paper:    #f5e9c8;
        --con-paper-mut:#c9b988;
        --con-gold:     #f0c14b;
        --con-gold-2:   #d99a2b;
        --con-nebula:   #6c5fa6;
        --con-nebula-2: #2c4a8a;
        --con-fg:       #f5e9c8;
        --con-fg-mut:   #b9b29a;
        --con-fg-dim:   #6c6750;

        background: var(--con-ink);
        color: var(--con-fg);
        font-family: 'Cormorant Garamond', serif;
        min-height: 100vh;
        position: relative;
    }

    /* Faint nebula clouds + starfield */
    body.pk-page--con::before,
    body.pk-page--con::after {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
    }
    body.pk-page--con::before {
        background:
            radial-gradient(720px 520px at 18% 12%, rgba(108,95,166,0.22), transparent 60%),
            radial-gradient(620px 460px at 86% 78%, rgba(44,74,138,0.22), transparent 60%),
            radial-gradient(420px 320px at 50% 100%, rgba(240,193,75,0.06), transparent 70%),
            linear-gradient(180deg, var(--con-ink) 0%, var(--con-ink-2) 70%, #030414 100%);
        filter: blur(28px);
    }
    body.pk-page--con::after {
        background-image:
            radial-gradient(1px 1px at 12% 8%, rgba(245,233,200,0.95), transparent 100%),
            radial-gradient(1px 1px at 24% 22%, rgba(245,233,200,0.85), transparent 100%),
            radial-gradient(1px 1px at 38% 14%, rgba(255,224,180,0.95), transparent 100%),
            radial-gradient(1px 1px at 52% 36%, rgba(245,233,200,0.85), transparent 100%),
            radial-gradient(1.5px 1.5px at 70% 18%, rgba(255,238,200,0.95), transparent 100%),
            radial-gradient(1px 1px at 84% 44%, rgba(245,233,200,0.85), transparent 100%),
            radial-gradient(1px 1px at 8% 52%, rgba(245,233,200,0.95), transparent 100%),
            radial-gradient(1.5px 1.5px at 22% 64%, rgba(255,224,180,0.85), transparent 100%),
            radial-gradient(1px 1px at 36% 76%, rgba(245,233,200,0.85), transparent 100%),
            radial-gradient(1px 1px at 54% 86%, rgba(245,233,200,0.95), transparent 100%),
            radial-gradient(1.5px 1.5px at 68% 70%, rgba(255,224,180,0.95), transparent 100%),
            radial-gradient(1px 1px at 78% 92%, rgba(245,233,200,0.85), transparent 100%),
            radial-gradient(1px 1px at 92% 76%, rgba(255,238,200,0.85), transparent 100%);
        opacity: 0.85;
        animation: con-twinkle 9s ease-in-out infinite;
    }
    @keyframes con-twinkle {
        0%, 100% { opacity: 0.7; }
        50% { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        body.pk-page--con::after { animation: none; }
    }

    body.pk-page--con > *:not(.pk-nav):not(.pk-mnav) { position: relative; z-index: 1; }
    body.pk-page--con > .pk-nav { z-index: 50; }

    body.pk-page--con .pk-nav {
        background: rgba(5,6,23,0.78) !important;
        border-bottom-color: rgba(240,193,75,0.22) !important;
    }
    body.pk-page--con .pk-nav__links a,
    body.pk-page--con .pk-nav__dd-trigger { color: var(--con-fg) !important; }
    body.pk-page--con .pk-nav__links a:hover,
    body.pk-page--con .pk-nav__dd-trigger:hover { color: var(--con-gold) !important; }

    /* ============== HERO ============== */
    .con-hero {
        text-align: center;
        padding: 56px 24px 24px;
        max-width: 920px;
        margin: 0 auto;
    }
    .con-hero__eyebrow {
        display: inline-flex; align-items: center; gap: 10px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.36em;
        text-transform: uppercase;
        color: var(--con-gold);
        padding: 6px 14px;
        border: 1px solid rgba(240,193,75,0.32);
        border-radius: 0;
    }
    .con-hero__h1 {
        font-family: 'Cinzel', 'Cormorant Garamond', serif;
        font-weight: 700;
        font-size: clamp(2.2rem, 6vw, 4.2rem);
        line-height: 1.05;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        margin: 18px 0 14px;
        color: var(--con-paper);
        text-shadow: 0 0 24px rgba(240,193,75,0.30);
    }
    .con-hero__sub {
        max-width: 660px;
        margin: 0 auto;
        font-size: 1.1rem;
        font-style: italic;
        line-height: 1.7;
        color: var(--con-fg-mut);
    }
    .con-hero__sub em { color: var(--con-gold); font-style: italic; font-weight: 500; }

    /* Decorative ornament */
    .con-ornament {
        text-align: center;
        margin: 16px auto;
        color: var(--con-gold);
        font-size: 1rem;
        letter-spacing: 1.5em;
        opacity: 0.5;
    }

    /* ============== INPUT ============== */
    .con-input-wrap {
        max-width: 520px;
        margin: 24px auto 0;
    }
    .con-input {
        display: block;
        width: 100%;
        padding: 18px 22px;
        font-family: 'Cinzel', serif;
        font-size: clamp(1.2rem, 2.4vw, 1.6rem);
        font-weight: 500;
        text-align: center;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--con-paper);
        background: rgba(11, 14, 44, 0.7);
        border: 1px solid rgba(240,193,75,0.32);
        border-radius: 0;
        outline: none;
        box-shadow: 0 0 28px rgba(240,193,75,0.06), inset 0 0 24px rgba(0,0,0,0.4);
        transition: border-color .2s ease, box-shadow .2s ease;
    }
    .con-input::placeholder { color: var(--con-fg-dim); font-style: italic; }
    .con-input:focus {
        border-color: var(--con-gold);
        box-shadow: 0 0 40px rgba(240,193,75,0.18), inset 0 0 24px rgba(0,0,0,0.4);
    }

    /* ============== STAR MAP ============== */
    .con-map-wrap {
        max-width: 920px;
        margin: 36px auto 0;
        padding: 0 24px;
    }
    .con-map {
        position: relative;
        background: radial-gradient(ellipse at center, var(--con-ink-3) 0%, var(--con-ink-2) 60%, var(--con-ink) 100%);
        border: 1px solid rgba(240,193,75,0.30);
        border-radius: 0;
        padding: 18px;
        box-shadow:
            0 18px 60px -28px rgba(0,0,0,0.8),
            inset 0 0 60px rgba(108,95,166,0.10);
    }
    .con-map::before, .con-map::after {
        content: '';
        position: absolute;
        width: 28px; height: 28px;
        border: 1px solid rgba(240,193,75,0.50);
    }
    .con-map::before {
        top: 6px; left: 6px;
        border-right: 0; border-bottom: 0;
    }
    .con-map::after {
        bottom: 6px; right: 6px;
        border-left: 0; border-top: 0;
    }

    .con-map__svg {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
    }
    .con-map__line {
        stroke: rgba(240,193,75,0.55);
        stroke-width: 1.2;
        stroke-dasharray: 2 3;
        fill: none;
    }
    .con-map__star {
        fill: var(--con-gold);
        filter: drop-shadow(0 0 6px rgba(240,193,75,0.85));
    }
    .con-map__star--bg {
        fill: rgba(245,233,200,0.40);
    }
    .con-map__letter {
        fill: var(--con-paper);
        font-family: 'Cinzel', serif;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.10em;
    }

    .con-map__legend {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 8px;
        margin-top: 16px;
        padding: 14px 16px;
        background: rgba(5,6,23,0.5);
        border: 1px solid rgba(240,193,75,0.20);
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        color: var(--con-fg-mut);
        letter-spacing: 0.04em;
    }
    .con-map__legend dt {
        color: var(--con-gold);
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-size: 9px;
        margin-bottom: 2px;
    }
    .con-map__legend dd {
        margin: 0;
        color: var(--con-paper);
        font-style: italic;
        font-family: 'Cormorant Garamond', serif;
        font-size: 14px;
    }

    .con-map__title {
        text-align: center;
        margin-bottom: 8px;
        font-family: 'Cinzel', serif;
        font-size: clamp(1.1rem, 2.2vw, 1.5rem);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--con-gold);
    }
    .con-map__subtitle {
        text-align: center;
        margin: 0 0 12px;
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        color: var(--con-fg-mut);
        font-size: 0.95rem;
    }

    .con-empty {
        text-align: center;
        padding: 60px 20px;
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        color: var(--con-fg-mut);
    }

    /* ============== ACTIONS ============== */
    .con-actions {
        max-width: 920px;
        margin: 22px auto 0;
        padding: 0 24px;
        display: flex; flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .con-btn {
        appearance: none;
        cursor: pointer;
        font-family: 'Cinzel', serif;
        font-size: 0.85rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 11px 22px;
        background: transparent;
        color: var(--con-gold);
        border: 1px solid var(--con-gold);
        border-radius: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background .15s ease, color .15s ease, transform .15s ease;
    }
    .con-btn:hover {
        background: var(--con-gold);
        color: var(--con-ink);
        transform: translateY(-1px);
    }
    .con-btn--primary {
        background: var(--con-gold);
        color: var(--con-ink);
    }
    .con-btn--primary:hover {
        background: var(--con-gold-2);
        border-color: var(--con-gold-2);
        color: var(--con-ink);
    }
    .con-btn.is-success {
        background: var(--con-paper-mut) !important;
        color: var(--con-ink) !important;
        border-color: var(--con-paper-mut) !important;
    }

    /* ============== SECTIONS ============== */
    .con-section {
        max-width: 760px;
        margin: 56px auto 0;
        padding: 0 24px;
    }
    .con-section__title {
        font-family: 'Cinzel', serif;
        font-weight: 700;
        font-size: clamp(1.4rem, 3vw, 1.9rem);
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: var(--con-paper);
        margin: 0 0 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(240,193,75,0.30);
    }
    .con-section__body {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.1rem;
        line-height: 1.78;
        color: var(--con-fg-mut);
    }
    .con-section__body em { color: var(--con-gold); font-style: italic; font-weight: 500; }
    .con-section__body strong { color: var(--con-paper); font-weight: 600; }

    /* ============== FAQ ============== */
    .con-faq { display: grid; gap: 6px; }
    .con-faq__item {
        background: rgba(11,14,44,0.4);
        border: 1px solid rgba(240,193,75,0.20);
        border-radius: 0;
        overflow: hidden;
    }
    .con-faq__q {
        padding: 14px 18px;
        font-family: 'Cinzel', serif;
        font-weight: 500;
        font-size: 0.95rem;
        letter-spacing: 0.06em;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--con-paper);
        list-style: none;
    }
    .con-faq__q::-webkit-details-marker { display: none; }
    .con-faq__q::after {
        content: '✦';
        color: var(--con-gold);
        font-size: 1rem;
        transition: transform .25s ease;
    }
    .con-faq__item[open] .con-faq__q::after { transform: rotate(180deg); }
    .con-faq__a {
        padding: 0 18px 16px;
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.02rem;
        line-height: 1.72;
        color: var(--con-fg-mut);
    }

    /* ============== RELATED OVERRIDES ============== */
    body.pk-page--con .pk-related {
        max-width: 880px;
        margin: 64px auto 24px;
        padding: 0 24px 24px;
    }
    body.pk-page--con .pk-related h2 {
        font-family: 'Cinzel', serif;
        font-weight: 500;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: var(--con-paper);
        text-align: left;
        margin: 0 0 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(240,193,75,0.30);
    }
    body.pk-page--con .pk-related .pk-calc-related a {
        background: rgba(11,14,44,0.5);
        border: 1px solid rgba(240,193,75,0.28);
        color: var(--con-paper);
        border-radius: 0;
        font-family: 'Cormorant Garamond', serif;
        font-weight: 500;
        font-size: 1rem;
        transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    }
    body.pk-page--con .pk-related .pk-calc-related a:hover {
        background: var(--con-gold);
        color: var(--con-ink);
        border-color: var(--con-gold);
        transform: translateY(-1px);
    }
    body.pk-page--con .pk-related .pk-calc-related a i { color: var(--con-gold); }
    body.pk-page--con .pk-related .pk-calc-related a:hover i { color: var(--con-ink); }

    @media (max-width: 640px) {
        .con-hero { padding: 36px 18px 14px; }
        .con-section { margin-top: 44px; }
    }