/* ================================================
   STORY PAGE STYLESHEET
   ================================================ */

/* ================================================
   1. COLOR VARIABLES
   ================================================ */

:root {
    --mahogany: #4a2c2a;
    --chocolate: #7b3f00;
    --gold: #d4af37;
    --red: #8b0000;
    --maple-syrup: #8b5a2b;

    --primary-color: var(--mahogany);
    --secondary-color: var(--gold);

    --indicator-active: var(--mahogany);
    --indicator-inactive: #d1d1d1;

    --white: #ffffff;
    --cream: #fdf5e6;
    --text: #5a4a42;
}

/* ================================================
   2. BASE PAGE STYLES
   ================================================ */

.story-page {
    background-color: var(--cream);
    color: var(--mahogany);
    line-height: 1.8;
}

/* ================================================
   3. HERO SECTION
   ================================================ */

.story-hero {
    height: 60vh;
    min-height: 400px;
    background: var(--mahogany) url('../assets/images/Our_Story.png') center center / cover no-repeat;
    position: relative;
    overflow: hidden;
    margin-top: -85px;
}

.hero-overlay {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 60px 20px 10%;
    text-align: center;
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.story-hero h1 {
    font-size: 4.5rem;
    font-family: 'Playfair Display', serif;
    /* --- The Gap Fixes --- */
    margin-bottom: 5px; /* Negative margin pulls the subtitle UP */
    line-height: 0.9;    /* Shrinks the vertical box around the text */
}

/* Media query for large screens to avoid the subject's face */
@media (max-width: 1900px) {
    .hero-overlay {
    /* Pushes content to the bottom */
    justify-content: flex-end; 
    
    /* Centers content horizontally */
    align-items: center; 
    
    /* Space from the bottom edge */
    padding-bottom: 10vh; 
    
    /* Ensures the text itself is centered */
    text-align: center;
    
    /* Optional: Ensure it takes full width to make centering perfect */
    width: 100%;
}

    .story-hero h1 {
        /* Slightly reduce size if needed to keep it compact */
        font-size: 4rem; 
        line-height: 0.85;
    }
}

/* ================================================
   4. CONTENT SECTION
   ================================================ */

.story-content {
    padding: 80px 20px;
    max-width: 900px;
    margin: auto;
}

.dropcap {
    float: left;
    font-size: 5rem;
    line-height: 1;
    padding-right: 15px;
    color: var(--gold);
    font-family: 'Playfair Display', serif;
}
.portrait-wrapper {
    float: right; /* Keeps the face on the right side */
    margin: 0 0 20px 30px; /* Space between image and text */
    width: 250px; /* Adjust size as needed */
}

.story-portrait {
    width: 100%;
    height: auto;
    border-radius: 15px; /* Softened corners */
    border: 3px solid var(--gold);
    box-shadow: 10px 10px 0 var(--mahogany); /* Royal "stacked" effect */
    display: block;
}

/* Clearfix for the container so it doesn't collapse */
.letter-reveal::after {
    content: "";
    display: table;
    clear: both;
}

/* Mobile: Center the face so it doesn't squash the text */
@media (max-width: 600px) {
    .portrait-wrapper {
        float: none;
        margin: 0 auto 30px auto;
        width: 100%;
        max-width: 300px;
    }
}


/* 2. The Image Container */
.framed-image-container {
    position: relative;
    width: 100%;
    height: 50vh; /* Adjust height to your liking */
    display: block;
}

.framed-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 3. The Mahogany Dimmer Overlay */
.mahogany-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Mahogany color at 60% opacity to dim the image */
    background-color: rgba(74, 44, 42, 0.2); 
    z-index: 1;
}

/* ================================================
   5. SPLIT IMAGE SECTION
   ================================================ */

/* --- Text & Layout Spacing --- */
.container-small p {
    margin-bottom: 1.5rem; /* Adds consistent breathing room between paragraphs */
}

.story-intro-head {
    text-align: center;
    margin-bottom: 50px;
}

.subtitle {
    display: block;
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--mahogany);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 0.8;
}

/* --- Dropcap Fix --- */
.dropcap {
    float: left;
    font-size: 4.5rem; /* Slightly smaller for better text wrap */
    line-height: 0.8;
    padding-top: 10px;
    padding-right: 15px;
    color: var(--gold);
    font-family: 'Playfair Display', serif;
}



.highlight-text {
    font-style: italic;
    color: var(--mahogany);
    font-size: 1.1rem;
    margin-top: 20px;
}

/* --- Split Image Update --- */
.story-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px; /* Increased gap for cleanliness */
    margin: 80px 0;
    align-items: start; /* Changed from center to allow text to flow naturally */
}

.split-img {
    height: 500px; /* Made taller for the Butler image */
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 20px 20px 0 var(--gold);
}


.royal-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, var(--gold), transparent);
    margin: 60px auto;
    width: 80%; /* Keeps it from hitting the edges for a refined look */
    opacity: 0.6;
}
/* ================================================
   6. TIMELINE SECTION
   ================================================ */



