body.reader-page{
    margin:0;
    color:#eadfca;
    background:
        radial-gradient(circle at 50% 0%,rgba(76,50,25,.15),transparent 30%),
        #080a0b;
}

/* =========================================================
   OLD DUDES HEADER
   ========================================================= */

.reader-page .site-header{
    position:relative;
    z-index:20;
    top:auto;
    left:auto;
    width:100%;
    min-height:62px;
    padding:8px clamp(22px,3vw,48px);
    background:#050505;
    border-bottom:1px solid rgba(217,155,57,.22);
}

.reader-page .brand img{
    width:46px;
    height:46px;
}

.reader-page .brand span{
    font-size:.72rem;
}


/* =========================================================
   CHAPTER BANNER
   ========================================================= */

.reader-hero{
    --chapter-banner:url("/assets/new-beginning-monument.png");

    position:relative;
    min-height:390px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;

    border-bottom:1px solid rgba(217,155,57,.28);

    background-image:
        linear-gradient(
            0deg,
            rgba(5,7,8,.96) 0%,
            rgba(5,7,8,.62) 33%,
            rgba(5,7,8,.10) 75%
        ),
        linear-gradient(
            90deg,
            rgba(5,7,8,.58) 0%,
            rgba(5,7,8,.14) 55%,
            rgba(5,7,8,.04) 100%
        ),
        var(--chapter-banner);

    background-size:cover;
    background-position:center;
}

.reader-hero-inner{
    position:relative;
    z-index:2;

    width:min(1050px,calc(100% - 48px));
    margin:0 auto;
    padding:80px 0 40px;
}

.reader-series{
    margin:0 0 8px;
    color:#d99b39;
    font:800 .65rem Arial,sans-serif;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.reader-number{
    margin:0 0 9px;
    color:#d6c09a;
    font:800 .68rem Arial,sans-serif;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.reader-hero h1{
    max-width:900px;
    margin:0;
    color:#f4e7cf;
    font-size:clamp(3rem,5.8vw,5.8rem);
    line-height:.95;
    letter-spacing:-.04em;
    text-shadow:0 4px 28px #000;
}


/* =========================================================
   CHAPTER NAVIGATION
   ========================================================= */

.reader-nav{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;

    max-width:1050px;
    margin:0 auto;
    padding:18px 24px;

    border-bottom:1px solid rgba(217,155,57,.16);
}

.reader-nav a{
    color:#d1b271;
    font:800 .61rem Arial,sans-serif;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.reader-nav a:hover{
    color:#f0c369;
}

.reader-nav .center{
    text-align:center;
}

.reader-nav .next{
    text-align:right;
}


/* =========================================================
   READING PAGE
   ========================================================= */

.reader-wrap{
    max-width:1050px;
    margin:0 auto;
    padding:55px 24px 80px;
}

.reader-paper{
    position:relative;

    max-width:800px;
    margin:0 auto;

    padding:
        clamp(42px,6vw,75px)
        clamp(30px,7vw,88px);

    color:#2a2119;

    background:
        linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.02)),
        #dfcca8;

    border:1px solid rgba(217,155,57,.38);

    box-shadow:
        0 25px 70px rgba(0,0,0,.45),
        inset 0 0 85px rgba(86,53,24,.13);
}

.reader-paper::before{
    content:"";
    position:absolute;
    inset:11px;
    pointer-events:none;
    border:1px solid rgba(104,66,29,.17);
}

.chapter-text{
    position:relative;
    z-index:2;
}

.chapter-text p{
    margin:0 0 1.25em;
    font-size:clamp(1.02rem,1.4vw,1.16rem);
    line-height:1.8;
}

.chapter-text p.first-paragraph::first-letter{
    float:left;
    margin:.07em .10em -.05em 0;
    color:#762a19;
    font-size:4.5em;
    line-height:.76;
    font-weight:700;
}

.chapter-text .inscription{
    margin:2em 0;
    color:#682e1b;
    font-size:.98rem;
    line-height:1.8;
    letter-spacing:.06em;
    text-align:center;
    text-transform:uppercase;
}

.chapter-end-rule{
    width:110px;
    height:1px;
    margin:55px auto 22px;
    background:rgba(105,61,26,.44);
}

.chapter-end-symbol{
    color:#762a19;
    font-size:1.8rem;
    text-align:center;
}


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.reader-bottom-nav{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:20px;
    align-items:center;

    max-width:800px;
    margin:34px auto 0;
}

.reader-bottom-nav a{
    color:#d5b36c;
    font:800 .62rem Arial,sans-serif;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.reader-bottom-nav a:hover{
    color:#f0c66e;
}

.reader-bottom-nav .center{
    text-align:center;
}

.reader-bottom-nav .next{
    text-align:right;
}


/* =========================================================
   FOOTER
   ========================================================= */

.reader-page footer{
    background:#050606;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:820px){

    .reader-page .site-header{
        padding:11px 18px;
    }

    .reader-hero{
        min-height:310px;
        background-position:center;
    }

    .reader-hero-inner{
        width:calc(100% - 40px);
        padding:70px 0 30px;
    }

    .reader-nav{
        grid-template-columns:1fr 1fr;
        padding:15px 20px;
    }

    .reader-nav .center{
        display:none;
    }

    .reader-wrap{
        padding:28px 14px 55px;
    }

    .reader-paper{
        padding:38px 25px;
    }

    .reader-bottom-nav{
        grid-template-columns:1fr 1fr;
        padding:0 6px;
    }

    .reader-bottom-nav .center{
        grid-column:1/-1;
        grid-row:2;
        margin-top:20px;
    }
}