:root{
    --bg:#0e1624;
    --bg-deep:#090f19;
    --panel:#1a2638;
    --panel-soft:rgba(26,38,56,.68);
    --accent:#9bdcff;
    --accent-strong:#63caff;
    --text:#f7faff;
    --muted:#a9b6c9;
    --danger:#ff4d6d;
    --line:rgba(155,220,255,.16);
    --shadow:0 30px 80px rgba(0,0,0,.35);
}

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

html{scroll-behavior:smooth;}

body{
    min-height:100vh;
    background:
        radial-gradient(circle at top left, rgba(155,220,255,.08), transparent 35%),
        radial-gradient(circle at top right, rgba(255,77,109,.07), transparent 30%),
        var(--bg);
    color:var(--text);
    font-family:Inter, sans-serif;
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.65), transparent 75%);
    pointer-events:none;
    z-index:-1;
}

a{color:inherit;}

p{color:var(--muted);line-height:1.8;}

h1,h2,h3{font-family:"Space Grotesk", sans-serif;line-height:1.05;}

.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px clamp(18px,5vw,70px);
    background:rgba(9,15,25,.82);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
}

.brand{
    font-family:"Space Grotesk", sans-serif;
    font-weight:700;
    letter-spacing:.5px;
    text-decoration:none;
}

.topbar{display:flex;gap:28px;align-items:center;}

.topbar a{
    color:var(--muted);
    text-decoration:none;
    font-size:.95rem;
    transition:.25s;
}

.topbar a:hover,.topbar a.active{color:var(--accent);}

.nav-toggle{
    display:none;
    background:transparent;
    color:var(--text);
    border:1px solid var(--line);
    border-radius:10px;
    padding:8px 11px;
    font-size:1.1rem;
}

.hero{
    min-height:92vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    padding:90px 24px;
    overflow:hidden;
}

.home-hero,.novel-hero{
    background:
        linear-gradient(rgba(14,22,36,.62), rgba(14,22,36,.97)),
        radial-gradient(circle at 50% 25%, rgba(155,220,255,.16), transparent 45%);
}

.novel-hero::after,.home-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center, rgba(155,220,255,.08), transparent 62%);
    pointer-events:none;
}

.ambient{
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    filter:blur(60px);
    opacity:.22;
    animation:floatGlow 9s ease-in-out infinite alternate;
}

.ambient-one{background:var(--accent);left:8%;top:18%;}
.ambient-two{background:var(--danger);right:10%;bottom:18%;animation-delay:1.5s;}

@keyframes floatGlow{to{transform:translateY(-35px) translateX(20px) scale(1.08);}}

.hero-content{max-width:960px;position:relative;z-index:2;}

.label,.eyebrow{
    color:var(--danger);
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:.78rem;
    font-weight:700;
    margin-bottom:18px;
}

.hero h1,.page-hero h1{
    font-size:clamp(3rem,8vw,6.8rem);
    margin-bottom:22px;
}

.subtitle{color:var(--muted);font-style:italic;margin-bottom:18px;}

.hero p,.page-hero p{max-width:720px;margin:0 auto 34px;}

.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 24px;
    border-radius:14px;
    border:1px solid var(--accent);
    color:var(--accent);
    text-decoration:none;
    transition:.25s;
    min-width:155px;
}

.btn.primary,.btn:hover{
    background:var(--accent);
    color:#07111f;
    box-shadow:0 0 28px rgba(155,220,255,.25);
}

.btn.primary:hover{transform:translateY(-2px);}

.section{max-width:1200px;margin:auto;padding:110px 28px;}

.split-section{display:grid;grid-template-columns:1fr .82fr;gap:70px;align-items:center;}

.split-section h2,.section-heading h2{font-size:clamp(2.2rem,5vw,4rem);margin-bottom:20px;}

.section-heading{text-align:center;max-width:760px;margin:0 auto 60px;}
.section-heading.left{text-align:left;margin-left:0;}

.text-link{display:inline-block;color:var(--accent);text-decoration:none;margin-top:24px;font-weight:700;}

