/* =====================================
   ZARA K. REED
   BLOG INDEX
===================================== */

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


/* =====================================
   GENERAL
===================================== */

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

html{
scroll-behavior:smooth;
}

body{

background:#0d0c0b;

color:#ece5d8;

font-family:"Cormorant Garamond",serif;

overflow-x:hidden;

position:relative;

line-height:1.8;

}


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

body::before{

content:"";

position:fixed;

inset:0;

background:

linear-gradient(
rgba(13,12,11,.84),
rgba(13,12,11,.94)
),

url("../blog-background.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

opacity:.62;

z-index:-2;

}


/* soft glow */

body::after{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(
circle at 50% 18%,
rgba(255,183,3,.05),
transparent 42%
);

pointer-events:none;

z-index:-1;

}


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

a{

text-decoration:none;

transition:.3s ease;

}


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

.blog-header{

max-width:980px;

margin:0 auto;

padding:45px 35px 70px;

text-align:center;

}


.back-link{

display:inline-block;

margin-bottom:55px;

color:#d7c08b;

font-family:"Cinzel",serif;

font-size:17px;

letter-spacing:.8px;

align-self:flex-start;

}

.back-link:hover{

color:#ffffff;

text-shadow:
0 0 12px rgba(255,183,3,.45);

}


.hero-label{

font-family:"Cinzel",serif;

font-size:12px;

letter-spacing:4px;

text-transform:uppercase;

color:#b98d63;

margin-bottom:22px;

}


.blog-header h1{

font-family:"Cinzel",serif;

font-size:62px;

font-weight:500;

letter-spacing:10px;

color:#f3e7d3;

margin-bottom:28px;

}


.hero-subtitle{

max-width:720px;

margin:0 auto;

font-size:28px;

line-height:1.65;

color:#d9cec2;

}


.blog-header::after{

content:"";

display:block;

width:150px;

height:1px;

margin:42px auto 0;

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

}


/* =====================================
   MAIN
===================================== */

.blog-container{

max-width:1100px;

margin:0 auto 110px;

padding:0 30px;

}


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

.blog-grid{

display:grid;

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

gap:35px;

}


/* =====================================
   CARDS
===================================== */

.blog-card{

position:relative;

padding:42px 36px 40px;

background:

linear-gradient(
rgba(23,20,18,.95),
rgba(16,15,14,.97)
);

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

box-shadow:

0 28px 65px rgba(0,0,0,.42);

transition:
transform .35s,
border-color .35s,
box-shadow .35s;

}


.blog-card::before{

content:"";

position:absolute;

inset:12px;

border:1px solid rgba(255,255,255,.05);

pointer-events:none;

}


.blog-card::after{

content:"✦";

position:absolute;

top:18px;

left:50%;

transform:translateX(-50%);

font-size:12px;

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

}


.blog-card:hover{

transform:translateY(-7px);

box-shadow:

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

}


/* =====================================
   CARD COLORS
===================================== */

.writing-card:hover{

border-color:#ffb703;

box-shadow:
0 35px 80px rgba(0,0,0,.55),
0 0 25px rgba(255,183,3,.08);

}

.threads-card:hover{

border-color:#d7b8c5;

box-shadow:
0 35px 80px rgba(0,0,0,.55),
0 0 25px rgba(215,184,197,.08);

}

.language-card:hover{

border-color:#8fb8d8;

box-shadow:
0 35px 80px rgba(0,0,0,.55),
0 0 25px rgba(143,184,216,.08);

}


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

.card-label{

display:block;

margin-bottom:18px;

font-family:"Cinzel",serif;

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

color:#b98d63;

}


.threads-card .card-label{

color:#d7b8c5;

}

.language-card .card-label{

color:#8fb8d8;

}


.blog-card h2{

font-family:"Cinzel",serif;

font-size:30px;

font-weight:500;

letter-spacing:2px;

margin-bottom:20px;

color:#f3e7d3;

}


.blog-card p{

font-size:21px;

line-height:1.85;

color:#c9c1b6;

margin-bottom:34px;

}


.card-link{

font-family:"Cinzel",serif;

font-size:15px;

letter-spacing:2px;

text-transform:uppercase;

color:#ffb703;

}


.threads-card .card-link{

color:#d7b8c5;

}

.language-card .card-link{

color:#8fb8d8;

}


.card-link:hover{

color:#ffffff;

text-shadow:
0 0 12px currentColor;

}


/* =====================================
   CLOSING
===================================== */

.closing-note{

max-width:700px;

margin:90px auto 0;

text-align:center;

}


.closing-line{

width:120px;

height:1px;

margin:0 auto 30px;

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

}


.closing-note p{

font-size:26px;

font-style:italic;

color:#d8cdbf;

margin-bottom:30px;

}


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

.blog-footer{

padding:0 30px 55px;

text-align:center;

}


.blog-footer p{

color:rgba(236,229,216,.42);

font-size:17px;

letter-spacing:1px;

}


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

::selection{

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

color:#ffffff;

}


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

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#131211;
}

