/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

/* --- CSS VARIABLES WITH NEW PALETTE --- */
:root {
    /* STRICT PALETTE */
    --color-beige: #DBC2A6;
    --color-olive: #414A37;
    --color-tan:   #99744A;

    --bg-body: var(--color-beige);
    --bg-dark: var(--color-olive);
    --bg-tan:  var(--color-tan);
    
    /* Text Colors mapped to strict palette */
    --text-on-dark: var(--color-beige);   /* Beige on Olive */
    --text-accent: var(--color-beige);    /* Beige on Olive */
    --text-on-tan: var(--color-olive);    /* Olive on Tan */
    --text-on-body: var(--color-olive);   /* Olive on Beige */
    
    --text-muted: var(--color-tan);       /* Tan on Olive */

    --font-serif: "Playfair Display", serif;
    --font-sans: "Inter", sans-serif;
    
    --radius: 24px;
    --gap: 20px;
}

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

/* ========== OPENING ANIMATION KEYFRAMES ========== */

/* Cards scale up from tiny to original */
@keyframes cardScaleIn {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Content fade in */
@keyframes contentFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

body {
    background-color: var(--bg-body);
    color: var(--text-on-body);
    font-family: var(--font-sans);
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vh 2vw;
    overflow: hidden; 
}

/* --- LAYOUT GRID (Previous Ratio) --- */
.bento-grid {
    width: 100%;
    max-width: 1600px;
    height: 95vh;
    max-height: 1000px;
    display: grid;
    /* 
       Split the first 2fr into 3 columns to allow offset:
       Col 1 (1fr)
       Col 2 (0.25fr)
       Col 3 (0.75fr)
       Col 4 (0.85fr) - Right Column
    */
    grid-template-columns: 1fr 0.25fr 0.75fr 0.85fr;
    grid-template-rows: 70px 1.5fr 1fr;
    gap: var(--gap);
}

/* --- SHARED STYLES --- */
.card {
    border-radius: var(--radius);
    padding: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Opening animation for all cards including portrait */
.header,
.hero-text,
.portrait,
.bio,
.contact,
.right-col {
    opacity: 0;
    transform: scale(0.1);
    transform-origin: center center;
    animation: cardScaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.3s;
}

/* Stagger the card animations - portrait first */
.portrait { animation-delay: 0.1s; }
.header { animation-delay: 0.8s; }
.hero-text { animation-delay: 0.9s; }
.right-col { animation-delay: 1.1s; }
.bio { animation-delay: 1.2s; }
.contact { animation-delay: 1.3s; }

/* Content inside cards fade in after cards appear */
.header .brand,
.header .nav,
.hero-text h1,
.hero-text .circle-decor,
.menu-card .menu-head,
.menu-card .menu-list,
.bio .bio-icon,
.bio p,
.contact .arrow,
.contact .contact-label,
.contact h2,
.socials .social-link {
    opacity: 0;
    animation: contentFadeIn 0.6s ease-out forwards;
    animation-delay: 2.4s;
}

/* Stagger content fade-in for better effect */
.header .brand { animation-delay: 1.4s; }
.header .nav { animation-delay: 1.5s; }
.hero-text .circle-decor { animation-delay: 1.5s; }
.hero-text h1 { animation-delay: 1.6s; }
.menu-card .menu-head { animation-delay: 1.7s; }
.menu-card .menu-list { animation-delay: 1.8s; }
.bio .bio-icon { animation-delay: 1.8s; }
.bio p { animation-delay: 1.9s; }
.contact .arrow { animation-delay: 1.9s; }
.contact .contact-label { animation-delay: 2.0s; }
.contact h2 { animation-delay: 2.1s; }
.socials .social-link:nth-child(1) { animation-delay: 1.9s; }
.socials .social-link:nth-child(2) { animation-delay: 2.0s; }
.socials .social-link:nth-child(3) { animation-delay: 2.9s; }

/* Color Utility Classes */
.bg-dark { 
    background-color: var(--bg-dark); 
    color: var(--text-on-dark); 
}

.bg-tan { 
    background-color: var(--bg-tan); 
    color: var(--text-on-tan); 
}

/* Typography & Elements */
img { width: 100%; height: 100%; object-fit: cover; display: block; }
a { text-decoration: none; color: inherit; cursor: pointer; transition: opacity 0.2s; }
a:hover { opacity: 0.7; }

.arrow {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.2rem;
    opacity: 0.8;
}

/* --- 1. HEADER --- */
.header {
    grid-column: 1 / -1; 
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    /* Using Dark BG for header to match design */
    background-color: var(--bg-dark);
    color: var(--text-on-dark);
}

.brand {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    /* Using the beige accent for the logo */
    color: var(--text-accent); 
}

.nav {
    display: flex;
    gap: 40px;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- 2. HERO TEXT (Left, Row 2) --- */
.hero-text {
    grid-column: 1 / span 2; /* Spans 1.25fr + gap */
    justify-content: center;
    padding: 50px;
}

.hero-text h1 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.5rem, 4vw, 4.5rem); 
    line-height: 1.1;
    /* Using the Beige palette color for the text */
    color: var(--text-accent);
}

.hero-text span {
    font-style: italic;
    opacity: 0.8;
    color: var(--color-beige); /* Was white */
}

.circle-decor {
    position: absolute;
    top: 30px;
    right: 30px;
    /* keep it positioned but remove the circular border wrapper */
    width: 80px;
    height: 80px;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
}

/* Use inline SVG image instead of pseudo-element plus */
.circle-decor .rose {
    width: 64px;
    height: auto; /* preserve SVG aspect ratio */
    display: block;
    opacity: 1;
    transform: translateY(-2px); /* slight nudge if needed */
}

/* --- 3. PORTRAIT (Middle, Row 2) --- */
.portrait {
    grid-column: 3; /* Takes 0.75fr */
    background-color: var(--bg-tan);
    padding: 0;
    align-items: flex-end; 
    justify-content: flex-end;
}

.portrait img {
    width: 100%;
    height: 100%; 
    object-fit: cover;
    object-position: center 20%; 
    /* Blending mode helps integrate image with the tan background */
    mix-blend-mode: normal; 
}

/* --- 4. MENU (Right, Row 2) --- */
.menu-card {
    background-color: var(--bg-dark);
    padding: 24px;
}

.menu-head {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--text-accent);
}

