/* - 0. FONT FAMILY - */
@font-face { font-family: 'Cy'; src: url('../fonts/Cy-Thin.ttf') format('truetype'); font-weight: 100; }
@font-face { font-family: 'Cy'; src: url('../fonts/Cy-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Cy'; src: url('../fonts/Cy-Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Cy'; src: url('../fonts/Cy-Black.ttf') format('truetype'); font-weight: 900; }

/* - 1. DESIGN SYSTEM / TOKENS - */
:root {
    --container-width: 1112px;
    --grid-gap: 24px;
    --thumb-width: 480px;
    --thumb-height: 300px;
    --Grey-950: #0c0c0c;
    --Grey-100: #f0f0f0;
    --Grey-50: #ffffff;
    --Primary-Pink-500: #DA588C;
    --Red-500: #EF2313;
    --Red-800: #A6190E;
    --Pink-925: #77243D;
    --Pink-950: #480F21;
    --Pink-900: #C83A6C;
    --Blue-400: #64A2AC;
    --Primary-Red-900: #8C1C13;
    --Red-300: #FFA39C;
    --Yellow-400: #FFD31B;
    --Pink-400: #E680AB;
    --Blue-500: #498791;
    --black: var(--Grey-950);
    --white: var(--Grey-50);
    --light-grey: var(--Grey-100);
    --pink: var(--Primary-Pink-500);
    --red: var(--Red-500);
    --btn-main: var(--Red-800);
    --btn-hover: var(--Pink-925);
    --btn-active: var(--Pink-950);
    --space-xs: 4px; --space-s: 8px; --space-m: 16px; --space-l: 24px; --space-xl: 64px; --space-xxl: 128px;
    --font-main: 'Cy', sans-serif;
}

/* - 2. GLOBAL STYLES - */
html { overflow-y: scroll; }
body { font-family: var(--font-main); color: var(--black); line-height: 1.5; margin: 0; padding: 0; background-color: var(--white); -webkit-font-smoothing: antialiased; }
h3 { font-size: 32px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin: 0; }
p { font-size: 16px; font-weight: 400; margin-bottom: var(--space-l); }
a { font-size: 16px; text-transform: uppercase; text-decoration: none; color: var(--black); transition: color 0.2s; }

/* - 3. LAYOUT & HEADER - */
.bg-layer { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    transition: opacity 0.2s ease-in-out; 
}
.bg-1 { background-image: url('../images/bg1.avif'); z-index: -100; }
.bg-2 { z-index: -99; }

.site-wrapper { position: relative; z-index: 10; width: var(--container-width); max-width: 100%; margin: 0 auto; background-color: var(--white); padding: var(--space-xl); box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; }

header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-xxl); }
main { flex-grow: 1; margin-bottom: var(--space-xl); }

.logo-container { position: relative; display: inline-block; }
.main-logo { display: block; width: 448px; height: auto; }
.logo-hover-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; cursor: default; }

.main-nav a { 
    margin-left: var(--space-l); 
    font-weight: 400; 
    color: var(--black); 
    transition: color 0.2s;
}

.main-nav a:hover { color: var(--pink) !important; }
.main-nav a:active { color: var(--red) !important; }
.main-nav a.active { font-weight: 400; }

/* - 4. GALLERY GRID - */
.gallery-grid { display: grid; grid-template-columns: repeat(2, var(--thumb-width)); gap: var(--grid-gap); justify-content: center; }
.gallery-item { position: relative; width: var(--thumb-width); height: var(--thumb-height); background-color: var(--light-grey); background-size: cover; background-position: center; cursor: pointer; }
.gallery-item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.2s; z-index: 1; }

.gallery-item:nth-child(1)::after { background-color: var(--Pink-900); }
.gallery-item:nth-child(2)::after { background-color: var(--Blue-400); }
.gallery-item:nth-child(3)::after { background-color: var(--Primary-Red-900); }
.gallery-item:nth-child(4)::after { background-color: var(--Red-300); }
.gallery-item:nth-child(5)::after { background-color: var(--Yellow-400); }
.gallery-item:nth-child(6)::after { background-color: var(--Pink-400); }
.gallery-item:nth-child(7)::after { background-color: var(--Blue-500); }
.gallery-item:nth-child(8)::after { background-color: var(--Primary-Red-900); }

.gallery-item:hover::after { opacity: 0.7; }

/* - 5. ABOUT PAGE - */
.about-section { max-width: 1000px; margin: 0 auto; display: flex; align-items: flex-start; gap: var(--space-xl); text-align: left; }
.about-image-container { flex: 0 0 444px; margin: 0; }
.about-image-container img { width: 100%; height: auto; }
.about-text { flex: 1; }
.about-text p:first-child { margin-top: -5px; }

.desktop-br { display: inline; }

/* - 6. CONTACT PAGE (UPDATED CENTERING) - */
.contact-section { 
    max-width: 600px; 
    margin: 0 auto; 
    text-align: center;
    /* Centers the 'Sent' message within the footprint */
    min-height: 480px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact-form { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    gap: var(--space-l); 
    text-align: left; 
}

.form-group { display: flex; flex-direction: column; gap: var(--space-s); }
.form-group label { font-size: 14px; }
.contact-form input, .contact-form textarea { font-family: var(--font-main); font-size: 16px; padding: var(--space-m); border: 1px solid var(--black); background: transparent; outline: none; }

.submit-btn { 
    font-family: var(--font-main); 
    font-size: 18px; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding: var(--space-m); 
    background-color: var(--btn-main); 
    color: var(--white); 
    border: none; 
    cursor: pointer; 
    transition: background-color 0.2s; 
}

.submit-btn:hover { background-color: var(--btn-hover); }
.submit-btn:active { background-color: var(--btn-active); }

#success-message h3 { margin: 0; color: var(--pink); }

/* - 7. LIGHTBOX - */
.lightbox-container { display: none; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.95); align-items: center; justify-content: center; }
.lightbox-content { display: flex; flex-direction: column; max-width: 90%; max-height: 90%; width: 100%; align-items: center; z-index: 1002; position: relative;}
.project-text { margin-bottom: var(--space-m); color: var(--white); text-align: center; }
#project-title { font-weight: 700; margin-bottom: var(--space-s); }

#page-counter { color: var(--pink); font-weight: 700; font-size: 14px; letter-spacing: 2px; margin-top: var(--space-m); visibility: hidden; }

#lightbox-img { max-width: 100%; max-height: 70vh; object-fit: contain; cursor: pointer; }

.close-btn { position: absolute; top: 32px; right: 48px; color: var(--white); font-size: 48px; cursor: pointer; z-index: 1003; transition: color 0.2s;}
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); color: var(--white); font-size: 64px; cursor: pointer; user-select: none; padding: 24px; z-index: 1003; transition: color 0.2s;}
.prev-btn { left: 16px; }
.next-btn { right: 16px; }

.nav-btn:hover, .close-btn:hover { color: var(--pink); }

/* - 8. RESPONSIVENESS - */
@media (max-width: 1150px) {
    .site-wrapper { padding: 32px; }
    header { flex-direction: column; align-items: center; gap: 32px; text-align: center; }
    .main-nav { display: flex; justify-content: center; gap: var(--space-l); }
    .main-nav a { margin-left: 0; } 
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .gallery-item { width: 100%; height: auto; aspect-ratio: 480 / 300; }
    .about-section { flex-direction: column; text-align: center; align-items: center; }
    .about-image-container { flex: 0 0 auto; margin-bottom: var(--space-xl); width: 100%; max-width: 444px; }
    
    .desktop-br { display: none; }
}