::-webkit-scrollbar-thumb{
background:#7a6134;
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:#b68d43;
}


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

@media(max-width:900px){

.blog-header{

padding:35px 22px 55px;

}

.blog-header h1{

font-size:46px;

letter-spacing:7px;

}

.hero-subtitle{

font-size:23px;

}

.blog-container{

padding:0 22px;

}

}


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

@media(max-width:600px){

.blog-header{

padding:28px 18px 45px;

}

.back-link{

font-size:15px;

margin-bottom:40px;

}

.hero-label{

font-size:10px;

letter-spacing:3px;

}

.blog-header h1{

font-size:34px;

letter-spacing:4px;

}

.hero-subtitle{

font-size:20px;

line-height:1.7;

}

.blog-container{

padding:0 18px;

}

.blog-card{

padding:34px 24px;

}

.blog-card h2{

font-size:25px;

}

.blog-card p{

font-size:19px;

}

.closing-note p{

font-size:22px;

}

}

/* =====================================
   CATEGORY PAGES
===================================== */

.category-page.gold-theme::before{

background:
linear-gradient(
rgba(13,12,11,.84),
rgba(13,12,11,.94)
),
url("../blog-background.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:.62;

}

.category-page.rose-theme::before{

background:
linear-gradient(
rgba(18,15,18,.84),
rgba(18,15,18,.94)
),
url("../blog-background.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:.62;

}


/* =====================================
   CATEGORY LIST
===================================== */

.category-list{

display:grid;
gap:35px;

}


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

.article-links{

display:flex;
gap:22px;
flex-wrap:wrap;
margin-top:28px;

}

.article-links a{

font-family:"Cinzel",serif;
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
color:#ffb703;
transition:.3s;

}

.gold-theme .article-links a{

color:#ffb703;

}

.rose-theme .article-links a{

color:#d7b8c5;

}

.article-links a:hover{

color:#ffffff;
text-shadow:0 0 10px currentColor;

}


/* =====================================
   ROSE THEME OVERRIDES
===================================== */

.rose-theme .back-link{

color:#d7b8c5;

}

.rose-theme .hero-label{

color:#d7b8c5;

}

.rose-theme .blog-header::after{

background:rgba(215,184,197,.35);

}

.rose-theme .card-label{

color:#d7b8c5;

}

.rose-theme .blog-card{

border-color:rgba(215,184,197,.14);

}

.rose-theme .blog-card::after{

color:rgba(215,184,197,.45);

}

.rose-theme .blog-card:hover{

border-color:#d7b8c5;

box-shadow:
0 35px 80px rgba(0,0,0,.55),
0 0 25px rgba(215,184,197,.08);

}

.rose-theme .closing-line{

background:rgba(215,184,197,.25);

}