:root{
--bg:#f4efe7;
--text:#1f2a28;
--blue1:#0d1930;
--blue2:#1f3558;
--accent:#bda36a;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.8;
}
.site-header{
position:absolute;
top:0;
left:0;
right:0;
padding:30px 8%;
display:flex;
justify-content:space-between;
align-items:center;
z-index:5;
}
.brand a,nav a{
color:white;
text-decoration:none;
}
nav{
display:flex;
gap:32px;
}
.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:40px;
background:
radial-gradient(circle at top,#35507f55,transparent 35%),
linear-gradient(160deg,var(--blue1),var(--blue2));
color:white;
}
.hero-inner{
max-width:900px;
}
.hero h1{
font-family:Georgia,serif;
font-size:clamp(4rem,10vw,8rem);
margin:0;
font-weight:400;
}
.tagline{
font-family:Georgia,serif;
font-size:clamp(1.4rem,2.7vw,2.2rem);
max-width:700px;
margin:40px auto 0;
}
.intro,.quote{
padding:120px 8%;
}
.content{
max-width:900px;
margin:auto;
}
.lead{
font-family:Georgia,serif;
font-size:clamp(2rem,4vw,3.5rem);
line-height:1.25;
}
.button{
display:inline-block;
margin-top:50px;
padding:16px 30px;
border:1px solid var(--text);
text-decoration:none;
color:var(--text);
transition:.25s;
}
.button:hover{
background:var(--text);
color:white;
}
.quote{
text-align:center;
}
.quote p{
font-size:1.3rem;
}
.quote h2{
font-family:Georgia,serif;
font-size:clamp(2.5rem,5vw,5rem);
font-weight:400;
max-width:900px;
margin:30px auto;
}
footer{
padding:50px;
text-align:center;
border-top:1px solid #ddd;
}
@media(max-width:800px){
.site-header{
position:relative;
background:#14213f;
}
nav{gap:16px;font-size:.9rem}
}