:root{

--bg:#faf9f6;
--text:#111;
--muted:#666;
--border:#dddddd;
--accent:#8b6f47;

}


.dark{

--bg:#0d0d0d;
--text:#ededed;
--muted:#999;
--border:#292929;

}



*{

margin:0;
padding:0;
box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

background:var(--bg);

color:var(--text);

font-family:
Inter,
Arial,
sans-serif;

transition:
background .35s,
color .35s;

}




a{

color:inherit;

text-decoration:none;

}





/* Dynamic container */


main{

width:min(88vw,1400px);

margin:auto;

padding:
clamp(70px,8vw,140px)
clamp(25px,4vw,80px);

}





/* Navbar */


nav{

position:sticky;

top:0;

height:75px;

z-index:100;


height:
clamp(70px,6vw,100px);


display:flex;

align-items:center;

justify-content:space-between;


padding:
0 clamp(25px,5vw,80px);


background:
color-mix(
in srgb,
var(--bg) 85%,
transparent
);


backdrop-filter:blur(12px);


border-bottom:1px solid var(--border);

}





.logo{

font-family:
"Playfair Display",
serif;

font-size:
clamp(20px,2vw,28px);

}





.nav-links{

display:flex;

align-items:center;

gap:
clamp(15px,3vw,45px);

}





.nav-links a{

font-size:
clamp(13px,1vw,16px);

color:var(--muted);

transition:.25s;

}



.nav-links a:hover{

color:var(--text);

}




#theme-toggle{

width:42px;

height:42px;

border-radius:50%;

border:1px solid var(--border);

background:transparent;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

transition:

background .3s,
border-color .3s,
transform .4s;

}



#theme-toggle:hover{

transform:

rotate(20deg)
scale(1.08);

}



.theme-icon{

width:20px;

height:20px;

fill:none;

stroke:var(--text);

stroke-width:2;

stroke-linecap:round;

stroke-linejoin:round;

transition:

transform .5s;

}






.theme-icon{

width:22px;

height:22px;

stroke:var(--text);

fill:none;

stroke-width:2;

stroke-linecap:round;

stroke-linejoin:round;

transition:.5s;

}



.sun-core{

fill:var(--text);

stroke:none;

transition:.5s;

}



.sun-rays{

stroke:var(--text);

transition:.5s;

}



.moon{

opacity:0;

transform:

translateY(10px)
rotate(-30deg);

fill:var(--text);

stroke:none;

transition:

opacity .4s,
transform .5s;

}




/* Dark mode */

.dark .sun-core{

transform:

scale(.2);

opacity:0;

}



.dark .sun-rays{

opacity:0;

transform:

rotate(90deg)
scale(.3);

}



.dark .moon{

opacity:1;

transform:

translateY(0)
rotate(0);

}




/* Typography */


h1,
h2{

font-family:
"Playfair Display",
Georgia,
serif;

font-weight:400;

}




h2{

font-size:
clamp(32px,3vw,52px);

margin-bottom:
clamp(25px,3vw,45px);

}





p{

font-size:
clamp(15px,1.1vw,19px);

line-height:2;

color:var(--muted);

}





section{

margin-top:
clamp(80px,10vw,160px);

}




label{

font-size:
clamp(10px,1vw,13px);

letter-spacing:3px;

color:var(--muted);

display:block;

margin-bottom:10px;

}






/* Scrollbar */


::-webkit-scrollbar{

width:12px;

}



::-webkit-scrollbar-track{

background:var(--bg);

}



::-webkit-scrollbar-thumb{

background:#444;

border-radius:20px;

border:3px solid var(--bg);

}



::-webkit-scrollbar-thumb:hover{

background:#666;

}






footer{

margin-top:
clamp(80px,10vw,150px);


padding-top:30px;

border-top:1px solid var(--border);


color:var(--muted);

font-size:
clamp(12px,1vw,15px);

}





@media(max-width:700px){


nav{

padding:
0 20px;

}


.nav-links a{

display:none;

}


main{

width:min(88vw,1400px);

margin:auto;

padding:
0 clamp(25px,4vw,80px);

}




}