:root {
    --bg: #070912;
    --bg-alt: #0d1020;
    --ink: #f2f1f8;
    --muted: #b5b7c5;
    --gold: #f2b544;
    --neon: #b26bff;
    --neon-2: #25c7ff;
    --panel: rgba(8,10,18,.72);
    --border: rgba(255,255,255,.08);
}

/* ---------------- RESET ---------------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    line-height: 1.65;
    background: linear-gradient( 90deg, rgba(145,52,40,.30) 0%, rgba(47,20,58,.45) 30%, rgba(7,9,18,.88) 70%, rgba(7,9,18,.96) 100% ), url('/img/static-background.jpg') center center / cover fixed no-repeat, var(--bg);
}

    /* subtle stars */

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,.35), transparent), radial-gradient(2px 2px at 85% 20%, rgba(255,255,255,.45), transparent), radial-gradient(1px 1px at 10% 75%, rgba(255,255,255,.35), transparent);
        background-size: 900px 700px;
        z-index: 0;
    }

main,
header,
footer {
    position: relative;
    z-index: 1;
}

/* ---------------- LAYOUT ---------------- */

.container {
    width: min(1180px, 92%);
    margin: 0 auto;
}

.content {
    max-width: none;
    padding: 0;
}

/* ---------------- HEADER ---------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(5,7,15,.55);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

    .site-header .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 72px;
    }

.brand {
    color: var(--ink);
    text-decoration: none;
    font-family: 'Cinzel',serif;
    font-weight: 700;
    letter-spacing: .04em;
    font-size: 1.25rem;
}

nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

    nav a {
        color: var(--ink);
        text-decoration: none;
        opacity: .92;
        font-size: .95rem;
    }

        nav a:hover {
            opacity: 1;
        }

/* ---------------- BUTTONS ---------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.3rem;
    border-radius: .9rem;
    border: 1px solid rgba(255,255,255,.12);
    text-decoration: none;
    transition: .25s ease;
    cursor: pointer;
    font-weight: 600;
}

    .btn.neon {
        border: none;
        background: linear-gradient( 90deg, var(--neon), var(--neon-2) );
        color: #05070f;
        box-shadow: 0 0 24px rgba(178,107,255,.35);
    }

        .btn.neon:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 32px rgba(178,107,255,.55);
        }

    .btn.outline {
        border: 1px solid rgba(178,107,255,.55);
        color: var(--ink);
        background: rgba(0,0,0,.18);
    }

        .btn.outline:hover {
            border-color: var(--neon);
            box-shadow: 0 0 18px rgba(178,107,255,.35);
        }

/* ---------------- HERO ---------------- */

.hero {
    min-height: 820px;
    padding-bottom: 80px;
    border-bottom: 1px solid rgba(178,107,255,.25);
}

/* Conclave banner */
/* Conclave banner */

.conclave-banner {
    width: min(1180px,92%);
    margin: 0 auto;
    padding-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: 'Cinzel',serif;
    font-weight: 700;
    font-size: .72rem;
    opacity: .92;
}

    .conclave-logo,
    .conclave-banner img {
        width: 82px !important;
        height: 82px !important;
        max-width: 82px !important;
        max-height: 82px !important;
        object-fit: contain !important;
        display: block;
        opacity: .95;
        filter: drop-shadow(0 0 4px rgba(242,181,68,.22)) drop-shadow(0 0 8px rgba(242,181,68,.08));
    }

    .conclave-banner div:last-child,
    .conclave-banner span:last-child {
        text-align: right;
    }
.conclave-side {
    font-size: 1rem;
    line-height: 1.35;
    text-align: left;
    text-shadow: 0 0 10px rgba(242,181,68,.25);
}

.conclave-right {
    text-align: right;
}

.conclave-centre {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .9rem;
    white-space: nowrap;
}
.conclave-title {
    display: block;
    width: 230px;
    text-align: left !important;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    font-size: 2.4rem;
    line-height: .9;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-shadow: 0 0 12px rgba(242,181,68,.25);
}
/* Hero content */

.hero-inner {
    width: min(1180px,92%);
    margin: 120px auto 0;
}

.hero .title {
    max-width: 700px;
    margin: 0 0 2rem;
    font-family: 'Cinzel',serif;
    font-size: clamp(3rem,5.5vw,5.5rem);
    line-height: 1.03;
    text-shadow: 0 0 18px rgba(178,107,255,.28), 0 0 40px rgba(0,0,0,.55);
}

.hero .tagline {
    max-width: 650px;
    font-size: 1.1rem;
    color: var(--muted);
}

.actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* ---------------- SECTIONS ---------------- */

