/* =====================================
   MOOD / COLOUR
   Literary Editorial Style
   Zara K. Reed
===================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@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:#edf2f7;

color:#171d26;

font-family:"Cormorant Garamond",serif;

line-height:1.9;

overflow-x:hidden;

}


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

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(
circle at 50% 0%,
rgba(73,110,151,.12),
transparent 45%
),

linear-gradient(
180deg,
#f5f8fb 0%,
#edf2f7 50%,
#e7edf3 100%
);

z-index:-2;

}

body::after{

content:"";

position:fixed;

inset:0;

background:
repeating-linear-gradient(
0deg,
rgba(20,40,60,.018) 0px,
rgba(20,40,60,.018) 1px,
transparent 1px,
transparent 5px
);

pointer-events:none;

z-index:-1;

}


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

.article{

max-width:780px;

margin:0 auto;

padding:55px 30px 100px;

}


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

.back-link{

display:inline-block;

margin-bottom:60px;

font-family:"Libre Baskerville",serif;

font-size:12px;

letter-spacing:1.5px;

text-transform:uppercase;

color:#345b82;

transition:.3s ease;

}

.back-link:hover{

color:#102f4e;

}


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

.article-header{

text-align:center;

margin-bottom:72px;

}

.article-label{

font-family:"Libre Baskerville",serif;

font-size:11px;

letter-spacing:4px;

text-transform:uppercase;

color:#54779b;

margin-bottom:20px;

}

.article-title{

font-family:"Libre Baskerville",serif;

font-size:46px;

font-weight:700;

line-height:1.2;

letter-spacing:.3px;

color:#102a43;

margin-bottom:20px;

}

.article-subtitle{

font-size:25px;

font-style:italic;

line-height:1.6;

color:#3d5870;

max-width:650px;

margin:0 auto 18px;

}

.article-meta{

font-size:16px;

color:#718294;

letter-spacing:.2px;

}

.hero-divider{

width:130px;

height:1px;

margin:36px auto 0;

background:#7190ad;

position:relative;

}

.hero-divider::before{

content:"✦";

position:absolute;

left:50%;

top:50%;

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

background:#edf2f7;

padding:0 12px;

font-size:13px;

color:#3f6f9f;

}


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

.story-quote{

margin:52px 0 70px;

padding:34px 38px;

background:

linear-gradient(
145deg,
#183b5b,
#102a43
);

border-left:5px solid #6d95bd;

box-shadow:

0 14px 32px rgba(16,42,67,.18);

}

.story-quote p{

font-size:21px;

line-height:1.8;

font-style:italic;

color:#edf5fc;

margin-bottom:20px;

}

.story-quote p:last-child{

margin-bottom:0;

}

.story-quote .story-label{

font-family:"Libre Baskerville",serif;

font-size:13px;

font-style:normal;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#b7d0e8;

margin-bottom:24px;

}


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

.article-content{

font-size:22px;

line-height:1.95;

color:#171d26;

}

.article-content p{

margin-bottom:35px;

}


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

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

float:left;

font-family:"Libre Baskerville",serif;

font-size:82px;

line-height:.78;

padding-right:13px;

padding-top:8px;

color:#234f76;

}


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

.article-content em{

color:#244f76;

}

.article-content strong{

font-weight:700;

color:#102a43;

}


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

.pull-quote{

margin:65px auto;

max-width:660px;

padding:10px 34px;

text-align:center;

position:relative;

}

.pull-quote::before{

content:"❦";

display:block;

font-size:25px;

color:#527ba2;

margin-bottom:17px;

}

.pull-quote::after{

content:"❦";

display:block;

font-size:25px;

color:#527ba2;

margin-top:17px;

}

.pull-quote p{

margin:0;

font-size:31px;

line-height:1.55;

font-style:italic;

font-weight:600;

color:#183b5b;

}


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

.comments-section{

margin-top:80px;

padding-top:35px;

border-top:1px solid rgba(52,91,130,.25);

}

.comments-section h2{

font-family:"Libre Baskerville",serif;

font-size:23px;

letter-spacing:2px;

text-transform:uppercase;

color:#183b5b;

margin-bottom:18px;

}

.discussion-prompt{

font-size:19px;

font-style:italic;

color:#586d81;

margin-bottom:30px;

}


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

.legal-footer{

margin-top:75px;

padding-top:28px;

border-top:1px solid rgba(52,91,130,.18);

text-align:center;

}

.original-link{

margin-bottom:20px;

}

.original-link a{

font-family:"Libre Baskerville",serif;

font-size:12px;

letter-spacing:1.5px;

text-transform:uppercase;

color:#345b82;

}

.original-link a:hover{

color:#102f4e;

}

.copyright{

font-size:15px;

color:#7d8995;

}


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

::selection{

background:#9bb9d4;

color:#102a43;

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#dfe7ee;

}

::-webkit-scrollbar-thumb{

background:#7190ad;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#456b8f;

}


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

@media(max-width:900px){

.article{

padding:42px 25px 80px;

}

.article-title{

font-size:40px;

}

.article-subtitle{

font-size:23px;

}

.article-content{

font-size:21px;

}

.pull-quote p{

font-size:28px;

}

}


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

@media(max-width:600px){

.article{

padding:30px 19px 65px;

}

.back-link{

font-size:11px;

margin-bottom:45px;

}

.article-title{

font-size:30px;

}

.article-subtitle{

font-size:20px;

}

.article-meta{

font-size:14px;

}

.story-quote{

padding:27px 23px;

margin-bottom:55px;

}

.story-quote p{

font-size:19px;

}

.article-content{

font-size:19px;

line-height:1.85;

}

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

font-size:64px;

}

.pull-quote{

margin:52px auto;

padding:5px 18px;

}

.pull-quote p{

font-size:24px;

}

.comments-section h2{

font-size:20px;

}

}