/* =========================
   COLOR SYSTEM
========================= */
:root {
    --fog: #C8C0B4;
    --cement: #A89D90;
    --beige: #D8C7AF;
    --clay: #C78F6B;
    --stone: #8C857A;
    --ink: #2A2624;
    --smoke: #6F6C66;
    --white: #EEE7DA;
}

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

html{
    scroll-behavior:smooth;
}

/* CONTINUOUS ATMOSPHERIC BACKGROUND */
body{
    background: linear-gradient(
        180deg,
        var(--white) 0%,
        var(--fog) 55%,
        var(--cement) 140%
    );
    color: var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
}

/* =========================
   GLOBAL
========================= */
img{
    width:100%;
    display:block;
}

section{
    width:100%;
    position:relative;
}

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

/* =========================
   HERO
========================= */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:80px 0;
    border-bottom:1px solid rgba(42,38,36,.08);
    position:relative;
    overflow-x:clip;
}

/* FADE IMAGE AT TOP */
.hero-image-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-image-fade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0.35;
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.6) 25%,
        rgba(0,0,0,0) 70%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.6) 25%,
        rgba(0,0,0,0) 70%
    );
}

/* SOFT LIGHT LAYER */
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(
        circle at 50% 20%,
        rgba(216,199,175,.35),
        transparent 60%
    );
    pointer-events:none;
    z-index: 1;
}

.hero-inner{
    max-width:900px;
    position:relative;
    z-index: 2;
    margin:0 auto;
}

.hero h1{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(4rem,11vw,9rem);
    line-height:.9;
    font-weight:600;
    letter-spacing:-3px;
    margin-bottom:25px;
}

.hero p{
    max-width:700px;
    margin:0 auto;
    color: var(--smoke);
    line-height:1.8;
    font-size:1rem;
}

.scroll-indicator{
    margin-top:70px;
    font-size:.8rem;
    letter-spacing:4px;
    text-transform:uppercase;
    opacity:.45;
}

/* =========================
   FEATURE SECTION
========================= */
.feature-section{
    padding:140px 0 120px;
    position:relative;
}

/* SOFT MATERIAL BLEED */
.feature-section::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(200,192,180,.45),
        transparent 70%
    );
    opacity:.6;
    pointer-events:none;
}

.feature-wrapper{
    position:relative;
    width:100%;
    max-width:900px;
    margin:0 auto;
    perspective:1800px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* =========================
   MAIN CARD - STATIC (NO FLIP) - CENTERED
========================= */
.main-card{
    position:relative;
    width:84%;
    aspect-ratio:4/5;
    border-radius:28px;
    overflow:hidden;
    cursor:default;
    box-shadow: 0 30px 80px rgba(70,55,45,.14);
    margin:0 auto;
}

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

/* =========================
   BUTTON
========================= */
.show-btn{
    margin:50px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px 34px;
    border:1px solid rgba(42,38,36,.12);
    background: var(--beige);
    color: var(--ink);
    border-radius:999px;
    cursor:pointer;
    transition:.35s ease;
    font-size:.85rem;
    letter-spacing:2px;
    text-transform:uppercase;
}

.show-btn:hover{
    background: var(--clay);
    color:#fff;
    transform:translateY(-3px);
}

/* =========================
   CARD SPREAD - COLLAPSIBLE VERSION
========================= */
.spread{
    position:relative;
    width:100%;
    height:0;
    margin-top:0;
    overflow:visible;
    transition: height 0.6s cubic-bezier(.2,.8,.2,1),
                margin-top 0.6s cubic-bezier(.2,.8,.2,1);
}

.spread.active{
    height:550px;
    margin-top:70px;
}

.small-card{
    position:absolute;
    width:220px;
    aspect-ratio:4/5;
    border-radius:22px;
    overflow:hidden;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(.4);
    opacity:0;
    visibility: hidden;
    transition: all 0.8s cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 20px 60px rgba(70,55,45,.18);
}

.small-card img{
    height:100%;
    object-fit:cover;
    cursor:pointer;
}

/* ACTIVE POSITIONS - CENTERED ON ALL SCREENS */
.spread.active .small-card {
    visibility: visible;
}

.spread.active .card1{
    transform:translate(calc(-50% - 280px), -50%) rotate(-22deg);
    opacity:1;
}

.spread.active .card2{
    transform:translate(calc(-50% - 160px), -53%) rotate(-14deg);
    opacity:1;
}

.spread.active .card3{
    transform:translate(calc(-50% - 50px), -50%) rotate(-6deg);
    opacity:1;
}

.spread.active .card4{
    transform:translate(calc(-50% + 50px), -48%) rotate(4deg);
    opacity:1;
}

.spread.active .card5{
    transform:translate(calc(-50% + 160px), -50%) rotate(12deg);
    opacity:1;
}

.spread.active .card6{
    transform:translate(calc(-50% + 280px), -52%) rotate(20deg);
    opacity:1;
}

/* =========================
   BIO SECTION
========================= */
.bio{
    padding:180px 0;
    border-top:1px solid rgba(42,38,36,.08);
    position:relative;
}

/* SOFT TRANSITION LAYER */
.bio::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(216,199,175,.25),
        transparent 65%
    );
    pointer-events:none;
}

