@charset "UTF-8";

/* ============================================================
   MAYA-HTML5 MASTER CSS: SCHOLARLY DUAL-SPINE (v6.8)
   Target: 450+ Regular Pages (Uxmal, Rio Bec, Tikal, etc.)
   Layout: Centered 800px | 60/90 Spines | 0.95rem Sans Aux
   ============================================================ */

/* --- 1. BASE STYLES --- */
body {
    background-color: #dfead3;
    color: #333;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* --- 2. UNIVERSAL CONTAINER --- */
main, .main-container {
    width: 95%;
    max-width: 800px; 
    margin: 40px auto; 
    display: block;
}

/* --- 3. TYPOGRAPHY (THE DUAL-SPINE STANDARD) --- */

/* Mobile Default: Always Sans-Serif */
main p, section p, blockquote p, .ref, .nav, .site-nav {
    color: #333;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --- 3.1 BOLD REFINEMENT --- */
/* This tames the default browser bold to a more elegant medium weight */
main b, section b, blockquote b {
    font-weight: 500 !important; 
    color: #222; /* Slightly darker than body text for a subtle "pop" */
}

/* Desktop Transformation: Triggers on iMac/Tablets */
@media only screen and (min-width: 768px) {
    /* Scholarly Commentary: Iowan Serif */
    main p, section p, blockquote p {
        font-family: "Iowan Old Style", "Apple Garamond", "Palatino Linotype", serif;
        font-size: 1.15rem;
        line-height: 1.6;
    }

    /* THE 0.95rem SANS NAVIGATION */
    .nav, .site-nav {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: 0.95rem !important; 
    }

    /* THE 60px MAIN SPINE */
    main p, .nav, .site-nav {
        margin-left: 60px;
        max-width: 640px; 
        padding-left: 0;
        padding-right: 0;
        text-align: left;
    }
}

/* Prevent long URLs from breaking mobile layout */
    p, .ref {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

/* --- 4. BLOCKQUOTES (100px SPINE) --- */
blockquote {
    margin-top: 0.8em;
    margin-bottom: 1.2em;
}
/* margin-left + max-width MUST EQUAL 700px */
@media only screen and (min-width: 768px) {
    blockquote {
        margin-left: 100px !important; 
        margin-right: auto !important;
        max-width: 600px !important; /* Wall: 700px */
        padding: 0 !important;
    }

    blockquote p { 
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important; 
    }
}

/* --- 5. THE HEADER HIERARCHY --- */
h1.caption, h2.caption, h3.caption {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 400 !important; 
    text-transform: uppercase !important;
    letter-spacing: 1px;
    color: #444 !important;
    text-align: left;
    margin-bottom: 10px;
    line-height: 1.2;
    scroll-margin-top: 20px;
}

h1.caption { font-size: 1.3rem; margin-top: 45px; }
h2.caption, h3.caption { margin-top: 40px; }
h2.caption { font-size: 1.15rem; }
h3.caption { font-size: 1.0rem; }

@media only screen and (min-width: 768px) {
    h1.caption, h2.caption, h3.caption {
        margin-left: 60px;
        max-width: 640px;
    }
}

/* --- 6. THE LINK ENGINE --- */
a { color: #444; text-decoration: none; border-bottom: 1px solid #aaa; }
a:hover { color: #aa0000 !important; border-bottom: 1px solid #aa0000 !important; }

.nav, .site-nav {
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
    margin-bottom: 25px;
}
.nav a, .site-nav a { color: #aa0000 !important; border-bottom: 1px solid transparent; }

/* --- 7. CITATIONS & SNUGGLE LOGIC --- */

/* 1. Base Photo Style */
.photo { width: 100%; text-align: center; margin-bottom: 25px; }
.photo img { max-width: 100%; height: auto !important; display: block; margin: 0 auto; border: 2px solid #000; box-sizing: border-box; }

/* 2. Reference Style (0.95rem Sans) */
.ref { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 0.95rem; 
    line-height: 1.6;
    font-style: italic; 
    color: #666; 
}

@media only screen and (min-width: 768px) {
    .ref {
        margin-left: 60px; 
        max-width: 640px;
        padding-left: 0;
    }

    /* EXTERNAL SNAP: Citations BELOW a blockquote */
    /* Math: 100px margin + 600px width = 700px Wall */
    blockquote + .ref {
        margin-left: 100px !important; 
        max-width: 600px !important;
        margin-top: -13px !important; /* Your preferred snuggle */
    }

    /* INTERNAL BREATHING: Citations INSIDE a blockquote */
    blockquote .ref {
        display: block !important;
        margin-left: 0 !important;
        padding-top: 11px !important; /* Your "Goldilocks" padding */
        margin-top: 0 !important;
        max-width: 600px !important;
    }
}

/* --- 7.3 THE SNUGGLE RULES (Global) --- */
.photo + .ref { margin-top: -20px !important; }
main p + .ref { margin-top: -15px !important; }
.map-container + .ref { margin-top: -20px !important; }
/* 2. INTERNAL BLOCKQUOTE: Pushes the citation DOWN from the quote text */
/* We switch to PADDING here because padding does not "collapse" */
blockquote .ref { 
    display: block !important; 
    margin-top: 0 !important;      /* Reset the failing margin */
    padding-top: 11px !important;  /* YOUR NEW RELIABLE LEVER */
    margin-left: 0 !important;
}
/* --- 8. HORIZONTAL RULES (General) --- */
hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin-top: 40px;
    margin-bottom: 40px;
}

@media only screen and (min-width: 768px) {
    hr {
        margin-left: 60px !important; 
        max-width: 640px;
        margin-right: auto;
    }
}


/* --- 9. FOOTER & MAP STABILIZER --- */

/* 9.1. Universal Italic Footer */
footer, .footer {
    width: 100%;
    max-width: 800px; 
    margin: 40px auto !important;
    border-top: none; 
    padding-top: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #555;
    text-align: left;
    font-style: italic;
}

/*9.2. THE AUTOMATIC DIVIDER (Injected globally) */
footer::before, .footer::before {
    content: "";
    display: block;
    border-top: 1px solid #ccc;
    /* Lever to control space between last HOME : : : MAP and footer */
    margin-top: 0px;
    margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {
    /* ALIGN FOOTER & LINE TO THE 60px SPINE */
    footer, .footer {
        padding-left: 60px !important; /* Moves text to the scholarly spine */
        max-width: 700px !important;    /* 60px + 640px content = 700px Right Wall */
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* Apply the same logic to the automatic divider line */
    footer::before, .footer::before {
        margin-left: 0 !important; 
        max-width: 640px;            
    }

    /* SAFETY: If the footer is already INSIDE <main>, zero out padding to avoid 120px indent */
    main footer, main .footer {
        padding-left: 0 !important;
        margin-left: 60px !important;
        max-width: 640px !important;
    }
}
/* 9.3. Interactive Map Container */
.map-container { position: relative; display: block; line-height: 0; margin: 20px auto; max-width: 100%; box-sizing: border-box; }
.map-container img { width: 100% !important; height: auto !important; border: 2px solid #000; pointer-events: none; }
.map-container svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; cursor: pointer; }

/* 9.4. SVG Hotspot Fix (Transparent Links) */
.map-container svg a { border: none !important; background: none !important; }
.map-container svg a * {
    fill: rgba(0,0,0,0) !important;
    stroke: none !important;
    pointer-events: all !important;
}

/* --- 10. MOBILE ENGINE --- */
@media only screen and (max-width: 767px) {
    main p, .ref, .nav, .site-nav { padding-left: 15px; padding-right: 15px; margin-left: 0; }
    blockquote { margin-left: 25px; margin-right: 10px; }
    h1.caption, h2.caption, h3.caption { margin-left: 0; padding-left: 15px; }
}