/* ==================================================================================
                                       GLOBAL
   ================================================================================== */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; 
    font-family: sans-serif; 
}

/* THE ARTWORK SHIELD: Prevents highlighting, dragging, and casual saving */
img {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* 2. THE VAULT (Completely disables right-clicking on actual book illustrations) */
.protected-art {
    pointer-events: none; 
}

/* ==================================================================================
       THE MASTER HOVER FIX: Catches the mouse so the protected art can swing!
   ================================================================================== */
.hanging-signs a, 
.marquee-wrapper,
.book-hero a:not(.action-btn),
.mini-promo a:not(.action-btn),
.module-icon a, 
.coloring-icon, /* THE NEW ADDITION: Catches the mouse for the coloring pages! */
.theatrical-container {
    background-color: rgba(0,0,0,0.01); 
}

/* ==================================================================================
                              THE TRANSPARENT ICON SWING
   ================================================================================== */
.swing-icon {
    /* Smooths out the animation so it doesn't snap abruptly */
    transition: transform 0.3s ease, filter 0.3s ease; 
}

/* We trigger the swing whether they hover on the link wrapper OR the image itself */
a:hover .swing-icon,
.swing-icon:hover {
    transform: scale(1.05) rotate(-3deg); 
    
    /* We bump up the drop-shadow and turn on the lights! */
    filter: drop-shadow(8px 15px 12px rgba(0,0,0,0.5)) brightness(1.15); 
}

/* ==================================================================================
                              1. THE MASTER BACKGROUND
   ================================================================================== */
.farm-stage {
    position: relative; 
    height: 100vh; 
    width: 100vw;
    display: flex; 
    flex-direction: column; 
    background-image: url('../images/background.jpg');
    background-size: cover; 
    background-position: center top;
}

/* ==================================================================================
                               2. THE MAIN LAYOUT GRID
   ================================================================================== */
.main-layout {
    display: flex;
    flex-direction: row;
    height: 100%; 
    width: 100%;
}

.layout-col-left, .layout-col-right {
    flex: 1; 
    display: flex;
}

.layout-col-center {
    width: 700px; 
    flex-shrink: 0; 
    display: flex;
    flex-direction: column; 
    align-items: center; 
}

/* ==================================================================================
                              3. THE WOODEN TITLE SIGN
   ================================================================================== */
   .marquee-wrapper {
       display: block;
       width: 100%;
       text-align: center;
   }

   .marquee-sign {
       display: block;
       margin: 0 auto; 
       padding-top: 10px;
       margin-bottom: 20px;
       max-width: 90%; 
       width: 500px; 
       height: auto;
       flex-shrink: 0; 
       z-index: 9999; 
       transition: all 0.3s ease; 
       filter: 
           drop-shadow(10px 20px 20px rgba(0,0,0,0.5))   
           drop-shadow(8px 8px 8px rgba(0,0,0,0.4));    
   }

   /* THE HOVER: The Cream Halo Swing for the Main Title */
   .marquee-wrapper:hover .marquee-sign {
       transform: scale(1.02) rotate(-1deg); 
       filter: 
           drop-shadow(10px 20px 15px rgba(0,0,0,0.5)) 
           drop-shadow(0 0 25px rgba(244, 232, 206, 0.8)) 
           brightness(1.1); 
   }

/* ==================================================================================
                             4. THE PARCHMENT CONTAINER
   ================================================================================== */
.parchment-runner {
    width: 100%; 
    align-self: stretch; 
    margin: 0 0 40px 0; 
    background-image: url('../images/parchment.jpg');
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    
    /* THE ROUNDED CORNERS! Adjust the 15px up or down to change how soft the edges are */
    border-radius: 15px; 
    
    /* Your existing gorgeous drop shadow */
    box-shadow: 0 25px 50px rgba(0,0,0,0.6), 0 10px 15px rgba(0,0,0,0.4); 
    
    box-sizing: border-box; 
    display: flex; 
    flex-direction: column;
    overflow: hidden; /* This acts like scissors, trimming the background image to fit the new rounded corners! */
    flex: 1;
}

/* ==================================================================================
                               THE IPAD PARCHMENT FIX
   ================================================================================== */
/* Targets the specific width and height ranges of the iPad lineup */
@media screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 1000px) {
    .content-area h1 {
        margin-top: 40px !important; /* THE DIAL: Adjust this number up or down to push the title down the paper */
    }
}

/* ==================================================================================
                        5. TYPOGRAPHY, SCROLLING, & IMAGE LAYOUT
   ================================================================================== */
.content-area {
    flex: 1; 
    overflow-y: auto; 
    padding: 0px 40px; 
    color: #603416; 
    font-family: 'Delius', cursive;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
    cursor: grab; 
}

.content-area:active {
    cursor: grabbing; 
}

