/* =====================================
   ANGEL ****
   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:#0c0b0d;
color:#f5eee8;

font-family:"Cormorant Garamond",serif;

overflow-x:hidden;

}


body::before{

content:"";

position:fixed;
inset:0;

background:
linear-gradient(
rgba(12,11,13,.82),
rgba(10,9,11,.92)
),
url("angel-cover.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:#e7c7a3;

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:8px;

color:#f0d8c5;

}


.project-header h2{

max-width:760px;

margin:0 auto;

font-size:33px;

font-weight:400;

line-height:1.45;

color:#f4ebe3;

}


.project-meta{

margin-top:32px;

color:#d9a7b8;

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(231,199,163,.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(28,24,26,.94),
rgba(19,17,19,.95)
);

border:1px solid rgba(231,199,163,.18);

box-shadow:
0 40px 90px rgba(0,0,0,.60);

}


.article-content::before{

content:"";

position:absolute;

inset:18px;

border:1px solid rgba(231,199,163,.08);

pointer-events:none;

}


.article-content::after{

content:"✧";

position:absolute;

top:34px;

left:50%;

transform:translateX(-50%);

color:#e7c7a3;

font-size:20px;

}


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

.article-content p{

margin:0 0 42px;

color:#efe6dd;

font-size:31px;

line-height:1.78;

letter-spacing:.15px;

}


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

float:left;

font-family:"Cinzel",serif;

font-size:84px;

line-height:.8;

padding-right:12px;

color:#f0d8c5;

}


/* =====================================
   HIGHLIGHTS
===================================== */

.article-highlight{

margin:55px auto;

padding:30px 44px;

max-width:650px;

position:relative;

border-left:2px solid rgba(217,167,184,.45);

background:
rgba(217,167,184,.06);

}


.article-highlight p{

margin:0;

text-align:center;

font-size:33px;

line-height:1.7;

color:#f0d8c5;

font-style:italic;

}


.article-highlight+p{

margin-top:45px;

}


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

text-decoration:none;

transition:.3s;

}


.next-article:hover{

color:#ffffff;

text-shadow:0 0 12px rgba(231,199,163,.45);

}


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

.audio-player{

max-width:680px;

margin:60px auto 0;

padding:30px;

text-align:center;

border-top:1px solid rgba(231,199,163,.25);

border-bottom:1px solid rgba(231,199,163,.10);

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

}


.audio-player h2{

margin:0 0 20px;

font-family:"Cinzel",serif;

font-size:.9rem;

letter-spacing:3px;

text-transform:uppercase;

color:#e7c7a3;

}


.audio-player audio{

width:100%;

max-width:560px;

}


.audio-note{

margin-top:12px;

font-style:italic;

color:#9f9490;

}


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

.comments-section{

max-width:780px;

margin:90px auto 0;

padding-top:45px;

border-top:1px solid rgba(231,199,163,.12);

}


.comments-section h2{

font-family:"Cinzel",serif;

font-size:2.2rem;

letter-spacing:3px;

color:#ffffff;

}


.comments-section p{

font-size:22px;

line-height:1.8;

color:#b8ada8;

}


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

.legal-footer{

padding:0 30px 55px;

text-align:center;

}


.copyright{

color:rgba(245,238,232,.42);

font-size:17px;

letter-spacing:1px;

}


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

}

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

}

.article-highlight{

padding:22px;

}

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

}

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

font-size:62px;

padding-right:8px;

}

.article-highlight p{

font-size:22px;

}

}

/* =====================================
   CHAPTERS
===================================== */

.article-chapter{

margin:80px 0 45px;

font-family:"Cinzel",serif;

font-size:2.5rem;

letter-spacing:4px;

text-align:center;

color:#f0d8c5;

}


/* =====================================
   WRITING RECORDS
===================================== */

.article-record-title{

margin:60px 0 10px;

font-family:"Cinzel",serif;

font-size:1.3rem;

letter-spacing:3px;

text-transform:uppercase;

text-align:center;

color:#e7c7a3;

}


.table-caption{

margin:0 0 22px;

text-align:center;

color:#b89ea8;

font-style:italic;

font-size:1.1rem;

}


.writing-log{

margin:0 auto 55px;

overflow-x:auto;

border:1px solid rgba(231,199,163,.18);

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

}


.writing-log table{

width:100%;

border-collapse:collapse;

min-width:760px;

}


.writing-log th{

padding:15px;

background:rgba(231,199,163,.08);

color:#f0d8c5;

font-family:"Cinzel",serif;

font-size:.82rem;

letter-spacing:1px;

text-transform:uppercase;

border-bottom:1px solid rgba(231,199,163,.18);

}


.writing-log td{

padding:16px;

vertical-align:top;

color:#efe6dd;

line-height:1.7;

border-bottom:1px solid rgba(231,199,163,.08);

}


.writing-log tr:last-child td{

border-bottom:none;

}


.writing-log em{

color:#d9a7b8;

}