/* =====================================
WATCH *****
PROJECT ARTICLE STYLE
===================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:wght@300;400;500;600&display=swap');


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

body {

    margin:0;
    padding:0;

    background:#080d11;

    color:#dce4e7;

    font-family:"Cormorant Garamond",serif;

    overflow-x:hidden;

}


/* =====================================
BACKGROUND — WTM COVER
===================================== */

body::before {

    content:"";

    position:fixed;

    inset:-20px;

    background:

        linear-gradient(
            rgba(5,10,13,.70),
            rgba(5,10,13,.82)
        ),

        url("wtm-cover.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    filter:blur(2px);

    transform:scale(1.02);

    opacity:.90;

    z-index:-2;

}


/* =====================================
BACK LINK
===================================== */

.back-link {

    display:inline-block;

    margin-top:50px;

    color:#9fb8c2;

    text-decoration:none;

    font-size:18px;

    letter-spacing:.7px;

    transition:.25s;

}


.back-link:hover {

    color:#dcecef;

}


/* =====================================
HEADER
===================================== */

.project-header {

    max-width:950px;

    margin:0 auto;

    padding:0 35px 55px;

    text-align:center;

}


.project-header h1 {

    margin:35px 0 20px;

    font-family:"Cinzel",serif;

    font-size:54px;

    font-weight:500;

    letter-spacing:10px;

    color:#c4d4d9;

}


.project-header h2 {

    max-width:790px;

    margin:0 auto;

    font-family:"Cormorant Garamond",serif;

    font-size:32px;

    font-weight:400;

    line-height:1.5;

    color:#e0e6e8;

}


.project-meta {

    margin-top:30px;

    color:#8faab4;

    font-size:16px;

    letter-spacing:4px;

    text-transform:uppercase;

}


.project-header::after {

    content:"";

    display:block;

    width:145px;

    height:1px;

    margin:40px auto 0;

    background:rgba(159,184,194,.45);

}


/* =====================================
AUDIO PLAYER
===================================== */

.audio-player {

    max-width:620px;

    margin:50px auto 0;

    padding:25px 30px;

    border-top:1px solid rgba(159,184,194,.16);

    border-bottom:1px solid rgba(159,184,194,.16);

}


.audio-player h2 {

    margin:0 0 18px;

    font-family:"Cinzel",serif;

    font-size:17px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#9fb8c2;

}


.audio-player audio {

    width:100%;

    opacity:.82;

}


.audio-note {

    margin:12px 0 0;

    color:rgba(220,228,231,.48);

    font-size:15px;

    letter-spacing:1px;

}


/* =====================================
ARTICLE WRAPPER
===================================== */

.project-article {

    max-width:1200px;

    margin:0 auto 120px;

    padding:0 30px;

}


/* =====================================
MANUSCRIPT
===================================== */

.article-content {

    max-width:860px;

    margin:0 auto;

    padding:90px 95px;

    position:relative;

    background:

        linear-gradient(
            rgba(17,25,29,.91),
            rgba(11,18,22,.93)
        );

    border:1px solid rgba(159,184,194,.17);

    box-shadow:

        0 40px 100px rgba(0,0,0,.62);

}


/* =====================================
INNER MANUSCRIPT BORDER
===================================== */

.article-content::before {

    content:"";

    position:absolute;

    inset:18px;

    border:1px solid rgba(159,184,194,.07);

    pointer-events:none;

}


/* =====================================
TOP ORNAMENT
===================================== */

.article-content::after {

    content:"◦";

    position:absolute;

    top:30px;

    left:50%;

    transform:translateX(-50%);

    color:#9fb8c2;

    font-size:25px;

}


/* =====================================
PARAGRAPHS
===================================== */

.article-content p {

    margin:0 0 42px;

    color:#dce3e5;

    font-family:"Cormorant Garamond",serif;

    font-size:31px;

    line-height:1.78;

    letter-spacing:.12px;

}


/* =====================================
OPENING LETTER
===================================== */

.article-content p:first-of-type::first-letter {

    float:left;

    font-family:"Cinzel",serif;

    font-size:84px;

    line-height:.8;

    padding-right:12px;

    color:#a9c0c8;

}


/* =====================================
STANDARD HIGHLIGHT
===================================== */

.article-highlight {

    margin:55px auto;

    padding:30px 45px;

    max-width:650px;

    position:relative;

    border-left:2px solid rgba(159,184,194,.48);

    background:

        rgba(159,184,194,.045);

}


.article-highlight p {

    margin:0;

    text-align:center;

    font-size:32px;

    line-height:1.7;

    color:#b9ccd2;

    font-style:italic;

}


/* =====================================
STATEMENT BLOCKS
===================================== */

.article-statement {

    margin:55px auto;

    padding:28px 40px;

    max-width:700px;

    border-top:1px solid rgba(159,184,194,.22);

    border-bottom:1px solid rgba(159,184,194,.22);

    background:

        rgba(159,184,194,.025);

}


.article-statement p {

    margin:0;

    text-align:center;

    color:#b9ccd2;

    font-family:"Cinzel",serif;

    font-size:22px;

    line-height:1.65;

    letter-spacing:2px;

}


/* =====================================
LARGE STATEMENTS
===================================== */

.article-statement-large {

    margin:70px auto;

    padding:0 20px;

    color:#aebfc5 !important;

    font-family:"Cinzel",serif !important;

    font-size:21px !important;

    line-height:1.85 !important;

    letter-spacing:1.7px !important;

    text-align:center;

}


/* =====================================
CLOSING LINE
===================================== */

.article-closing {

    margin-top:90px !important;

    padding-top:35px;

    border-top:1px solid rgba(159,184,194,.20);

    text-align:center;

    color:#c6d5da !important;

    font-family:"Cinzel",serif !important;

    font-size:23px !important;

    letter-spacing:2px;

}


/* =====================================
SPACING AFTER HIGHLIGHTS
===================================== */

.article-highlight + p,
.article-statement + p {

    margin-top:45px;

}


/* =====================================
ARTICLE NAVIGATION
===================================== */

.article-navigation {

    max-width:760px;

    margin:70px auto 40px;

    display:flex;

    justify-content:flex-end;

}


.next-article {

    font-family:"Cinzel",serif;

    font-size:1.15rem;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#9fb8c2;

    text-decoration:none;

    transition:.3s;

}


.next-article:hover {

    color:#e1edf0;

    text-shadow:0 0 12px rgba(159,184,194,.45);

}


/* =====================================
COMMENTS
===================================== */

.comments-section {

    max-width:760px;

    margin:80px auto 0;

    padding:45px 0 0;

    border-top:1px solid rgba(159,184,194,.13);

}


.comments-section h2 {

    margin:0 0 18px;

    font-family:"Cinzel",serif;

    font-size:22px;

    font-weight:400;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#b8cbd1;

}


.comments-section > p {

    margin:0 0 35px;

    color:#9eafb5;

    font-size:21px;

    line-height:1.7;

}


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

.legal-footer {

    padding:0 30px 55px;

    text-align:center;

}


.copyright {

    color:rgba(220,228,231,.40);

    font-family:"Cormorant Garamond",serif;

    font-size:17px;

    letter-spacing:1px;

}


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

a {

    transition:.25s;

}


a:hover {

    opacity:.86;

}


/* =====================================
TEXT SELECTION
===================================== */

::selection {

    background:rgba(159,184,194,.30);

    color:#ffffff;

}


/* =====================================
SCROLLBAR
===================================== */

::-webkit-scrollbar {

    width:10px;

}


::-webkit-scrollbar-track {

    background:#0b1115;

}


::-webkit-scrollbar-thumb {

    background:#455c65;

    border-radius:20px;

}


::-webkit-scrollbar-thumb:hover {

    background:#617b85;

}


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

@media (max-width:900px) {

    .project-header {

        padding:0 22px 40px;

    }


    .project-header h1 {

        font-size:38px;

        letter-spacing:6px;

    }


    .project-header h2 {

        font-size:24px;

        line-height:1.5;

    }


    .project-meta {

        font-size:14px;

        letter-spacing:2px;

    }


    .audio-player {

        margin-top:40px;

        padding:22px;

    }


    .project-article {

        padding:0 18px;

    }


    .article-content {

        padding:55px 30px;

    }


    .article-content::before {

        inset:12px;

    }


    .article-content p {

        font-size:24px;

        line-height:1.85;

    }


    .article-highlight {

        padding:22px;

        margin:40px auto;

    }


    .article-highlight p {

        font-size:25px;

    }


    .article-statement {

        padding:24px;

    }


    .article-statement p {

        font-size:18px;

    }


    .article-statement-large {

        margin:55px auto;

        font-size:18px !important;

        line-height:1.8 !important;

        letter-spacing:1.2px !important;

    }


    .article-closing {

        font-size:19px !important;

    }


    .comments-section {

        margin-top:60px;

    }

}


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

@media (max-width:600px) {

    .project-header h1 {

        font-size:30px;

        letter-spacing:4px;

    }


    .project-header h2 {

        font-size:20px;

    }


    .project-meta {

        font-size:12px;

    }


    .article-content {

        padding:38px 22px;

    }


    .article-content p {

        font-size:21px;

        line-height:1.8;

    }


    .article-content p:first-of-type::first-letter {

        font-size:62px;

        padding-right:8px;

    }


    .article-highlight p {

        font-size:22px;

    }


    .article-statement {

        margin:42px auto;

        padding:20px 18px;

    }


    .article-statement p {

        font-size:16px;

        letter-spacing:1.2px;

    }


    .article-statement-large {

        margin:45px auto;

        padding:0 8px;

        font-size:15px !important;

        line-height:1.85 !important;

        letter-spacing:.9px !important;

    }


    .article-closing {

        margin-top:65px !important;

        font-size:17px !important;

        line-height:1.7 !important;

        letter-spacing:1px;

    }


    .article-navigation {

        padding:0 15px;

    }


    .next-article {

        font-size:1rem;

        letter-spacing:2px;

    }


    .comments-section {

        padding:35px 18px 0;

    }


    .comments-section > p {

        font-size:19px;

    }

}