/* ══════════ VARIABLES ══════════ */
:root {
    --gold:        #C8960C;
    --gold-lt:     #F0C040;
    --gold-dk:     #8B6508;
    --gold-glow:   rgba(200,150,12,0.25);
    --maroon:      #6B0F1A;
    --maroon-lt:   #8B1A2A;
    --saffron:     #D4600A;
    --saffron-lt:  #F07020;
    --cream:       #FFF8EC;
    --ink:         #1A1008;
    --ink-mid:     #2A1C0E;
    --ink-card:    #231508;
    --ink-border:  #3D2A10;
    --text-main:   #F5E8D0;
    --text-muted:  #B09060;
    --text-dim:    #CCCCA7;
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --shadow:      0 6px 30px rgba(0,0,0,0.5);
    --shadow-gold: 0 0 24px rgba(200,150,12,0.2);
}

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Mukta', sans-serif;
    background: var(--ink);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content:'';
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(ellipse 70% 50% at 15% 10%, rgba(200,150,12,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 85%, rgba(212,96,10,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 60% 60% at 50% 40%, rgba(107,15,26,0.06) 0%, transparent 65%);
}
body::after {
    content:'';
    position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.03;
    background-image:
        repeating-linear-gradient(45deg, var(--gold) 0px, var(--gold) 1px, transparent 1px, transparent 20px),
        repeating-linear-gradient(-45deg, var(--gold) 0px, var(--gold) 1px, transparent 1px, transparent 20px);
}

/* ══════════ TOPBAR ══════════ */
.site-topbar {
    position:sticky; top:0; z-index:200;
    background: rgba(26,16,8,0.95);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--ink-border);
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.topbar-inner {
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; gap:16px;
    padding:0 24px; height:64px;
}
.site-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.site-brand img { width:42px; height:42px; border-radius:50%; border:2px solid var(--gold); box-shadow:0 0 10px var(--gold-glow); }
.brand-text { display:flex; flex-direction:column; line-height:1.4; }
.brand-hi {
    font-family:'Eczar',serif; font-size:1.15rem; font-weight:800;
    background: linear-gradient(135deg, var(--gold-lt) 0%, var(--saffron-lt) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.brand-en { font-size:0.62rem; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; }

.topbar-links { display:flex; align-items:center; gap:6px; margin-left:auto; }
.tl-btn {
    display:flex; align-items:center; gap:6px; padding:7px 14px;
    border-radius:var(--radius-sm); text-decoration:none; border:1px solid transparent;
    color:var(--text-muted); font-size:0.84rem; font-weight:500; transition:all 0.2s;
    font-family:'Mukta',sans-serif;
}
.tl-btn:hover { color:var(--gold-lt); border-color:var(--ink-border); background:rgba(200,150,12,0.07); }
.tl-btn.active { color:var(--gold-lt); }

/* ══════════ HERO ══════════ */
.hero-section {
    position:relative; z-index:1;
    padding:50px 24px 34px;
    text-align:center;
    overflow:hidden;
}
.hero-ornament {
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:600px; max-width:90%; height:3px;
    background:linear-gradient(90deg, transparent, var(--gold), var(--saffron), var(--gold), transparent);
}
.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 18px; border-radius:50px;
    background:rgba(200,150,12,0.12); border:1px solid rgba(200,150,12,0.3);
    font-size:0.78rem; color:var(--gold-lt); letter-spacing:1.5px; text-transform:uppercase;
    margin-bottom:18px; font-weight:600;
}
.hero-badge i { font-size:0.7rem; 
    margin-bottom: 10px;
}
.hero-title {
    font-family:'Eczar',serif; font-size:clamp(2rem, 5vw, 3rem); font-weight:800;
    line-height:1.4;
  
    background:linear-gradient(135deg, var(--gold-lt) 0%, var(--cream) 40%, var(--saffron-lt) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    margin-bottom:12px;
}
.hero-sub {
    font-family:'Tiro Devanagari Hindi', serif;
    font-size:1rem; color:var(--text-muted); line-height:1.8;
    max-width:640px; margin:0 auto;
}

/* ══════════ BOOKS GRID ══════════ */
.books-section {
    position:relative; z-index:1;
    max-width:1100px; margin:0 auto;
    padding:0 16px 60px;
}
.books-header {
    text-align:center; margin-bottom:32px;
    padding-bottom:20px; border-bottom:1px solid var(--ink-border);
}
.books-header h2 {
    font-family:'Eczar',serif; font-size:1.8rem; font-weight:800;
    background:linear-gradient(135deg, var(--gold-lt), var(--cream));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    margin-bottom:6px;
}
.books-header p { color:var(--text-muted); font-size:0.9rem; }
.access-badge {
    display:inline-flex; align-items:center; gap:7px;
    padding:5px 16px; border-radius:50px;
    background:rgba(19,136,8,0.15); border:1px solid rgba(19,136,8,0.3);
    color:#50cc50; font-size:0.78rem; font-weight:600; margin-bottom:25px;
}

.books-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:18px;
}
/* "नागराज & ध्रुव" wala card poori row me */
.book-card.wide { grid-column: 1 / -1; }
.book-card.wide .book-thumb-wrap { aspect-ratio: 16/6; }

.book-card {
    background:var(--ink-card);
    border:1px solid var(--ink-border);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    animation:fadeUp 0.4s ease both;
    text-decoration:none; display:block;
}
.book-card:hover {
    transform:translateY(-5px);
    box-shadow:0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,150,12,0.2);
    text-decoration:none;
}
.book-thumb-wrap {
    position:relative; overflow:hidden;
    background:var(--ink-mid);
    aspect-ratio:1/1;
}
.book-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
    background: var(--ink-mid);
}
.book-card:hover .book-thumb-wrap img { transform:scale(1.05); }
.book-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(26,16,8,0.85) 0%, transparent 55%);
    display:flex; align-items:flex-end; padding:12px;
    opacity:0; transition:opacity 0.25s;
}
.book-card:hover .book-overlay { opacity:1; }
.book-read-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 16px; border-radius:50px;
    background:linear-gradient(135deg, var(--gold), var(--saffron-lt));
    color:var(--ink); font-size:0.8rem; font-weight:700;
    width:100%; justify-content:center;
}
.book-info { padding:12px 14px 14px; }
.book-title {
    font-family:'Eczar',serif; font-size:0.95rem; font-weight:600;
    color:var(--cream); line-height:1.4; margin-bottom:6px;
}
.book-tag {
    display:inline-flex; align-items:center; gap:4px;
    font-size:0.7rem; color:var(--gold-lt);
    background:rgba(200,150,12,0.1); border:1px solid rgba(200,150,12,0.2);
    padding:2px 8px; border-radius:50px;
}

/* back button */
.back-wrap { text-align:center; margin-top:34px; }
.back-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 24px; border-radius:50px; text-decoration:none;
    background:transparent; border:1px solid var(--ink-border);
    color:var(--text-muted); font-size:0.87rem; transition:all 0.2s;
}
.back-btn:hover { border-color:var(--gold); color:var(--gold-lt); }

/* ══════════ ANIMATIONS ══════════ */
@keyframes fadeUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--ink); }
::-webkit-scrollbar-thumb { background:var(--ink-border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }

/* responsive */
@media (max-width:640px) {
    .hero-section {
        padding: 40px 16px 24px;
    }

    .books-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .book-card.wide .book-thumb-wrap {
        aspect-ratio: 16/8;
    }

    .topbar-links {
        gap: 8px;
    }

    .tl-btn span {
        display: none;
    }

    .tl-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}