/* ==========================================
   VOCABULARY WORD PAGES
   Zara K. Reed
========================================== */

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


/* ==========================================
   BASE
========================================== */

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

html{
scroll-behavior:smooth;
}

body{
background:#0d0d0d;
color:#e0e6ed;
font-family:Arial,Helvetica,sans-serif;
line-height:1.8;
}

a{
transition:.25s ease;
}


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

.word-header{
max-width:1180px;
margin:0 auto;
padding:40px 30px 90px;
border-bottom:1px solid #1a1a1a;
}

.word-header-inner{
max-width:900px;
margin:0 auto;
}

.back-link{
display:inline-block;
margin-bottom:75px;
color:#ffb703;
text-decoration:none;
font-weight:bold;
}

.back-link:hover{
opacity:.75;
}

.eyebrow{
display:block;
color:#ffb703;
font-size:.75rem;
letter-spacing:3px;
text-transform:uppercase;
font-weight:bold;
}

.word-title{
margin:18px 0 18px;
font-size:clamp(3rem,7vw,6rem);
line-height:.95;
letter-spacing:-3px;
color:#ffffff;
font-weight:700;
}

.word-meta{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:25px;
}

.word-pill{
padding:8px 14px;
border:1px solid #2a2a2a;
background:#151515;
color:#cfd6df;
font-size:.85rem;
border-radius:999px;
}

.word-pronunciation{
font-family:"Cormorant Garamond",serif;
font-size:1.4rem;
color:#d8dde5;
}


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

.word-main{
max-width:1180px;
margin:0 auto;
padding:80px 30px;
display:grid;
gap:28px;
}


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

.word-card{
position:relative;
padding:40px;
border:1px solid #242424;
background:
linear-gradient(
145deg,
#151515 0%,
#0f0f0f 60%,
#11151d 100%
);
overflow:hidden;
}

.word-card::before{
content:"";
position:absolute;
inset:0;
opacity:.08;
background:
linear-gradient(
135deg,
transparent 35%,
#ffb703 35%,
#ffb703 36%,
transparent 36%
);
pointer-events:none;
}

.word-card h2{
margin-bottom:22px;
color:#ffffff;
font-family:"Cinzel",serif;
font-size:1.8rem;
font-weight:500;
}

.word-card p{
color:#d1d7df;
line-height:1.9;
}

.word-card ul{
padding-left:22px;
color:#d1d7df;
}

.word-card li{
margin-bottom:12px;
}


/* ==========================================
   TAGS
========================================== */

.word-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.word-tag{
padding:8px 14px;
border:1px solid #2d2d2d;
background:#181818;
color:#cfd6df;
border-radius:999px;
font-size:.9rem;
}


/* ==========================================
   LITERARY EXAMPLE
========================================== */

.literary-example{
padding:28px;
margin:20px 0;
border-left:3px solid #ffb703;
background:#141414;
font-family:"Cormorant Garamond",serif;
font-size:1.45rem;
font-style:italic;
color:#ffffff;
}

.literary-source{
color:#9da8b5;
}


/* ==========================================
   RELATED WORDS
========================================== */

.related-grid{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.language-btn{
padding:10px 16px;
border:1px solid #2a2a2a;
background:#161616;
color:#ffffff;
text-decoration:none;
border-radius:999px;
font-size:.95rem;
}

.language-btn:hover{
border-color:#ffb703;
color:#ffb703;
}


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

.word-navigation{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:16px;
margin-top:15px;
}


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

.word-footer{
max-width:1180px;
margin:60px auto 0;
padding:35px 30px;
border-top:1px solid #1a1a1a;
text-align:center;
}

.word-footer p{
color:#555d68;
font-size:.85rem;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:700px){

.word-header{
padding:30px 22px 70px;
}

.back-link{
margin-bottom:55px;
}

.word-main{
padding:60px 22px;
}

.word-card{
padding:28px;
}

.literary-example{
font-size:1.2rem;
}

}

@media(max-width:500px){

.word-header{
padding:25px 20px 60px;
}

.word-title{
letter-spacing:-2px;
}

.word-main{
padding:50px 20px;
}

.word-card{
padding:24px;
}

.word-meta{
gap:8px;
}

.word-pill{
font-size:.75rem;
padding:7px 12px;
}

}

/* ==========================================
   ARCHIVE NOTE
========================================== */

.archive-note{
max-width:760px;
margin:35px auto 0;
text-align:center;
color:#8892b0;
line-height:1.9;
}