/* =======================================================
BASE PAGE STYLES
======================================================= */

body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background:#ffffff;
color:#2B2620;
line-height:1.65;
}


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

.site-header{
position:fixed;
top:0;
left:0;
right:0;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 28px;
z-index:1000;
background:rgba(255,255,255,0.92);
backdrop-filter:blur(10px);
}


/* ------------------------------
Brand block (photo + name)
------------------------------ */

.site-brand{
display:flex;
align-items:center;
gap:14px;
}

.site-photo{
width:64px;
height:64px;
object-fit:cover;
border-radius:50%;
display:block;
border:2px solid #F2A900;
box-shadow:0 6px 18px rgba(43,38,32,0.14);
}

.site-identity{
display:flex;
flex-direction:column;
}

.site-name{
font-size:18px;
font-weight:700;
color:#2B2620;
text-decoration:none;
}

.site-name:hover{
color:#F2A900;
}

.site-location{
font-size:13px;
color:#B3A594;
margin-top:2px;
}


/* ------------------------------
Floating navigation buttons
------------------------------ */

.floating-nav{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}

.nav-button{
background:#ffffff;
border:1px solid #B3A594;
color:#2B2620;
padding:8px 14px;
font-size:14px;
text-decoration:none;
border-radius:999px;
transition:all .2s ease;
box-shadow:0 2px 10px rgba(43,38,32,0.05);
}

.nav-button:hover{
background:#F2A900;
border-color:#F2A900;
color:#ffffff;
text-decoration:none;
}


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

.content{
max-width:860px;
margin:145px auto 80px auto;
padding:0 24px;
}


/* =======================================================
TYPOGRAPHY
======================================================= */

h1{
font-size:46px;
line-height:1.1;
margin:0 0 20px 0;
}

h2{
margin-top:40px;
}

p{
margin:0 0 20px 0;
font-size:18px;
}

a{
color:#F2A900;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}


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

.site-footer{
margin-top:120px;
padding:56px 24px 40px 24px;
border-top:1px solid #e9e2d8;
background:#fffaf0;
}

.footer-inner{
max-width:860px;
margin:0 auto;
display:grid;
grid-template-columns:1.3fr 1fr;
gap:32px;
align-items:start;
}

.footer-brand{
display:flex;
flex-direction:column;
gap:6px;
}

.footer-name{
font-size:18px;
font-weight:700;
color:#2B2620;
}

.footer-location{
font-size:14px;
color:#B3A594;
}

.footer-role{
font-size:15px;
color:#4a433d;
max-width:520px;
}

.footer-links{
display:flex;
flex-wrap:wrap;
gap:14px 18px;
justify-content:flex-start;
align-content:flex-start;
}

.footer-links a{
color:#2B2620;
text-decoration:none;
font-size:15px;
font-weight:600;
}

.footer-links a:hover{
color:#F2A900;
text-decoration:none;
}

.footer-meta{
grid-column:1 / -1;
display:flex;
justify-content:space-between;
gap:20px;
padding-top:8px;
font-size:13px;
color:#7a746d;
}

.footer-meta p{
margin:0;
}


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

@media (max-width:900px){

.site-header{
flex-direction:column;
align-items:flex-start;
gap:16px;
padding:20px 22px;
}

.floating-nav{
justify-content:flex-start;
}

.content{
margin:185px auto 60px auto;
padding:0 22px;
}

.footer-inner{
grid-template-columns:1fr;
gap:24px;
}

.footer-meta{
flex-direction:column;
justify-content:flex-start;
gap:8px;
}

}

@media (max-width:600px){

.site-photo{
width:56px;
height:56px;
}

.site-name{
font-size:16px;
}

.site-location{
font-size:12px;
}

.nav-button{
font-size:13px;
padding:7px 12px;
}

.content{
margin:185px auto 50px auto;
padding:0 20px;
}

h1{
font-size:36px;
}

p{
font-size:17px;
}

.site-footer{
padding:48px 20px 36px 20px;
}

.footer-name{
font-size:17px;
}

.footer-role,
.footer-links a{
font-size:14px;
}

}