.menu-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px; /* keep items close under the header */
}

.menu-item {
    padding: 16px 0;
    border-top: 1px solid rgba(219, 194, 166, 0.2); /* Beige border */
    color: var(--text-muted);
    font-family: var(--font-serif);
    font-size: 1rem;
    transition: 0.2s;
}
.menu-item:hover { color: var(--text-accent); padding-left: 5px; }

/* --- 5. BIO (Left, Row 3) --- */
.bio {
    grid-column: 1; /* Takes 1fr */
    justify-content: flex-end;
    padding: 30px 40px;
}

.bio-icon {
    position: absolute;
    top: 22px;
    left: 28px;
    opacity: 0.95;
    width: 44px;
    height: auto;
    display: block;
    pointer-events: none;
    filter: brightness(0.95) saturate(0.9);
}

.bio p {
    margin-top: auto;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 90%;
}

/* --- 6. CONTACT (Middle, Row 3) --- */
.contact {
    grid-column: 2 / span 2; /* Takes 1fr + gap */
    background-color: var(--bg-tan);
    justify-content: space-between;
    color: var(--text-on-tan); /* Was dark chocolate */
}

.contact h2 {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 2.5rem;
}

.contact-label {
    font-size: 0.8rem;
    opacity: 0.7;
}

.contact .arrow { color: inherit; }

/* --- 7. SOCIALS (Right, Row 3) --- */
.socials {
    background-color: var(--bg-dark);
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.social-link {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}
.social-link:hover { color: var(--text-accent); }

/* --- RIGHT COLUMN WRAPPER --- */
.right-col {
    grid-column: 4;
    grid-row: 2 / span 2;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* Adjustments for children in right column */
.right-col .menu-card {
    flex: 1; /* Takes remaining space */
}

.right-col .socials {
    flex: 0 0 auto; /* Sized by content */
    padding: 30px 24px; /* Adjust padding if needed */
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .right-col { display: contents; }
    .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    body { overflow-y: auto; height: auto; display: block; }
    .header { grid-column: span 2; }
    .hero-text { grid-column: 1; grid-row: 2; height: 400px; }
    .portrait { grid-column: 2; grid-row: 2; height: 400px; }
    .bio { grid-column: 1; grid-row: 3; height: 250px; }
    .contact { grid-column: 2; grid-row: 3; height: 250px; }
    .menu-card { grid-column: 1; grid-row: 4; height: 320px; }
    /* Reduce socials height and padding on tablet to avoid excessive vertical space */
    .socials { grid-column: 2; grid-row: 4; height: 160px; padding: 16px 18px; }
}

@media (max-width: 768px) {
    .bento-grid { display: flex; flex-direction: column; }
    .hero-text, .portrait, .menu-card { height: 360px; }
    /* Mobile: make socials compact */
    .bio, .contact { height: 200px; }
    .socials { height: 120px; padding: 12px 14px; }
}