.feature-card,.info-card,.story-card,.timeline-item{
    background:linear-gradient(135deg, rgba(26,38,56,.88), rgba(26,38,56,.35));
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow);
}

.feature-card{padding:42px;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;}
.feature-card::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle, rgba(155,220,255,.13), transparent 55%);}
.feature-card > *{position:relative;z-index:1;}
.feature-card span{color:var(--danger);letter-spacing:3px;text-transform:uppercase;font-size:.78rem;font-weight:700;}
.feature-card h3{font-size:2.1rem;margin:14px 0;}

.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.card-grid.three{grid-template-columns:repeat(3,1fr);}

.story-card{overflow:hidden;transition:.25s;}
.story-card:hover{transform:translateY(-6px);border-color:rgba(155,220,255,.4);}

.story-cover{
    min-height:220px;
    display:flex;
    align-items:flex-end;
    padding:22px;
    font-family:"Space Grotesk", sans-serif;
    font-size:1.4rem;
    font-weight:700;
    background:
        linear-gradient(145deg, rgba(155,220,255,.2), rgba(255,77,109,.08)),
        linear-gradient(135deg, rgba(255,255,255,.05), transparent);
    border-bottom:1px solid var(--line);
}

.muted-cover{opacity:.62;}
.story-info{padding:26px;}
.story-info h2,.story-info h3{margin:12px 0 10px;}
.story-info a{display:inline-block;margin-top:18px;color:var(--accent);text-decoration:none;font-weight:700;}

.tag{
    display:inline-flex;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(155,220,255,.1);
    border:1px solid var(--line);
    color:var(--accent);
    font-size:.76rem;
    font-weight:700;
}
.muted-tag{color:var(--muted);}

.quote-section{text-align:center;max-width:1000px;margin:0 auto;padding:120px 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.quote-section p{font-family:"Space Grotesk", sans-serif;font-size:clamp(2rem,5vw,4rem);line-height:1.12;color:var(--text);}
.quote-section span{display:block;color:var(--danger);margin-top:24px;letter-spacing:3px;text-transform:uppercase;font-size:.78rem;font-weight:700;}

.page-hero{padding:130px 28px 80px;text-align:center;max-width:950px;margin:auto;}

.book-showcase{display:grid;grid-template-columns:.75fr 1fr;gap:70px;align-items:center;}
.book-cover-placeholder{
    min-height:520px;
    border-radius:28px;
    border:1px solid rgba(155,220,255,.24);
    background:linear-gradient(145deg, rgba(155,220,255,.18), rgba(255,77,109,.08), rgba(26,38,56,.45));
    display:flex;
    align-items:flex-end;
    padding:26px;
    box-shadow:var(--shadow);
}
.book-cover-placeholder span{color:var(--muted);letter-spacing:3px;text-transform:uppercase;font-size:.8rem;font-weight:700;}
.detail-list{margin-top:28px;border-top:1px solid var(--line);padding-top:22px;}
.detail-list p{margin-bottom:8px;}
.detail-list strong{color:var(--text);}

.timeline{display:grid;gap:22px;}
.timeline-item{padding:30px;}
.timeline-item span{color:var(--danger);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:.78rem;}
.timeline-item h3{margin:10px 0;font-size:1.6rem;}

.library-tools{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:44px;}
.filter-btn{
    background:rgba(26,38,56,.55);
    color:var(--muted);
    border:1px solid var(--line);
    border-radius:999px;
    padding:10px 17px;
    cursor:pointer;
}
.filter-btn.active,.filter-btn:hover{color:#07111f;background:var(--accent);}
.library-grid{grid-template-columns:repeat(2,1fr);}
.library-card.hide{display:none;}

.about-hero{max-width:1100px;margin:auto;padding:130px 28px 80px;display:grid;grid-template-columns:330px 1fr;gap:70px;align-items:center;}
.portrait{
    min-height:430px;
    border-radius:28px;
    border:1px solid var(--line);
    background:linear-gradient(145deg, rgba(155,220,255,.18), rgba(255,255,255,.03));
    position:relative;
    box-shadow:var(--shadow);
}
.portrait::after{content:"AUTHOR PHOTO";position:absolute;left:22px;bottom:22px;color:var(--danger);letter-spacing:3px;font-size:.78rem;font-weight:700;}
.about-copy h1{font-size:clamp(3rem,7vw,5.5rem);margin-bottom:20px;}
.about-copy p{margin-bottom:18px;}
.info-card{padding:32px;}
.info-card h2{font-size:1.7rem;margin-bottom:14px;}

.footer{text-align:center;padding:70px 28px;border-top:1px solid var(--line);background:rgba(9,15,25,.45);}
.footer h2{margin-bottom:10px;}
.socials{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:20px;}
.socials a{color:var(--accent);text-decoration:none;}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

@media(max-width:850px){
    .nav-toggle{display:block;}
    .topbar{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        display:none;
        flex-direction:column;
        align-items:flex-start;
        padding:20px 28px;
        background:rgba(9,15,25,.96);
        border-bottom:1px solid var(--line);
    }
    .topbar.open{display:flex;}
    .split-section,.book-showcase,.about-hero{grid-template-columns:1fr;}
    .card-grid,.card-grid.three,.library-grid{grid-template-columns:1fr;}
    .section{padding:82px 22px;}
    .hero{min-height:86vh;}
    .about-hero,.page-hero{padding-top:90px;}
}


/* =========================
   AUTHOR HUB UPDATES
========================= */
.hub-strip{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin:-12px auto 34px;
}

.hub-strip span{
    padding:9px 13px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(26,38,56,.52);
    color:var(--accent);
    font-size:.82rem;
    font-weight:700;
}

.novel-progress{
    margin-top:30px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:22px;
    background:rgba(9,15,25,.38);
}

.progress-topline{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    margin-bottom:12px;
}

.progress-topline span{
    color:var(--danger);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:.78rem;
    font-weight:700;
}

.progress-topline strong{
    color:var(--accent);
    font-family:"Space Grotesk", sans-serif;
    font-size:1.55rem;
}

.progress-track{
    height:14px;
    border-radius:999px;
    overflow:hidden;
    border:1px solid rgba(155,220,255,.22);
    background:rgba(247,250,255,.05);
}

.progress-fill{
    width:var(--progress);
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--accent), var(--danger));
    box-shadow:0 0 22px rgba(155,220,255,.35);
}