/* THE GHOST SCROLLBAR: Invisible by default */
.content-area::-webkit-scrollbar {
    width: 8px; /* Nice and thin */
}

/* THE MAGIC CURSOR: Only applies when the JavaScript says we are dragging! */
.content-area.is-dragging {
    cursor: grabbing !important;
}

.content-area::-webkit-scrollbar-track {
    background: transparent; 
}

.content-area::-webkit-scrollbar-thumb {
    background-color: transparent; 
    border-radius: 10px;
}

/* THE HOVER TRIGGER: Scrollbar turns into a soft brown ink line ONLY when hovering over the parchment */
.content-area:hover::-webkit-scrollbar-thumb {
    background-color: rgba(96, 52, 22, 0.3); 
}

/* Gets slightly darker if they actually hover over the scrollbar itself */
.content-area::-webkit-scrollbar-thumb:hover {
    background-color: rgba(96, 52, 22, 0.7); 
}

.content-area h1, 
.content-area h2 {
    font-style: normal;
    font-size: 2.5rem; 
    text-align: center;
    margin-bottom: 5px;
    margin-top: 40px;
    text-wrap: pretty; /* Prevents single words on the last line */
}

.content-area p {
    font-style: italic;
    font-size: 1.3rem; 
    line-height: 1.3; 
    margin-bottom: 20px;
    margin-top: 0px;
    text-align: center;
    text-wrap: pretty; /* Prevents single words on the last line */
}

/* THE FLEX ROW FOR SIDE-BY-SIDE IMAGES */
.story-image-row {
    display: flex;
    justify-content: center;
    gap: 10px; /* THE SPACING DIAL: Controls the gap between the two pictures */
    margin: 30px auto; 
}

/* THE SIZE CONTROLS FOR IMAGES INSIDE A ROW */
.story-image-row .inline-story-img {
    margin: 0; 
    width: 45%; /* THE OVERALL SIZE DIAL: Tells each image to take up slightly less than half the row */
    max-width: 350px; /* THE SAFETY CAP: Prevents them from getting massive on giant desktop monitors */
    height: auto; /* THE ASPECT RATIO: Keeps Wally from looking squished or stretched! */
}

/* UNIVERSAL EFFECTS FOR STORY PICTURES */
.inline-story-img {
    border-radius: 12px; 
    border: 1px solid #603416; 
    box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.5); 
    display: block; 
}

/* THE CUSTOM DIAL FOR SMALLER STANDALONE IMAGES */
.small-story-img {
    max-width: 250px; /* THE DIAL: Adjust this number up or down to shrink/grow the frog! */
    display: block;
    margin: 30px auto; /* Guarantees the frog stays perfectly centered with nice breathing room */
}

/* THE CUSTOM DIAL FOR THE MONOGRAM IMAGE */
.monogram-img {
    display: block; 
    margin: 30px auto; /* Centers it perfectly */
    width: 64px !important; 
    height: auto !important; 
    filter: drop-shadow(5px 8px 8px rgba(0,0,0,0.1)); 
}