.section {
    width: min(1180px,92%);
    margin: 0 auto;
    padding: 72px 0;
}

    .section.alt {
        background: rgba(8,10,18,.72);
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 28px;
        padding: 3rem;
        margin-top: 4rem;
    }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 2rem;
}

.h2 {
    font-family: 'Cinzel',serif;
    font-size: 2rem;
    margin: 0;
}

.link {
    color: var(--muted);
    text-decoration: none;
}

    .link:hover {
        color: var(--ink);
    }

/* ---------------- BOOKS ---------------- */

.grid-3 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 3rem;
    flex-wrap: wrap;
}

.card {
    position: relative;
    width: 320px;
    background: transparent;
    border: none;
    overflow: visible;
    transform-style: preserve-3d;
    perspective: 1200px;
    transition: transform .35s ease, filter .35s ease;
}

/* ---------------- BOOKS ---------------- */

.grid-3 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 3rem;
    flex-wrap: wrap;
}

.card {
    position: relative;
    width: 320px;
    background: rgba(10, 6, 18, .28);
    border: 1px solid rgba(242,181,68,.08);
    border-radius: 22px;
    padding: 1.25rem;
    overflow: visible;
    transition: transform .35s ease, filter .35s ease;
}

    .card .cover {
        position: relative;
        display: block;
        overflow: visible;
        border-radius: 0;
        transform: none;
        box-shadow: none;
    }

        /* fake table shadow underneath transparent PNG */
        .card .cover::before {
            content: "";
            position: absolute;
            left: 12%;
            right: 12%;
            bottom: 5px;
            height: 24px;
            background: rgba(0,0,0,.55);
            filter: blur(18px);
            border-radius: 50%;
            z-index: 0;
        }

        /* remove old glossy overlay */
        .card .cover::after {
            display: none;
        }

        .card .cover img {
            position: relative;
            z-index: 1;
            width: 100%;
            height: auto;
            object-fit: contain;
            display: block;
            filter: drop-shadow(0 18px 22px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(178,107,255,.10));
            transition: transform .35s ease, filter .35s ease;
        }

    .card:hover {
        transform: translateY(-8px);
    }

        .card:hover .cover img {
            transform: scale(1.025);
            filter: drop-shadow(0 26px 30px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(178,107,255,.18));
        }

    /* featured book */

    .card:first-child {
        width: 380px;
        z-index: 2;
        border-color: rgba(242,181,68,.14);
        background: rgba(10, 6, 18, .36);
    }

        .card:first-child .cover img {
            filter: drop-shadow(0 24px 30px rgba(0,0,0,.62)) drop-shadow(0 0 20px rgba(178,107,255,.16));
        }

    /* secondary books fade back */

    .card:nth-child(2),
    .card:nth-child(3) {
        opacity: .9;
        filter: saturate(.9);
    }

/* featured book */

.card:first-child {
    width: 380px;
    z-index: 2;
    border-color: rgba(242,181,68,.14);
    background: rgba(10, 6, 18, .36);
}

.card:first-child .cover img {
    filter:
        drop-shadow(0 24px 30px rgba(0,0,0,.62))
        drop-shadow(0 0 20px rgba(178,107,255,.16));
}

/* secondary books fade back */

.card:nth-child(2),
.card:nth-child(3) {
    opacity: .9;
    filter: saturate(.9);
}
/* content under books */

.card-body {
    padding-top: 1.5rem;
    text-align: center;
}

.card-title {
    margin: 0 0 .4rem;
    font-family: 'Cinzel', serif;
    font-size: 2rem;
}

.card-tagline {
    color: var(--gold);
    margin-bottom: .8rem;
}

.card-desc {
    color: var(--muted);
    font-size: .96rem;
}

.card-footer {
    margin-top: 1rem;
    justify-content: center;
}

.status {
    display: block;
    margin-top: 1rem;
    color: #d48cff;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
}

/* ---------------- ABOUT ---------------- */

