:root {
    --bg-color: #f2e6d5;
    --text-color: #382100;
    --font-family: "Playfair Display", serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.title-bar {
    width: 100%;
    background-color: var(--bg-color);
    text-align: left;
    /* Left aligned */
    padding: 20px 40px;
    /* Added horizontal padding */
    box-sizing: border-box;
    /* Ensure padding doesn't overflow width */
    position: sticky;
    top: 0;
    z-index: 1000;
}

.title-bar h1 {
    margin: 0;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 2px;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    box-sizing: border-box;
}

.image-container {
    margin: 20px 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.main-image {
    max-width: 100%;
    height: auto;
    display: block;
    /* No animations */
}

.text-container {
    max-width: 800px;
    text-align: center;
    margin: 20px 0;
    padding: 0 20px;
}

.text-container p {
    font-size: 1.2rem;
    line-height: 1.6;
}

.button-container {
    margin: 40px 0;
}

.preorder-btn {
    background-color: #000000;
    color: #ffffff;
    font-family: var(--font-family);
    font-size: 1.2rem;
    padding: 15px 50px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 50px;
    /* Pill shaped */
    /* No animations/transitions as requested, just instant state change */
}

.preorder-btn.clicked {
    background-color: #ffffff;
    color: #000000;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .title-bar {
        padding: 15px 20px;
        text-align: center;
        /* Often looks better centered on mobile, but user asked for left. Keeping left for now unless specified otherwise, but standard practice might differ. Let's stick to user request strictly or adapt? User said "make sure this website looks good on both desktop and mobile". Left align on mobile can look weird if title is long. Let's keep it left but ensure font size scales. */
        text-align: left;
    }

    .title-bar h1 {
        font-size: 1.5rem;
        /* Smaller font for mobile */
    }

    .text-container p {
        font-size: 1rem;
    }

    .preorder-btn {
        padding: 12px 40px;
        font-size: 1rem;
    }
}