/* --- General Reset --- */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Karla', sans-serif;
    color: #412e27;
    line-height: 1.6;
    background-color: #fef3e9; /* Creamy background */
}

h1, h2, h3 {
    font-family: 'Space Mono', monospace;
    color: #d78624; /* Dark yellow */
}

/* --- Header --- */
header {
    text-align: center;
    padding: 60px 20px 40px;
}

/* Logo Image Styling */
.logo-img {
    max-width: 600px; /* Adjust this number to make the logo bigger/smaller */
    width: 100%;      /* Ensures it shrinks on mobile */
    height: auto;     /* Maintains aspect ratio */
    display: inline-block;
    margin-bottom: 15px;
}

.tagline {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-top: 10px;
    color: #5d443a;
}

/* --- Product Section --- */
.product-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.product-section h2 {
    margin-bottom: 40px;
}

/* --- Split Grid Gallery --- */

.gallery-grid {
    display: flex;
    gap: 15px; /* Space between the left and right columns */
    margin-bottom: 30px;
    max-width: 100%;
}

/* LEFT COLUMN (Holds the two landscape photos) */
.gallery-col-left {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between the top and bottom landscape photos */
    flex: 1.5; /* Takes up 60% of the width (1776px) */
}

/* RIGHT COLUMN (Holds the one portrait photo) */
.gallery-col-right {
    flex: 1; /* Takes up 40% of the width (1184px) */
    display: flex;
}

/* Image Styling */
.gallery-col-left img, 
.gallery-col-right img {
    width: 100%;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Special rule for the Portrait image to make edges align */
.gallery-col-right img {
    height: 100%;       /* Forces it to match the height of the left column */
    object-fit: cover;  /* Ensures the photo doesn't look squished/stretched */
}

/* Cake Text Details */
.cake-details {
    text-align: center;
    max-width: 600px;
    margin: 0 auto; /* Centers the block */
}

.description {
    margin-bottom: 20px;
}

/* Pricing List */
.pricing {
    list-style: none;
    padding: 0;
    margin: 20px auto;
    text-align: left; /* Text aligns left... */
    display: inline-block; /* ...but the block sits in the center */
}

.pricing li {
    margin-bottom: 10px;
}

/* Order Button */
.order-btn {
    display: inline-block;
    background-color: #d78624;
    color: white;
    padding: 12px 40px;
    text-decoration: none;
    border-radius: 4px;
    font-family: 'Space Mono', monospace;
    font-weight: 500;
    transition: background 0.3s;
    margin-top: 10px;
}

.order-btn:hover {
    background-color: #e34600;
}

.button-wrapper {
    margin-top: 25px; /* Adds space above the button */
    display: block;   /* Ensures it takes up the full width line */
}

.note {
    font-size: 0.8rem;
    margin-top: 15px;
    font-style: italic;
    color: #5d443a;
}

/* --- About Section --- */
.about-section {
    background-color: #e3c5c3; /* Taro */
    padding: 60px 20px;
    margin-top: 60px;
}

.about-container {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
}

.bio-text h3 {
    margin-top: 0;
}

.bio-image img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fef3e9;
}

/* --- Footer --- */
footer {
    text-align: center;
    padding: 40px 20px;
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
}

footer a {
    color: #e34600;
    text-decoration: none;
}

.contact-email {
    margin-top: 10px;
}

.copyright {
    font-family: 'Space Mono', monospace;
    margin-top: 30px;
    font-size: 0.75rem;
    color: #5d443a;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 700px) {
    .gallery-grid {
        flex-direction: column; /* Stacks everything vertically */
    }
    
    .gallery-col-left, .gallery-col-right {
        width: 100%; /* Full width on phone */
        flex: auto;
    }

    /* On mobile, we don't want the portrait forced to be huge */
    .gallery-col-right img {
        height: auto; 
    }

    /* Stack About section */
    .about-container {
        flex-direction: column-reverse; /* Puts text under image */
        text-align: center;
    }
}