/* Variables and Globals */
:root {--font-serif: 'Playfair Display', serif; --font-sans: 'Poppins', sans-serif; --color-text: #222; --color-background: #ffffff; --color-subtle: #888;}

html {scroll-behavior: smooth;}
body {background-color: var(--color-background); color: var(--color-text); font-family: var(--font-sans); font-weight: 300; line-height: 1.7; margin: 0;}

/* Typography and Links */
h1, h2, h3 {font-family: var(--font-serif); font-weight: 400; margin: 0;text-align:center}
p {margin: 0.5em 0;}
a {color: var(--color-text); text-decoration: none; transition: color 0.3s ease;}
a:hover {color: #b0b0b0;}

/* Layout and Structure */
.container {max-width: 1200px; margin: 0 auto; padding: 40px 20px;}
header {text-align: center; padding: 50px 0 30px 0;}
main p {text-align: center;}
footer {text-align: center; padding: 50px 0; border-top: 1px solid #eee; margin-top: 80px;}

/* Components and Sections */
header h1 {font-size: 3.5rem; letter-spacing: 2px; font-weight: 600;}
header .subtitle {font-size: 1.2rem; color: var(--color-subtle); margin-top: 10px; text-transform: uppercase; letter-spacing: 1px;}
.section-title {font-size: 2.5rem; text-align: center; margin-bottom: 50px;}

/* Portfolio Section */
#portfolio {padding: 20px 0;}
#portfolio img {border-radius: 15px;}
.gallery {display: flex; flex-direction: column; align-items: center; gap: 20px;}
.project-item {text-align: center; max-width: 900px; margin: 0 auto; width: 100%;}
.project-item .image-wrapper {overflow: hidden;}
.project-item img {width: 100%; height: auto; display: block;}
.project-info {padding-top: 20px;}
.project-info h3 {font-size: 1.5rem;}
.project-info p {font-size: 1rem; color: var(--color-subtle);}

#portfolio img,
#portfolio video,
.image-gallery img,
.image-gallery video {
    border-radius: 15px;
    display: block;
    width: 100%;
    height: auto;
}

/* Work Showcase Section */
#work-showcase {padding: 20px 0;}
.image-gallery {display: flex; flex-direction: column; gap: 20px;}
.image-gallery img {width: 100%; height: auto; display: block;}

/* About Section */
#about {text-align: center; padding: 20px 0;}
#about p {max-width: 700px; margin: 0 auto 25px auto; font-size: 1.1rem;}
.contact-button {display: inline-block; padding: 12px 28px; background-color: var(--color-text); color: var(--color-background); border: 1px solid var(--color-text); border-radius: 5px; font-family: var(--font-sans); font-weight: 400; font-size: 1rem; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease;}
.contact-button:hover {background-color: var(--color-background); color: var(--color-text);}

/* Footer Content */
.contact-links {margin-bottom: 20px;}
.contact-links a {margin: 0 15px; font-weight: 400; font-size: 1.1rem;}

/* Media Queries */
@media (max-width: 768px) {
    header h1 {font-size: 2.5rem;}
    .section-title {font-size: 2rem;}
    .gallery {gap: 20px;}
    .image-gallery {gap: 20px;}
}