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

color:#f2ece2;

font-family:"Cormorant Garamond",serif;

overflow-x:hidden;

}



body::before{

content:"";

position:fixed;

inset:0;

background:

linear-gradient(

rgba(9,6,4,.84),

rgba(12,8,5,.92)

),

url("../deal-cover.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

opacity:.22;

z-index:-2;

}



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

.project-header{

max-width:950px;

margin:0 auto;

padding:45px 35px 60px;

text-align:center;

}



.back-link{

display:inline-block;

margin-bottom:45px;

color:#d5a43d;

font-size:18px;

font-weight:bold;

text-decoration:none;

transition:.3s;

}

.back-link:hover{

color:#ffffff;

}



.project-header h1{

margin:0 0 22px;

font-family:"Cinzel",serif;

font-size:58px;

font-weight:500;

letter-spacing:8px;

color:#e8c56b;

}



.project-header h2{

max-width:760px;

margin:0 auto;

font-size:34px;

font-weight:400;

line-height:1.45;

color:#f2ece2;

}



.project-meta{

margin-top:30px;

font-size:17px;

letter-spacing:4px;

text-transform:uppercase;

color:#b89243;

}



.project-header::after{

content:"";

display:block;

width:160px;

height:1px;

margin:40px auto 0;

background:rgba(232,197,107,.45);

}



/* =====================================
   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(32,23,17,.94),

rgba(21,15,11,.95)

);

border:1px solid rgba(232,197,107,.14);

box-shadow:

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

}



.article-content::before{

content:"";

position:absolute;

inset:18px;

border:1px solid rgba(232,197,107,.08);

pointer-events:none;

}



.article-content::after{

content:"✦";

position:absolute;

top:34px;

left:50%;

transform:translateX(-50%);

font-size:18px;

letter-spacing:10px;

color:#e8c56b;

}



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

.article-content p{

margin:0 0 40px;

font-size:31px;

line-height:1.78;

color:#ece4d7;

}



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

float:left;

font-family:"Cinzel",serif;

font-size:84px;

line-height:.82;

padding-right:12px;

color:#e8c56b;

}



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

.article-highlight{

margin:60px auto;

padding:34px 42px;

max-width:650px;

border-left:2px solid rgba(232,197,107,.45);

background:rgba(232,197,107,.05);

}



.article-highlight p{

margin:0;

text-align:center;

font-size:32px;

font-style:italic;

color:#e8c56b;

}



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

.legal-footer{

padding:0 30px 55px;

text-align:center;

}



.copyright{

font-size:17px;

color:rgba(255,255,255,.42);

}



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

a{

transition:.3s;

}



a:hover{

opacity:.85;

}



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

::selection{

background:rgba(232,197,107,.35);

color:#ffffff;

}



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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#17110d;

}

::-webkit-scrollbar-thumb{

background:#8b6b30;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#b89243;

}



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

@media (max-width:900px){

.project-header{

padding:35px 22px 40px;

}

.project-header h1{

font-size:40px;

letter-spacing:5px;

}

.project-header h2{

font-size:25px;

}

.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:24px;

}

.article-highlight p{

font-size:25px;

}

}



@media (max-width:600px){

.project-header h1{

font-size:31px;

letter-spacing:3px;

}

.project-header h2{

font-size:21px;

}

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

}

}