/* =====================================
   THREADS & REFLECTIONS
   20th Century Literary Newspaper
   Zara K. Reed
===================================== */

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

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

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

html{
scroll-behavior:smooth;
}

body{

background:#12100d;
color:#efe7d6;

font-family:"Cormorant Garamond",serif;

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

}

/* =====================================
   AGED PAPER BACKGROUND
===================================== */

body::before{

content:"";

position:fixed;
inset:0;

background:
radial-gradient(circle at 50% 12%,rgba(255,248,230,.03),transparent 42%),
linear-gradient(180deg,#12100d,#0d0b09);

z-index:-2;

}

body::after{

content:"";

position:fixed;
inset:0;

background:
repeating-linear-gradient(
0deg,
rgba(255,255,255,.006) 0px,
rgba(255,255,255,.006) 1px,
transparent 1px,
transparent 4px
);

opacity:.35;
pointer-events:none;

z-index:-1;

}

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

a{
text-decoration:none;
transition:.3s ease;
}

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

.article{

max-width:760px;
margin:0 auto;
padding:55px 30px 90px;

}

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

.back-link{

display:inline-block;
margin-bottom:52px;

font-family:"Libre Baskerville",serif;
font-size:13px;
letter-spacing:1.4px;

text-transform:uppercase;

color:#d7b980;

}

.back-link:hover{

color:#fff0c8;

}

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

.article-header{

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

}

.article-label{

font-family:"Libre Baskerville",serif;
font-size:11px;
letter-spacing:4px;

text-transform:uppercase;

color:#9f8a67;

margin-bottom:18px;

}

.article-title{

font-family:"Libre Baskerville",serif;

font-size:42px;
font-weight:700;
line-height:1.18;
letter-spacing:.5px;

text-transform:uppercase;

color:#faf6ec;

margin-bottom:16px;

}

.article-subtitle{

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

color:#d6bc86;

margin-bottom:18px;

}

.article-meta{

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

color:#9b9285;

}

.hero-divider{

width:120px;
height:1px;

margin:34px auto 0;

background:#7c6a4d;

position:relative;

}

.hero-divider::before{

content:"✦";

position:absolute;

left:50%;
top:50%;

transform:translate(-50%,-55%);

background:#12100d;

padding:0 10px;

font-size:12px;

color:#caa869;

}

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

.audio-player{

max-width:560px;
margin:46px auto 0;

padding:22px;

background:rgba(255,248,230,.03);

border:1px solid rgba(202,168,105,.18);

box-shadow:
0 8px 28px rgba(0,0,0,.35);

}

.audio-player h2{

font-family:"Libre Baskerville",serif;
font-size:15px;
letter-spacing:1.4px;

text-transform:uppercase;

text-align:center;

color:#f3e3b9;

margin-bottom:16px;

}

.audio-player audio{

width:100%;

}

.audio-note{

margin-top:10px;

text-align:center;

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

color:#9f9587;

}

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

.article-content{

font-size:22px;
color:#ece5d7;

}

.article-content p{

margin-bottom:34px;

}

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

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

float:left;

font-family:"Libre Baskerville",serif;

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

padding-right:12px;

color:#f4e7c2;

}

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

.article-content em{

color:#efd59b;

}

.article-content strong{

color:#fff8ea;

}

/* =====================================
   ORIGINAL THREAD PANEL
===================================== */

.story-quote{

margin:50px 0;
padding:28px;

background:
linear-gradient(
180deg,
rgba(35,29,23,.95),
rgba(22,18,14,.97));

border-top:3px solid #c8a86b;
border-bottom:3px solid #c8a86b;

box-shadow:
0 10px 25px rgba(0,0,0,.25);

}

.story-quote p{

margin-bottom:18px;

font-style:italic;
color:#f5ead3;

}

.story-quote p:first-child{

font-family:"Libre Baskerville",serif;
font-style:normal;
text-transform:uppercase;
letter-spacing:1px;
font-size:15px;

color:#d9bf8a;

}

.story-quote p:last-child{

margin-bottom:0;

}

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

.pull-quote{

margin:64px auto;
max-width:640px;

text-align:center;

position:relative;

padding:0 20px;

}

.pull-quote::before{

content:"❦";

display:block;

font-size:24px;

margin-bottom:16px;

color:#caa869;

}

.pull-quote::after{

content:"❦";

display:block;

font-size:24px;

margin-top:16px;

color:#caa869;

}

.pull-quote p{

margin:0;

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

color:#fff6df;

}

.quote-credit{

margin-top:18px!important;

font-size:16px!important;
font-style:normal!important;
letter-spacing:1px;

color:#9f8d70!important;

}

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

.comments-section{

margin-top:76px;
padding-top:34px;

border-top:1px solid rgba(202,168,105,.18);

}

.comments-section h2{

font-family:"Libre Baskerville",serif;
font-size:24px;
letter-spacing:2px;

text-transform:uppercase;

color:#f4e3b8;

margin-bottom:26px;

}

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

.legal-footer{

margin-top:72px;
padding-top:26px;

border-top:1px solid rgba(202,168,105,.14);

text-align:center;

}

.original-link{

margin-bottom:20px;

}

.original-link a{

font-family:"Libre Baskerville",serif;
font-size:13px;
letter-spacing:1.4px;

text-transform:uppercase;

color:#d6b77d;

}

.original-link a:hover{

color:#fff0c8;

}

.copyright{

font-size:15px;

color:rgba(238,231,214,.45);

}

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

::selection{

background:rgba(202,168,105,.30);

color:#fff;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#15120f;

}

::-webkit-scrollbar-thumb{

background:#6f5a36;
border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#a8864e;

}

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

@media(max-width:900px){

.article{

padding:40px 24px 74px;

}

.article-title{

font-size:36px;

}

.article-subtitle{

font-size:22px;

}

.article-content{

font-size:20px;

}

.pull-quote p{

font-size:27px;

}

}

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

@media(max-width:600px){

.article{

padding:30px 18px 60px;

}

.back-link{

font-size:12px;

}

.article-title{

font-size:28px;

}

.article-subtitle{

font-size:19px;

}

.article-meta{

font-size:15px;

}

.audio-player{

padding:18px;

}

.article-content{

font-size:19px;

}

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

font-size:60px;

}

.pull-quote p{

font-size:24px;

}

.story-quote{

padding:22px;

}

}