/* Base Reset & Variables */
:root {
    --bg-color: #070707; /* Extremely dark grey, almost black */
    --text-primary: #f0f0f0;
    --text-secondary: #888888;
    --accent: #ffffff;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; }
.archive-number { font-family: var(--font-body); font-weight: 300; letter-spacing: 2px; font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; }
.profile-name { font-size: 3rem; letter-spacing: 1px; margin: 10px 0 30px; text-transform: uppercase; }

/* Navigation */
.navbar {
    position: fixed;
    top: 0; width: 100%;
    padding: 30px 50px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 100;
    background: linear-gradient(rgba(7,7,7,0.9), rgba(7,7,7,0));
    backdrop-filter: blur(5px);
}
.logo { font-family: var(--font-heading); font-size: 1.2rem; letter-spacing: 3px; font-weight: 600; }
.nav-link { color: var(--text-primary); text-decoration: none; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; }

/* Hero Section */
.hero {
    height: 100vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    /* UPDATE THIS URL TO YOUR BRAND BACKGROUND IMAGE */
    background: linear-gradient(rgba(7,7,7,0.6), rgba(7,7,7,0.9)), url('https://images.unsplash.com/photo-1608528577891-eb055944f2e9?q=80&w=1920&auto=format&fit=crop') no-repeat center center/cover;
    position: relative;
}
.hero h1 { font-size: 5vw; letter-spacing: 4px; margin-bottom: 20px; }
.subtitle { font-size: 1.1rem; color: var(--text-secondary); font-weight: 300; letter-spacing: 1px; }

.scroll-indicator { position: absolute; bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-indicator p { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 3px; color: var(--text-secondary); }
.scroll-indicator .line { width: 1px; height: 50px; background-color: var(--text-secondary); animation: growLine 2s infinite ease-in-out; }

@keyframes growLine { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.1% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* The Collection (Product Rows) */
.collection-container { padding: 100px 0; }
.product-row { display: flex; align-items: center; min-height: 80vh; padding: 0 10vw; margin-bottom: 100px; gap: 8vw; }
.product-row.reverse { flex-direction: row-reverse; }

/* --- THE FIX IS HERE --- */
.product-image { 
    flex: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-image img { 
    max-width: 100%; 
    height: auto; 
    border-radius: 2px; 
    filter: grayscale(20%) contrast(110%); 
    transition: filter 0.5s ease; 
}
/* ----------------------- */

.product-image img:hover { filter: grayscale(0%) contrast(100%); }

.product-info { flex: 1; max-width: 500px; }

/* Specs Grid (Mood & Year) */
.specs-grid { display: flex; gap: 40px; margin-bottom: 30px; border-top: 1px solid #333; border-bottom: 1px solid #333; padding: 20px 0; }
.spec-item { font-size: 0.85rem; letter-spacing: 1px; }
.spec-item span { color: var(--text-secondary); margin-right: 8px; }

.notes { font-style: italic; color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 40px; line-height: 1.8; }

/* Purchase Interface (Size & Button) */
.purchase-interface { margin-top: 20px; }
.size-selector { display: flex; gap: 15px; margin-bottom: 30px; }
.size-btn { background: transparent; border: 1px solid #444; color: var(--text-secondary); padding: 10px 25px; cursor: pointer; font-family: var(--font-body); letter-spacing: 1px; transition: all 0.3s ease; }
.size-btn.active { border-color: var(--accent); color: var(--text-primary); }

.btn-order { display: inline-block; background-color: var(--text-primary); color: var(--bg-color); padding: 18px 40px; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; font-size: 0.9rem; transition: background-color 0.3s ease; width: 100%; text-align: center; }
.btn-order:hover { background-color: #cccccc; }

/* Footer */
.site-footer { text-align: center; padding: 50px; font-size: 0.8rem; color: #555; letter-spacing: 1px; }

/* Scroll Animations */
.reveal { opacity: 0; transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.slide-left { transform: translateX(-50px); }
.slide-right { transform: translateX(50px); }
.reveal.active { opacity: 1; transform: translateX(0); }

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .product-row, .product-row.reverse { flex-direction: column; padding: 0 5vw; gap: 40px; text-align: center; margin-bottom: 80px; }
    .product-image img { max-width: 90%; }
    .specs-grid { justify-content: center; }
    .hero h1 { font-size: 3rem; }
    .profile-name { font-size: 2.2rem; }
    .size-selector { justify-content: center; }
}