:root {
            --beige:     #F0EAD6;
            --tan:       #D2B48C;
            --tan-dk:    #b8956a;
            --rose:      #BC4749;
            --rose-dk:   #9b3a3c;
            --teal:      #70A3A7;
            --teal-dk:   #4e7d80;
            --charcoal:  #403B33;
            --charcoal-lt:#5a5449;
            /* Pip-specific: night sky + lantern warmth */
            --night:     #0d1b2a;
            --night-mid: #162032;
            --night-lt:  #1e2d40;
            --moon:      #e8d5a0;
            --moon-dk:   #c9b07a;
            --lantern:   #f5a623;
            --lantern-dk:#c47f00;
            --lantern-lt:#fff8ec;
            --grass:     #4a7c59;
            --grass-lt:  #e8f5ec;
        }

        body {
            font-family:'Inter', sans-serif;
            background:var(--beige);
            color:var(--charcoal);
            overflow-x:hidden;
        }

            @keyframes logo-shift {
            0%{color:var(--tan)} 33%{color:var(--rose)} 66%{color:var(--teal)} 100%{color:var(--tan)}
        }

        /* ══ HEADER ══ */
            .site-header {
            position:sticky; top:0; z-index:50;
            background:rgba(255,255,255,0.96); backdrop-filter:blur(12px);
            border-bottom:1px solid rgba(64,59,51,0.08);
            box-shadow:0 2px 16px rgba(64,59,51,0.07);
        }
            .header-inner {
            max-width:1100px; margin:0 auto; padding:0 24px; height:68px;
            display:flex; justify-content:space-between; align-items:center;
        }
        .header-nav { display:flex; align-items:center; gap:8px; }
        .btn-back {
            font-size:0.88rem; font-weight:600; color:var(--charcoal-lt);
            padding:8px 14px; border-radius:8px; transition:background 0.15s,color 0.15s;
        }
        .btn-back:hover { background:var(--beige); color:var(--charcoal); }
        .btn-hub {
            background:var(--rose); color:white; font-weight:700; font-size:0.88rem;
            padding:9px 18px; border-radius:10px; box-shadow:0 3px 0 var(--rose-dk);
            transition:background 0.2s,transform 0.1s;
        }
        .btn-hub:hover { background:var(--rose-dk); transform:translateY(-1px); }
        @media(max-width:640px){.header-nav .btn-back{display:none!important}.nav-toggle{display:block!important}}

        /* ══ COMING SOON BAR ══ */
        .coming-soon-bar {
            background:var(--night-mid); padding:14px 24px;
            display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
        }
        .coming-soon-bar p { font-size:0.88rem; font-weight:600; color:rgba(240,234,214,0.8); }
        .coming-soon-bar strong { color:var(--moon); }
        .notify-btn {
            display:inline-flex; align-items:center; gap:6px;
            background:var(--rose); color:white; font-weight:700; font-size:0.82rem;
            padding:7px 16px; border-radius:8px; transition:background 0.2s; white-space:nowrap;
        }
        .notify-btn:hover { background:var(--rose-dk); }

        /* ══ HERO, night garden ══ */
        .book-hero {
            position:relative; overflow:hidden;
            background:var(--night);
            padding:70px 24px 100px;
        }

        /* Gradient ground */
        .hero-ground {
            position:absolute; bottom:0; left:0; right:0; height:140px;
            background:linear-gradient(to top, var(--grass) 0%, rgba(74,124,89,0.4) 60%, transparent 100%);
            pointer-events:none; z-index:0;
        }
        /* Moonlight glow */
        .moon-glow {
            position:absolute; top:-60px; right:8%;
            width:280px; height:280px; border-radius:50%;
            background:radial-gradient(circle, rgba(232,213,160,0.18) 0%, rgba(232,213,160,0.06) 50%, transparent 70%);
            pointer-events:none; z-index:0;
        }
        /* Lantern glow */
        .lantern-glow {
            position:absolute; bottom:80px; left:10%;
            width:220px; height:220px; border-radius:50%;
            background:radial-gradient(circle, rgba(245,166,35,0.22) 0%, rgba(245,166,35,0.06) 60%, transparent 80%);
            pointer-events:none; z-index:0;
            animation:lantern-pulse 3s ease-in-out infinite;
        }
        @keyframes lantern-pulse {
            0%,100%{opacity:0.8; transform:scale(1);}
            50%{opacity:1; transform:scale(1.08);}
        }

        /* Stars */
        .star {
            position:absolute; border-radius:50%; background:white;
            animation:twinkle var(--dur,3s) var(--del,0s) ease-in-out infinite;
            pointer-events:none;
        }
        @keyframes twinkle {
            0%,100%{opacity:0.12;transform:scale(1)}
            50%{opacity:0.9;transform:scale(1.6)}
        }

        .hero-inner {
            max-width:1000px; margin:0 auto; position:relative; z-index:1;
            display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
        }
        @media(max-width:720px){
            .hero-inner{grid-template-columns:1fr;gap:36px;text-align:center;}
            .hero-cover-wrap{order:-1;}
        }

        /* Book cover */
        .hero-cover-wrap { position:relative; }
        .book-cover-img {
            width:100%; max-width:300px; margin:0 auto; border-radius:14px;
            box-shadow:0 0 50px rgba(245,166,35,0.25), 12px 20px 48px rgba(0,0,0,0.55);
            transition:transform 0.35s,box-shadow 0.35s;
        }
        .book-cover-img:hover {
            transform:rotate(-1.5deg) scale(1.02);
            box-shadow:0 0 70px rgba(245,166,35,0.4), 18px 28px 60px rgba(0,0,0,0.55);
        }
        @media(max-width:720px){ .book-cover-img{max-width:220px;} }
        .cover-badge {
            position:absolute; top:-14px; right:-10px;
            background:var(--lantern); color:white;
            font-family:'Fredoka',cursive; font-size:0.88rem; font-weight:700;
            padding:7px 16px; border-radius:999px;
            box-shadow:0 4px 16px rgba(245,166,35,0.4);
        }
        @media(max-width:720px){ .cover-badge{right:calc(50% - 115px);} }

        /* Floating elements */
        .float-elem {
            position:absolute; font-size:var(--sz,1.4rem); opacity:0.65;
            animation:float-el var(--dur,5s) var(--del,0s) ease-in-out infinite alternate;
            pointer-events:none;
        }
        @keyframes float-el {
            from{transform:translateY(0) rotate(0deg)}
            to{transform:translateY(var(--ty,-12px)) rotate(var(--rot,10deg))}
        }

        /* Hero text */
        .book-series {
            display:inline-block; font-size:0.72rem; font-weight:700;
            letter-spacing:0.13em; text-transform:uppercase; color:var(--moon);
            border:1.5px solid rgba(232,213,160,0.4); border-radius:999px;
            padding:4px 14px; margin-bottom:16px;
        }
        .book-title {
            font-family:'Fredoka',cursive;
            font-size:clamp(2rem,5vw,3.2rem); font-weight:700; color:white;
            line-height:1.1; margin-bottom:16px;
            text-shadow:0 0 40px rgba(245,166,35,0.3);
        }
        .book-title span { color:var(--lantern); }
        .book-tagline {
            font-family:'Lora',serif; font-style:italic;
            font-size:1.05rem; color:rgba(240,234,214,0.8);
            line-height:1.75; margin-bottom:28px; max-width:440px;
        }
        @media(max-width:720px){ .book-tagline{margin:0 auto 28px;} }
        .book-meta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
        @media(max-width:720px){ .book-meta{justify-content:center;} }
        .meta-pill {
            display:inline-flex; align-items:center; gap:6px;
            font-size:0.8rem; font-weight:600;
            background:rgba(255,255,255,0.1); border:1.5px solid rgba(255,255,255,0.15);
            border-radius:999px; padding:6px 14px; color:rgba(240,234,214,0.85);
        }
        .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
        @media(max-width:720px){ .hero-ctas{justify-content:center;} }
            .btn-primary {
            display:inline-flex; align-items:center; gap:8px;
            background:var(--lantern); color:white;
            font-weight:800; font-size:1rem; padding:14px 28px; border-radius:13px;
            box-shadow:0 4px 0 var(--lantern-dk);
            transition:transform 0.12s,box-shadow 0.12s,filter 0.2s;
        }
        .btn-secondary {
            display:inline-flex; align-items:center; gap:8px;
            background:rgba(255,255,255,0.08); color:white;
            font-weight:700; font-size:1rem; padding:13px 26px; border-radius:13px;
            border:2px solid rgba(255,255,255,0.22);
            transition:background 0.2s,transform 0.12s;
        }
        .btn-secondary:hover { background:rgba(255,255,255,0.15); transform:translateY(-2px); }

        /* ══ ABOUT ══ */
        .about-section { padding:72px 24px; background:white; }
        .section-inner { max-width:1000px; margin:0 auto; }
            .section-tag {
            display:inline-block; font-size:0.7rem; font-weight:700;
            letter-spacing:0.12em; text-transform:uppercase; color:var(--teal);
            border:1.5px solid var(--teal); border-radius:999px; padding:4px 14px; margin-bottom:14px;
        }
            .about-section h2 {
            font-size:clamp(1.7rem,4vw,2.4rem); font-weight:900; color:var(--charcoal);
            margin-bottom:18px; line-height:1.15;
        }
        .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
        @media(max-width:680px){ .about-grid{grid-template-columns:1fr;gap:28px;} }
        .about-body p { font-size:1rem; color:var(--charcoal-lt); line-height:1.8; margin-bottom:16px; }
        .feature-list { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
        @media(max-width:480px){ .feature-list{grid-template-columns:1fr;} }
        .feature-item { background:var(--lantern-lt); border-radius:14px; padding:18px 16px; text-align:center; }
        .feature-icon  { font-size:1.8rem; margin-bottom:8px; }
        .feature-title { font-size:0.9rem; font-weight:800; color:var(--charcoal); margin-bottom:4px; }
        .feature-desc  { font-size:0.78rem; color:var(--charcoal-lt); line-height:1.4; }

        /* ══ STORY TEASER, real verses ══ */
        .teaser-section { padding:72px 24px; background:var(--night); }
        .teaser-intro { text-align:center; max-width:560px; margin:0 auto 52px; }
        .teaser-intro .section-tag { border-color:rgba(232,213,160,0.4); color:#fff; }
        .teaser-intro h2 { color:white; font-size:clamp(1.7rem,4vw,2.4rem); font-weight:900; }
        .teaser-intro p { font-size:0.95rem; color:rgba(240,234,214,0.6); margin-top:10px; line-height:1.65; }

        .teaser-gallery {
            max-width:1000px; margin:0 auto;
            display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px;
        }

        /* Story page cards */
        .page-card {
            background:var(--night-lt); border:1px solid rgba(255,255,255,0.08);
            border-radius:18px; overflow:hidden;
            box-shadow:0 6px 28px rgba(0,0,0,0.35);
            transition:transform 0.25s,box-shadow 0.25s;
            position:relative;
        }
        .page-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,0.45); }

        /* Card illustration area */
        .card-scene {
            width:100%; aspect-ratio:4/3; position:relative;
            display:flex; align-items:flex-end; justify-content:center;
            overflow:hidden; padding:0 0 20px;
        }
        .scene-bg { position:absolute; inset:0; }
        .scene-content { position:relative; z-index:1; text-align:center; }
        .scene-emoji { font-size:3.8rem; display:block; filter:drop-shadow(0 4px 16px rgba(0,0,0,0.5)); }

        .page-num {
            position:absolute; top:12px; left:12px;
            background:rgba(13,27,42,0.8); color:rgba(232,213,160,0.8);
            font-size:0.66rem; font-weight:700; letter-spacing:0.09em;
            padding:3px 10px; border-radius:999px;
        }

        /* Verse text */
        .card-verse {
            padding:20px 22px 22px;
        }
        .verse-text {
            font-family:'Lora',serif; font-style:italic;
            font-size:0.88rem; color:rgba(240,234,214,0.85);
            line-height:1.75; margin-bottom:10px;
        }
        .verse-pages { font-size:0.72rem; font-weight:700; color:rgba(232,213,160,0.5); letter-spacing:0.06em; text-transform:uppercase; }

        /* Locked card overlay */
        .card-locked .lock-overlay {
            position:absolute; inset:0 0 calc(100% - 60%) 0;
            background:rgba(13,27,42,0.78); backdrop-filter:blur(8px);
            display:flex; align-items:center; justify-content:center;
            font-family:'Fredoka',cursive; font-size:1.05rem; font-weight:700;
            color:rgba(232,213,160,0.85);
        }

        /* Special: CTA card */
        .cta-card {
            background:linear-gradient(135deg, var(--night-lt), var(--night-mid));
            border:1px solid rgba(245,166,35,0.2);
            border-radius:18px;
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            text-align:center; padding:36px 28px; gap:16px;
            box-shadow:0 6px 28px rgba(0,0,0,0.35);
            transition:transform 0.25s;
        }
        .cta-card:hover { transform:translateY(-4px); }
        .cta-card-title { font-family:'Fredoka',cursive; font-size:1.15rem; font-weight:700; color:white; }
        .cta-card-sub   { font-size:0.82rem; color:rgba(240,234,214,0.55); line-height:1.5; }
        .cta-card-btn {
            background:var(--lantern); color:white; font-weight:800; font-size:0.9rem;
            padding:11px 22px; border-radius:11px; box-shadow:0 3px 0 var(--lantern-dk);
            transition:filter 0.15s,transform 0.12s;
        }
        .cta-card-btn:hover { filter:brightness(1.1); transform:translateY(-2px); }

        /* ══ PURCHASE ══ */
        .purchase-section {
            padding:80px 24px; position:relative; overflow:hidden;
            background:linear-gradient(160deg, var(--night-mid) 0%, var(--night) 100%);
        }
        .purchase-section::before {
            content:'🌙'; position:absolute; right:2%; top:50%;
            transform:translateY(-50%);
            font-size:200px; opacity:0.055; pointer-events:none;
        }
        .purchase-inner {
            max-width:700px; margin:0 auto; text-align:center; position:relative; z-index:1;
        }
        .purchase-inner .section-tag { border-color:rgba(232,213,160,0.4); color:var(--moon); }
        .purchase-inner h2 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:900; color:white; margin-bottom:14px; }
        .purchase-inner p  { font-size:1rem; color:rgba(240,234,214,0.72); line-height:1.7; margin-bottom:32px; }
        .purchase-options { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
        .btn-buy {
            display:inline-flex; align-items:center; gap:9px;
            font-weight:700; font-size:1rem; padding:14px 28px; border-radius:13px;
            transition:transform 0.15s,box-shadow 0.15s,filter 0.15s;
        }
        .btn-buy-warm {
            background:var(--lantern); color:white; box-shadow:0 4px 0 var(--lantern-dk);
        }
        .btn-buy-warm:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 6px 0 var(--lantern-dk); }
        .btn-buy-outline { border:2px solid rgba(255,255,255,0.25); color:white; }
        .btn-buy-outline:hover { background:rgba(255,255,255,0.1); transform:translateY(-2px); }
        .coming-note {
            margin-top:24px; font-size:0.82rem; color:rgba(240,234,214,0.4);
            display:flex; align-items:center; justify-content:center; gap:8px;
        }
        .coming-note::before,.coming-note::after { content:''; flex:0 0 40px; height:1px; background:rgba(255,255,255,0.12); }

        /* ══ THEMES ══ */
        .themes-section { padding:72px 24px; background:white; }
        .themes-grid {
            max-width:900px; margin:40px auto 0;
            display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px;
        }
        .theme-card {
            background:var(--lantern-lt); border-radius:16px; padding:24px 20px; text-align:center;
            border-bottom:3px solid var(--lantern-dk);
            transition:transform 0.2s,box-shadow 0.2s;
        }
        .theme-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(64,59,51,0.1); }
        .theme-card:nth-child(2){ border-color:var(--teal-dk); background:var(--grass-lt); }
        .theme-card:nth-child(3){ border-color:var(--rose); background:#fdf0f0; }
        .theme-card:nth-child(4){ border-color:var(--moon-dk); background:#fdf9ec; }
        .theme-icon  { font-size:2.2rem; margin-bottom:10px; }
        .theme-title { font-size:0.95rem; font-weight:800; color:var(--charcoal); margin-bottom:6px; }
        .theme-desc  { font-size:0.8rem; color:var(--charcoal-lt); line-height:1.5; }

        /* ══ GOODNIGHT QUOTE ══ */
        .quote-section {
            padding:80px 24px;
            background:var(--night-lt);
            position:relative; overflow:hidden;
            text-align:center;
        }
        .quote-inner { max-width:680px; margin:0 auto; position:relative; z-index:1; }
        .quote-text {
            font-family:'Lora',serif; font-style:italic;
            font-size:clamp(1.3rem,3vw,1.75rem); color:rgba(240,234,214,0.9);
            line-height:1.7; margin-bottom:20px;
        }
        .quote-text em { color:var(--lantern); font-style:normal; }
        .quote-attr { font-size:0.88rem; font-weight:600; color:rgba(232,213,160,0.5); letter-spacing:0.06em; text-transform:uppercase; }
        /* Star decorations */
        .q-star {
            position:absolute; font-size:var(--sz,1.2rem); opacity:0.3;
            animation:float-el var(--dur,6s) var(--del,0s) ease-in-out infinite alternate;
        }

        /* ══ AUTHOR ══ */
        .author-section { padding:72px 24px; background:var(--charcoal); }
        .author-inner {
            max-width:680px; margin:0 auto;
            background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
            border-radius:20px; padding:40px; text-align:center;
        }
        @media(max-width:480px){ .author-inner{padding:28px 24px;} }
        .author-inner .section-tag { border-color:rgba(240,234,214,0.45); color:#fff; background:rgba(0,0,0,0.28); }
        .author-inner h2 { font-size:1.5rem; font-weight:800; color:var(--beige); margin-bottom:16px; }
        .author-inner p  { font-size:0.95rem; color:rgba(240,234,214,0.75); line-height:1.8; margin-bottom:12px; }
        .author-sig { font-family:'Fredoka',cursive; font-size:1.3rem; color:var(--tan); margin-top:8px; }

        /* ══ MORE BOOKS ══ */
        .more-books { padding:64px 24px; background:var(--beige); border-top:2px solid rgba(64,59,51,0.06); }
        .more-books-inner { max-width:900px; margin:0 auto; }
        .more-books h2 { font-size:1.5rem; font-weight:900; color:var(--charcoal); text-align:center; margin-bottom:32px; }
        .more-books-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
        .more-book-card {
            background:white; border-radius:14px; overflow:hidden;
            box-shadow:0 4px 16px rgba(64,59,51,0.08);
            transition:transform 0.2s,box-shadow 0.2s; display:flex; flex-direction:column;
        }
        .more-book-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(64,59,51,0.14); }
        .more-book-card img { width:100%; aspect-ratio:3/4; object-fit:cover; }
        .placeholder-cover {
            width:100%; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; font-size:3rem;
        }
        .more-book-body { padding:14px 16px; flex:1; display:flex; flex-direction:column; }
        .more-book-title { font-size:0.9rem; font-weight:800; color:var(--charcoal); margin-bottom:6px; }
        .more-book-cta { margin-top:auto; font-size:0.82rem; font-weight:700; color:var(--teal-dk); }

        /* ══ FOOTER ══ */
        footer { background:#2e2a24; padding:24px; text-align:center; color:rgba(240,234,214,0.35); font-size:0.82rem; }
        footer a { color:rgba(240,234,214,0.5); transition:color 0.15s; }
        footer a:hover { color:rgba(240,234,214,0.85); }
    


            

        body {
            font-family:'Inter', sans-serif;
            background:var(--beige);
            color:var(--charcoal);
            overflow-x:hidden;
        }

            @keyframes logo-shift {
            0%{color:var(--tan)} 33%{color:var(--rose)} 66%{color:var(--teal)} 100%{color:var(--tan)}
        }

        /* ══ HEADER ══ */
            .site-header {
            position:sticky; top:0; z-index:50;
            background:rgba(255,255,255,0.96); backdrop-filter:blur(12px);
            border-bottom:1px solid rgba(64,59,51,0.08);
            box-shadow:0 2px 16px rgba(64,59,51,0.07);
        }
            .header-inner {
            max-width:1100px; margin:0 auto; padding:0 24px; height:68px;
            display:flex; justify-content:space-between; align-items:center;
        }
        .header-nav { display:flex; align-items:center; gap:8px; }
        .btn-back {
            font-size:0.88rem; font-weight:600; color:var(--charcoal-lt);
            padding:8px 14px; border-radius:8px; transition:background 0.15s,color 0.15s;
        }
        .btn-back:hover { background:var(--beige); color:var(--charcoal); }
        .btn-hub {
            background:var(--rose); color:white; font-weight:700; font-size:0.88rem;
            padding:9px 18px; border-radius:10px; box-shadow:0 3px 0 var(--rose-dk);
            transition:background 0.2s,transform 0.1s;
        }
        .btn-hub:hover { background:var(--rose-dk); transform:translateY(-1px); }
        @media(max-width:640px){.header-nav .btn-back{display:none!important}.nav-toggle{display:block!important}}

        /* ══ COMING SOON BAR ══ */
        .coming-soon-bar {
            background:var(--night-mid); padding:14px 24px;
            display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
        }
        .coming-soon-bar p { font-size:0.88rem; font-weight:600; color:rgba(240,234,214,0.8); }
        .coming-soon-bar strong { color:var(--moon); }
        .notify-btn {
            display:inline-flex; align-items:center; gap:6px;
            background:var(--rose); color:white; font-weight:700; font-size:0.82rem;
            padding:7px 16px; border-radius:8px; transition:background 0.2s; white-space:nowrap;
        }
        .notify-btn:hover { background:var(--rose-dk); }

        /* ══ HERO, night garden ══ */
        .book-hero {
            position:relative; overflow:hidden;
            background:var(--night);
            padding:70px 24px 100px;
        }

        /* Gradient ground */
        .hero-ground {
            position:absolute; bottom:0; left:0; right:0; height:140px;
            background:linear-gradient(to top, var(--grass) 0%, rgba(74,124,89,0.4) 60%, transparent 100%);
            pointer-events:none; z-index:0;
        }
        /* Moonlight glow */
        .moon-glow {
            position:absolute; top:-60px; right:8%;
            width:280px; height:280px; border-radius:50%;
            background:radial-gradient(circle, rgba(232,213,160,0.18) 0%, rgba(232,213,160,0.06) 50%, transparent 70%);
            pointer-events:none; z-index:0;
        }
        /* Lantern glow */
        .lantern-glow {
            position:absolute; bottom:80px; left:10%;
            width:220px; height:220px; border-radius:50%;
            background:radial-gradient(circle, rgba(245,166,35,0.22) 0%, rgba(245,166,35,0.06) 60%, transparent 80%);
            pointer-events:none; z-index:0;
            animation:lantern-pulse 3s ease-in-out infinite;
        }
        @keyframes lantern-pulse {
            0%,100%{opacity:0.8; transform:scale(1);}
            50%{opacity:1; transform:scale(1.08);}
        }

        /* Stars */
        .star {
            position:absolute; border-radius:50%; background:white;
            animation:twinkle var(--dur,3s) var(--del,0s) ease-in-out infinite;
            pointer-events:none;
        }
        @keyframes twinkle {
            0%,100%{opacity:0.12;transform:scale(1)}
            50%{opacity:0.9;transform:scale(1.6)}
        }

        .hero-inner {
            max-width:1000px; margin:0 auto; position:relative; z-index:1;
            display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
        }
        @media(max-width:720px){
            .hero-inner{grid-template-columns:1fr;gap:36px;text-align:center;}
            .hero-cover-wrap{order:-1;}
        }

        /* Book cover */
        .hero-cover-wrap { position:relative; }
        .book-cover-img {
            width:100%; max-width:300px; margin:0 auto; border-radius:14px;
            box-shadow:0 0 50px rgba(245,166,35,0.25), 12px 20px 48px rgba(0,0,0,0.55);
            transition:transform 0.35s,box-shadow 0.35s;
        }
        .book-cover-img:hover {
            transform:rotate(-1.5deg) scale(1.02);
            box-shadow:0 0 70px rgba(245,166,35,0.4), 18px 28px 60px rgba(0,0,0,0.55);
        }
        @media(max-width:720px){ .book-cover-img{max-width:220px;} }
        .cover-badge {
            position:absolute; top:-14px; right:-10px;
            background:var(--lantern); color:white;
            font-family:'Fredoka',cursive; font-size:0.88rem; font-weight:700;
            padding:7px 16px; border-radius:999px;
            box-shadow:0 4px 16px rgba(245,166,35,0.4);
        }
        @media(max-width:720px){ .cover-badge{right:calc(50% - 115px);} }

        /* Floating elements */
        .float-elem {
            position:absolute; font-size:var(--sz,1.4rem); opacity:0.65;
            animation:float-el var(--dur,5s) var(--del,0s) ease-in-out infinite alternate;
            pointer-events:none;
        }
        @keyframes float-el {
            from{transform:translateY(0) rotate(0deg)}
            to{transform:translateY(var(--ty,-12px)) rotate(var(--rot,10deg))}
        }

        /* Hero text */
        .book-series {
            display:inline-block; font-size:0.72rem; font-weight:700;
            letter-spacing:0.13em; text-transform:uppercase; color:var(--moon);
            border:1.5px solid rgba(232,213,160,0.4); border-radius:999px;
            padding:4px 14px; margin-bottom:16px;
        }
        .book-title {
            font-family:'Fredoka',cursive;
            font-size:clamp(2rem,5vw,3.2rem); font-weight:700; color:white;
            line-height:1.1; margin-bottom:16px;
            text-shadow:0 0 40px rgba(245,166,35,0.3);
        }
        .book-title span { color:var(--lantern); }
        .book-tagline {
            font-family:'Lora',serif; font-style:italic;
            font-size:1.05rem; color:rgba(240,234,214,0.8);
            line-height:1.75; margin-bottom:28px; max-width:440px;
        }
        @media(max-width:720px){ .book-tagline{margin:0 auto 28px;} }
        .book-meta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
        @media(max-width:720px){ .book-meta{justify-content:center;} }
        .meta-pill {
            display:inline-flex; align-items:center; gap:6px;
            font-size:0.8rem; font-weight:600;
            background:rgba(255,255,255,0.1); border:1.5px solid rgba(255,255,255,0.15);
            border-radius:999px; padding:6px 14px; color:rgba(240,234,214,0.85);
        }
        .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
        @media(max-width:720px){ .hero-ctas{justify-content:center;} }
            .btn-primary {
            display:inline-flex; align-items:center; gap:8px;
            background:var(--lantern); color:white;
            font-weight:800; font-size:1rem; padding:14px 28px; border-radius:13px;
            box-shadow:0 4px 0 var(--lantern-dk);
            transition:transform 0.12s,box-shadow 0.12s,filter 0.2s;
        }
        .btn-secondary {
            display:inline-flex; align-items:center; gap:8px;
            background:rgba(255,255,255,0.08); color:white;
            font-weight:700; font-size:1rem; padding:13px 26px; border-radius:13px;
            border:2px solid rgba(255,255,255,0.22);
            transition:background 0.2s,transform 0.12s;
        }
        .btn-secondary:hover { background:rgba(255,255,255,0.15); transform:translateY(-2px); }

        /* ══ ABOUT ══ */
        .about-section { padding:72px 24px; background:white; }
        .section-inner { max-width:1000px; margin:0 auto; }
            .section-tag {
            display:inline-block; font-size:0.7rem; font-weight:700;
            letter-spacing:0.12em; text-transform:uppercase; color:var(--teal);
            border:1.5px solid var(--teal); border-radius:999px; padding:4px 14px; margin-bottom:14px;
        }
            .about-section h2 {
            font-size:clamp(1.7rem,4vw,2.4rem); font-weight:900; color:var(--charcoal);
            margin-bottom:18px; line-height:1.15;
        }
        .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
        @media(max-width:680px){ .about-grid{grid-template-columns:1fr;gap:28px;} }
        .about-body p { font-size:1rem; color:var(--charcoal-lt); line-height:1.8; margin-bottom:16px; }
        .feature-list { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
        @media(max-width:480px){ .feature-list{grid-template-columns:1fr;} }
        .feature-item { background:var(--lantern-lt); border-radius:14px; padding:18px 16px; text-align:center; }
        .feature-icon  { font-size:1.8rem; margin-bottom:8px; }
        .feature-title { font-size:0.9rem; font-weight:800; color:var(--charcoal); margin-bottom:4px; }
        .feature-desc  { font-size:0.78rem; color:var(--charcoal-lt); line-height:1.4; }

        /* ══ STORY TEASER, real verses ══ */
        .teaser-section { padding:72px 24px; background:var(--night); }
        .teaser-intro { text-align:center; max-width:560px; margin:0 auto 52px; }
        .teaser-intro .section-tag { border-color:rgba(232,213,160,0.4); color:#fff; }
        .teaser-intro h2 { color:white; font-size:clamp(1.7rem,4vw,2.4rem); font-weight:900; }
        .teaser-intro p { font-size:0.95rem; color:rgba(240,234,214,0.6); margin-top:10px; line-height:1.65; }

        .teaser-gallery {
            max-width:1000px; margin:0 auto;
            display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px;
        }

        /* Story page cards */
        .page-card {
            background:var(--night-lt); border:1px solid rgba(255,255,255,0.08);
            border-radius:18px; overflow:hidden;
            box-shadow:0 6px 28px rgba(0,0,0,0.35);
            transition:transform 0.25s,box-shadow 0.25s;
            position:relative;
        }
        .page-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,0.45); }

        /* Card illustration area */
        .card-scene {
            width:100%; aspect-ratio:4/3; position:relative;
            display:flex; align-items:flex-end; justify-content:center;
            overflow:hidden; padding:0 0 20px;
        }
        .scene-bg { position:absolute; inset:0; }
        .scene-content { position:relative; z-index:1; text-align:center; }
        .scene-emoji { font-size:3.8rem; display:block; filter:drop-shadow(0 4px 16px rgba(0,0,0,0.5)); }

        .page-num {
            position:absolute; top:12px; left:12px;
            background:rgba(13,27,42,0.8); color:rgba(232,213,160,0.8);
            font-size:0.66rem; font-weight:700; letter-spacing:0.09em;
            padding:3px 10px; border-radius:999px;
        }

        /* Verse text */
        .card-verse {
            padding:20px 22px 22px;
        }
        .verse-text {
            font-family:'Lora',serif; font-style:italic;
            font-size:0.88rem; color:rgba(240,234,214,0.85);
            line-height:1.75; margin-bottom:10px;
        }
        .verse-pages { font-size:0.72rem; font-weight:700; color:rgba(232,213,160,0.5); letter-spacing:0.06em; text-transform:uppercase; }

        /* Locked card overlay */
        .card-locked .lock-overlay {
            position:absolute; inset:0 0 calc(100% - 60%) 0;
            background:rgba(13,27,42,0.78); backdrop-filter:blur(8px);
            display:flex; align-items:center; justify-content:center;
            font-family:'Fredoka',cursive; font-size:1.05rem; font-weight:700;
            color:rgba(232,213,160,0.85);
        }

        /* Special: CTA card */
        .cta-card {
            background:linear-gradient(135deg, var(--night-lt), var(--night-mid));
            border:1px solid rgba(245,166,35,0.2);
            border-radius:18px;
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            text-align:center; padding:36px 28px; gap:16px;
            box-shadow:0 6px 28px rgba(0,0,0,0.35);
            transition:transform 0.25s;
        }
        .cta-card:hover { transform:translateY(-4px); }
        .cta-card-title { font-family:'Fredoka',cursive; font-size:1.15rem; font-weight:700; color:white; }
        .cta-card-sub   { font-size:0.82rem; color:rgba(240,234,214,0.55); line-height:1.5; }
        .cta-card-btn {
            background:var(--lantern); color:white; font-weight:800; font-size:0.9rem;
            padding:11px 22px; border-radius:11px; box-shadow:0 3px 0 var(--lantern-dk);
            transition:filter 0.15s,transform 0.12s;
        }
        .cta-card-btn:hover { filter:brightness(1.1); transform:translateY(-2px); }

        /* ══ PURCHASE ══ */
        .purchase-section {
            padding:80px 24px; position:relative; overflow:hidden;
            background:linear-gradient(160deg, var(--night-mid) 0%, var(--night) 100%);
        }
        .purchase-section::before {
            content:'🌙'; position:absolute; right:2%; top:50%;
            transform:translateY(-50%);
            font-size:200px; opacity:0.055; pointer-events:none;
        }
        .purchase-inner {
            max-width:700px; margin:0 auto; text-align:center; position:relative; z-index:1;
        }
        .purchase-inner .section-tag { border-color:rgba(232,213,160,0.4); color:var(--moon); }
        .purchase-inner h2 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:900; color:white; margin-bottom:14px; }
        .purchase-inner p  { font-size:1rem; color:rgba(240,234,214,0.72); line-height:1.7; margin-bottom:32px; }
        .purchase-options { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
        .btn-buy {
            display:inline-flex; align-items:center; gap:9px;
            font-weight:700; font-size:1rem; padding:14px 28px; border-radius:13px;
            transition:transform 0.15s,box-shadow 0.15s,filter 0.15s;
        }
        .btn-buy-warm {
            background:var(--lantern); color:white; box-shadow:0 4px 0 var(--lantern-dk);
        }
        .btn-buy-warm:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 6px 0 var(--lantern-dk); }
        .btn-buy-outline { border:2px solid rgba(255,255,255,0.25); color:white; }
        .btn-buy-outline:hover { background:rgba(255,255,255,0.1); transform:translateY(-2px); }
        .coming-note {
            margin-top:24px; font-size:0.82rem; color:rgba(240,234,214,0.4);
            display:flex; align-items:center; justify-content:center; gap:8px;
        }
        .coming-note::before,.coming-note::after { content:''; flex:0 0 40px; height:1px; background:rgba(255,255,255,0.12); }

        /* ══ THEMES ══ */
        .themes-section { padding:72px 24px; background:white; }
        .themes-grid {
            max-width:900px; margin:40px auto 0;
            display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px;
        }
        .theme-card {
            background:var(--lantern-lt); border-radius:16px; padding:24px 20px; text-align:center;
            border-bottom:3px solid var(--lantern-dk);
            transition:transform 0.2s,box-shadow 0.2s;
        }
        .theme-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(64,59,51,0.1); }
        .theme-card:nth-child(2){ border-color:var(--teal-dk); background:var(--grass-lt); }
        .theme-card:nth-child(3){ border-color:var(--rose); background:#fdf0f0; }
        .theme-card:nth-child(4){ border-color:var(--moon-dk); background:#fdf9ec; }
        .theme-icon  { font-size:2.2rem; margin-bottom:10px; }
        .theme-title { font-size:0.95rem; font-weight:800; color:var(--charcoal); margin-bottom:6px; }
        .theme-desc  { font-size:0.8rem; color:var(--charcoal-lt); line-height:1.5; }

        /* ══ GOODNIGHT QUOTE ══ */
        .quote-section {
            padding:80px 24px;
            background:var(--night-lt);
            position:relative; overflow:hidden;
            text-align:center;
        }
        .quote-inner { max-width:680px; margin:0 auto; position:relative; z-index:1; }
        .quote-text {
            font-family:'Lora',serif; font-style:italic;
            font-size:clamp(1.3rem,3vw,1.75rem); color:rgba(240,234,214,0.9);
            line-height:1.7; margin-bottom:20px;
        }
        .quote-text em { color:var(--lantern); font-style:normal; }
        .quote-attr { font-size:0.88rem; font-weight:600; color:rgba(232,213,160,0.5); letter-spacing:0.06em; text-transform:uppercase; }
        /* Star decorations */
        .q-star {
            position:absolute; font-size:var(--sz,1.2rem); opacity:0.3;
            animation:float-el var(--dur,6s) var(--del,0s) ease-in-out infinite alternate;
        }

        /* ══ AUTHOR ══ */
        .author-section { padding:72px 24px; background:var(--charcoal); }
        .author-inner {
            max-width:680px; margin:0 auto;
            background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
            border-radius:20px; padding:40px; text-align:center;
        }
        @media(max-width:480px){ .author-inner{padding:28px 24px;} }
        .author-inner .section-tag { border-color:rgba(240,234,214,0.45); color:#fff; background:rgba(0,0,0,0.28); }
        .author-inner h2 { font-size:1.5rem; font-weight:800; color:var(--beige); margin-bottom:16px; }
        .author-inner p  { font-size:0.95rem; color:rgba(240,234,214,0.75); line-height:1.8; margin-bottom:12px; }
        .author-sig { font-family:'Fredoka',cursive; font-size:1.3rem; color:var(--tan); margin-top:8px; }

        /* ══ MORE BOOKS ══ */
        .more-books { padding:64px 24px; background:var(--beige); border-top:2px solid rgba(64,59,51,0.06); }
        .more-books-inner { max-width:900px; margin:0 auto; }
        .more-books h2 { font-size:1.5rem; font-weight:900; color:var(--charcoal); text-align:center; margin-bottom:32px; }
        .more-books-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
        .more-book-card {
            background:white; border-radius:14px; overflow:hidden;
            box-shadow:0 4px 16px rgba(64,59,51,0.08);
            transition:transform 0.2s,box-shadow 0.2s; display:flex; flex-direction:column;
        }
        .more-book-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(64,59,51,0.14); }
        .more-book-card img { width:100%; aspect-ratio:3/4; object-fit:cover; }
        .placeholder-cover {
            width:100%; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; font-size:3rem;
        }
        .more-book-body { padding:14px 16px; flex:1; display:flex; flex-direction:column; }
        .more-book-title { font-size:0.9rem; font-weight:800; color:var(--charcoal); margin-bottom:6px; }
        .more-book-cta { margin-top:auto; font-size:0.82rem; font-weight:700; color:var(--teal-dk); }

        /* ══ FOOTER ══ */
        footer { background:#2e2a24; padding:24px; text-align:center; color:rgba(240,234,214,0.35); font-size:0.82rem; }
        footer a { color:rgba(240,234,214,0.5); transition:color 0.15s; }
        footer a:hover { color:rgba(240,234,214,0.85); }
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap}
/* mobile-nav cascade fix */

/* mobile-nav cascade fix */