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


            :root {
            --beige:     #F0EAD6;
            --tan:       #D2B48C;
            --tan-dk:    #b8956a;
            --rose:      #BC4749;
            --teal:      #70A3A7;
            --teal-dk:   #4e7d80;
            --charcoal:  #403B33;
            --charcoal-lt:#5a5449;
            /* Echo palette, misty mountain blues + lavender */
            --mist:      #c8d8e8;
            --mist-dk:   #8aaac0;
            --mist-lt:   #eef4f8;
            --sky:       #5b8aab;
            --sky-dk:    #3a6080;
            --sky-lt:    #ddeaf4;
            --lav:       #9b8ab4;
            --lav-dk:    #6d5b8a;
            --lav-lt:    #ede8f5;
            --lav-mid:   #c4b8d8;
            --moss:      #7a9e7e;
            --moss-lt:   #e8f0e9;
            --pink-echo: #f0a0b0;  /* Echo's pink gills */
            --gold:      #d4a847;  /* the flower's gold */
            --gold-lt:   #fdf3d8;
        }



        /* -- HEADER -- */
            .site-header {
            position:sticky; top:0; z-index:50;
            background:rgba(238,244,248,0.96); backdrop-filter:blur(14px);
            border-bottom:1px solid rgba(91,138,171,0.15);
            box-shadow:0 2px 20px rgba(91,138,171,0.1);
        }
        .header-nav { display:flex; align-items:center; gap:8px; }
        .btn-back { font-size:0.88rem; font-weight:600; color:var(--sky); padding:8px 14px; border-radius:8px; transition:background 0.15s; }
        .btn-back:hover { background:var(--sky-lt); }
        .btn-notify {
            background:var(--lav-dk); color:white; font-weight:700; font-size:0.88rem;
            padding:9px 18px; border-radius:10px; box-shadow:0 3px 0 #4a3a66;
            transition:filter 0.15s,transform 0.1s;
        }
        .btn-notify:hover { filter:brightness(1.1); transform:translateY(-1px); }

        /* -- COMING SOON BANNER -- */
        .cs-banner {
            background:linear-gradient(90deg, var(--sky-dk), var(--lav-dk), var(--sky-dk));
            background-size:200% 100%; animation:banner-shift 6s ease-in-out infinite;
            padding:11px 24px; text-align:center;
        }
        @keyframes banner-shift { 0%,100%{background-position:0%} 50%{background-position:100%} }
        .cs-banner p { font-size:0.88rem; font-weight:700; color:white; display:flex; align-items:center; justify-content:center; gap:10px; }
        .cs-pill { background:rgba(255,255,255,0.22); font-size:0.7rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:3px 12px; border-radius:999px; }

        /* -- HERO -- */
        .echo-hero {
            position:relative; overflow:hidden;
            background:linear-gradient(160deg, #2a3f58 0%, #3a4f70 40%, #2e3d58 100%);
            padding:72px 24px 110px;
        }
        /* Mist particles */
        .mist-particle {
            position:absolute; border-radius:50%; pointer-events:none;
            background:rgba(200,216,232,0.06);
            animation:mist-drift var(--dur,20s) var(--del,0s) ease-in-out infinite alternate;
        }
        @keyframes mist-drift {
            from { transform:translateX(0) translateY(0); opacity:0.04; }
            to   { transform:translateX(var(--tx,30px)) translateY(var(--ty,-20px)); opacity:0.12; }
        }
        /* Stars */
        .star-field { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
        .star { position:absolute; background:white; border-radius:50%; animation:twinkle var(--dur,3s) var(--del,0s) ease-in-out infinite alternate; }
        @keyframes twinkle { from{opacity:0.1} to{opacity:0.7} }
        /* Mountain silhouette */
        .mountain-silhouette {
            position:absolute; bottom:0; left:0; right:0; height:160px; pointer-events:none;
            background:linear-gradient(to top, rgba(42,63,88,0.9) 0%, transparent 100%);
        }
        .mountain-silhouette svg { position:absolute; bottom:0; width:100%; }

        .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:700px){.hero-inner{grid-template-columns:1fr;gap:32px;text-align:center;}.hero-art{order:-1;}}

        /* Book cover area */
        .hero-art { position:relative; }
        .book-cover-wrap {
            max-width:320px; margin:0 auto; position:relative;
        }
        .book-cover {
            width:100%; border-radius:12px 18px 18px 12px;
            border-left:10px solid var(--sky-dk);
            box-shadow:-8px 12px 40px rgba(0,0,0,0.5), 8px 8px 0 rgba(91,138,171,0.3);
            aspect-ratio:3/4; background:linear-gradient(160deg,#3a5270,#2a3f58,#1e2d40);
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            padding:32px 24px; text-align:center; position:relative; overflow:hidden;
        }
        /* Cover decorative elements */
        .book-cover::before {
            content:''; position:absolute; top:0; left:0; right:0; height:50%;
            background:linear-gradient(180deg,rgba(91,138,171,0.15) 0%,transparent 100%);
        }
        .cover-emoji { font-size:4rem; margin-bottom:16px; position:relative; z-index:1; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }
        .cover-title { font-family:'Lora',serif; font-size:1.15rem; font-weight:600; color:white; line-height:1.35; margin-bottom:8px; position:relative; z-index:1; }
        .cover-author { font-size:0.75rem; color:rgba(200,216,232,0.7); position:relative; z-index:1; letter-spacing:0.06em; }
        .cover-coming { position:absolute; top:16px; right:-8px; background:var(--gold); color:var(--charcoal); font-size:0.65rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:5px 14px; border-radius:4px; box-shadow:0 3px 12px rgba(212,168,71,0.4); }
        /* Flower decoration on cover */
        .cover-flower { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
        .petal { width:10px; height:10px; border-radius:50%; }

        /* Quote badge */
        .refrain-badge {
            position:absolute; bottom:-18px; right:-14px;
            background:white; border-radius:14px; padding:14px 18px;
            box-shadow:0 8px 28px rgba(42,63,88,0.3); max-width:220px;
            border-left:4px solid var(--lav);
        }
        .refrain-text { font-family:'Lora',serif; font-size:0.8rem; font-style:italic; color:var(--charcoal); line-height:1.5; }
        .refrain-attr { font-size:0.65rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--lav-dk); margin-top:6px; }
        @media(max-width:700px){.refrain-badge{display:none;}}

        /* Hero text */
        .hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--mist); border:1.5px solid rgba(200,216,232,0.3); border-radius:999px; padding:5px 16px; margin-bottom:18px; }
        .book-title { font-family:'Lora',serif; font-size:clamp(2rem,5.5vw,3.4rem); font-weight:600; color:white; line-height:1.1; margin-bottom:10px; }
        .book-title em { color:var(--pink-echo); font-style:normal; }
        .book-sub { font-family:'Fredoka',cursive; font-size:1.1rem; font-weight:600; color:var(--lav-mid); margin-bottom:16px; }
        .book-tagline { font-size:1rem; color:rgba(200,216,232,0.8); line-height:1.75; margin-bottom:28px; max-width:440px; }
        @media(max-width:700px){.book-tagline{margin:0 auto 28px;}}
        .hero-meta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
        @media(max-width:700px){.hero-meta{justify-content:center;}}
        .meta-pill { font-size:0.8rem; font-weight:600; background:rgba(255,255,255,0.08); border:1.5px solid rgba(200,216,232,0.2); border-radius:999px; padding:6px 14px; color:rgba(200,216,232,0.9); }
        .hero-cta {
            display:inline-flex; align-items:center; gap:10px;
            background:var(--lav-dk); color:white; font-weight:800; font-size:1rem;
            padding:14px 28px; border-radius:13px; box-shadow:0 4px 0 #4a3a66, 0 0 24px rgba(155,138,180,0.3);
            transition:filter 0.15s,transform 0.12s,box-shadow 0.12s;
        }
        .hero-cta:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 6px 0 #4a3a66, 0 0 36px rgba(155,138,180,0.4); }

        /* -- BOOK VITALS -- */
        .vitals-bar {
            background:white; border-bottom:2px solid var(--mist);
            padding:18px 24px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0;
        }
        .vital { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 28px; border-right:1px solid var(--mist); }
        .vital:last-child { border-right:none; }
        .vital-label { font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--sky); }
        .vital-val { font-family:'Lora',serif; font-size:1rem; font-weight:600; color:var(--charcoal); }
        @media(max-width:600px){.vital{border-right:none;padding:6px 14px;}}

        /* -- STORY SECTION -- */
        .story-section { padding:80px 24px; background:white; }
        .section-inner { max-width:1040px; margin:0 auto; }

        .story-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:44px; }
        @media(max-width:700px){.story-grid{grid-template-columns:1fr;gap:28px;}}

        .story-body p { font-size:0.97rem; color:var(--charcoal-lt); line-height:1.85; margin-bottom:14px; }

        /* Manuscript excerpt */
        .excerpt-card {
            background:linear-gradient(160deg,#f5f0fc,var(--lav-lt));
            border:2px solid var(--lav-mid); border-radius:18px; padding:28px 26px;
            position:relative; overflow:hidden;
        }
        .excerpt-card::before { content:'"'; font-family:'Lora',serif; font-size:120px; color:var(--lav-mid); opacity:0.25; position:absolute; top:-20px; left:8px; line-height:1; pointer-events:none; }
        .excerpt-label { font-size:0.65rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--lav-dk); margin-bottom:12px; }
        .excerpt-text { font-family:'Lora',serif; font-size:0.95rem; color:var(--charcoal); line-height:1.9; font-style:italic; position:relative; z-index:1; }
        .excerpt-pages { font-size:0.72rem; font-weight:700; color:var(--lav-dk); margin-top:14px; opacity:0.7; }

        /* -- JOURNEY -- */
        .journey-section { padding:80px 24px; background:var(--mist-lt); }
        .journey-steps { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:44px; }
        .journey-card {
            background:white; border-radius:18px; padding:22px 20px;
            box-shadow:0 4px 18px rgba(91,138,171,0.1);
            border-top:4px solid;
            transition:transform 0.2s,box-shadow 0.2s;
        }
        .journey-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(91,138,171,0.16); }
        .journey-card:nth-child(1){border-color:var(--moss);}
        .journey-card:nth-child(2){border-color:var(--lav);}
        .journey-card:nth-child(3){border-color:var(--sky);}
        .journey-card:nth-child(4){border-color:var(--pink-echo);}
        .journey-card:nth-child(5){border-color:var(--gold);}
        .journey-emoji { font-size:2rem; margin-bottom:10px; }
        .journey-name { font-size:0.95rem; font-weight:800; color:var(--charcoal); margin-bottom:6px; }
        .journey-desc { font-size:0.8rem; color:var(--charcoal-lt); line-height:1.55; }
        .journey-refrain { font-family:'Lora',serif; font-size:0.75rem; font-style:italic; color:var(--lav-dk); margin-top:10px; border-top:1px solid var(--mist); padding-top:8px; }

        /* -- CHARACTERS -- */
        .chars-section { padding:80px 24px; background:white; }
        .chars-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }
        @media(max-width:640px){.chars-grid{grid-template-columns:1fr;}}
        .char-card {
            border-radius:20px; overflow:hidden;
            box-shadow:0 5px 22px rgba(91,138,171,0.1);
            transition:transform 0.25s,box-shadow 0.25s;
        }
        .char-card:hover { transform:translateY(-5px) rotate(0.4deg); box-shadow:0 14px 36px rgba(91,138,171,0.18); }
        .char-header { padding:26px 24px 18px; }
        .char-emoji { font-size:3.2rem; margin-bottom:10px; }
        .char-name { font-family:'Lora',serif; font-size:1.4rem; font-weight:600; color:var(--charcoal); }
        .char-role { font-size:0.72rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; margin-top:4px; }
        .char-divider { height:4px; }
        .char-.char-body{ font-family:'Inter',sans-serif; background:var(--mist-lt); color:var(--charcoal); overflow-x:hidden; }
        .char-desc { font-size:0.88rem; color:var(--charcoal-lt); line-height:1.65; }
        .char-quote { font-family:'Lora',serif; font-size:0.82rem; font-style:italic; color:var(--sky-dk); margin-top:12px; padding-left:12px; border-left:3px solid var(--mist-dk); }

        .char-echo .char-header { background:linear-gradient(135deg,#2a3f58,#3a5270); }
        .char-echo .char-name  { color:white; }
        .char-echo .char-role  { color:var(--pink-echo); }
        .char-echo .char-divider { background:var(--pink-echo); }

        .char-shelly .char-header { background:linear-gradient(135deg,var(--moss-lt),#d4e8d5); }
        .char-shelly .char-role  { color:var(--moss); }
        .char-shelly .char-divider { background:var(--moss); }

        /* -- REFRAINS -- */
        .refrains-section { padding:80px 24px; background:linear-gradient(160deg,#2a3f58,#3a4f70,#2e3d58); position:relative; overflow:hidden; }
        .refrains-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 70% 50%,rgba(155,138,180,0.15) 0%,transparent 70%); pointer-events:none; }
        .refrains-inner { max-width:760px; margin:0 auto; text-align:center; position:relative; z-index:1; }
        .refrains-inner .section-tag { border-color:rgba(200,216,232,0.3); color:var(--mist); }
        .refrains-inner .section-title { color:white; }
        .refrains-inner p { font-size:0.97rem; color:rgba(200,216,232,0.75); line-height:1.7; margin-bottom:40px; }
        .refrain-cards { display:flex; flex-direction:column; gap:16px; }
        .refrain-big {
            background:rgba(255,255,255,0.07); border:1.5px solid rgba(200,216,232,0.2);
            border-radius:16px; padding:24px 28px; text-align:center;
            transition:background 0.2s,border-color 0.2s;
        }
        .refrain-big:hover { background:rgba(255,255,255,0.12); border-color:rgba(200,216,232,0.4); }
        .refrain-big-text { font-family:'Lora',serif; font-size:1.25rem; font-style:italic; color:white; line-height:1.5; }
        .refrain-big-note { font-size:0.72rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--lav-mid); margin-top:10px; }

        /* -- THE FLOWER -- */
        .flower-section { padding:72px 24px; background:var(--gold-lt); border-top:3px solid var(--gold); }
        .flower-inner { max-width:760px; margin:0 auto; text-align:center; }
        .flower-inner .section-tag { border-color:var(--gold); color:#8a6a10; }
        .flower-inner .section-title { color:var(--charcoal); }
        .petals-row { display:flex; justify-content:center; gap:16px; margin:32px 0; flex-wrap:wrap; }
        .petal-card { background:white; border-radius:14px; padding:18px 20px; text-align:center; min-width:140px; box-shadow:0 4px 16px rgba(212,168,71,0.15); border-bottom:3px solid; flex:1; max-width:200px; }
        .petal-card:nth-child(1){ border-color:var(--pink-echo); }
        .petal-card:nth-child(2){ border-color:var(--sky); }
        .petal-card:nth-child(3){ border-color:var(--gold); }
        .petal-swatch { width:40px; height:40px; border-radius:50%; margin:0 auto 10px; }
        .petal-meaning { font-size:0.9rem; font-weight:800; color:var(--charcoal); margin-bottom:4px; }
        .petal-note { font-size:0.78rem; color:var(--charcoal-lt); }

        /* -- COMING SOON CTA -- */
        .cta-section {
            padding:80px 24px; text-align:center; position:relative; overflow:hidden;
            background:linear-gradient(135deg, var(--sky-dk) 0%, var(--lav-dk) 50%, var(--sky-dk) 100%);
            background-size:200% 200%; animation:cta-shift 7s ease-in-out infinite;
        }
        @keyframes cta-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
        .cta-section::before { content:'📚'; position:absolute; right:-20px; top:50%; transform:translateY(-50%); font-size:200px; opacity:0.07; pointer-events:none; }
        .cta-section::after { content:'🌸'; position:absolute; left:-10px; bottom:-10px; font-size:160px; opacity:0.07; pointer-events:none; transform:rotate(-15deg); }
        .cta-inner { max-width:620px; margin:0 auto; position:relative; z-index:1; }
        .cta-pill { display:inline-block; background:rgba(255,255,255,0.2); color:white; font-size:0.7rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; padding:5px 16px; border-radius:999px; margin-bottom:16px; }
        .cta-inner h2 { font-family:'Lora',serif; font-size:clamp(1.8rem,5vw,2.8rem); font-weight:600; color:white; margin-bottom:14px; }
        .cta-inner p { font-size:1rem; color:rgba(255,255,255,0.82); line-height:1.7; margin-bottom:32px; }
        .btn-notify-big {
            display:inline-flex; align-items:center; gap:10px;
            background:white; color:var(--lav-dk); font-weight:800; font-size:1.05rem;
            padding:15px 34px; border-radius:13px; box-shadow:0 5px 0 rgba(0,0,0,0.15);
            transition:transform 0.12s,box-shadow 0.12s,filter 0.15s; margin-bottom:12px;
        }
        .btn-notify-big:hover { filter:brightness(1.02); transform:translateY(-2px); box-shadow:0 8px 0 rgba(0,0,0,0.15); }
        .cta-note { font-size:0.82rem; color:rgba(255,255,255,0.58); margin-top:8px; }

        /* -- MORE -- */
        .more-section { padding:64px 24px; background:var(--beige); border-top:2px solid rgba(64,59,51,0.06); }
        .more-inner { max-width:900px; margin:0 auto; }
        .more-inner h2 { font-family:'Lora',serif; font-size:1.5rem; font-weight:600; color:var(--charcoal); text-align:center; margin-bottom:32px; }
        .more-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
        .more-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-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(64,59,51,0.14); }
        .more-thumb { width:100%; aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; font-size:3rem; }
        .more-body { padding:14px 16px; flex:1; display:flex; flex-direction:column; }
        .more-title { font-size:0.9rem; font-weight:800; color:var(--charcoal); margin-bottom:6px; }
        .more-cta   { margin-top:auto; font-size:0.82rem; font-weight:700; color:var(--teal-dk); }

        /* -- FOOTER -- */
        footer { background:var(--charcoal); padding:24px; text-align:center; color:rgba(240,234,214,0.3); font-size:0.82rem; }
        footer a { color:rgba(240,234,214,0.45); transition:color 0.15s; }
        footer a:hover { color:rgba(240,234,214,0.85); }
    
body { font-family:'Inter',sans-serif; background:var(--mist-lt); color:var(--charcoal); overflow-x:hidden; }


            :root {
            --beige:     #F0EAD6;
            --tan:       #D2B48C;
            --tan-dk:    #b8956a;
            --rose:      #BC4749;
            --teal:      #70A3A7;
            --teal-dk:   #4e7d80;
            --charcoal:  #403B33;
            --charcoal-lt:#5a5449;
            /* Echo palette, misty mountain blues + lavender */
            --mist:      #c8d8e8;
            --mist-dk:   #8aaac0;
            --mist-lt:   #eef4f8;
            --sky:       #5b8aab;
            --sky-dk:    #3a6080;
            --sky-lt:    #ddeaf4;
            --lav:       #9b8ab4;
            --lav-dk:    #6d5b8a;
            --lav-lt:    #ede8f5;
            --lav-mid:   #c4b8d8;
            --moss:      #7a9e7e;
            --moss-lt:   #e8f0e9;
            --pink-echo: #f0a0b0;  /* Echo's pink gills */
            --gold:      #d4a847;  /* the flower's gold */
            --gold-lt:   #fdf3d8;
        }



        /* -- HEADER -- */
            .site-header {
            position:sticky; top:0; z-index:50;
            background:rgba(238,244,248,0.96); backdrop-filter:blur(14px);
            border-bottom:1px solid rgba(91,138,171,0.15);
            box-shadow:0 2px 20px rgba(91,138,171,0.1);
        }
        .header-nav { display:flex; align-items:center; gap:8px; }
        .btn-back { font-size:0.88rem; font-weight:600; color:var(--sky); padding:8px 14px; border-radius:8px; transition:background 0.15s; }
        .btn-back:hover { background:var(--sky-lt); }
        .btn-notify {
            background:var(--lav-dk); color:white; font-weight:700; font-size:0.88rem;
            padding:9px 18px; border-radius:10px; box-shadow:0 3px 0 #4a3a66;
            transition:filter 0.15s,transform 0.1s;
        }
        .btn-notify:hover { filter:brightness(1.1); transform:translateY(-1px); }

        /* -- COMING SOON BANNER -- */
        .cs-banner {
            background:linear-gradient(90deg, var(--sky-dk), var(--lav-dk), var(--sky-dk));
            background-size:200% 100%; animation:banner-shift 6s ease-in-out infinite;
            padding:11px 24px; text-align:center;
        }
        @keyframes banner-shift { 0%,100%{background-position:0%} 50%{background-position:100%} }
        .cs-banner p { font-size:0.88rem; font-weight:700; color:white; display:flex; align-items:center; justify-content:center; gap:10px; }
        .cs-pill { background:rgba(255,255,255,0.22); font-size:0.7rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:3px 12px; border-radius:999px; }

        /* -- HERO -- */
        .echo-hero {
            position:relative; overflow:hidden;
            background:linear-gradient(160deg, #2a3f58 0%, #3a4f70 40%, #2e3d58 100%);
            padding:72px 24px 110px;
        }
        /* Mist particles */
        .mist-particle {
            position:absolute; border-radius:50%; pointer-events:none;
            background:rgba(200,216,232,0.06);
            animation:mist-drift var(--dur,20s) var(--del,0s) ease-in-out infinite alternate;
        }
        @keyframes mist-drift {
            from { transform:translateX(0) translateY(0); opacity:0.04; }
            to   { transform:translateX(var(--tx,30px)) translateY(var(--ty,-20px)); opacity:0.12; }
        }
        /* Stars */
        .star-field { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
        .star { position:absolute; background:white; border-radius:50%; animation:twinkle var(--dur,3s) var(--del,0s) ease-in-out infinite alternate; }
        @keyframes twinkle { from{opacity:0.1} to{opacity:0.7} }
        /* Mountain silhouette */
        .mountain-silhouette {
            position:absolute; bottom:0; left:0; right:0; height:160px; pointer-events:none;
            background:linear-gradient(to top, rgba(42,63,88,0.9) 0%, transparent 100%);
        }
        .mountain-silhouette svg { position:absolute; bottom:0; width:100%; }

        .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:700px){.hero-inner{grid-template-columns:1fr;gap:32px;text-align:center;}.hero-art{order:-1;}}

        /* Book cover area */
        .hero-art { position:relative; }
        .book-cover-wrap {
            max-width:320px; margin:0 auto; position:relative;
        }
        .book-cover {
            width:100%; border-radius:12px 18px 18px 12px;
            border-left:10px solid var(--sky-dk);
            box-shadow:-8px 12px 40px rgba(0,0,0,0.5), 8px 8px 0 rgba(91,138,171,0.3);
            aspect-ratio:3/4; background:linear-gradient(160deg,#3a5270,#2a3f58,#1e2d40);
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            padding:32px 24px; text-align:center; position:relative; overflow:hidden;
        }
        /* Cover decorative elements */
        .book-cover::before {
            content:''; position:absolute; top:0; left:0; right:0; height:50%;
            background:linear-gradient(180deg,rgba(91,138,171,0.15) 0%,transparent 100%);
        }
        .cover-emoji { font-size:4rem; margin-bottom:16px; position:relative; z-index:1; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }
        .cover-title { font-family:'Lora',serif; font-size:1.15rem; font-weight:600; color:white; line-height:1.35; margin-bottom:8px; position:relative; z-index:1; }
        .cover-author { font-size:0.75rem; color:rgba(200,216,232,0.7); position:relative; z-index:1; letter-spacing:0.06em; }
        .cover-coming { position:absolute; top:16px; right:-8px; background:var(--gold); color:var(--charcoal); font-size:0.65rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:5px 14px; border-radius:4px; box-shadow:0 3px 12px rgba(212,168,71,0.4); }
        /* Flower decoration on cover */
        .cover-flower { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
        .petal { width:10px; height:10px; border-radius:50%; }

        /* Quote badge */
        .refrain-badge {
            position:absolute; bottom:-18px; right:-14px;
            background:white; border-radius:14px; padding:14px 18px;
            box-shadow:0 8px 28px rgba(42,63,88,0.3); max-width:220px;
            border-left:4px solid var(--lav);
        }
        .refrain-text { font-family:'Lora',serif; font-size:0.8rem; font-style:italic; color:var(--charcoal); line-height:1.5; }
        .refrain-attr { font-size:0.65rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--lav-dk); margin-top:6px; }
        @media(max-width:700px){.refrain-badge{display:none;}}

        /* Hero text */
        .hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--mist); border:1.5px solid rgba(200,216,232,0.3); border-radius:999px; padding:5px 16px; margin-bottom:18px; }
        .book-title { font-family:'Lora',serif; font-size:clamp(2rem,5.5vw,3.4rem); font-weight:600; color:white; line-height:1.1; margin-bottom:10px; }
        .book-title em { color:var(--pink-echo); font-style:normal; }
        .book-sub { font-family:'Fredoka',cursive; font-size:1.1rem; font-weight:600; color:var(--lav-mid); margin-bottom:16px; }
        .book-tagline { font-size:1rem; color:rgba(200,216,232,0.8); line-height:1.75; margin-bottom:28px; max-width:440px; }
        @media(max-width:700px){.book-tagline{margin:0 auto 28px;}}
        .hero-meta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
        @media(max-width:700px){.hero-meta{justify-content:center;}}
        .meta-pill { font-size:0.8rem; font-weight:600; background:rgba(255,255,255,0.08); border:1.5px solid rgba(200,216,232,0.2); border-radius:999px; padding:6px 14px; color:rgba(200,216,232,0.9); }
        .hero-cta {
            display:inline-flex; align-items:center; gap:10px;
            background:var(--lav-dk); color:white; font-weight:800; font-size:1rem;
            padding:14px 28px; border-radius:13px; box-shadow:0 4px 0 #4a3a66, 0 0 24px rgba(155,138,180,0.3);
            transition:filter 0.15s,transform 0.12s,box-shadow 0.12s;
        }
        .hero-cta:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 6px 0 #4a3a66, 0 0 36px rgba(155,138,180,0.4); }

        /* -- BOOK VITALS -- */
        .vitals-bar {
            background:white; border-bottom:2px solid var(--mist);
            padding:18px 24px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0;
        }
        .vital { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 28px; border-right:1px solid var(--mist); }
        .vital:last-child { border-right:none; }
        .vital-label { font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--sky); }
        .vital-val { font-family:'Lora',serif; font-size:1rem; font-weight:600; color:var(--charcoal); }
        @media(max-width:600px){.vital{border-right:none;padding:6px 14px;}}

        /* -- STORY SECTION -- */
        .story-section { padding:80px 24px; background:white; }
        .section-inner { max-width:1040px; margin:0 auto; }

        .story-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:44px; }
        @media(max-width:700px){.story-grid{grid-template-columns:1fr;gap:28px;}}

        .story-body p { font-size:0.97rem; color:var(--charcoal-lt); line-height:1.85; margin-bottom:14px; }

        /* Manuscript excerpt */
        .excerpt-card {
            background:linear-gradient(160deg,#f5f0fc,var(--lav-lt));
            border:2px solid var(--lav-mid); border-radius:18px; padding:28px 26px;
            position:relative; overflow:hidden;
        }
        .excerpt-card::before { content:'"'; font-family:'Lora',serif; font-size:120px; color:var(--lav-mid); opacity:0.25; position:absolute; top:-20px; left:8px; line-height:1; pointer-events:none; }
        .excerpt-label { font-size:0.65rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--lav-dk); margin-bottom:12px; }
        .excerpt-text { font-family:'Lora',serif; font-size:0.95rem; color:var(--charcoal); line-height:1.9; font-style:italic; position:relative; z-index:1; }
        .excerpt-pages { font-size:0.72rem; font-weight:700; color:var(--lav-dk); margin-top:14px; opacity:0.7; }

        /* -- JOURNEY -- */
        .journey-section { padding:80px 24px; background:var(--mist-lt); }
        .journey-steps { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:44px; }
        .journey-card {
            background:white; border-radius:18px; padding:22px 20px;
            box-shadow:0 4px 18px rgba(91,138,171,0.1);
            border-top:4px solid;
            transition:transform 0.2s,box-shadow 0.2s;
        }
        .journey-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(91,138,171,0.16); }
        .journey-card:nth-child(1){border-color:var(--moss);}
        .journey-card:nth-child(2){border-color:var(--lav);}
        .journey-card:nth-child(3){border-color:var(--sky);}
        .journey-card:nth-child(4){border-color:var(--pink-echo);}
        .journey-card:nth-child(5){border-color:var(--gold);}
        .journey-emoji { font-size:2rem; margin-bottom:10px; }
        .journey-name { font-size:0.95rem; font-weight:800; color:var(--charcoal); margin-bottom:6px; }
        .journey-desc { font-size:0.8rem; color:var(--charcoal-lt); line-height:1.55; }
        .journey-refrain { font-family:'Lora',serif; font-size:0.75rem; font-style:italic; color:var(--lav-dk); margin-top:10px; border-top:1px solid var(--mist); padding-top:8px; }

        /* -- CHARACTERS -- */
        .chars-section { padding:80px 24px; background:white; }
        .chars-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }
        @media(max-width:640px){.chars-grid{grid-template-columns:1fr;}}
        .char-card {
            border-radius:20px; overflow:hidden;
            box-shadow:0 5px 22px rgba(91,138,171,0.1);
            transition:transform 0.25s,box-shadow 0.25s;
        }
        .char-card:hover { transform:translateY(-5px) rotate(0.4deg); box-shadow:0 14px 36px rgba(91,138,171,0.18); }
        .char-header { padding:26px 24px 18px; }
        .char-emoji { font-size:3.2rem; margin-bottom:10px; }
        .char-name { font-family:'Lora',serif; font-size:1.4rem; font-weight:600; color:var(--charcoal); }
        .char-role { font-size:0.72rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; margin-top:4px; }
        .char-divider { height:4px; }
        .char-.char-body{ font-family:'Inter',sans-serif; background:var(--mist-lt); color:var(--charcoal); overflow-x:hidden; }
        .char-desc { font-size:0.88rem; color:var(--charcoal-lt); line-height:1.65; }
        .char-quote { font-family:'Lora',serif; font-size:0.82rem; font-style:italic; color:var(--sky-dk); margin-top:12px; padding-left:12px; border-left:3px solid var(--mist-dk); }

        .char-echo .char-header { background:linear-gradient(135deg,#2a3f58,#3a5270); }
        .char-echo .char-name  { color:white; }
        .char-echo .char-role  { color:var(--pink-echo); }
        .char-echo .char-divider { background:var(--pink-echo); }

        .char-shelly .char-header { background:linear-gradient(135deg,var(--moss-lt),#d4e8d5); }
        .char-shelly .char-role  { color:var(--moss); }
        .char-shelly .char-divider { background:var(--moss); }

        /* -- REFRAINS -- */
        .refrains-section { padding:80px 24px; background:linear-gradient(160deg,#2a3f58,#3a4f70,#2e3d58); position:relative; overflow:hidden; }
        .refrains-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 70% 50%,rgba(155,138,180,0.15) 0%,transparent 70%); pointer-events:none; }
        .refrains-inner { max-width:760px; margin:0 auto; text-align:center; position:relative; z-index:1; }
        .refrains-inner .section-tag { border-color:rgba(200,216,232,0.3); color:var(--mist); }
        .refrains-inner .section-title { color:white; }
        .refrains-inner p { font-size:0.97rem; color:rgba(200,216,232,0.75); line-height:1.7; margin-bottom:40px; }
        .refrain-cards { display:flex; flex-direction:column; gap:16px; }
        .refrain-big {
            background:rgba(255,255,255,0.07); border:1.5px solid rgba(200,216,232,0.2);
            border-radius:16px; padding:24px 28px; text-align:center;
            transition:background 0.2s,border-color 0.2s;
        }
        .refrain-big:hover { background:rgba(255,255,255,0.12); border-color:rgba(200,216,232,0.4); }
        .refrain-big-text { font-family:'Lora',serif; font-size:1.25rem; font-style:italic; color:white; line-height:1.5; }
        .refrain-big-note { font-size:0.72rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--lav-mid); margin-top:10px; }

        /* -- THE FLOWER -- */
        .flower-section { padding:72px 24px; background:var(--gold-lt); border-top:3px solid var(--gold); }
        .flower-inner { max-width:760px; margin:0 auto; text-align:center; }
        .flower-inner .section-tag { border-color:var(--gold); color:#8a6a10; }
        .flower-inner .section-title { color:var(--charcoal); }
        .petals-row { display:flex; justify-content:center; gap:16px; margin:32px 0; flex-wrap:wrap; }
        .petal-card { background:white; border-radius:14px; padding:18px 20px; text-align:center; min-width:140px; box-shadow:0 4px 16px rgba(212,168,71,0.15); border-bottom:3px solid; flex:1; max-width:200px; }
        .petal-card:nth-child(1){ border-color:var(--pink-echo); }
        .petal-card:nth-child(2){ border-color:var(--sky); }
        .petal-card:nth-child(3){ border-color:var(--gold); }
        .petal-swatch { width:40px; height:40px; border-radius:50%; margin:0 auto 10px; }
        .petal-meaning { font-size:0.9rem; font-weight:800; color:var(--charcoal); margin-bottom:4px; }
        .petal-note { font-size:0.78rem; color:var(--charcoal-lt); }

        /* -- COMING SOON CTA -- */
        .cta-section {
            padding:80px 24px; text-align:center; position:relative; overflow:hidden;
            background:linear-gradient(135deg, var(--sky-dk) 0%, var(--lav-dk) 50%, var(--sky-dk) 100%);
            background-size:200% 200%; animation:cta-shift 7s ease-in-out infinite;
        }
        @keyframes cta-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
        .cta-section::before { content:'📚'; position:absolute; right:-20px; top:50%; transform:translateY(-50%); font-size:200px; opacity:0.07; pointer-events:none; }
        .cta-section::after { content:'🌸'; position:absolute; left:-10px; bottom:-10px; font-size:160px; opacity:0.07; pointer-events:none; transform:rotate(-15deg); }
        .cta-inner { max-width:620px; margin:0 auto; position:relative; z-index:1; }
        .cta-pill { display:inline-block; background:rgba(255,255,255,0.2); color:white; font-size:0.7rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; padding:5px 16px; border-radius:999px; margin-bottom:16px; }
        .cta-inner h2 { font-family:'Lora',serif; font-size:clamp(1.8rem,5vw,2.8rem); font-weight:600; color:white; margin-bottom:14px; }
        .cta-inner p { font-size:1rem; color:rgba(255,255,255,0.82); line-height:1.7; margin-bottom:32px; }
        .btn-notify-big {
            display:inline-flex; align-items:center; gap:10px;
            background:white; color:var(--lav-dk); font-weight:800; font-size:1.05rem;
            padding:15px 34px; border-radius:13px; box-shadow:0 5px 0 rgba(0,0,0,0.15);
            transition:transform 0.12s,box-shadow 0.12s,filter 0.15s; margin-bottom:12px;
        }
        .btn-notify-big:hover { filter:brightness(1.02); transform:translateY(-2px); box-shadow:0 8px 0 rgba(0,0,0,0.15); }
        .cta-note { font-size:0.82rem; color:rgba(255,255,255,0.58); margin-top:8px; }

        /* -- MORE -- */
        .more-section { padding:64px 24px; background:var(--beige); border-top:2px solid rgba(64,59,51,0.06); }
        .more-inner { max-width:900px; margin:0 auto; }
        .more-inner h2 { font-family:'Lora',serif; font-size:1.5rem; font-weight:600; color:var(--charcoal); text-align:center; margin-bottom:32px; }
        .more-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
        .more-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-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(64,59,51,0.14); }
        .more-thumb { width:100%; aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; font-size:3rem; }
        .more-body { padding:14px 16px; flex:1; display:flex; flex-direction:column; }
        .more-title { font-size:0.9rem; font-weight:800; color:var(--charcoal); margin-bottom:6px; }
        .more-cta   { margin-top:auto; font-size:0.82rem; font-weight:700; color:var(--teal-dk); }

        /* -- FOOTER -- */
        footer { background:var(--charcoal); padding:24px; text-align:center; color:rgba(240,234,214,0.3); font-size:0.82rem; }
        footer a { color:rgba(240,234,214,0.45); 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}
body{background:var(--mist-lt);color:var(--mist)}
/* Pre-publication gate: hides deep story sections until launch day.
   To publish, remove the 'prepublish' class from the 
/* Pre-publication gate: hides deep story sections until launch day.
   To publish, remove the 'prepublish' class from the <body> tag. */
body.prepublish .pub-gate { display: none !important; }
 tag. */
body.prepublish .pub-gate { display: none !important; }
.reveal{opacity:1!important;transform:none!important}