/* TRANSPARENT PNGs & LOGOS */
.sbl-logo {
    display: block; 
    margin: 30px auto; /* Centers it perfectly */
    
    /* THE IRON-CLAD SIZE LOCK */
    width: 64px !important; 
    height: auto !important; 
    object-fit: contain; /* Guarantees the browser will never warp the aspect ratio */
    
    filter: drop-shadow(5px 8px 8px rgba(0,0,0,0.4)); 
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.transparent-png {
    display: block; 
    margin: 30px auto; /* Centers it perfectly */
    
    /* THE IRON-CLAD SIZE LOCK */
    width: auto !important; 
    height: auto !important; 
    object-fit: contain; /* Guarantees the browser will never warp the aspect ratio */
    
    filter: drop-shadow(5px 8px 8px rgba(0,0,0,0.4)); 
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ==================================================================================
                                     6. ORNAMENTS
   ================================================================================== */

.storybook-divider {
    border: 0;
    height: 1px;
    background: #603416;
    background-image: linear-gradient(to right, #f4e8ce, #603416, #f4e8ce);
    margin: 15px auto;
    width: 50%;
}

/* ==================================================================================
                                   7. THE SIGNPOST
   ================================================================================== */
.layout-col-left {
    justify-content: center;
    align-items: center; 
}

.signpost-menu {
    position: relative; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centers the entire assembly vertically */
    height: 100%; 
    z-index: 500; 
}

/* THE UNIFIED SCALE: Everything is now tied to the exact same height math */
.post-wood {
    position: absolute; 
    height: 75vh; /* The Master Size of the post */
    max-height: 850px; /* Safety cap for massive monitors */
    width: auto;
    z-index: -1; 
    filter: drop-shadow(15px 15px 10px rgba(0,0,0,0.5)); 
}

.hanging-signs {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 87vh; /* Matches the post exactly */
    max-height: 850px;
    box-sizing: border-box;
    padding-top: 22vh; /* Pushes the first sign down the post perfectly */
    gap: 2vh; /* The gap grows and shrinks perfectly with the screen */
    z-index: 10000; /* Raises buttons above marquee-sign when in mobile */
}

/* THE DEFAULT SIGN */
.menu-sign {
    height: 7.5vh; /* The signs size themselves based on the screen height! */
    max-height: 65px; /* Safety cap so they never outgrow the wood */
    width: auto; /* Keeps the proportions flawless */
    cursor: pointer; 
    transition: all 0.3s ease; 
    filter: drop-shadow(5px 10px 10px rgba(0,0,0,0.7)); 
}

/* THE HOVER: The Cream Halo Swing */
.hanging-signs a:hover .menu-sign {
    transform: scale(1.05) rotate(-2deg); 
    filter: 
        drop-shadow(8px 15px 12px rgba(0,0,0,0.5)) 
        drop-shadow(0 0 15px rgba(244, 232, 206, 0.8)) 
        brightness(1.1); 
}

/* THE ACTIVE STATE: Permanently illuminates the current page's sign */
.menu-sign.active {
    filter: 
        drop-shadow(5px 10px 8px rgba(0,0,0,0.5)) 
        drop-shadow(0 0 15px rgba(244, 232, 206, 0.9)) 
        brightness(1.15); 
}

/* ==================================================================================
                              8. MOBILE RESPONSIVENESS
   ================================================================================== */
@media (max-width: 1024px) {
    .main-layout {
        flex-direction: column;
        align-items: center;
    }

    .layout-col-right {
        display: none;
    }

    /* Dissolves the column boxes so the pieces can mix freely */
    .layout-col-left, .layout-col-center {
        display: contents; 
    }

    /* 1. TOP ROW: The Marquee Sign */
    .marquee-sign {
        order: 1;
        margin-bottom: 10px; 
        width: 95%; /* Prevents the marquee from blowing out small screens */
        max-width: 520px;
    }

    /* 2. MIDDLE ROW: The Navigation Menu */
    .signpost-menu {
        order: 2;
        position: static; 
        height: auto;
        width: 100%;
        display: flex; 
        justify-content: center; /* Centers the whole block of signs */
    }

    /* THE GAP FIX: Centers the row and forces a 5% safety margin on the left/right */
    .hanging-signs {
        margin-top: 0; 
        flex-direction: row; 
        justify-content: center;
        align-items: center;
        width: 90%; /* This guarantees it will NEVER touch the edges of an iPhone SE */
        gap: 2%; /* A fluid gap that scales beautifully on all screens */
        padding-bottom: 15px; 
        height: auto; /* Strip away the massive desktop height and padding */
        padding-top: 0; /* Strip away the massive desktop height and padding */
    }

    /* THE FLUID FIX: We target the <a> links themselves so Flexbox behaves properly */
    .hanging-signs a {
        flex: 1; /* Tells all 5 links to share the row equally */
        display: flex;
        justify-content: center;
    }

    /* The images now just safely fill their perfectly measured <a> containers */
    .menu-sign {
        width: 100%; 
        max-width: 75px; /* Caps the size so they don't get massive on iPads */
        height: auto;
    }

    /* 3. BOTTOM ROW: The Parchment */
    .parchment-runner {
        order: 3;
        width: 95%; 
        margin-bottom: 40px;
        align-self: center; /* THE FIX: Overrides the desktop stretch and re-centers the paper! */
    }

    .post-wood {
        display: none; 
    }

    .content-area {
        padding: 0px 30px; 
    }

    /* 4. MOBILE TYPOGRAPHY: Shrinks the unbreakable H1 so it fits perfectly on narrow phones */
    .content-area h1 {
        font-size: 1.8rem; /* The magic number for an iPhone SE */
        margin-top: 20px;
    }
    
    .content-area h2 {
        font-size: 1.5rem; 
    }

    /* 5. BOOKS PAGE FIX: Tightens the space above the book cover on mobile */
    .book-hero {
        padding-top: 20px;
    }
}


/* ==================================================================================
                             9. THE FUN PLAYGROUND MODULES
   ================================================================================== */
.fun-modules-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 650px;
    margin: 0 auto 40px auto;
}

.fun-module {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* The Left Side: The Custom Icon */
.module-icon {
    flex-shrink: 0;
    width: 45%; 
    max-width: 250px;
}

.module-icon img {
    width: 100%;
    height: 150px;
    object-fit: scale-down;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.coloring-icon img {
    width: 250px; /* The rigid width of your picture frame */
    height: 150px; 
    object-fit: cover; 
    display: block;
    border-radius: 12px;
    border: 1px solid #603416;
    box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* The Swing Effect for the custom icons */
.module-icon a:hover img {
    transform: scale(1.05) rotate(-2deg);
    filter: brightness(1.1);
}

.coloring-icon:hover img {
    transform: scale(1.05) rotate(-2deg);
    filter: brightness(1.1);
}

/* The Right Side: Patrick Stewart Copy */
.module-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.module-content h2 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center; /* Overrides the global parchment center rule */
}

.module-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: center; /* Overrides the global parchment center rule */
    margin-bottom: 20px;
}

/* A smaller, fainter divider to sit between modules */
.module-divider {
    width: 30%; 
    margin: 20px auto;
    opacity: 0.5;
}

/* MOBILE RESPONSIVENESS: The Stack */
@media (max-width: 768px) {
    .fun-module {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .fun-modules-container {
        margin-bottom: 20px;
    }

    .module-icon {
        width: 70%;
        max-width: 300px;
    }

    /* Centers the text on narrow phone screens */
    .module-content {
        align-items: center;
        text-align: center;
    }

    .module-content h2,
    .module-content p {
        text-align: center; 
    }
}

.wally-callout {
    text-align: center; 
    margin: 0 auto 30px auto; 
    max-width: 85%; 
    padding: 15px 20px; 
    
    /* THE MACDUFF MASTER THEME */
    background-color: rgba(253, 246, 227, 0.8); /* MacDuff Cream */
    border: 1px solid #603416; /* MacDuff Brown Border */
    border-radius: 12px; /* Master Rounded Corners */
    box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.5); /* Master Drop Shadow */
}

.wally-callout p {
    margin: 0 !important; 
    font-size: 0.9rem !important; /* THE FIX: Shrinks the text down */
    line-height: 1.5 !important;
}

.recipe-box {
    max-width: 500px;
    margin: 0 auto;
    text-align: left; 
}

.recipe-box h2 {
    text-align: left;
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.recipe-list {
    font-size: 1.2rem;
    
    /* DIAL 1: Spacing for sentences inside the same bullet point */
    line-height: 1.8; /* We bumped this up from 1.8! */
    
    margin-bottom: 20px;
    padding-left: 20px; 
}

.recipe-list li {
    /* DIAL 2: The empty gap between one bullet point and the next */
    margin-bottom: 2px; /* We bumped this up from 10px! */
}

/* THE SUB-BULLETS (For dramatic marshmallow effect!) */
.recipe-list ul li {
    font-size: 1rem; /* Shrinks the text down from the master 1.2rem */
    line-height: 1.4; /* Pulls the dramatic lines closer together */
    margin-bottom: 5px; /* Removes the big gap between these specific sub-bullets */
    list-style-type: circle; /* Gives them a cool hollow circle bullet! */
}

/* ==================================================================================
                          10. TALL MONITOR FIX (Quad HD / 4K)
   ================================================================================== */
@media (min-height: 980px) and (min-width: 1025px) {
    /* Once the screen gets this tall, the wooden post hits its 850px limit. 
       We lock the signs to hard pixels so they stop sliding down the pole! */
    .hanging-signs {
        padding-top: 215px; 
        gap: 20px;
    }
    .menu-sign {
        height: 65px; 
    }
    .fun-modules-container {
        margin-bottom: 40px; /* THE DIAL: Adjust this up or down to add space after the final button */
    }
    .layout-col-center {
        width: 950px; /* THE DIAL: Increase or decrease this from the default 700px to widen the parchment */
    }
    #guestbook-map {
        height: 60vh; /* THE DIAL: Adjust this up or down to change the map height */
        min-height: 600px; /* THE SAFETY DIAL: Ensures it doesn't shrink below this pixel height */
    }
}

/* ==================================================================================
                                 11. THE FARM FOOTER
   ================================================================================== */
.farm-footer {
    position: absolute; 
    bottom: 12px; /* Nails it exactly 12 pixels from the bottom edge of the screen */
    width: 100%; 
    text-align: center;
    z-index: 10000; /* Keeps it floating above the artwork */
}

.farm-footer a {
    font-family: 'Delius', sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    color: #000; 
    text-decoration: none;
    
    /* THE HALO: This is now the 2-layer shadow from your previous hover state */
    text-shadow: 
        0px 0px 6px rgba(255, 255, 255, 1),
        0px 0px 15px rgba(244, 232, 206, 1);
        
    transition: all 0.3s ease;
}

.farm-footer a:hover {
    color: #000; /* Darkens to pure black when touched */
    
    /* THE HALO: This is now the 3-layer shadow from your previous default state */
    text-shadow: 
        0px 0px 4px rgba(255, 255, 255, 0.9),
        0px 0px 8px rgba(255, 255, 255, 0.8),
        0px 0px 12px rgba(244, 232, 206, 1);
}

/* ==================================================================================
                             12.  FOCUS MODE
   ================================================================================== */

/* 1. HIDE THE SIGNPOST MENU (But keep the flex column intact for centering) */
body.focus-mode .signpost-menu {
    display: none !important;
}

/* 2. THE DIMMING OVERLAY */
.focus-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75); 
    z-index: 10; 
    pointer-events: none; 
    
    /* THE FIX: We use opacity instead of display so it can be animated! */
    opacity: 0; 
    transition: opacity 2.5s ease; /* Here is your 2.5s speed dial! */
}

body.focus-mode .focus-overlay {
    opacity: 1; 
}

/* 3. SPOTLIGHT ON YOUR ACTUAL GRAPHICS */
body.focus-mode .marquee-sign,
body.focus-mode .parchment-runner {
    position: relative;
    z-index: 20; /* Pulls your existing graphics ABOVE the dark overlay */
}

/* 4. ENSURE THE FOOTER STAYS LIT */
body.focus-mode .farm-footer {
    z-index: 20;
}

/* 5. THE CLOSE BUTTON */
.close-btn {
    display: block;
    text-align: left; 
    font-family: 'Delius', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    color: #603416; /* Deep MacDuff brown */
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.3s ease;
    top: 10px !important;
}

.close-btn:hover {
    color: #000; /* Darkens on hover */
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8); /* A little glow when touched */
}

