/* =========================
   GENERAL STYLES
========================= */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Cormorant Garamond", serif;
    background: #0B0B10;
    color: white;
}


/* Headings */

h1,
h2,
h3,
.logo {
    font-family: "Cinzel", serif;
}



/* =========================
   NAVIGATION
========================= */


header {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(11, 11, 16, 0.65);

    backdrop-filter: blur(10px);

}


nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 25px 8%;

}


.logo {

    font-size: 28px;

    letter-spacing: 2px;

    color: white;

}


nav ul {

    display: flex;

    list-style: none;

    gap: 35px;

}


nav a {

    font-family: "Cormorant Garamond", serif;

    font-size: 20px;

    color: white;

    text-decoration: none;

    transition: 0.3s ease;

}


nav a:hover {

    color: #E5C86B;

}



/* =========================
   HERO SECTION
========================= */


.hero {

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 0 20px;

}


.hero-content {

    max-width: 900px;

}


/* Author Name */

.hero h1 {

    font-size: 70px;

    letter-spacing: 8px;

    text-transform: uppercase;

    color: white;

    margin-bottom: 10px;

}



/* Author */

.hero h2 {

    color: #E5C86B;

    font-size: 38px;

    margin-bottom: 25px;

}



/* Tagline */

.hero p {

    font-size: 26px;

    line-height: 1.6;

    margin-bottom: 40px;

    color: #CFCFD6;

}



/* Main Button */

.button {

    display: inline-block;

    padding: 16px 40px;

    background: #6A0DAD;

    color: white;

    text-decoration: none;

    border-radius: 30px;

    font-size: 20px;

    transition: 0.3s ease;

}


.button:hover {

    background: #E5C86B;

    color: #0B0B10;

    transform: translateY(-5px);

}



/* =========================
   GENERAL SECTIONS
========================= */


section {

    min-height: 70vh;

    padding: 120px 10%;

}



section h2 {

    font-size: 45px;

    margin-bottom: 20px;

}


section p {

    font-size: 22px;

    line-height: 1.7;

    color: #CFCFD6;

}



/* =========================
   FUTURE BACKGROUND PLACEHOLDER
========================= */


/*
   Later we will replace this
   with your cinematic background:
   purple glow, stars, mist, etc.
*/

.hero {

    background:

    radial-gradient(
        circle at center,
        rgba(106,13,173,0.25),
        transparent 45%
    );

}



/* =========================
   MOBILE ADJUSTMENTS
========================= */


@media (max-width: 768px) {


    nav ul {

        gap: 15px;

    }


    nav a {

        font-size: 16px;

    }


    .hero h1 {

        font-size: 50px;

        letter-spacing: 4px;

    }


    .hero h2 {

        font-size: 30px;

    }


    .hero p {

        font-size: 20px;

    }


}

/* =========================
   HERO BACKGROUND EFFECTS
========================= */


.hero {

    position: relative;

    overflow: hidden;

    background:

    radial-gradient(
        circle at center,
        rgba(106,13,173,0.35),
        transparent 50%
    ),

    linear-gradient(
        135deg,
        #0B0B10,
        #160021
    );

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:

    radial-gradient(
        circle at 50% 40%,
        rgba(106,13,173,0.25),
        transparent 35%
    );

}


.hero-content {

    position: relative;

    z-index: 2;

}

/* =========================
   BOOK SECTION
========================= */


.books {

    text-align: center;

}


.section-intro {

    max-width: 700px;

    margin: 0 auto 60px;

}


.books-container{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:70px;

    flex-wrap:wrap;

    max-width:1500px;

    margin:60px auto 0;

}

.book-card{

    width:500px;

    background:rgba(255,255,255,.04);

    border-radius:22px;

    padding:35px;

    border:1px solid rgba(229,200,107,.12);

    transition:.4s ease;

}

.book-card:hover{

    transform:translateY(-10px);

    border-color:#6A0DAD;

    box-shadow:0 0 35px rgba(106,13,173,.28);

}

.series-ribbon{

    display:inline-block;

    background:#E5C86B;

    color:#111;

    font-weight:bold;

    padding:8px 18px;

    border-radius:30px;

    margin-bottom:18px;

    letter-spacing:1px;

    font-size:15px;

}

.book-hook{

    margin:25px 0;

}

.book-hook p{

    font-family:"Cinzel",serif;

    color:#E5C86B;

    font-size:17px;

    margin:10px 0;

    letter-spacing:1px;

}


.book-card img{

    width:330px;

    display:block;

    margin:0 auto 25px;

    border-radius:12px;

    transition:.4s;

}


.book-info h3 {

    font-size: 32px;

    margin-bottom: 15px;

}


.book-info p {

    font-size: 20px;

    margin-bottom: 25px;

}



.book-buttons {

    display: flex;

    justify-content: center;

    gap: 15px;

}


.button.secondary {

    background: transparent;

    border: 1px solid #E5C86B;

}