.novel-progress p{
    margin-top:12px;
    font-size:.9rem;
}

.featured-story-section{
    padding-top:70px;
    padding-bottom:20px;
}

.featured-story{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:34px;
    align-items:stretch;
    padding:26px;
    border:1px solid rgba(155,220,255,.22);
    border-radius:30px;
    background:linear-gradient(135deg, rgba(26,38,56,.9), rgba(26,38,56,.34));
    box-shadow:var(--shadow);
    overflow:hidden;
}

.featured-story-cover{
    min-height:360px;
    border-radius:24px;
    display:flex;
    align-items:flex-end;
    padding:28px;
    font-family:"Space Grotesk", sans-serif;
    font-size:2rem;
    font-weight:700;
    background:
        radial-gradient(circle at 30% 20%, rgba(155,220,255,.22), transparent 36%),
        linear-gradient(145deg, rgba(155,220,255,.2), rgba(255,77,109,.08)),
        rgba(9,15,25,.4);
    border:1px solid var(--line);
}

.featured-story-copy{
    padding:20px 8px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.featured-story-copy h2{
    font-size:clamp(2.4rem,5vw,4.4rem);
    margin-bottom:18px;
}

.story-meta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:22px 0;
}

.story-meta span{
    display:inline-flex;
    align-items:center;
    padding:8px 11px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(155,220,255,.08);
    color:var(--muted);
    font-size:.78rem;
    font-weight:700;
}

.story-meta.compact{
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin:0 0 12px;
}

.story-meta.compact .tag{
    margin:0;
}

@media(max-width:850px){
    .featured-story{grid-template-columns:1fr;}
    .featured-story-cover{min-height:260px;}
    .hub-strip{margin-top:0;}
}


/* =========================
   STORY READER PAGES
========================= */
.reader-body{
    background:
        radial-gradient(circle at top, rgba(155,220,255,.09), transparent 34%),
        var(--bg-deep);
}