/* Shrinks just the word "CLOSE" while keeping the emoji large */
.close-text {
    font-size: 1rem; /* Adjust this up or down to find the perfect size */
    font-style: italic;
}

/* ==================================================================================
                                13. BOOKS PAGE STYLES
   ================================================================================== */

.book-hero {
    text-align: center;
    margin-bottom: 0px;
    padding-top: 30px;
}

.book-cover {
    width: 80%;
    max-width: 400px; 
    height: auto;
    margin: 0 auto 40px auto;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease; 
    border-radius: 12px;
    border: 1px solid #603416;
    box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.5);
}

.book-cover:hover {
    transform: scale(1.05) rotate(-3deg);     /* The scale gives it a slight pop, the rotate gives it the tilt */
    filter: brightness(1.15);                 /* The brightness turns up the lights by 15% */
}

/* Action Buttons */
.book-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.action-btn {
    display: inline-block;
    padding: 2px 24px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.2s ease;
    white-space: nowrap; /* Forces the text to stay on one single line */
}

.btn-primary {
    background-color: #603416; /* MacDuff Brown */
    color: #fdf6e3; /* MacDuff Cream */
    border: 2px solid #603416;
    box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.5);
}

.btn-primary:hover {
    background-color: #4a2710;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 5px 12px 20px rgba(0, 0, 0, 0.6); 
}

