/* Ember & Veil - style.css */
:root{
--black:#0E0B0F;
--velvet:#171318;
--ivory:#F5F2EA;
--brass:#B08D57;
--purple:#3F2347;
--max:1200px;
--radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
background:var(--black);
color:var(--ivory);
font-family:Inter,Arial,sans-serif;
line-height:1.7;
}
h1,h2,h3,.logo{
font-family:"Cormorant Garamond",serif;
font-weight:600;
}
a{text-decoration:none;color:inherit}
.navbar{
position:fixed;top:0;left:0;right:0;
display:flex;justify-content:space-between;align-items:center;
padding:1rem 5%;
background:rgba(14,11,15,.75);
backdrop-filter:blur(12px);
z-index:1000;
border-bottom:1px solid rgba(176,141,87,.2);
}
.logo{font-size:2rem;letter-spacing:.08em}
.logo span{color:var(--brass)}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a:hover{color:var(--brass)}
.btn{
display:inline-block;
padding:.9rem 1.5rem;
border-radius:999px;
background:var(--brass);
color:#111;
font-weight:600;
transition:.3s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 18px rgba(176,141,87,.4)}
.btn-outline{background:transparent;color:var(--ivory);border:1px solid var(--brass)}
.hero{
min-height:100vh;
display:grid;
place-items:center;
padding:8rem 5% 4rem;
text-align:center;
background:
radial-gradient(circle at top, rgba(63,35,71,.8), transparent 40%),
linear-gradient(#171318,#0E0B0F);
position:relative;
overflow:hidden;
}
#embers{position:absolute;inset:0;pointer-events:none}
.overlay{max-width:760px;position:relative;z-index:2}
.eyebrow{letter-spacing:.3em;color:var(--brass);text-transform:uppercase}
h1{font-size:clamp(3rem,8vw,6rem);margin:.5rem 0}
.lead{font-size:1.2rem;margin:1rem auto 2rem;max-width:650px;color:#ddd}
.actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
section{max-width:var(--max);margin:auto;padding:6rem 5%}
h2{font-size:2.5rem;margin-bottom:1rem;color:var(--brass)}
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:1.5rem;
margin-top:2rem;
}
.cards article{
background:var(--velvet);
padding:2rem;
border-radius:var(--radius);
border:1px solid rgba(176,141,87,.15);
transition:.3s;
}
.cards article:hover{transform:translateY(-6px);border-color:var(--brass)}
blockquote{
font-size:1.4rem;
font-style:italic;
border-left:3px solid var(--brass);
padding-left:1rem;
}
form{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}
input{
flex:1;
min-width:240px;
padding:1rem;
border-radius:999px;
border:1px solid #555;
background:#111;
color:var(--ivory);
}
footer{
padding:3rem 5%;
text-align:center;
border-top:1px solid rgba(176,141,87,.15);
color:#bbb;
}
@media(max-width:768px){
.nav-links{display:none}
h1{font-size:3.5rem}
}