* { box-sizing: border-box; }
html { width: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; }
header { position: sticky; top: 0; z-index: 10; background: var(--main-bg-color); border-bottom: 1px solid var(--accent-color); }
.navbar { max-width: 1200px; margin: auto; min-height: 4.5rem; padding: .75rem 1.5rem; }
.nav-menu { margin: 0 0 0 auto; padding: 0; gap: .25rem; }
.nav-menu li a { display: block; padding: .5em .7em; }
.menu-button { display: none; }
main { max-width: 1200px; margin: auto; padding: 0 1.5rem; }
main > section { margin-bottom: 4rem; }
h2 { font-size: 2rem; }
p { line-height: 1.6; }
.intro-section { min-height: 65vh; height: auto; gap: 1rem; }
.left { flex: 1 1 55%; min-width: 0; }
.right { flex: 1 1 40%; padding-right: 0; }
.typewriter-animation { font-size: clamp(2rem, 7vw, 5rem); }
.about-me { border-radius: 1rem; }
.bio { padding: 1rem; }
.profile-pic { padding: 1rem; }
.projects, .resume, #beyond-work { padding: 2rem; border-radius: 1rem; background: #fff9fc; }
.projects ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding: 0; list-style: none; }
.projects li { padding: 1.5rem; border: 1px solid var(--accent-color); border-radius: 1rem; background: white; }
.img-wrapper { aspect-ratio: 16 / 9; overflow: hidden; border-radius: .5rem; }
.img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.project-details h3 { font-size: 1.1rem; }
.resume > section + section { margin-top: 2.5rem; }
.skills table { width: 100%; border-collapse: collapse; }
.skills td { padding: .75rem; vertical-align: top; border-bottom: 1px solid var(--accent-color); }
.skills td:first-child { width: 30%; }
.hobbies { margin: 0; }
.board-intro { text-align: center; font-size: 1.3rem; margin: 2rem 0; }
.board { columns: 4; column-gap: 1rem; }
.card { break-inside: avoid; margin-bottom: 1rem; }
.card img { display: block; width: 100%; border-radius: .75rem; }
.contact-form-container { width: 100%; margin: 2rem auto 4rem; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 20; padding: .75rem; background: white; color: black; }
.skip-link:focus { top: 1rem; }
@media (max-width: 950px) {
    .navbar { margin-top: 0; flex-wrap: wrap; }
    .menu-button { display: block; margin-left: auto; padding: .5rem 1rem; border: 1px solid currentColor; border-radius: .5rem; background: transparent; color: inherit; font: inherit; cursor: pointer; }
    .nav-menu { position: static; width: 100%; border: 0; margin: .75rem 0 0; background: transparent; padding: 0; }
    .nav-menu.is-open { display: flex; }
    .nav-menu li { margin: 0; }
    .nav-menu li a:hover { margin: 0; color: var(--text-color); }
    .intro-section { padding: 2rem 0; }
    .left, .right { padding: 1rem 0; }
    .board { columns: 3; }
    .contact-form-container { margin: 2rem auto 4rem; }
}
@media (max-width: 600px) {
    main { padding: 0 1rem; }
    .about-me, .projects, .resume, #beyond-work { padding: 1rem; }
    .projects ul { grid-template-columns: 1fr; }
    .board { columns: 2; }
    .skills td { padding: .5rem; overflow-wrap: anywhere; }
    .skills td:first-child { width: 40%; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .typewriter-animation { 
        animation: none; 
        width: auto; 
        border: 0; 
        white-space: normal; 
    }
    * { 
        transition: none !important; 
    }
}