/* =====================================
   WRITING PROCESS
   BLACKBIRD WHISPER ESSAY SERIES
   Zara K. Reed
===================================== */

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

/* =====================================
   RESET
===================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:#090909;
color:#ece5d8;

font-family:"Cormorant Garamond",serif;

line-height:1.9;
overflow-x:hidden;
position:relative;

}

/* =====================================
   BACKGROUND
===================================== */

body::before{

content:"";

position:fixed;
inset:0;

background:

linear-gradient(
rgba(8,8,8,.84),
rgba(8,8,8,.94)
),

url("../projects/project-one/project-one-background.jpg");

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

opacity:.72;

z-index:-2;

}

body::after{

content:"";

position:fixed;
inset:0;

background:

radial-gradient(
circle at 50% 12%,
rgba(255,183,3,.06),
transparent 45%
);

pointer-events:none;

z-index:-1;

}

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

a{

text-decoration:none;
transition:.3s ease;

}

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

.article{

max-width:820px;
margin:0 auto;
padding:45px 28px 80px;

}

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

.back-link{

display:inline-block;

margin-bottom:55px;

font-family:"Cinzel",serif;
font-size:15px;
letter-spacing:2px;

color:#ffb703;

text-transform:uppercase;

}

.back-link:hover{

color:#fff2c7;

text-shadow:

0 0 12px rgba(255,183,3,.35);

}

/* =====================================
   HERO
===================================== */

.article-header{

text-align:center;
margin-bottom:70px;

}

.article-label{

font-family:"Cinzel",serif;
font-size:12px;
letter-spacing:4px;

color:#a78c47;

margin-bottom:22px;

}

.article-title{

font-family:"Cinzel",serif;

font-size:50px;
font-weight:500;
line-height:1.25;
letter-spacing:4px;

color:#f6e6bc;

text-transform:uppercase;

margin-bottom:20px;

}

.article-subtitle{

font-size:27px;
font-style:italic;

color:#ffb703;

margin-bottom:18px;

}

.article-meta{

font-size:17px;
letter-spacing:.4px;

color:#9f9583;

}

.hero-divider{

width:140px;
height:1px;

margin:40px auto 0;

background:rgba(255,183,3,.45);

}

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

.audio-player{

max-width:620px;
margin:45px auto 0;

padding:28px;

background:

linear-gradient(
rgba(24,22,17,.95),
rgba(15,14,12,.96)
);

border:1px solid rgba(255,183,3,.18);

box-shadow:

0 18px 45px rgba(0,0,0,.45);

}

.audio-player h2{

font-family:"Cinzel",serif;
font-size:17px;
font-weight:500;
letter-spacing:2px;

color:#f5deb3;

text-align:center;

margin-bottom:18px;

}

.audio-player audio{

width:100%;

}

.audio-note{

margin-top:12px;

text-align:center;

font-size:16px;
font-style:italic;

color:#9d907d;

}

/* =====================================
   CONTENT
===================================== */

.article-content{

font-size:23px;
color:#e8dfd0;

}

.article-content p{

margin-bottom:32px;

}

/* =====================================
   DROP CAP
===================================== */

.article-content p:first-child::first-letter{

float:left;

font-family:"Cinzel",serif;

font-size:72px;
line-height:.82;

padding-right:12px;

color:#ffb703;

}

/* =====================================
   EMPHASIS
===================================== */

.article-content em{

color:#f4c55c;

}

.article-content strong{

color:#fff3d4;

}

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

.pull-quote{

margin:55px 0;
padding:30px 35px;

border-left:2px solid rgba(255,183,3,.55);

background:

linear-gradient(
90deg,
rgba(255,183,3,.08),
rgba(255,183,3,.02)
);

}

.pull-quote p{

margin:0;

font-size:29px;
font-style:italic;
line-height:1.6;

color:#fff5dc;

}

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

.story-quote{

margin:45px 0;
padding:28px;

background:

linear-gradient(
rgba(23,20,16,.96),
rgba(15,13,10,.97)
);

border:1px solid rgba(255,183,3,.14);

box-shadow:

0 16px 35px rgba(0,0,0,.35);

}

.story-quote p{

margin-bottom:18px;
font-style:italic;
color:#f5ead3;

}

.story-quote p:last-child{

margin-bottom:0;

}

/* =====================================
   IMAGE GRID
===================================== */

.image-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:24px;

margin:55px 0;

}

.image-grid figure{

margin:0;

}

.image-grid img{

width:100%;
display:block;

border-radius:6px;

}

.image-grid figcaption{

margin-top:10px;

text-align:center;

font-size:16px;
font-style:italic;

color:#9b8f80;

}

/* =====================================
   SECTION DIVIDER
===================================== */

.section-divider{

width:110px;
height:1px;

margin:65px auto;

background:rgba(255,183,3,.35);

}

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

.article-navigation{

margin:80px 0 60px;

padding-top:35px;

border-top:1px solid rgba(255,183,3,.14);

display:flex;

justify-content:space-between;
align-items:center;
gap:20px;

}

.article-navigation a{

font-family:"Cinzel",serif;

font-size:15px;
letter-spacing:2px;

color:#ffb703;

text-transform:uppercase;

}

.article-navigation a:hover{

color:#fff4cf;

}

.nav-disabled{

font-family:"Cinzel",serif;

font-size:15px;
letter-spacing:2px;

color:#6f6658;

text-transform:uppercase;

}

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

.comments-section{

margin-top:65px;
padding-top:35px;

border-top:1px solid rgba(255,183,3,.14);

}

.comments-section h2{

font-family:"Cinzel",serif;
font-size:26px;
font-weight:500;
letter-spacing:3px;

color:#f5deb3;

margin-bottom:28px;

}

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

.legal-footer{

margin-top:70px;
padding-top:25px;

border-top:1px solid rgba(255,183,3,.12);

text-align:center;

}

.copyright{

font-size:16px;
letter-spacing:.8px;

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

}

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

::selection{

background:rgba(255,183,3,.32);

color:#ffffff;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111111;

}

::-webkit-scrollbar-thumb{

background:#7b5b16;
border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#b7831f;

}

/* =====================================
   TABLET
===================================== */

@media(max-width:900px){

.article{

padding:35px 22px 70px;

}

.article-title{

font-size:40px;
letter-spacing:3px;

}

.article-subtitle{

font-size:24px;

}

.article-content{

font-size:21px;

}

}

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

@media(max-width:600px){

.article{

padding:28px 18px 60px;

}

.back-link{

font-size:13px;
letter-spacing:1px;

}

.article-title{

font-size:29px;
letter-spacing:2px;

}

.article-subtitle{

font-size:20px;

}

.article-meta{

font-size:15px;

}

.audio-player{

padding:20px;

}

.article-content{

font-size:19px;

}

.article-content p:first-child::first-letter{

font-size:56px;

}

.pull-quote{

padding:24px;

}

.pull-quote p{

font-size:24px;

}

.article-navigation{

flex-direction:column;
align-items:flex-start;

}

}