.button.secondary:hover {

    background: #E5C86B;

}

.book-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:25px;

}

.secondary{

    background:transparent;

    border:2px solid #E5C86B;

}

.secondary:hover{

    background:#E5C86B;

    color:#111;

}

/* =========================
   BOOK HOOK STYLING
========================= */


.series {

    font-size: 18px !important;

    color: #E5C86B !important;

    margin-bottom: 25px;

}



.hook {

    font-family: "Cinzel", serif;

    font-size: 28px;

    line-height: 1.5;

    letter-spacing: 1px;

    color: white;

    margin-bottom: 30px;

}

/* =========================
   ABOUT SECTION
========================= */


.about {

    background:

    linear-gradient(
        rgba(11,11,16,0.9),
        rgba(11,11,16,0.95)
    );

}


.about-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 70px;

    max-width: 1200px;

    margin: auto;

}



.about-image img {

    width: 350px;

    border-radius: 20px;

    border: 2px solid #E5C86B;

    box-shadow:
    0 0 30px rgba(106,13,173,0.4);

}



.about-text {

    max-width: 600px;

}



.about-text h2 {

    color: #E5C86B;

}



.about-text p {

    margin-bottom: 20px;

}



/* Mobile */

@media(max-width:768px){

    .about-container {

        flex-direction: column;

        text-align: center;

    }


    .about-image img {

        width: 250px;

    }

}

/* =========================
   FOOTER
========================= */


footer {

    text-align: center;

    padding: 50px 10%;

    background: #07070B;

}


footer h3 {

    font-size: 30px;

    margin-bottom: 10px;

}


footer p {

    color: #CFCFD6;

}


.footer-links {

    margin: 25px 0;

}


.footer-links a {

    color: #E5C86B;

    text-decoration: none;

    margin: 0 15px;

    font-size: 18px;

}


.footer-links a:hover {

    color: #6A0DAD;

}


.copyright {

    font-size: 16px;

}




/*=====================================
            AETHERIA
======================================*/

.aetheria{

    padding:140px 10%;

    text-align:center;

    background:
    linear-gradient(
        rgba(8,8,14,.95),
        rgba(12,12,20,.98)
    );

}

.section-small-title{

    color:#E5C86B;

    letter-spacing:5px;

    font-size:16px;

    margin-bottom:15px;

}

.aetheria h2{

    font-size:72px;

    color:white;

    margin-bottom:20px;

}

.aetheria-quote{

    font-style:italic;

    color:#CFCFD6;

    font-size:24px;

    margin-bottom:60px;

}

.map-container{

    max-width:1000px;

    margin:0 auto 60px;

    padding:15px;

    border-radius:20px;

    border:2px solid rgba(229,200,107,.4);

    background:rgba(255,255,255,.03);

    box-shadow:
    0 0 40px rgba(106,13,173,.35);

}

.map-container img{

    width:100%;

    display:block;

    border-radius:12px;

    transition:.5s;

}

.map-container img:hover{

    transform:scale(1.02);

}

.aetheria-text{

    max-width:900px;

    margin:0 auto;

}

.aetheria-text p{

    font-size:22px;

    line-height:1.8;

    margin-bottom:25px;

}

.kingdom-title{

    margin-top:80px;

    font-size:42px;

    color:#E5C86B;

}

.kingdom-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:30px;

    margin-top:50px;

}

.kingdom-card{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(229,200,107,.15);

    border-radius:18px;

    padding:30px;

    transition:.35s;

}

.kingdom-card:hover{

    transform:translateY(-10px);

    border-color:#6A0DAD;

    box-shadow:0 0 25px rgba(106,13,173,.35);

}

.kingdom-card h4{

    font-size:28px;

    margin-bottom:15px;

    color:white;

}

.kingdom-card p{

    color:#D7D7DD;

    line-height:1.6;

}

.coming-soon{

    margin-top:60px;

    color:#E5C86B;

    font-style:italic;

}

/* =========================
   AETHERIA MAP
========================= */


.map-container {

    margin: 60px auto;

    max-width: 1000px;

    padding: 15px;

    background: rgba(11,11,16,0.8);

    border: 2px solid #E5C86B;

    border-radius: 20px;

    box-shadow:
    0 0 40px rgba(106,13,173,0.45);

}



.map-container img {

    width: 100%;

    display: block;

    border-radius: 12px;

    transition: transform 0.4s ease;

}



.map-container img:hover {

    transform: scale(1.02);

}

/* =========================
   STORY PILLARS
========================= */

.story-pillars {

    text-align: center;

    padding: 100px 10%;

}

.story-pillars h2 {

    color: #E5C86B;

    margin-bottom: 60px;

}

.pillar-grid {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 30px;

}

.pillar-card {

    width: 210px;

    padding: 35px 20px;

    border-radius: 18px;

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(229,200,107,.15);

    transition: .35s ease;

}