.btn-secondary {
    background-color: transparent;
    color: #603416;
    border: 1px solid #603416;
}

.btn-secondary:hover {
    background-color: rgba(96, 52, 22, 0.1);
    transform: translateY(-2px);
}

/* Trailer Layout */
.trailer-text {
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 20px;
}

.trailer-img {
    width: 90%;
    max-width: 500px;
    height: auto;
    display: block;
    margin: 30px auto;
    border-radius: 12px;
    border: 1px solid #603416;
    box-shadow: 5px 8px 15px rgba(0,0,0,0.5);
}

/* Franchise Teaser Section */
.franchise-teaser {
    margin-top: 0px;
    padding-top: 0px;
    text-align: center;
}

.teaser-img {
    width: 70%;
    max-width: 350px;
    height: auto;
    margin: 20px auto 20px auto;
    opacity: 1; /* Fades the placeholder to make it look mysterious */
    filter: grayscale(100%);
    transition: opacity 0.3s ease;
}

.teaser-img:hover {
    opacity: 1;
}

.teaser-title {
    font-size: 1.5rem;
    color: #603416;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Mini Promo Buy Box */
.mini-promo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin: 40px auto 50px auto;
    padding: 20px;
    max-width: 400px;
    border-radius: 12px;
    border: 1px solid #603416;
    box-shadow: 5px 8px 15px rgba(0,0,0,0.5);
}

/* Stacks the title and button vertically */
.mini-promo-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px; /* The breathing room between the title and the button */
}

/* Styles the book title */
.mini-promo-title {
    margin: 0;
    color: #603416;
    font-size: 1.2rem;
    line-height: 1.3;
    text-align: center;
    font-weight: normal; 
}

.mini-cover {
    width: 120px; /* Keeps the book nice and small */
    height: auto;
    border-radius: 4px;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
    /* Added transition for smooth animations */
    transition: transform 0.3s ease, filter 0.3s ease; 
}

/* Added the hover effects! */
.mini-cover:hover {
    transform: scale(1.05) rotate(-3deg); 
    filter: brightness(1.15); 
}

