/* =====================================
   I MADE ****
   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:#0b0d12;

    color:#e9e1d3;

    font-family:"Cormorant Garamond",serif;

    overflow-x:hidden;

}



body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    linear-gradient(

        rgba(8,10,14,.80),

        rgba(8,10,14,.90)

    ),

    url("../project-three-background.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    opacity:.65;

    z-index:-2;

}



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

.back-link{

    display:inline-block;

    margin-top:50px;

    color:#d8c7ff;

    text-decoration:none;

    font-size:18px;

    letter-spacing:.6px;

    transition:.25s;

}

.back-link:hover{

    color:#ffffff;

}



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

.project-header{

    max-width:950px;

    margin:0 auto;

    padding:0 35px 50px;

    text-align:center;

}



.project-header h1{

    margin:35px 0 20px;

    font-family:"Cinzel",serif;

    font-size:54px;

    font-weight:500;

    letter-spacing:9px;

    color:#d8c7ff;

}



.project-header h2{

    max-width:760px;

    margin:0 auto;

    font-family:"Cormorant Garamond",serif;

    font-size:33px;

    font-weight:400;

    line-height:1.45;

    color:#efe7d8;

}



.project-meta{

    margin-top:32px;

    color:#bca8ef;

    font-size:17px;

    letter-spacing:4px;

    text-transform:uppercase;

}



.project-header::after{

    content:"";

    display:block;

    width:140px;

    height:1px;

    margin:38px auto 0;

    background:rgba(216,199,255,.55);

}



/* =====================================
   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(28,27,31,.93),

        rgba(20,20,24,.93)

    );

    border:1px solid rgba(216,199,255,.18);

    box-shadow:

        0 35px 90px rgba(0,0,0,.55);

}



/* inner page */

.article-content::before{

    content:"";

    position:absolute;

    inset:18px;

    border:1px solid rgba(216,199,255,.08);

    pointer-events:none;

}



/* top ornament */

.article-content::after{

    content:"✦";

    position:absolute;

    top:34px;

    left:50%;

    transform:translateX(-50%);

    color:#d8c7ff;

    font-size:18px;

    letter-spacing:10px;

}



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

.article-content p{

    margin:0 0 42px;

    color:#ece3d3;

    font-family:"Cormorant Garamond",serif;

    font-size:31px;

    line-height:1.78;

    letter-spacing:.15px;

}



/* 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:#d8c7ff;

}



/* =====================================
   QUOTES
===================================== */

.article-highlight{

    margin:55px auto;

    padding:30px 45px;

    max-width:650px;

    position:relative;

    border-left:2px solid rgba(216,199,255,.45);

    background:

    rgba(216,199,255,.05);

}



.article-highlight p{

    margin:0;

    text-align:center;

    font-size:33px;

    line-height:1.7;

    color:#d8c7ff;

    font-style:italic;

}



/* spacing after quotes */

.article-highlight + p{

    margin-top:45px;

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

.legal-footer{

    padding:0 30px 55px;

    text-align:center;

}

.copyright{

    color:rgba(233,225,211,.45);

    font-family:"Cormorant Garamond",serif;

    font-size:17px;

    letter-spacing:1px;

}



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

a{

    transition:.25s;

}

a:hover{

    opacity:.82;

}



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

::selection{

    background:rgba(216,199,255,.35);

    color:#ffffff;

}



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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#11141b;

}

::-webkit-scrollbar-thumb{

    background:#5d5376;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#80729d;

}



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

@media (max-width:900px){

.project-header{

padding:0 22px 40px;

}

.project-header h1{

font-size:38px;

letter-spacing:5px;

}

.project-header h2{

font-size:24px;

line-height:1.5;

}

.project-meta{

font-size:14px;

letter-spacing:2px;

}

.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;

}

}



@media (max-width:600px){

.project-header h1{

font-size:30px;

letter-spacing:3px;

}

.project-header h2{

font-size:20px;

}

.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;

}

}

.manuscript-redacted{

margin:55px 0;

padding:35px;

border:1px solid rgba(217,200,255,.15);

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

font-family:"Cormorant Garamond",serif;

letter-spacing:3px;

color:rgba(217,200,255,.28);

text-align:center;

user-select:none;

}

.manuscript-redacted p{

margin:12px 0;

font-size:22px;

line-height:1.4;

}



.article-navigation{

display:flex;

justify-content:center;

align-items:center;

gap:30px;

margin:90px 0 25px;

font-family:"Cinzel",serif;

font-size:22px;

letter-spacing:2px;

}

.article-navigation a{

color:#d9c8ff;

text-decoration:none;

transition:.3s;

}

.article-navigation a:hover{

color:#ffffff;

}

.article-navigation span{

color:rgba(217,200,255,.45);

}
/* ============================
   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:#d9c8ff;

    text-decoration:none;

    transition:.3s;

}

.next-article:hover{

    color:#ffffff;

    text-shadow:0 0 12px rgba(217,200,255,.55);

}