.bio-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    position:relative;
}

/* BIO PHOTO - SUBTLE VERSION */
.bio-photo{
    width:80%;
    max-width:280px;
    border-radius:5px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(70,55,45,.08);
    margin:0 auto;
}

.bio-photo img{
    width:100%;
    height:auto;
    display:block;
    transition:transform 0.4s ease;
}

.bio-photo img:hover{
    transform:scale(1.01);
}

.bio-text{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.bio-title{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(3rem,7vw,6rem);
    line-height:.95;
}

.bio-title small{
    font-size:1.2rem;
    font-family:'Inter',sans-serif;
    letter-spacing:1px;
    opacity:.7;
}

.bio-copy{
    color: var(--smoke);
    line-height:2;
    font-size:1rem;
}

.bio-copy p{
    margin-bottom:28px;
}

/* =========================
   FOOTER
========================= */
.footer{
    padding:80px 0 140px;
    text-align:center;
    border-top:1px solid rgba(42,38,36,.08);
    background: var(--ink);
    color: var(--white);
}

.footer h3{
    font-family:'Cormorant Garamond',serif;
    font-size:2rem;
    margin-bottom:10px;
}

.footer p{
    opacity:.6;
    letter-spacing:1px;
}

/* =========================
   FLOATING BUTTON
========================= */
.floating-book-btn{
    position:fixed;
    bottom:30px;
    right:30px;
    z-index:9999;
    padding:18px 32px;
    background: var(--ink);
    color: var(--white);
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:.8rem;
    font-weight:600;
    border-radius:999px;
    box-shadow:0 12px 40px rgba(42,38,36,.22);
    transition:.35s ease;
}

.floating-book-btn:hover{
    transform:translateY(-4px);
    background: var(--clay);
    color:#fff;
}

/* =========================
   LIGHTBOX
========================= */
.lightbox{
    position:fixed;
    inset:0;
    background: rgba(42,38,36,.92);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:.4s ease;
    z-index:99999;
    padding:40px;
}

.lightbox.active{
    opacity:1;
    pointer-events:auto;
}

.lightbox img{
    max-width:90%;
    max-height:90%;
    object-fit:contain;
    border-radius:18px;
}

.close-lightbox{
    position:absolute;
    top:30px;
    right:40px;
    font-size:4rem;
    color: var(--white);
    cursor:pointer;
    line-height:1;
    font-weight:200;
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media(max-width:950px){
    .spread.active{
        height:950px;
    }

    .small-card{
        width:180px;
    }

    .spread.active .card1{
        transform:translate(-50%, -420px) rotate(-12deg);
    }

    .spread.active .card2{
        transform:translate(-50%, -250px) rotate(10deg);
    }

    .spread.active .card3{
        transform:translate(-50%, -80px) rotate(-7deg);
    }

    .spread.active .card4{
        transform:translate(-50%, 90px) rotate(8deg);
    }

    .spread.active .card5{
        transform:translate(-50%, 260px) rotate(-10deg);
    }

    .spread.active .card6{
        transform:translate(-50%, 430px) rotate(11deg);
    }

    .bio-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .bio-photo{
        width:60%;
        max-width:240px;
        margin:0 auto;
    }

    .hero h1{
        letter-spacing:-1px;
    }

    .close-lightbox{
        top:20px;
        right:25px;
        font-size:3rem;
    }

    .floating-book-btn{
        bottom:20px;
        right:20px;
        padding:16px 24px;
        font-size:.75rem;
    }
}