/* Make it stack neatly on ALL phone screens (up to 480px) */
@media (max-width: 480px) {
    .mini-promo {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    /* Makes the book a little larger since it now has the whole row to itself! */
    .mini-cover {
        width: 150px; 
    }
}

/* THE HOVER: The Cream Halo Swing for the Main Cover */
a:hover .book-cover {
    transform: scale(1.025) rotate(-.75deg); 
    filter: 
        drop-shadow(8px 15px 12px rgba(0,0,0,0.5)) 
        drop-shadow(0 0 15px rgba(244, 232, 206, 0.8)) 
        brightness(1.1); 
}

/* THE HOVER: The Cream Halo Swing for the Mini Promo Cover */
a:hover .mini-cover {
    transform: scale(1.20) rotate(-2deg); 
    filter: 
        drop-shadow(8px 15px 12px rgba(0,0,0,0.5)) 
        drop-shadow(0 0 15px rgba(244, 232, 206, 0.8)) 
        brightness(1.1); 
}

/* ==================================================================================
                       14. COMING ATTRACTIONS THEATRICAL SEQUENCE
   ================================================================================== */
.theatrical-container {
    width: 90%;
    max-width: 500px;
    margin: 30px auto 10px auto;
    position: relative;
    cursor: pointer;
    transition: transform 4s ease-in-out;
}

/* THE GLASS SHIELD: Catches the mouse so the hover swing works, and protects the art! */
.theatrical-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
}

/* Decoupled Wrappers for simultaneous animation */
.color-fade-wrapper {
    filter: grayscale(100%);
    transition: filter 4s ease-in-out;
}

.whack-wrapper {
    position: relative;
    width: 100%;
    border-radius: 12px;
    box-shadow: 8px 15px 12px rgba(0,0,0,0.5);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; 
    background-color: rgba(0, 0, 0, 0.01); 
}

/* Desktop Hover (Only active BEFORE they click) */
.theatrical-container:not(.is-playing):not(.is-finished):hover .whack-wrapper {
    transform: scale(1.025) rotate(-0.75deg);
    box-shadow: 8px 15px 12px rgba(0,0,0,0.5);
    filter: drop-shadow(0 0 15px rgba(244, 232, 206, 0.8));
}

.teaser-base-img, .teaser-shadow-img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

.teaser-shadow-img {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    transition: opacity 4s ease-in-out;
}

/* --- ACT 3: THE BLOOM & WHACK --- */
.theatrical-container.is-playing {
    transform: scale(1.05); /* Slow zoom in */
}

.theatrical-container.is-playing .color-fade-wrapper {
    filter: grayscale(0%); /* Slow color bloom */
}

.theatrical-container.is-playing .teaser-shadow-img {
    opacity: 1; /* Slow shadow reveal */
}

.theatrical-container.is-playing .whack-wrapper {
    animation: flashlightWhack 4s ease-in-out forwards;
}

/* --- ACT 5: THE FINISHED STATE --- */
.theatrical-container.is-finished {
    transform: scale(1.05); /* Locks the zoom */
    cursor: default;
}
.theatrical-container.is-finished .color-fade-wrapper {
    filter: grayscale(0%);
}
.theatrical-container.is-finished .teaser-shadow-img {
    opacity: 1;
}

/* Text Formatting */
.instruction-text {
    text-align: center;
    font-style: italic;
    font-size: 1rem;
    padding-top: 30px;
    margin-top: 0px;
    color: #603416;
    opacity: 1;
    transition: opacity 0.5s ease;
    min-height: 130px;
}

.teaser-reveal-text {
    opacity: 0;
    text-align: center;
    max-height: 0;
    overflow: hidden;
    transition: opacity 1s ease 0.5s; /* The 0.5s delay lets the house lights come up first! */
}

.teaser-reveal-text.show-text {
    opacity: 1;
    max-height: 200px;
    margin-top: 20px;
}

/* THE FLASHLIGHT KEYFRAMES */
@keyframes flashlightWhack {
    0%, 25% { filter: brightness(1); transform: translateX(0); }
    26% { filter: brightness(0); transform: translateX(-4px); }
    27% { filter: brightness(1.2); transform: translateX(4px); }
    28% { filter: brightness(0); transform: translateX(-2px); }
    29%, 65% { filter: brightness(1); transform: translateX(0); }
    66% { filter: brightness(0.2); transform: translateX(4px); }
    67% { filter: brightness(1.2); transform: translateX(-4px); }
    68%, 100% { filter: brightness(1); transform: translateX(0); }
}

/* ==================================================================================
                                 15. THE CONTACT PAGE
   ================================================================================== */