.pillar-card:hover {

    transform: translateY(-8px);

    border-color: #6A0DAD;

    box-shadow: 0 0 25px rgba(106,13,173,.35);

}

.pillar-card span {

    font-size: 40px;

    display: block;

    margin-bottom: 20px;

}

.pillar-card h3 {

    font-size: 24px;

}


/* =========================
   NEWSLETTER / CONTACT
========================= */

.newsletter {

    text-align: center;

    padding: 120px 10%;

    background:
    linear-gradient(
        rgba(106,13,173,0.12),
        rgba(11,11,16,0.95)
    );

}

.newsletter-content {

    max-width: 600px;

    margin: 0 auto;

}

.newsletter h2 {

    color: #E5C86B;

    margin-bottom: 20px;

}

.newsletter-subhead {

    font-size: 20px;

    color: #E5C86B;

    margin-bottom: 15px;

}

.newsletter-list {

    list-style: none;

    max-width: 400px;

    margin: 0 auto 35px;

    text-align: left;

}

.newsletter-list li {

    font-size: 20px;

    line-height: 1.8;

    color: #CFCFD6;

}

.newsletter-list li i {

    color: #E5C86B;

    margin-right: 12px;

    width: 20px;

    text-align: center;

}

.newsletter-form {

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}

.newsletter-form input {

    padding: 16px 20px;

    border-radius: 30px;

    border: 1px solid rgba(229,200,107,.4);

    background: rgba(255,255,255,0.05);

    color: white;

    font-family: "Cormorant Garamond", serif;

    font-size: 18px;

    min-width: 280px;

}

.newsletter-form input::placeholder {

    color: #CFCFD6;

}

.newsletter-form input:focus {

    outline: none;

    border-color: #E5C86B;

}

.newsletter-form button i {

    margin-right: 8px;

}

.newsletter-note {

    margin-top: 20px;

    font-size: 16px;

    color: #CFCFD6;

}

.contact-alt {

    margin-top: 30px;

    font-size: 16px;

    color: #CFCFD6;

}

.contact-alt a {

    color: #E5C86B;

    text-decoration: none;

}

.contact-alt a:hover {

    color: #6A0DAD;

}

/* Mobile */

@media (max-width: 768px) {

    .newsletter-form {

        flex-direction: column;

        align-items: center;

    }

    .newsletter-form input {

        width: 100%;

        max-width: 320px;

    }

}

.formkit-form[data-uid="fced3b1aee"] .formkit-submit {
    background-color: #6B21A8 !important; /* example purple - replace with your exact brand hex */
}

.formkit-form[data-uid="fced3b1aee"] .formkit-submit:hover {
    background-color: #581C87 !important; /* slightly darker purple for hover */
}
.formkit-powered-by-convertkit-container {
    display: none !important;
}

.formkit-form[data-uid="fced3b1aee"] .formkit-submit span,
.formkit-form[data-uid="fced3b1aee"] .formkit-input {
    font-family: 'YourSiteFontNameHere', serif !important;

}

.follow-me {
    text-align: center;
    margin-top: 50px;
}

.follow-me h3 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    letter-spacing: 1px;
    color: white;
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.social-icons a {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;

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

    background: #6A0DAD;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    overflow: hidden; /* clips anything that doesn't fit, just in case */

    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Target the icon itself, not the anchor's text */
.social-icons a i,
.social-icons a svg {
    font-size: 1.5rem;
    line-height: 1;
    display: block;
    margin: 0 auto;
}

.social-icons a:hover,
.social-icons a:focus-visible {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}



.magic-background{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-1;
}

.magic-background span{
    position:absolute;
    display:block;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#bfa6ff;
    box-shadow:
        0 0 8px #bfa6ff,
        0 0 16px #9e7dff,
        0 0 24px #ffffff;

    opacity:.45;
    animation:floatMagic linear infinite;
}

/* random positions */

.magic-background span:nth-child(1){
    left:10%;
    animation-duration:18s;
    animation-delay:0s;
}

.magic-background span:nth-child(2){
    left:24%;
    animation-duration:24s;
    animation-delay:3s;
}

.magic-background span:nth-child(3){
    left:37%;
    animation-duration:20s;
}

.magic-background span:nth-child(4){
    left:52%;
    animation-duration:26s;
}

.magic-background span:nth-child(5){
    left:67%;
    animation-duration:18s;
}

.magic-background span:nth-child(6){
    left:81%;
    animation-duration:30s;
}

.magic-background span:nth-child(7){
    left:92%;
    animation-duration:22s;
}

.magic-background span:nth-child(8){
    left:75%;
    animation-duration:28s;
}

@keyframes floatMagic {

    0%{
        transform: translateY(110vh) translateX(0) scale(.6);
        opacity:0;
    }

    15%{
        opacity:.7;
    }

    50%{
        transform: translateY(40vh) translateX(25px) scale(1);
        opacity:1;
    }

    100%{
        transform: translateY(-20vh) translateX(-25px) scale(.3);
        opacity:0;
    }
}