.timeline {
    border-left: 2px solid var(--gold);
    padding-left: 30px;
    margin-top: 80px;
}



.timeline-year {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--cream);
    background: var(--mahogany);
    border: 1px solid var(--gold);
    display: inline-block;
    padding: 5px 20px;
    margin-bottom: 30px;
    margin-left: -45px; /* Pulls it over the line */
    position: relative;
    z-index: 3;
    border-radius: 4px;
    box-shadow: 3px 3px 0 var(--gold); /* Royal shadow effect */
}

/* Ensure items under the year are spaced well */
.timeline-item {
    margin-bottom: 40px;
    position: relative;
    padding-left: 10px; /* Extra breathing room for text */
}

/* Adjusted the dot slightly for better alignment with shorter month names */
.timeline-item::before {
    content: '';
    position: absolute;
    left: -39px;
    top: 8px; 
    width: 15px;
    height: 15px;
    background: var(--mahogany);
    border: 2px solid var(--gold);
    border-radius: 50%;
    z-index: 2;
}

.date {
    font-weight: bold;
    color: var(--gold);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.timeline-img {
    display: block;
    width: 100%;
    max-width: 350px; /* Keeps them from getting too huge */
    height: 200px;
    object-fit: cover;
    margin-top: 15px;
    border-radius: 8px;
    border: 2px solid var(--gold);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

/* Fun hover effect to make it interactive */
.timeline-img:hover {
    transform: scale(1.03);
    border-color: var(--cream);
}

/* Mobile tweak */
@media (max-width: 600px) {
    .timeline-img {
        max-width: 100%;
        height: auto;
    }
}

/* ================================================
   7. PHILOSOPHY SECTION
   ================================================ */

.story-philosophy {
    text-align: center;
    padding: 100px 0;
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid rgba(74, 44, 42, 0.1);
}

.story-philosophy h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: var(--mahogany);
}



/* ================================================
   8. CALL TO ACTION SECTION
   ================================================ */

.story-footer-cta {
    text-align: center;
    background-color: var(--mahogany);
    color: var(--white);
    padding: 80px 40px;
    border-radius: 15px;
    margin: 100px 0;
}

.story-footer-cta h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 30px;
}

/* ================================================
   9. BUTTON STYLES
   ================================================ */

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-royal {
    background: var(--gold);
    color: var(--mahogany);
    padding: 15px 35px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.btn-outline {
    border: 2px solid var(--gold);
    color: var(--gold);
    padding: 13px 35px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
}

.btn-royal:hover,
.btn-outline:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

/* ================================================
   10. ANIMATIONS
   ================================================ */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   11. RESPONSIVE DESIGN
   ================================================ */

@media (max-width: 768px) {
    .story-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .cta-buttons {
        flex-direction: column;
    }
}

.bg-ornament {
    position: fixed; /* Keeps them in place as you scroll */
    font-size: 20rem; /* Slightly smaller for better control */
    color: var(--gold); 
    opacity: 0.07; /* Very faint so it doesn't distract from text */
    z-index: 1; /* Moves it above the background colors */
    pointer-events: none; /* Allows you to click "through" it to links */
}

.top-right { 
    top: -5%; 
    right: -5%; 
    transform: rotate(20deg); 
}

.bottom-left { 
    bottom: -5%; 
    left: -5%; 
    transform: rotate(-15deg); 
}

/* Ensure your main text content stays ABOVE the ornaments */
.story-content, .story-hero, .story-philosophy {
    position: relative;
    z-index: 2; 
}

@media (min-width: 1200px) {
    .story-page::before {
        content: "EST. 2026 — ROYAL MOMIJI — EST. 2026";
        position: fixed;
        left: 20px;
        top: 50%;
        transform: rotate(-90deg) translateY(-50%);
        transform-origin: left top;
        font-family: 'Playfair Display', serif;
        letter-spacing: 5px;
        font-size: 0.8rem;
        color: var(--gold);
        opacity: 0.5;
    }
}
body::after {
    content: "ROYAL MOMIJI • ROYAL MOMIJI • ROYAL MOMIJI";
    position: fixed;
    right: -50px;
    top: 50%;
    transform: rotate(90deg);
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    color: var(--mahogany);
    opacity: 0.03;
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
}
/* --- Global Section Logic --- */
.story-section {
    width: 100%;
    padding: 100px 0;
    position: relative;
}

.container-small {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Section Variations --- */

/* Formerly bg-mahogany */
.section-dark {
    background-color: var(--mahogany);
    color: var(--cream);
}

.section-dark h2, 
.section-dark h3, 
.section-dark .date {
    color: var(--gold);
}

/* Formerly bg-cream */
.section-light {
    background-color: var(--cream);
    color: var(--mahogany);
}

/* --- Layout Cleanup --- */
.story-philosophy {
    padding-bottom: 60px; /* Space between text and CTA */
    border-top: none;     /* Cleaned up old borders */
}

.story-footer-cta {
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    padding-top: 60px;
}