.stacked-contact-section {
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.stacked-contact-section p {
    margin-bottom: 20px;
    /* Pushes the text to the master paragraph size */
    font-size: 1.3rem; 
    line-height: 1.3;
}

/* THE CUSTOM DIAL FOR THE CONTACT PHOTO */
.contact-photo {
    width: 100%;
    max-width: 350px; /* Made slightly larger since it has the whole row to itself! */
    height: auto;
    display: block;
    margin: 0 auto 30px auto;
    border-radius: 12px;
    border: 1px solid #603416;
    box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.5);
}

/* THE BUTTON WIDTH FIX */
.uniform-btn {
    width: 260px; /* The Magic Number: Locks both buttons to the exact same width! */
    box-sizing: border-box; /* Ensures the padding doesn't break the width */
    text-align: center;
    display: inline-block;
}

.contact-col p {
    font-size: 1.1rem;
    margin-bottom: 15px;
    margin-top: 5px;
    line-height: 1.25;
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 600px) {
    .contact-columns {
        flex-direction: column;
        gap: 20px;
    }
}

/* THE CUSTOM DIAL FOR THE CONTACT PHOTO */
.contact-photo {
    width: 100%;
    max-width: 185px; /* Change this number to dial in the exact size you want! */
    height: auto;
    display: block;
    margin: 0 auto 30px auto;
}

/* ==================================================================================
                                 16. THE SCRAPBOOK VAULT
   ================================================================================== */

/* THE CHRONOLOGICAL TIMELINE CONTAINER */
.scrapbook-timeline {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers all the photos perfectly */
    gap: 60px; /* Beautiful breathing room between each memory */
    margin: 40px auto 60px auto;
    width: 100%;
}

/* THE PHYSICAL PHOTO CARD (Base Styles) */
.photo-card {
    background: #fcfcf9; /* Slightly off-white photo paper */
    padding: 12px 12px 40px 12px; /* Thicker bottom border for handwriting! */
    border-radius: 2px;
    box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.4);
    position: relative;
    box-sizing: border-box; /* Ensures the padding doesn't break your exact widths */
    z-index: 1;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* THE WIDTH DIALS: Matches your Photoshop exports exactly! */
.photo-card.landscape {
    width: 100%;
    max-width: 550px; 
}

.photo-card.portrait {
    width: 100%;
    max-width: 350px; 
}

.photo-card img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid rgba(0,0,0,0.1); 
    border-radius: 2px;
}

/* THE HANDWRITTEN CAPTION */
.photo-caption {
    font-family: 'Delius', cursive;
    color: #3b2313; 
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.2;
    position: absolute;
    bottom: 12px; /* Pushed up slightly to center in the white space */
    left: 0;
    right: 0;
}

/* THE SUBTLE TILT: Gives the column a slightly organic, hand-placed feel */
.photo-card:nth-child(odd) { transform: rotate(-1.5deg); }
.photo-card:nth-child(even) { transform: rotate(1.5deg); }

/* THE INTERACTIVE HOVER: Straightens the photo and brings it closer to the reader */
.photo-card:hover {
    transform: scale(1.05) rotate(0deg);
    box-shadow: 8px 15px 25px rgba(0, 0, 0, 0.5);
    z-index: 10; 
}

/* ==================================================================================
                                 17. THE GUESTBOOK MAP
   ================================================================================== */
#guestbook-map {
    width: 100%;
    box-sizing: border-box;
    height: 44h; 
    min-height: 44vh; 
    border-radius: 12px;
    border: 2px solid #603416;
    box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    background-color: #eaddc5; 
    z-index: 1; 
}

/* ===== iPhone SE (375x667) ===== */
@media screen and (max-width: 375px) and (max-height: 667px) {
    #guestbook-map {
        height: 49vh !important; /* THE DIAL: Adjust this hard number up or down */
        min-height: 49vh !important; /* THE LOCK: Keep this number matched to the one above */
    }
}

/* ===== iPhone X (375x812) ===== */
@media screen and (max-width: 375px) and (min-height: 810px) and (max-height: 820px) {
    #guestbook-map {
        height: 59vh !important; /* THE DIAL: Adjust for iPhone X */
        min-height: 59vh !important; 
    }
}

/* ===== iPhone 12 Pro (390x844) ===== */
@media screen and (min-width: 380px) and (max-width: 395px) and (min-height: 840px) {
    #guestbook-map {
        height: 58vh !important; /* THE DIAL: Adjust for iPhone 12 Pro */
        min-height: 58vh !important; 
    }
}

/* ===== Galaxy S20 Ultra & A51/71 (412x914+) ===== */
@media screen and (min-width: 400px) and (max-width: 420px) and (min-height: 890px) {
    #guestbook-map {
        height: 61vh !important; /* THE DIAL: Adjust for tall Androids */
        min-height: 61vh !important; 
    }
}

/* ===== iPad Mini (768x1024) ===== */
@media screen and (min-width: 768px) and (max-width: 768px) and (min-height: 1024px) {
    #guestbook-map {
        height: 59vh !important; /* THE DIAL: Adjust for iPad Mini */
        min-height: 59vh !important; 
    }
}