.reading-progress{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:4px;
    z-index:2000;
    background:rgba(255,255,255,.04);
}

.reading-progress span{
    display:block;
    width:0%;
    height:100%;
    background:linear-gradient(90deg, var(--accent), var(--danger));
    box-shadow:0 0 18px rgba(155,220,255,.45);
}

.story-hero{
    max-width:1050px;
    margin:auto;
    padding:120px 24px 50px;
}

.story-hero-card{
    border:1px solid rgba(155,220,255,.22);
    border-radius:32px;
    padding:clamp(32px,6vw,70px);
    background:
        radial-gradient(circle at 18% 15%, rgba(155,220,255,.16), transparent 36%),
        linear-gradient(135deg, rgba(26,38,56,.88), rgba(26,38,56,.32));
    box-shadow:var(--shadow);
}

.story-kicker{
    color:var(--danger);
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:.78rem;
    font-weight:700;
    margin-bottom:18px;
}

.story-hero h1{
    font-size:clamp(3.2rem,8vw,6.8rem);
    margin-bottom:18px;
}

.story-hero p{
    max-width:760px;
}

.reader-meta{
    margin-bottom:0;
}

.reader-shell{
    max-width:880px;
    margin:0 auto;
    padding:0 24px 40px;
}

.reader-toolbar{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    color:var(--muted);
    font-size:.88rem;
    margin-bottom:22px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
}

.reader-toolbar a{
    color:var(--accent);
    text-decoration:none;
    font-weight:700;
}

.story-content{
    padding:clamp(28px,5vw,58px);
    border:1px solid var(--line);
    border-radius:28px;
    background:rgba(247,250,255,.035);
    box-shadow:var(--shadow);
}

.story-content p{
    font-family:Literata, Georgia, serif;
    font-size:clamp(1.08rem,2vw,1.24rem);
    line-height:2.05;
    color:rgba(247,250,255,.9);
    margin-bottom:1.45em;
}

.story-content h2{
    margin:2.2em 0 .85em;
    color:var(--accent);
    font-size:clamp(1.8rem,4vw,2.7rem);
}

.story-content h2:first-child{
    margin-top:0;
}

.more-stories{
    padding-top:60px;
}

.mini-story-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.mini-story-link{
    display:flex;
    min-height:110px;
    align-items:flex-end;
    padding:18px;
    border:1px solid var(--line);
    border-radius:20px;
    background:linear-gradient(135deg, rgba(26,38,56,.82), rgba(26,38,56,.28));
    color:var(--accent);
    text-decoration:none;
    font-weight:700;
    transition:.25s;
}

.mini-story-link:hover{
    transform:translateY(-4px);
    border-color:rgba(155,220,255,.45);
}

.cover-extra{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,77,109,.22), transparent 34%),
        linear-gradient(145deg, rgba(155,220,255,.18), rgba(255,77,109,.13)),
        rgba(9,15,25,.4);
}

.cover-final{
    background:
        radial-gradient(circle at 75% 25%, rgba(155,220,255,.25), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.06), rgba(155,220,255,.15)),
        rgba(9,15,25,.4);
}

.cover-interrogation{
    background:
        radial-gradient(circle at 50% 20%, rgba(247,250,255,.18), transparent 30%),
        linear-gradient(145deg, rgba(26,38,56,.3), rgba(255,77,109,.12)),
        rgba(9,15,25,.62);
}

.cover-broken{
    background:
        radial-gradient(circle at 20% 30%, rgba(255,77,109,.18), transparent 30%),
        linear-gradient(145deg, rgba(155,220,255,.11), rgba(26,38,56,.62)),
        rgba(9,15,25,.48);
}

.progress-panel{
    margin-top:34px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:26px;
    background:rgba(9,15,25,.38);
}

.progress-panel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:24px;
}

.progress-panel-head h3{
    font-size:2rem;
}

.progress-panel-head strong{
    color:var(--accent);
    border:1px solid var(--line);
    border-radius:999px;
    padding:9px 12px;
    font-size:.85rem;
}

.progress-list{
    display:grid;
    gap:18px;
}

