/* =====================================
   A DEAL *****
   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:#090807;

color:#ece5d8;

font-family:"Cormorant Garamond",serif;

overflow-x:hidden;

}



body::before{

content:"";

position:fixed;

inset:0;

background:

linear-gradient(

rgba(9,8,7,.84),

rgba(7,6,5,.93)

),

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

background-size:cover;

background-position:center;

background-repeat:no-repeat;

opacity:.72;

z-index:-2;

}



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

.back-link{

display:inline-block;

margin-top:50px;

color:#c9b17b;

text-decoration:none;

font-size:18px;

letter-spacing:.6px;

transition:.25s;

}

.back-link:hover{

color:#f3e7c4;

}



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

}



.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:#efe6d7;

}



.project-meta{

margin-top:32px;

color:#b79a62;

font-size:17px;

letter-spacing:4px;

text-transform:uppercase;

}



.project-header::after{

content:"";

display:block;

width:150px;

height:1px;

margin:38px auto 0;

background:rgba(201,177,123,.45);

}



/* =====================================
   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(24,20,18,.95),

rgba(17,14,13,.95)

);

border:1px solid rgba(201,177,123,.18);

box-shadow:

0 40px 90px rgba(0,0,0,.60);

}



/* manuscript border */

.article-content::before{

content:"";

position:absolute;

inset:18px;

border:1px solid rgba(201,177,123,.08);

pointer-events:none;

}



/* ornament */

.article-content::after{

content:"❦";

position:absolute;

top:34px;

left:50%;

transform:translateX(-50%);

color:#c9b17b;

font-size:18px;

}



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

}



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

.article-highlight{

margin:55px auto;

padding:32px 46px;

max-width:650px;

position:relative;

border-left:2px solid rgba(201,177,123,.45);

background:rgba(201,177,123,.045);

}



.article-highlight p{

margin:0;

text-align:center;

font-size:33px;

line-height:1.7;

color:#d8c092;

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(236,229,216,.42);

font-family:"Cormorant Garamond",serif;

font-size:17px;

letter-spacing:1px;

}



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

a{

transition:.25s;

}

a:hover{

opacity:.86;

}



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

::selection{

background:rgba(201,177,123,.32);

color:#ffffff;

}



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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0f0d0b;

}

::-webkit-scrollbar-thumb{

background:#6e5a35;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#92764a;

}



/* =====================================
   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;

}

}



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

.manuscript-redacted{

margin:55px 0;

padding:35px;

border:1px solid rgba(201,177,123,.16);

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

font-family:"Cormorant Garamond",serif;

letter-spacing:3px;

color:rgba(201,177,123,.28);

text-align:center;

user-select:none;

}

.manuscript-redacted p{

margin:12px 0;

font-size:22px;

line-height:1.4;

}



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

text-decoration:none;

transition:.3s;

}

.next-article:hover{

color:#f3e7c4;

text-shadow:0 0 12px rgba(201,177,123,.45);

}