/* ===== iPad (810x1080) ===== */
@media screen and (min-width: 810px) and (max-width: 810px) and (min-height: 1080px) {
    #guestbook-map {
        height: 55vh !important; /* THE DIAL: Adjust for standard iPad */
        min-height: 55vh !important; 
    }
}

/* ===== iPad Air (820x1180) ===== */
@media screen and (min-width: 820px) and (max-width: 820px) and (min-height: 1180px) {
    #guestbook-map {
        height: 64vh !important; /* THE DIAL: Adjust for iPad Air */
        min-height: 64vh !important; 
    }
}

/* ===== iPad Pro (1024x1366 or 834x1194) ===== */
@media screen and (min-width: 830px) and (max-width: 1024px) and (min-height: 1190px) {
    #guestbook-map {
        height: 68vh !important; /* THE DIAL: Adjust for iPad Pro */
        min-height: 68vh !important; 
    }
}

/* THE TALL MONITOR OVERRIDE */
@media (min-height: 980px) and (min-width: 1025px) {
    #guestbook-map {
        height: 62vh; /* THE DIAL: Adjust this up or down */
        min-height: 62vh; /* THE SAFETY DIAL */
    }
}

/* THE ANTIQUE FILTER: This is the magic trick! It turns standard maps into vintage parchment */
.leaflet-tile-pane {
    filter: sepia(0.6) hue-rotate(-15deg) contrast(0.9) brightness(0.9);
}

/* THE CUSTOM POPUP: Makes the name tags look like MacDuff Farm signs */
.leaflet-popup-content-wrapper {
    background-color: #fcfcf9; /* Slightly off-white photo paper */
    border: 2px solid #603416;
    border-radius: 8px;
    box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.4);
}

.leaflet-popup-tip {
    background-color: #fcfcf9;
    border-bottom: 2px solid #603416;
    border-right: 2px solid #603416;
}

/* THE POPUP TEXT */
.leaflet-popup-content {
    font-family: 'Delius', cursive;
    color: #3b2313;
    font-size: 1.2rem;
    text-align: center;
    margin: 10px 15px;
    line-height: 1.4;
}

.popup-name {
    font-weight: bold;
    font-size: 1.4rem;
    display: block;
    border-bottom: 1px solid rgba(96, 52, 22, 0.3);
    padding-bottom: 5px;
    margin-bottom: 5px;
}

/* THE GUESTBOOK HOVER TOOLTIP */
.wally-tooltip {
    background-color: #fcfcf9;
    border: 2px solid #603416;
    color: #3b2313;
    font-family: 'Delius', cursive;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 6px;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
}

/* Hides the default little triangle arrow to keep the tag clean */
.wally-tooltip::before {
    display: none !important; 
}

/* Hides the default Leaflet close button because our custom popups look better without it */
.leaflet-popup-close-button {
    display: none !important;
}

/* Camouflages the required open-source credit line into the parchment */
.leaflet-container .leaflet-control-attribution {
    background: rgba(244, 232, 206, 0.7) !important;
    color: #603416 !important;
    font-family: sans-serif;
}
.leaflet-control-attribution a {
    color: #603416 !important;
}

/* ==================================================================================
                                 18. THE SPLASH SCREEN
   ================================================================================== */
.splash-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #f4e8ce; 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    
    /* THE NEW TIMELINE: Combines the lights and the fade */
    animation: 
        theaterLights 5s ease forwards,
        fadeOutSplash 1s ease 5s forwards;
}

/* 🛑 DEV MODE TOGGLE: Uncomment the line below to turn off the splash screen while testing 🛑 */
/* .splash-screen { display: none !important; } */

.intro-wrapper {
    position: relative;
    width: 80%;
    max-width: 800px; 
}

.kilt-dimmed {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0.4) grayscale(60%); 
}

.kilt-bright {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: auto;
    clip-path: inset(0 100% 0 0); 
    
    /* Starts at 1.5s (after lights are fully up) and runs for 2 seconds */
    animation: spotlightSweep 2s ease-in-out 1.5s forwards;
}

/* --- THE KEYFRAMES --- */

@keyframes theaterLights {
    0%   { filter: brightness(0); } /* 0.0s: Pitch black */
    41%  { filter: brightness(1); } /* 1.5s: House lights up to normal */
    82%  { filter: brightness(1); } /* 4.5s: Hold the lights steady */
    100% { filter: brightness(0); } /* 5.5s: House lights out (back to pitch black) */
}

@keyframes spotlightSweep {
    0%   { clip-path: inset(0 100% 0 0); } 
    100% { clip-path: inset(0 0 0 0); }  
}

@keyframes fadeOutSplash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}