.progress-row .progress-topline{
    margin-bottom:8px;
}

.manual-note{
    margin-top:18px;
    font-size:.9rem;
}

@media(max-width:850px){
    .story-hero{padding-top:90px;}
    .reader-toolbar{align-items:flex-start;flex-direction:column;}
    .mini-story-grid{grid-template-columns:1fr;}
    .progress-panel-head{flex-direction:column;}
}


/* Reader safety override: keep story pages readable even if scroll-reveal JavaScript fails */
.reader-body .story-hero,
.reader-body .reader-shell,
.reader-body .more-stories{
    opacity:1 !important;
    transform:none !important;
}

.reader-body .story-content{
    background:rgba(247,250,255,.06);
    border-color:rgba(155,220,255,.24);
}

.reader-body .story-content p,
.reader-body .story-content li{
    color:rgba(247,250,255,.96);
}

.reader-start-label{
    display:block;
    color:var(--danger);
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:.76rem;
    font-weight:800;
    margin:0 0 22px;
}

/* =========================
   ASSET UPDATE: PHOTOS + COVERS
========================= */
.author-hub-badge{
    width:min(190px,46vw);
    margin:0 auto 24px;
    padding:10px;
    border:1px solid rgba(155,220,255,.24);
    border-radius:24px;
    background:rgba(9,15,25,.42);
    box-shadow:0 20px 60px rgba(0,0,0,.28);
}

.author-hub-badge img{
    display:block;
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:18px;
    object-position:center 62%;
}

.author-hub-badge span{
    display:block;
    margin-top:10px;
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:.68rem;
    font-weight:800;
}

.image-cover,
.placeholder-cover{
    position:relative;
    background-size:cover;
    background-position:center;
    isolation:isolate;
}

.image-cover::before,
.placeholder-cover::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(9,15,25,.92), rgba(9,15,25,.12) 58%, rgba(9,15,25,.08));
    z-index:-1;
}

.image-cover span,
.placeholder-cover span{
    position:relative;
    z-index:1;
    text-shadow:0 10px 30px rgba(0,0,0,.55);
}

.final-frame-cover{
    background-image:url("images/covers/final-frame.png");
    background-position:center;
}

.broken-promises-cover{
    background-image:url("images/covers/broken-promises.png");
    background-position:center;
}

.placeholder-cover{
    background:
        radial-gradient(circle at 30% 20%, rgba(155,220,255,.16), transparent 35%),
        radial-gradient(circle at 78% 72%, rgba(255,77,109,.14), transparent 38%),
        linear-gradient(145deg, rgba(26,38,56,.82), rgba(9,15,25,.64));
    color:rgba(247,250,255,.82);
}

.placeholder-cover::after{
    content:"PLACEHOLDER";
    position:absolute;
    top:18px;
    right:18px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid rgba(155,220,255,.22);
    background:rgba(9,15,25,.44);
    color:var(--accent);
    font-size:.64rem;
    letter-spacing:2px;
    font-weight:800;
}

.author-carousel{
    width:100%;
    max-width:350px;
}

.carousel-frame{
    position:relative;
    height:430px;
    border-radius:28px;
    border:1px solid rgba(155,220,255,.24);
    overflow:hidden;
    background:rgba(9,15,25,.52);
    box-shadow:var(--shadow);
}

.carousel-frame::after{
    content:"TRAVIS M. THOMPSON";
    position:absolute;
    left:18px;
    bottom:18px;
    padding:9px 11px;
    border-radius:999px;
    background:rgba(9,15,25,.62);
    border:1px solid rgba(155,220,255,.22);
    color:var(--accent);
    letter-spacing:2px;
    font-size:.68rem;
    font-weight:800;
}

.carousel-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .35s ease, transform .45s ease;
    transform:scale(1.04);
}

.carousel-image.active{
    opacity:1;
    transform:scale(1);
}

.carousel-image:nth-child(1){object-position:center 62%;}
.carousel-image:nth-child(2){object-position:center 58%;}
.carousel-image:nth-child(3){object-position:center center;}
.carousel-image:nth-child(4){object-position:center center;}

