/*==================================================
ESSAY READER
Awaken Your Inner Compass
==================================================*/


/*==================================================
ROOT
==================================================*/

.essay-reader{

    background:#FAF8F4;

    color:#222;

    overflow:hidden;

}


/*==================================================
READING WIDTH
==================================================*/

.reading-width{

    width:min(760px,92%);

    margin:auto;

}


/*==================================================
SECTION LABEL
==================================================*/

.section-label{

    display:inline-block;

    text-transform:uppercase;

    letter-spacing:.45em;

    font-size:.75rem;

    font-weight:600;

    color:var(--gold);

    margin-bottom:1.2rem;

}


/*==================================================
READING PROGRESS
==================================================*/

.reading-progress{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:rgba(0,0,0,.05);

    z-index:9999;

}

.reading-progress-bar{

    width:0;

    height:100%;

    background:var(--gold);

    transition:width .12s linear;

}


/*==================================================
ESSAY HERO
==================================================*/

.essay-hero{

    padding:90px 0 70px;

}


.essay-cover{

    width:min(1200px,94vw);

    margin:auto;

    overflow:hidden;

    border-radius:30px;

    box-shadow:

        0 20px 60px rgba(0,0,0,.08);

}


.essay-cover img{

    display:block;

    width:100%;

    height:420px;

    object-fit:cover;

}


.essay-header{

    width:min(760px,92%);

    margin:70px auto 0;

    text-align:center;

}

/*==================================================
READER TOOLBAR
==================================================*/

.reader-controls{

    position:sticky;

    top:20px;

    z-index:200;

    margin-top:-25px;

    margin-bottom:70px;

}

.reader-toolbar{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

}

/*==================================================
TOOLBAR BUTTONS
==================================================*/

.reader-toolbar button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 24px;

    border:none;

    border-radius:999px;

    background:rgba(255,255,255,.65);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    color:#2F4F46;

    font-family:Inter;

    font-size:.92rem;

    font-weight:600;

    cursor:pointer;

    transition:all .35s ease;

    box-shadow:

        0 12px 35px rgba(0,0,0,.08);

}

.reader-toolbar button:hover{

    background:var(--gold);

    color:white;

    transform:translateY(-4px);

    box-shadow:

        0 20px 45px rgba(0,0,0,.18);

}

.reader-toolbar i{

    font-size:15px;

    transition:.3s;

}

.reader-toolbar button:hover i{

    transform:scale(1.15);

}

/*==================================================
LISTEN BUTTON
==================================================*/

#read-aloud{

    background:var(--green);

    color:white;

}

#read-aloud:hover{

    background:var(--gold);

}

#share-essay{

    width:52px;

    height:52px;

    padding:0;

}

#focus-reading{

    min-width:120px;

}

.reader-toolbar{

    width:fit-content;

    margin:auto;

    padding:12px;

    border-radius:999px;

    background:rgba(250,248,244,.75);

    backdrop-filter:blur(25px);

    -webkit-backdrop-filter:blur(25px);

}

/*==================================================
ESSAY BODY
==================================================*/

.essay-content{

    padding:20px 0 90px;

}

.essay-body{

    font-family:Inter,sans-serif;

    font-size:1.18rem;

    line-height:2.05;

    color:#3F3F3F;

}

.essay-body p{

    margin:0 0 2.2rem;

}


/*==================================================
FIRST PARAGRAPH
==================================================*/

.essay-body p:first-of-type{

    font-size:1.24rem;

    color:#2D2D2D;

}

/*==================================================
DROP CAP
==================================================*/

.essay-body p:first-of-type::first-letter{

    float:left;

    font-family:"Cormorant Garamond",serif;

    font-size:5rem;

    line-height:.82;

    padding-right:12px;

    color:var(--gold);

    font-weight:600;

}

/*==================================================
ESSAY HEADINGS
==================================================*/

.essay-body h2{

    margin:5rem 0 2rem;

    font-family:"Cormorant Garamond",serif;

    font-size:2.6rem;

    font-weight:500;

    color:#1E1E1E;

}

.essay-body h3{

    margin:4rem 0 1.5rem;

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    font-weight:500;

}

/*==================================================
LINKS
==================================================*/

.essay-body a{

    color:var(--green);

    text-decoration:none;

    border-bottom:1px solid rgba(47,79,70,.25);

    transition:.3s;

}

.essay-body a:hover{

    color:var(--gold);

    border-color:var(--gold);

}

/*==================================================
LISTS
==================================================*/

.essay-body ul,

.essay-body ol{

    margin:2rem 0;

    padding-left:1.6rem;

}

.essay-body li{

    margin-bottom:1rem;

}

/*==================================================
PULL QUOTE
==================================================*/

.essay-pull-quote{

    margin:5rem auto;

    padding:2.8rem;

    text-align:center;

    font-family:"Cormorant Garamond",serif;

    font-size:2.1rem;

    font-style:italic;

    line-height:1.6;

    color:var(--green);

    border-top:2px solid rgba(200,161,90,.35);

    border-bottom:2px solid rgba(200,161,90,.35);

}

/*==================================================
DIVIDER
==================================================*/

.essay-divider{

    width:90px;

    height:2px;

    margin:4rem auto;

    background:var(--gold);

    opacity:.35;

}

/**************************************************
HIGHLIGHT
**************************************************/

.essay-highlight{

    font-size:1.4rem;

    font-weight:500;

    line-height:1.9;

    color:#2F4F46;

    margin:4rem 0;

}

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

@media(max-width:768px){

.reader-controls{

margin-top:20px;

position:relative;

top:0;

}

.reader-toolbar{

width:100%;

justify-content:center;

gap:10px;

padding:10px;

}

.reader-toolbar button{

padding:12px 18px;

font-size:.85rem;

}

}



/*==================================================
BREADCRUMB
==================================================*/

.essay-breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

    font-size:.9rem;

}


.essay-breadcrumb a{

    color:#777;

    text-decoration:none;

    transition:.3s;

}


.essay-breadcrumb a:hover{

    color:var(--green);

}


.essay-breadcrumb span{

    color:#bbb;

}


/*==================================================
JOURNEY LABEL
==================================================*/

.essay-journey{

    display:inline-block;

    margin-bottom:22px;

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:.8rem;

    color:var(--gold);

}


/*==================================================
TITLE
==================================================*/

.essay-header h1{

    font-family:"Cormorant Garamond",serif;

    font-size:4.6rem;

    font-weight:500;

    line-height:1.1;

    margin-bottom:28px;

    color:#1E1E1E;

}


/*==================================================
SUBTITLE
==================================================*/

.essay-subtitle{

    max-width:620px;

    margin:auto;

    font-size:1.25rem;

    line-height:1.9;

    color:#666;

}


/*==================================================
META
==================================================*/

.essay-meta{

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:18px;

    color:#8B8B8B;

    font-size:.9rem;

}