:root{
    --paper:#f7f1e6;
    --cream:#fffaf1;
    --ink:#2b2118;
    --muted:#6a5a47;
    --teal:#173f46;
    --gold:#b58a45;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:linear-gradient(#fbf7ef,#efe4d2);
    color:var(--ink);
    font-family:Georgia,"Times New Roman",serif;
}

/* Main Reading Area */

.story{
    width:min(860px,88%);
    margin:0 auto;
    padding:36px 0 80px;
}

/* Back Button */

.back-link{
    margin:0 0 2.25rem;
}

.back-link a{
    display:inline-block;
    padding:.65rem 1.15rem;
    border-radius:999px;
    background:rgba(255,250,241,.9);
    border:1px solid rgba(181,138,69,.38);
    color:var(--teal);
    text-decoration:none;
    font-size:.95rem;
    box-shadow:0 4px 12px rgba(43,33,24,.06);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.back-link a:hover{
    background:#fffdf8;
    transform:translateY(-1px);
    box-shadow:0 7px 16px rgba(43,33,24,.10);
}

/* Header */

.site-name{
    text-align:center;
    color:var(--teal);
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:.82rem;
    margin:0 0 18px;
}

h1{
    text-align:center;
    color:var(--teal);
    font-size:clamp(2.5rem,6vw,4.5rem);
    font-weight:500;
    line-height:1.15;
    margin:0 0 42px;
}

/* Story Panel */

.story-body{
    background:rgba(255,250,241,.8);
    border:1px solid rgba(181,138,69,.26);
    border-radius:18px;
    padding:clamp(1.75rem,4vw,3.25rem);
    box-shadow:0 14px 30px rgba(43,33,24,.10);
}

.story-body p{
    font-size:1.18rem;
    line-height:1.9;
    margin:0 0 1.4em;
}

.story-body p:last-child{
    margin-bottom:0;
}

.story-body em{
    font-style:italic;
}

.end-mark{
    text-align:center;
    font-style:italic;
    color:var(--muted);
    margin-top:2rem;
}

/* Optional Chapter Headings */

.story-body h2{
    color:var(--teal);
    font-size:1.7rem;
    font-weight:500;
    margin:2.2rem 0 1rem;
    text-align:center;
}

.story-body h3{
    color:var(--teal);
    font-size:1.25rem;
    font-weight:500;
    margin:1.8rem 0 .8rem;
}

.story-divider{
    margin:4rem 0;
    border:none;
    border-top:1px solid rgba(181,138,69,.25);
}

/* Poetry Pages */

.poetry-page .story-body{
    text-align:center;
}

.poetry-page h2{
    margin-top:3rem;
}

.poetry-page p{
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
}

/* Mobile */

@media(max-width:560px){

    .story{
        width:min(92%,420px);
        padding:32px 0 56px;
    }

    .back-link{
        margin-bottom:1.6rem;
    }

    .story-body{
        padding:1.45rem;
        border-radius:15px;
    }

    .story-body p{
        font-size:1.08rem;
        line-height:1.78;
    }

    h1{
        margin-bottom:32px;
    }
}