.carousel-controls{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin-top:16px;
}

.carousel-controls button{
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(26,38,56,.58);
    color:var(--accent);
    cursor:pointer;
    font-weight:800;
}

.carousel-controls button:hover,
.carousel-dots button.active{
    background:var(--accent);
    color:#07111f;
}

.carousel-dots{
    display:flex;
    gap:8px;
}

.carousel-dots button{
    width:10px;
    height:10px;
    padding:0;
    border-radius:50%;
}

.author-stats{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.author-stats span{
    padding:8px 11px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(155,220,255,.08);
    color:var(--accent);
    font-size:.78rem;
    font-weight:800;
}

.story-hero-with-cover{
    max-width:1180px;
    display:grid;
    grid-template-columns:330px 1fr;
    gap:28px;
    align-items:stretch;
}

.reader-cover{
    min-height:460px;
    border-radius:32px;
    border:1px solid rgba(155,220,255,.22);
    display:flex;
    align-items:flex-end;
    padding:24px;
    font-family:"Space Grotesk", sans-serif;
    font-weight:800;
    font-size:1.6rem;
    overflow:hidden;
    box-shadow:var(--shadow);
}

.story-hero-with-cover .story-hero-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

@media(max-width:850px){
    .author-hub-badge{width:min(160px,60vw);}
    .story-hero-with-cover{grid-template-columns:1fr;}
    .reader-cover{min-height:380px;}
    .carousel-frame{height:410px;}
}

/* =========================
   HOMEPAGE CLEANUP UPDATE
========================= */
.home-intro{
    max-width:820px;
    text-align:left;
    margin:0 auto;
}

.home-intro .label{
    margin-bottom:16px;
}

.home-intro h1{
    font-size:clamp(2.45rem,5.4vw,4.85rem);
    max-width:790px;
    margin-bottom:22px;
    letter-spacing:-.04em;
}

.home-intro .hero-lead{
    max-width:680px;
    margin:0 0 16px;
    font-size:clamp(1.05rem,2vw,1.28rem);
    color:rgba(247,250,255,.88);
}

.home-intro .hero-subcopy{
    max-width:620px;
    margin:0 0 30px;
    color:var(--muted);
}

.home-intro .hub-strip,
.home-intro .btn-row{
    justify-content:flex-start;
}

.author-hub-badge{
    display:none !important;
}

.socials a:hover{
    color:var(--text);
}

@media(max-width:760px){
    .home-intro{
        text-align:center;
    }
    .home-intro .hero-lead,
    .home-intro .hero-subcopy{
        margin-left:auto;
        margin-right:auto;
    }
    .home-intro .hub-strip,
    .home-intro .btn-row{
        justify-content:center;
    }
}

/* =========================
   CLEAN HOMEPAGE HERO REVISION
========================= */
.home-intro{
    max-width:760px;
    text-align:left;
    margin:0 auto;
    padding:clamp(28px,5vw,52px);
    border:1px solid rgba(155,220,255,.16);
    border-radius:32px;
    background:linear-gradient(135deg, rgba(9,15,25,.62), rgba(26,38,56,.28));
    box-shadow:0 28px 90px rgba(0,0,0,.32);
}

.home-intro .label{
    margin-bottom:14px;
}

.home-intro h1{
    font-size:clamp(3rem,8vw,5.4rem);
    margin-bottom:18px;
    letter-spacing:-.04em;
}

.home-intro p{
    margin-left:0;
    margin-right:0;
    max-width:640px;
}

.welcome-line{
    font-family:"Space Grotesk", sans-serif;
    color:rgba(247,250,255,.94);
    font-size:clamp(1.18rem,2.5vw,1.55rem);
    line-height:1.45;
    margin-bottom:14px !important;
}

.home-intro .hub-strip{
    justify-content:flex-start;
    margin:2px 0 30px;
}

.home-intro .btn-row{
    justify-content:flex-start;
}

.home-hero{
    text-align:left;
    min-height:82vh;
}

@media(max-width:850px){
    .home-intro{
        text-align:left;
        padding:28px;
    }
    .home-intro .hub-strip,
    .home-intro .btn-row{
        justify-content:flex-start;
    }
}


/* Repair pass: clickable cards and palette switcher */
.hub-strip a{
    color:var(--text);
    text-decoration:none;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    border-radius:999px;
    padding:10px 14px;
    transition:.25s;
}

.hub-strip a:hover{
    color:#07111f;
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:0 0 24px rgba(155,220,255,.18);
    transform:translateY(-2px);
}

.linked-card{
    color:inherit;
    text-decoration:none;
}

.clickable-card{cursor:pointer;}
.clickable-card:focus-visible,
.linked-card:focus-visible,
.hub-strip a:focus-visible,
.palette-toggle:focus-visible,
.palette-choice:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px;
}