.panel {
    background: rgba(8,10,18,.78);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

    .panel p {
        color: var(--muted);
        font-size: 1.05rem;
    }

/* ---------------- BLOG ---------------- */

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.post-card {
    background: rgba(8,10,18,.78);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 22px;
    padding: 1.5rem;
}

    .post-card h3 {
        margin-top: 0;
        font-family: 'Cinzel',serif;
    }

    .post-card .meta {
        color: var(--muted);
        font-size: .9rem;
    }

/* ---------------- NEWSLETTER ---------------- */

.newsletter .scroll {
    background: linear-gradient( 180deg, rgba(178,107,255,.08), rgba(37,199,255,.06) );
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 28px;
    padding: 3rem;
    text-align: center;
    backdrop-filter: blur(10px);
}

.input {
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .75rem;
    color: var(--ink);
    padding: .9rem 1rem;
    min-width: 260px;
    margin-right: .5rem;
}

.note {
    margin-top: 1rem;
    color: var(--muted);
}

/* ---------------- FOOTER ---------------- */

.site-footer {
    margin-top: 5rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(5,7,15,.72);
    backdrop-filter: blur(8px);
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.socials {
    display: flex;
    gap: 1rem;
}

    .socials a {
        color: var(--muted);
        text-decoration: none;
    }

        .socials a:hover {
            color: var(--ink);
        }
.footer-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.footer-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    opacity: .78;
    filter: drop-shadow(0 0 4px rgba(180,100,255,.12)) drop-shadow(0 0 6px rgba(242,181,68,.06));
}

.footer-copy {
    font-size: .95rem;
    color: rgba(255,255,255,.82);
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width:980px) {

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .card:first-child {
        transform: none;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: auto;
        padding-bottom: 5rem;
    }

    .hero-inner {
        margin-top: 80px;
    }

    .hero .title {
        font-size: clamp(2.5rem,10vw,4rem);
    }

    .conclave-banner {
        grid-template-columns: 1fr;
        text-align: left;
    }

        .conclave-banner div:last-child {
            text-align: left;
        }

    .conclave-logo {
        height: 90px;
    }

    nav {
        gap: .8rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media (max-width:640px) {

    .site-header .nav {
        flex-direction: column;
        height: auto;
        padding: 1rem 0;
        gap: 1rem;
    }

    .hero-inner {
        margin-top: 60px;
    }

    .section.alt {
        padding: 1.5rem;
    }

    .newsletter .scroll {
        padding: 2rem 1.25rem;
    }

    .input {
        width: 100%;
        margin: 0 0 1rem;
    }

    .actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-grid {
        flex-direction: column;
        text-align: center;
    }
}
/* ---------------- MODAL ---------------- */

/* ---------------- OLD PAGE MODAL ---------------- */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(50,20,60,.22), transparent 45%), rgba(0,0,0,.84);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-content {
    position: relative;
    width: min(760px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    color: #2b1b10;
    background: linear-gradient( 90deg, rgba(80,45,20,.18) 0%, rgba(255,255,255,0) 8%, rgba(255,255,255,0) 92%, rgba(80,45,20,.18) 100% ), radial-gradient(circle at 20% 10%, rgba(255,255,255,.45), transparent 24%), linear-gradient(180deg, #ead6a5, #caa66d);
    border: 1px solid #6f4a22;
    border-radius: 8px 22px 22px 8px;
    padding: 3.4rem 3.2rem;
    box-shadow: 0 28px 70px rgba(0,0,0,.78), inset 14px 0 22px rgba(88,52,21,.28), inset -8px 0 18px rgba(255,239,190,.22);
    font-family: Georgia, 'Times New Roman', serif;
}

    /* ragged parchment edge illusion */
    .modal-content::before {
        content: "";
        position: absolute;
        inset: 12px;
        pointer-events: none;
        border: 1px solid rgba(80,45,20,.28);
        border-radius: 6px 18px 18px 6px;
    }

    /* aged speckles */
    .modal-content::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .16;
        background-image: radial-gradient(circle at 12% 18%, #3c2111 0 1px, transparent 1.5px), radial-gradient(circle at 72% 38%, #3c2111 0 1px, transparent 1.5px), radial-gradient(circle at 36% 78%, #3c2111 0 1px, transparent 1.5px), radial-gradient(circle at 88% 64%, #3c2111 0 1px, transparent 1.5px);
        background-size: 140px 160px;
    }

    .modal-content h2 {
        margin-top: 0;
        margin-bottom: 1.6rem;
        color: #241409;
        font-family: 'Cinzel', Georgia, serif;
        font-size: 3rem;
        text-align: center;
        letter-spacing: .08em;
    }

    .modal-content p {
        color: #2d1a0c;
        line-height: 1.85;
        margin-bottom: 1.25rem;
        font-size: 1.06rem;
    }

.modal-close {
    position: absolute;
    top: .8rem;
    right: .8rem;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(70,40,20,.35);
    background: rgba(95,55,25,.16);
    color: #2b1b10;
    cursor: pointer;
    font-size: 1.35rem;
}

    .modal-close:hover {
        background: rgba(95,55,25,.28);
    }

.modal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

    .modal-actions .btn.neon {
        background: #2b1b10;
        color: #f5e2b0;
        box-shadow: none;
    }

    .modal-actions .btn.outline {
        border-color: #5e3719;
        color: #2b1b10;
        background: rgba(255,255,255,.16);
    }