/* ==========================================
   VOCABULARY LETTERS
   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
========================================== */

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

.letter-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;
}

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

.letter-subtitle{
max-width:720px;
color:#9da8b5;
line-height:1.9;
}


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

.letter-main{
max-width:1180px;
margin:0 auto;
padding:80px 30px;
}


/* ==========================================
   VOCABULARY CARD
========================================== */

.letter-card{
position:relative;
max-width:860px;
margin:0 auto;
padding:45px;
border:1px solid #242424;
background:
linear-gradient(
145deg,
#151515 0%,
#0f0f0f 60%,
#11151d 100%
);
overflow:hidden;
transition:
transform .3s ease,
border-color .3s ease,
box-shadow .3s ease;
}

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

.letter-card:hover{
border-color:rgba(255,183,3,.45);
box-shadow:0 18px 45px rgba(0,0,0,.35);
}

.section-label{
display:block;
color:#ffb703;
font-size:.72rem;
letter-spacing:2px;
text-transform:uppercase;
font-weight:bold;
margin-bottom:14px;
}

.section-title{
margin-bottom:14px;
color:#ffffff;
font-family:"Cinzel",serif;
font-size:clamp(2rem,4vw,3rem);
font-weight:500;
line-height:1.1;
}

.section-description{
margin-bottom:38px;
color:#929eac;
line-height:1.9;
}


/* ==========================================
   WORD LIST
========================================== */

.word-list{
display:flex;
flex-direction:column;
gap:10px;
}

.word-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
border:1px solid #252525;
background:#111111;
text-decoration:none;
color:#f3f4f6;
font-size:1.08rem;
font-weight:600;
transition:
transform .25s ease,
border-color .25s ease,
background .25s ease;
}

.word-item:hover{
transform:translateX(6px);
border-color:rgba(255,183,3,.55);
background:#161616;
color:#ffffff;
}

.word-arrow{
color:#ffb703;
font-weight:bold;
}


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

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

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


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

@media(max-width:700px){

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

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

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

.letter-card{
padding:32px;
}

.word-item{
padding:16px;
}

}

@media(max-width:500px){

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

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

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

.letter-card{
padding:26px 22px;
}

.word-item{
font-size:1rem;
padding:15px;
}

}