.palette-panel{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:1200;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    font-family:Inter, sans-serif;
}

.palette-toggle{
    border:1px solid var(--line);
    background:rgba(9,15,25,.88);
    color:var(--text);
    border-radius:999px;
    padding:11px 15px;
    font-weight:700;
    letter-spacing:.4px;
    cursor:pointer;
    box-shadow:var(--shadow);
    backdrop-filter:blur(14px);
}

.palette-options{
    display:none;
    width:min(260px, calc(100vw - 36px));
    background:rgba(9,15,25,.94);
    border:1px solid var(--line);
    border-radius:18px;
    padding:10px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
}

.palette-panel.open .palette-options{display:grid;gap:8px;}

.palette-choice{
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    color:var(--text);
    border-radius:14px;
    padding:10px 12px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    text-align:left;
    font-weight:700;
}

.palette-choice:hover,
.palette-choice.active{
    border-color:var(--accent);
    color:var(--accent);
}

.palette-swatch{
    width:34px;
    height:14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background:linear-gradient(90deg, var(--swatch-one), var(--swatch-two));
    flex:0 0 auto;
}

.story-content h2{
    font-family:"Literata", serif;
    font-size:1.08rem;
    line-height:1.95;
    font-weight:400;
    margin:0 0 1.05em;
    color:var(--reader-text, var(--text));
}

@media(max-width:640px){
    .palette-panel{right:12px;bottom:12px;}
    .palette-toggle{padding:10px 13px;font-size:.9rem;}
}


/* Vault + hidden color archive refinements */
.vault-section{
    border-top:1px solid var(--line);
    position:relative;
}

.vault-section::before{
    content:"";
    position:absolute;
    inset:40px 28px auto;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity:.38;
}

.vault-heading p{
    max-width:780px;
}

.vault-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.vault-card{
    min-height:245px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
        radial-gradient(circle at top right, rgba(155,220,255,.09), transparent 45%),
        var(--panel-soft);
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}

.vault-card::after{
    content:"LOCKED";
    position:absolute;
    right:18px;
    bottom:16px;
    color:var(--line);
    letter-spacing:3px;
    font-size:.68rem;
    font-weight:800;
}

.vault-number{
    color:var(--danger);
    letter-spacing:3px;
    text-transform:uppercase;
    font-size:.68rem;
    font-weight:800;
    margin-bottom:18px;
}

.vault-card h3{
    font-size:1.45rem;
    margin-bottom:12px;
}

.vault-card p{
    font-size:.94rem;
    line-height:1.65;
    margin-bottom:18px;
}

.vault-card span{
    display:inline-flex;
    color:var(--accent);
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 10px;
    font-size:.72rem;
    font-weight:800;
}

.palette-toggle{
    width:48px;
    height:48px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.15rem;
    letter-spacing:0;
}

.palette-toggle span{
    display:block;
    transform:translateY(-1px);
}

.palette-title{
    color:var(--danger);
    letter-spacing:3px;
    text-transform:uppercase;
    font-size:.68rem;
    font-weight:900;
    padding:4px 4px 8px;
}

.palette-options{
    width:min(310px, calc(100vw - 36px));
    max-height:min(70vh, 520px);
    overflow:auto;
}

@media(max-width:980px){
    .vault-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:640px){
    .vault-grid{grid-template-columns:1fr;}
    .vault-card{min-height:auto;}
    .palette-toggle{width:44px;height:44px;font-size:1.05rem;}
}