/***********************************************/
/* Fonts and CSS Reset                         */
/***********************************************/

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/* Custom properties for reusable values */
:root {
    --primary-color: #000000;
    --secondary-color: #ffffff;
    --accent-red: #8B0000;
    --navbar-bg: #EAEAEA;
    --content-bg: #ffffff;
    --services-content-bg: #ffffff;
    --manila-bg: #faf1d0;
    --shadow-light: #b3b3b3;
    --shadow-medium: #333333;
    --shadow-dark: #1a1a1a;
    --container-max-width: 900px;
    --spacing-sm: 7px;
    --spacing-md: 15px;
    --font-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
    --font-size-xsm: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 22px;
    --font-size-xxl: 26px;
    --accent-red-heart: #8B0000;
    --accent-orange-heart: #FF6200;
    --accent-pink-heart: #FF69B4;
    --accent-olive: olive;
    --accent-branch: tan;
    --accent-orange: #FFB300;
    --sunlight-breakthru: yellow;
    --lakefront-mist: rgb(213, 254, 248);
    --link-blue: #0A3161;
    --red: red;
}

/* Font imports */
@font-face {
    font-family: 'TopSecretStamp';
   src: url('https://localhost/assets/fonts/TopSecretStamp.woff2') format('woff2'),
       url('https://localhost/assets/fonts/TopSecretStamp.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TopSecretStamp';
    font-style: normal;
    font-weight: normal;
    src: local('TopSecretStamp Regular'), url('https://www.cityilove.com/assets/fonts/TopSecretStamp.woff') format('woff');
}

/* Meyer Reset v2.0 for consistent baseline */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/***********************************************/
/* General HTML Tag Styles                     */
/***********************************************/

body {
    font-family: var(--font-monospace);
    z-index: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
 
}

body::-webkit-scrollbar {
    display: none;
}

#dark {
    background-color: #222222;
    color: var(--secondary-color);
}

#light {
    background-color: var(--content-bg);
    color: var(--primary-color);
}

h1 a {
    color: #FFC107;
    text-decoration: underline;
    transition: color 0.2s ease;
}

h1 a:hover,
h1 a:focus {
    color: #FFB300;
}

h2 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin-left: 1%;
    color: var(--accent-red);
}

a {
    color: #5a8066;
    text-decoration: none;
    transition: color 0.2s ease;
}

.red-heart {
    color: var(--accent-red-heart) !important;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
}

.orange-heart {
    color: var(--accent-orange-heart) !important;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
}

.pink-heart {
    color: var(--accent-pink-heart) !important;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
}

.black-text {
    color: var(--primary-color) !important;
}



/***********************************************/
/* Header Section                              */
/***********************************************/

@keyframes heart-beat {
    0% {
        transform: scale(1);
        color: var(--accent-red);
    }
    50% {
        transform: scale(1.2);
        color: rgba(139, 0, 0, 0.9);
    }
    100% {
        transform: scale(1);
        color: var(--accent-red);
    }
}

@keyframes blood-seep {
    0% {
        text-shadow:
            0 0 5px var(--accent-red),
            0 0 10px rgba(139, 0, 0, 0.5);
    }
    50% {
        text-shadow:
            0 0 10px var(--accent-red),
            0 0 20px rgba(139, 0, 0, 0.7),
            0 0 30px rgba(139, 0, 0, 0.3);
    }
    100% {
        text-shadow:
            0 0 5px var(--accent-red),
            0 0 10px rgba(139, 0, 0, 0.5);
    }
}

.website-title-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: #ffffff;
    padding: 3px 0;
    line-height: 24px;
    color: var(--primary-color);
    z-index: 23;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.website-title-banner__title {
    font-family: 'TopSecretStamp';
    color: var(--red);
    font-size: var(--font-size-xl);
    font-weight: 300;
    text-align: center;
    flex: 0 1 auto;
}

.website-title-banner__left {
    flex: 0 1 auto;
    font-size: var(--font-size-md);
    color: #0066cc;
    margin-left: var(--spacing-sm);
}

.website-title-banner__right {
    flex: 0 1 auto;
    font-size: var(--font-size-md);
    color: #cc0000;
    margin-right: var(--spacing-sm);
}

.website-title-banner__right ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.website-title-banner__right li {
    display: inline-block;
    margin: 0 5px;
}

.website-title-banner__icon {
    height: 18px;
    width: auto;
    vertical-align: middle;
    padding: 6px 0;
}

.heart-beat {
    display: inline-block;
    animation: heart-beat 2s ease-in-out infinite,
               blood-seep 2s ease-in-out infinite;
}

/* ==========================================================================
   HORIZONTAL NAVBAR - Main container
   ========================================================================== */
.horizontal-navbar {
    position: fixed;
    top: 33px;
    width: 100%;
    min-width: 320px;                    /* Improved from 33px - prevents squishing on very small phones */
    z-index: 23;
    background-color: #0A3161;
    margin: 0 0 12px;
    font-family: var(--font-monospace);
    font-size: var(--font-size-sm);
    line-height: 1.428571429;
    color: var(--secondary-color);
    font-weight: normal;
    font-style: normal;
    padding: 2px 0;
    display: flex;
    justify-content: space-between;      /* Keeps space for potential future menu on right */
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    box-shadow:
        0 -1px 0 var(--shadow-light),
        0 -2px 1px var(--shadow-medium),
        0 -3px 2px var(--shadow-dark),
        0 1px 0 var(--shadow-light),
        0 2px 1px var(--shadow-medium),
        0 3px 2px var(--shadow-dark);
}

/* Hide scrollbar for cleaner look */
.horizontal-navbar::-webkit-scrollbar {
    display: none;
}

.horizontal-navbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* ==========================================================================
   LEFT SECTION - Contains the documentary photography text
   ========================================================================== */
.horizontal-navbar__left {
    flex: 0 1 auto;
    margin-left: var(--spacing-sm);
    display: flex;
    align-items: center;
}

/* CENTER SECTION - If you use it later */
.horizontal-navbar__center {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* RIGHT SECTION - Ready for future menu / icons */
.horizontal-navbar__right {
    flex: 0 1 auto;
    margin-right: var(--spacing-sm);
    display: flex;
    align-items: center;
}

/* Shared list item styles */
.horizontal-navbar__left li,
.horizontal-navbar__center li,
.horizontal-navbar__right li {
    display: inline-block;
    margin: 0 var(--spacing-md);
}

/* ==========================================================================
   MOBILE / SMALL SCREENS (phones & small tablets)
   - Text never spans full screen width
   - Adds padding on both sides
   - Centers the text
   - Allows wrapping if very long
   ========================================================================== */
@media (max-width: 767px) {
    .horizontal-navbar {
        justify-content: center;           /* Center content when right side is empty */
        padding-left: 0;
        padding-right: 0;
    }

    .horizontal-navbar__left {
        margin-left: 0;                    /* Remove default left margin on mobile */
        flex: 0 1 auto;
    }

    .horizontal-navbar__left li {
        max-width: 90vw;                   /* Caps width at 90% of screen → leaves padding on sides */
        padding: 0 16px;                   /* Breathing room left & right (adjust 12px–20px as needed) */
        margin: 0 auto;                    /* Centers the text block */
        text-align: center;                /* Centers the actual text */
        white-space: normal;               /* Lets text wrap naturally on very small screens */
        line-height: 1.4;                  /* Slightly more readable when wrapped */
    }

    /* Hide empty right side on mobile to save space */
    .horizontal-navbar__right {
        display: none;
    }

    /* Just in case you use center later */
    .horizontal-navbar__center li {
        text-align: center;
    }
}

/* ==========================================================================
   DESKTOP / LARGE SCREENS
   - Text stays centered
   - No width restriction
   - Ready for future right-side menu
   ========================================================================== */
@media (min-width: 768px) {
    .horizontal-navbar__left li {
        text-align: center;                /* Keeps text centered on desktop */
        white-space: nowrap;               /* Optional: prevents wrapping on large screens */
        max-width: none;                   /* No artificial limit */
    }

    .horizontal-navbar__center li {
        text-align: center;
    }

    /* If you add content to right later, you can uncomment this to restore space-between:
    .horizontal-navbar {
        justify-content: space-between;
    }
    */
}

@keyframes navbar-text-pulse {
    0% {
        text-shadow: none;
    }
    50% {
        text-shadow:
            0 0 2px #FFFFFF,
            0 0 4px #FFF7CC,
            0 0 6px #FFE066,
            0 0 8px #FFCA28,
            0 0 12px #FFB300,
            0 0 16px #FF8F00,
            0 0 20px rgba(255, 200, 0, 0.5),
            0 0 24px rgba(255, 147, 0, 0.3);
    }
    100% {
        text-shadow: none;
    }
}

.horizontal-navbar a {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
    outline: 0;
    position: relative;
    animation: navbar-text-pulse 33s ease-in-out infinite;
}

.horizontal-navbar a:hover,
.horizontal-navbar a:focus {
    text-shadow:
        0 -1px 0 var(--secondary-color),
        0 -2px 1px #FF9999,
        0 -3px 2px #FF3333,
        0 -4px 3px #A30000,
        0 2px 1px #A30000,
        0 3px 2px #800000,
        0 4px 3px #4C0000,
        0 5px 4px #FF9999;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: var(--primary-color);
}

/***********************************************/
/* Vertical Navbar Styles                       */
/***********************************************/

/***********************************************/
/* Vertical Navbar Styles                       */
/***********************************************/

.vertical-navbar {
    position: fixed; /* Changed to fixed to float at top when scrolling */
    top: 59px; /* Maintains current top position */
    right:0px;
    /*left: 50%;
    transform: translateX(-50%);*/
    width: 98vw; /* Full viewport width */
    max-width: 300px; /* Adjusted max-width for usability */
    height: 80vh;
    background-color: var(--secondary-color); /* White background */
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 0; /* Starts hidden */
    text-align: left;
    padding: 0px;
    display: flex;
    flex-direction: column;
    font-size: 12pt; /* Base font size increased to 12pt */
    border-radius: 5px;
    border: 8px solid var(--accent-red); /* Heartbeat blood pulse border */
    animation: footer-blood-pool 2s ease-in-out infinite, border-blood-pool 2s ease-in-out infinite;
}

@media (min-width: 621px) {
    .vertical-navbar {
        display: none;
    }
}

.vertical-navbar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.vertical-navbar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}

.vertical-navbar li {
    margin: 5px 0;
}

.vertical-navbar a {
    color: var(--primary-color); /* Black text */
    font-family: 'TopSecretStamp', 'Special Elite', 'Courier New', monospace; /* TopSecretStamp font */
    font-size: 12pt; /* Explicitly set to 12pt for links */
    text-decoration: none;
    padding: 5px 10px;
    display: block;
   /* animation: blood-seep 2s ease-in-out infinite;  Red blood-seep drop shadow */
}

.vertical-navbar a:hover,
.vertical-navbar a:focus {
    background-color: var(--shadow-light); /* Lighter hover effect for white background */
    color: var(--accent-red); /* Red text on hover */
}

.vertical-navbar img {
    height: 33px;
}

.vertical-navbar__close {
    position: absolute;
    top: 5px;
    right: 10px;
   /* font-family: 'TopSecretStamp', 'Special Elite', 'Courier New', monospace;
    font-size: var(--font-size-xl); 
    font-weight: 300;
    color: var(--red); 
    text-shadow: 2px 2px 2px #000000; */
    cursor: pointer;
    line-height: 1;
    text-align: center;
    text-decoration: none;
}

.vertical-navbar__close:hover,
.vertical-navbar__close:focus {
    color: var(--accent-red); /* Slightly darker red on hover */
    text-shadow: 3px 3px 3px #000000; /* Enhanced shadow on hover */
}


/***********************************************/
/* Main Content Section                        */
/***********************************************/

.content-box {
    position: relative;
    max-width: var(--container-max-width);
    margin: 0 auto;
    top: 0;
    padding-bottom: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    position: absolute;
    z-index: 21;
    top: 66px;
    width: 96%;
    min-height: calc(100vh - 60px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
    box-sizing: border-box;
    background-color: #ffffff;
}

main::-webkit-scrollbar {
    display: none;
}

.section-header {
    position: relative;
    width: 100%;
    max-width: var(--container-max-width);
    margin: var(--spacing-sm) 0;
    padding: 0 var(--spacing-sm);
    box-sizing: border-box;
}

.section-header__center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-header__title {
    font-family: 'TopSecretStamp', 'Special Elite', 'Courier New', monospace;
    font-size: var(--font-size-xl);
    font-weight: 100;
    color: var(--primary-color);
    margin: 0;
    padding: 0;
    text-align: center;
    letter-spacing: 0.5px;
    line-height: 1;

    /* Very thin black outline */
    -webkit-text-stroke: 0.6px black;   /* ← try 0.5px, 0.6px, or 0.7px */
    paint-order: stroke fill;           /* stroke draws first → cleaner on thin weights */
    text-stroke: 0.6px black;           /* non-prefixed version (works in Firefox etc.) */
}
.section-header__construction-title {
    font-family: 'TopSecretStamp', 'Special Elite', 'Courier New', monospace;
    font-size: var(--font-size-xl);
    font-weight: 100;
    color: #FFC107; /* Bright yellow for the text fill */
    text-shadow: 2px 2px 2px #000000; /* Black drop shadow for depth */
    margin: 0;
    padding: 0;
    text-align: center;
    letter-spacing: 0.5px;
    line-height: 1;
}

.section-header__title-stamp {
    font-family: 'TopSecretStamp', 'Special Elite', 'Courier New', monospace;
    font-size: var(--font-size-xxl);
    font-weight: 100;
    color: #660000; /* Red text fill */

    
    
}

.section-header__title-stamp a {
    text-decoration: none; /* Removes underline from links */
}

.section-header__small-black_title-stamp {
    font-family: 'TopSecretStamp', 'Special Elite', 'Courier New', monospace;
    font-size: var(--font-size-md);
    font-weight: 100;
    color: #000000; /* Red text fill */
    -webkit-text-stroke: 1px #000000; /* Red outline */
    text-stroke: 1px #000000; /* Fallback for red outline */
    -webkit-text-fill-color: #000000; /* Ensures red fill for compatibility */
    margin: 0;
    padding: 0;
    text-align: center;
    letter-spacing: 0.5px;
    line-height: 1;
}


.section-header__learn-more {
    font-family: var(--font-monospace);
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    text-decoration: none;
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
}

.section-header__learn-more:hover,
.section-header__learn-more:focus {
    text-shadow:
        0 -1px 0 var(--secondary-color),
        0 -2px 1px #FF9999,
        0 -3px 2px #FF3333,
        0 -4px 3px #A30000,
        0 2px 1px #A30000,
        0 3px 2px #800000,
        0 4px 3px #4C0000,
        0 5px 4px #FF9999;
}

@keyframes book-blood-pulse {
    0% {
        box-shadow: none;
        border: 0;
    }
    50% {
        box-shadow:
            0 0 10px var(--accent-red),
            0 0 20px rgba(139, 0, 0, 0.5);
        border: 2px solid var(--accent-red);
    }
    100% {
        box-shadow: none;
        border: 0;
    }
}

.section-header__book {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-family: var(--font-monospace);
    font-size: var(--font-size-md);
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 7px;
    height: 25px;
    line-height: 25px;
    border-radius: 3px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    /*transition: background-color 0.2s ease, text-shadow 0.2s ease, padding 0.2s ease;
    animation: book-blood-pulse 2s ease-in-out infinite;*/
}

.section-header__book:hover,
.section-header__book:focus {
    background-color: var(--secondary-color);
    color: var(--primary-color);
   /* padding: 0 5px;
    border: 2px solid var(--accent-red);
    box-shadow:
        0 0 10px var(--accent-red),
        0 0 20px rgba(139, 0, 0, 0.5);
    text-shadow:
        0 -1px 0 var(--secondary-color),
        0 -2px 1px #FF9999,
        0 -3px 2px #FF3333,
        0 -4px 3px #A30000,
        0 2px 1px #A30000,
        0 3px 2px #800000,
        0 4px 3px #4C0000,
        0 5px 4px #FF9999;*/
}

@keyframes blood-pulse {
    0% {
        box-shadow:
            0 0 10px var(--accent-red),
            0 0 20px rgba(139, 0, 0, 0.5),
            0 -1px 0 var(--shadow-light),
            0 -2px 1px var(--shadow-medium),
            0 -3px 2px var(--shadow-dark),
            0 1px 0 var(--shadow-light),
            0 2px 1px var(--shadow-medium),
            0 3px 2px var(--shadow-dark);
    }
    50% {
        box-shadow:
            0 0 15px var(--accent-red),
            0 0 30px rgba(139, 0, 0, 0.7),
            0 -1px 0 var(--shadow-light),
            0 -2px 1px var(--shadow-medium),
            0 -3px 2px var(--shadow-dark),
            0 1px 0 var(--shadow-light),
            0 2px 1px var(--shadow-medium),
            0 3px 2px var(--shadow-dark);
    }
    100% {
        box-shadow:
            0 0 10px var(--accent-red),
            0 0 20px rgba(139, 0, 0, 0.5),
            0 -1px 0 var(--shadow-light),
            0 -2px 1px var(--shadow-medium),
            0 -3px 2px var(--shadow-dark),
            0 1px 0 var(--shadow-light),
            0 2px 1px var(--shadow-medium),
            0 3px 2px var(--shadow-dark);
    }
}

.video {
    border: 2px solid var(--accent-red);
    max-width: 99.5%;
    width: 99.5%;
    height: auto;
    border-radius: 1px;
    margin: calc(var(--spacing-sm) - 2px) 0;
    background: var(--content-bg);
    box-shadow:
        0 0 10px var(--accent-red),
        0 0 20px rgba(139, 0, 0, 0.5),
        0 -1px 0 var(--shadow-light),
        0 -2px 1px var(--shadow-medium),
        0 -3px 2px var(--shadow-dark),
        0 1px 0 var(--shadow-light),
        0 2px 1px var(--shadow-medium),
        0 3px 2px var(--shadow-dark);
    position: relative;
    animation: blood-pulse 2s ease-in-out infinite;
     margin: var(--spacing-sm) 0; /* Adjusted for narrow screens */
}



.image {
    border: 2px solid var(--accent-red);
    max-width: 98%;
    height: auto;
    border-radius: 1px;
    margin: calc(var(--spacing-sm) - 2px) 0;
    background: var(--primary-color);
    box-shadow:
        0 0 10px var(--accent-red),
        0 0 20px rgba(139, 0, 0, 0.5),
        0 -1px 0 var(--shadow-light),
        0 -2px 1px var(--shadow-medium),
        0 -3px 2px var(--shadow-dark),
        0 1px 0 var(--shadow-light),
        0 2px 1px var(--shadow-medium),
        0 3px 2px var(--shadow-dark);
    position: relative;
    animation: blood-pulse 2s ease-in-out infinite;
}

.image-head {
    width: 100%;
    min-height: 20px;
    background-color: transparent;
}

.image-foot {
    width: 100%;
    min-height: 20px;
    background-color: transparent;
    border-bottom: 1px solid #756f07;
}

.post {
    display: inline-block;
    background-color: var(--content-bg);
    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 16px;
    border: 1px solid;
    border-color: #eee #ddd #bbb;
    border-radius: 5px;
    margin: 1px 5px 10px;
    padding: 5px 16px;
    max-width: 98%;
    overflow-x: hidden;
    overflow-wrap: break-word;
    color: var(--primary-color);
    

    /* Very dark, bold full black shadow at rest */
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.75),
        0 4px 10px rgba(0, 0, 0, 0.65);

    /* Smooth transition for tilt and shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    perspective: 1200px;
}

.post:hover,
.post:focus {
    /* Even darker and more intense black shadow on hover */
    box-shadow: 
        0 14px 28px rgba(0, 0, 0, 0.85),
        0 8px 16px rgba(0, 0, 0, 0.75);

    /* Simple forward tilt + slight lift */
    transform: rotateX(6deg) translateY(-4px);
}

/* Child selectors remain unchanged */
.post p {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.post a {
    color: olive;
    font-weight: 700;
    text-decoration: none;
    outline: 0;
}

.post a:hover,
.post a:focus {
    text-decoration: underline;
    color: orange;
}

.post ul li {
    font-size: 14px;
    font-weight: normal;
    padding: 5px 0;
}
/***********************************************/
/* Footer Section                              */
/***********************************************/

@keyframes footer-blood-pool {
    0% {
        box-shadow:
            0 0 10px var(--accent-red),
            0 0 20px rgba(139, 0, 0, 0.5);
    }
    50% {
        box-shadow:
            0 0 15px var(--accent-red),
            0 0 30px rgba(139, 0, 0, 0.7),
            0 0 40px rgba(139, 0, 0, 0.3);
    }
    100% {
        box-shadow:
            0 0 10px var(--accent-red),
            0 0 20px rgba(139, 0, 0, 0.5);
    }
}

@keyframes border-blood-pool {
    0% {
        border-bottom-width: 8px;
        border-bottom-color: var(--accent-red);
    }
    50% {
        border-bottom-width: 10px;
        border-bottom-color: rgba(139, 0, 0, 0.9);
    }
    100% {
        border-bottom-width: 8px;
        border-bottom-color: var(--accent-red);
    }
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 5px 0;
    text-align: center;
    background-color: var(--primary-color);
    z-index: 22;
    animation: footer-blood-pool 2s ease-in-out infinite;
    border-bottom: 8px solid var(--primary-color);
    animation: footer-blood-pool 2s ease-in-out infinite, border-blood-pool 2s ease-in-out infinite;
}

.copyright-contact {
    font-weight: normal;
    font-size: var(--font-size-sm);
    padding: 5px 0;
    text-align: center;
    color: var(--secondary-color);
    background-color: var(--link-blue);
    animation: navbar-text-pulse 33s ease-in-out infinite;
}

/***********************************************/
/* Miscellaneous Styles                        */
/***********************************************/

.show-more-link {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
    display: block;
    margin-top: var(--spacing-sm);
}

body {
    font-family: var(--font-monospace);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body::-webkit-scrollbar {
    display: none;
}

main {
    position: absolute;
    z-index: 21;
    top: 60px;
    width: 100%;
    min-height: calc(100vh - 69px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
    box-sizing: border-box;
}

main::-webkit-scrollbar {
    display: none;
}

.content-container {
    position: relative;
    max-width: 1044px;
    width: 100%;

    margin: var(--spacing-sm) 0;
    padding: 20px 20px 30px 20px;
    box-sizing: border-box;
    background-color: var(--content-bg);
    border: 2px solid var(--accent-red);
    box-shadow: 0 0 10px var(--accent-red), 0 0 20px rgba(139, 0, 0, 0.5);
    animation: blood-pulse 2s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items:top;
    margin-top: 2px;
}

.text-content {
    position: relative;
    max-width: 1044px;
    width: 100%;

    margin: var(--spacing-sm) 0;
    padding: 20px 20px 30px 20px;
    box-sizing: border-box;
    background-color: var(--content-bg);
    /*border: 2px solid var(--accent-red);
    box-shadow: 0 0 10px var(--accent-red), 0 0 20px rgba(139, 0, 0, 0.5);
    animation: blood-pulse 2s ease-in-out infinite;*/
}

.text-content p {
    font-family: var(--font-monospace);
    font-size: var(--font-size-sm);
    color: var(--secondary-color);
    line-height: 1.5;
    margin: 0 0 var(--spacing-sm);
}

.text-content p.alt-pp {
    font-family: var(--font-Stamp);
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    line-height: 1.5;
    margin: 0 0 var(--spacing-sm);
}

.text-content p.alt-p {
    font-family: 'Special Elite', cursive;
    font-size: var(--font-size-md);
    color: var(--accent-red);
    line-height: 1.6;
    margin: 0 0 var(--spacing-md);
    text-shadow: 0 0 5px rgba(139, 0, 0, 0.5);
}

.text-content h3 {
    font-family: var(--font-monospace);
    font-size: var(--font-size-md);
    color: var(--shadow-medium);
    font-weight: normal;
    margin: var(--spacing-md) 0 var(--spacing-sm);
    animation: navbar-text-pulse 33s ease-in-out infinite;
}

.text-content h3:first-child {
    text-align: center;
}

.text-content ul {
    font-family: var(--font-monospace);
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    list-style-type: upper-roman;
    padding-left: calc(var(--spacing-md) * 2);
    margin: var(--spacing-sm) 0;
}

.text-content ul li {
    color: var(--primary-color);
    font-size: var(--font-size-sm);
    line-height: 1.2;
    margin-bottom: 0;
}

.services-page {
    position: absolute;
    top: 66px;
    background-color: var(--services-content-bg);
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 20px 30px 20px;
    margin-bottom: 40px;
    box-sizing: border-box;
    border: 2px solid var(--accent-red);
    box-shadow: 0 0 10px var(--accent-red), 0 0 20px rgba(139, 0, 0, 0.5);
    animation: blood-pulse 2s ease-in-out infinite;
}

services-page .text-content {
    max-height: calc(100vh - 107px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-red) var(--content-bg);
}

.services-page .text-content::-webkit-scrollbar {
    width: 6px;
}

.services-page .text-content::-webkit-scrollbar-track {
    background: var(--content-bg);
    border-left: 1px solid var(--shadow-medium);
}

.services-page .text-content::-webkit-scrollbar-thumb {
    background: var(--accent-red);
    border-radius: 3px;
}

.services-page .text-content::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 0, 0, 0.9);
}*/

.services-page .section-header__center {
    border-top: 2px solid var(--accent-olive);
    padding-top: var(--spacing-sm);
    animation: blood-pulse-top-bottom 2s ease-in-out infinite;
    background-color: var(--primary-color);
}

.services-page .section-header__title {
    margin: var(--spacing-sm) 0;
}

.services-page .services-list {
    list-style-type: none;
    padding-left: 20px;
    margin: 0;
}

.services-page .services-list li {
    font-family: 'TopSecretStamp', 'Special Elite', 'Courier New', monospace;
    font-size: var(--font-size-lg);
    font-weight: 100;
    color: var(--primary-color);
    text-align: left;
    margin: 0;
    padding: 0;
    line-height: 1;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

.services-page .services-list li:last-child {
    margin-bottom: 0;
}



@keyframes blood-pulse-top-bottom {
    0% {
        box-shadow:
            0 -1px 0 var(--shadow-light),
            0 -2px 1px var(--shadow-medium),
            0 -3px 2px var(--shadow-dark),
            0 1px 0 var(--shadow-light),
            0 2px 1px var(--shadow-medium),
            0 3px 2px var(--shadow-dark),
            0 -4px 10px var(--accent-red),
            0 4px 10px var(--accent-red);
    }
    50% {
        box-shadow:
            0 -1px 0 var(--shadow-light),
            0 -2px 1px var(--shadow-medium),
            0 -3px 2px var(--shadow-dark),
            0 1px 0 var(--shadow-light),
            0 2px 1px var(--shadow-medium),
            0 3px 2px var(--shadow-dark),
            0 -6px 15px var(--accent-red),
            0 6px 15px var(--accent-red);
    }
    100% {
        box-shadow:
            0 -1px 0 var(--shadow-light),
            0 -2px 1px var(--shadow-medium),
            0 -3px 2px var(--shadow-dark),
            0 1px 0 var(--shadow-light),
            0 2px 1px var(--shadow-medium),
            0 3px 2px var(--shadow-dark),
            0 -4px 10px var(--accent-red),
            0 4px 10px var(--accent-red);
    }
}

.inquiry-form {
    font-family: var(--font-monospace);
    font-size: var(--font-size-sm);
    background-color: var(--secondary-color);
    color: var(--primary-color);
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: var(--spacing-sm);
    box-sizing: border-box;
}

@media (max-width: 888px) {
    .services-page .text-content {
        max-width: 96%;
        padding: 5px 5px 63px 5px;
       /* max-height: 130vh;*/
    }
    .services-page {
        padding: 0;
    }
}

.inquiry-form label {
    display: block;
    margin: var(--spacing-sm) 0 var(--spacing-sm);
    font-weight: 100;
    color: var(--primary-color);
}

.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--shadow-medium);
    border-radius: 3px;
    font-family: var(--font-monospace);
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    box-sizing: border-box;
}

.inquiry-form button {
    width: 100%;
    margin-top: var(--spacing-sm);
    background-color: var(--accent-red);
    color: var(--accent-red);
}


.inquiry-form button:hover,
.inquiry-form button:focus {
    background-color: var(--accent-red);
    border: 2px solid var(--secondary-color);
    box-shadow: 0 0 10px var(--secondary-color), 0 0 20px rgba(139, 0, 0, 0.5);
    color: var(--secondary-color);
}

.inquiry-form .form-errors {
    color: var(--accent-red);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(139, 0, 0, 0.1);
    border-radius: 3px;
}

.inquiry-form .form-errors ul {
    list-style-type: disc;
    padding-left: calc(var(--spacing-md) * 2);
    margin: 0;
}

.inquiry-form .form-success {
    color: var(--primary-color);
    background: rgba(0, 0, 0, 0.05);
    padding: var(--spacing-sm);
    border-radius: 3px;
    margin-bottom: var(--spacing-sm);
}

.inquiry-form .honeypot {
    display: none;
}

.inquiry-form a {
    color: var(--accent-orange);
    font-weight: normal;
    text-decoration: underline;
}

.inquiry-form a:hover,
.inquiry-form a:focus {
    color: var(--accent-red);
}

.inquiry-form .time-select-wrapper {
    position: relative;
}

.inquiry-form .time-select-wrapper option[data-best="true"] {
    font-weight: 700;
    color: var(--accent-red);
}

.inquiry-form .time-tooltip {
    font-size: var(--font-size-sm);
    color: var(--shadow-medium);
    margin-top: 5px;
    display: block;
}

.inquiry-form .more-info {
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    text-decoration: underline;
    margin-top: var(--spacing-sm);
    display: inline-block;
}

.inquiry-form .more-info:hover,
.inquiry-form .more-info:focus {
    color: var(--accent-red);
}

select#time option[data-best="true"] {
    color: red;
}

.inquiry-form button {
    width: 100%;
    height: 33px;
    margin-top: var(--spacing-sm);
    background-color: var(--secondary-color);
}

.inquiry-form .terms-label {
    display: flex;
    align-items: center;
    margin: var(--spacing-sm) 0;
    font-family: var(--font-monospace);
    font-size: var(--font-size-sm);
    font-weight: normal;
}

.inquiry-form .terms-label input[type="checkbox"] {
    margin: 0 var(--spacing-sm) 0 0;
    width: auto;
    height: auto;
    flex-shrink: 0;
    accent-color: var(--accent-red);
}

.inquiry-form .terms-label label {
    display: inline;
    font-weight: normal;
    margin: 0;
}

.accordion {
    margin: var(--spacing-sm) 0;
}

.accordion-item {
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--accent-red);
    border-radius: 3px;
    background-color: var(--content-bg);
    box-shadow: 0 0 5px var(--accent-red), 0 0 10px rgba(139, 0, 0, 0.3);
    animation: blood-pulse 2s ease-in-out infinite;
}

.accordion-header {
    font-family: 'TopSecretStamp', 'Special Elite', 'Courier New', monospace;
    font-size: var(--font-size-md);
    color: var(--accent-red);
    padding: var(--spacing-sm);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease;
}

.accordion-header:hover,
.accordion-header:focus {
    background-color: var(--shadow-light);
    text-shadow: 0 0 5px rgba(139, 0, 0, 0.5);
    outline: none;
}

.accordion-toggle {
    font-size: var(--font-size-lg);
    color: var(--accent-red);
    font-weight: bold;
}

.accordion-content {
    display: none;
    padding: var(--spacing-sm);
    font-family: var(--font-monospace);
    font-size: var(--font-size-sm);
    color: var(--primary-color);
    background-color: var(--content-bg);
}

.accordion-content p,
.accordion-content ul {
    margin: 0 0 var(--spacing-sm);
}

.accordion-content ul {
    list-style-type: upper-roman;
    padding-left: calc(var(--spacing-md) * 2);
}

.accordion-content ul li {
    margin-bottom: 0;
}

/***********************************************/
/* Sample Contract Page                        */
/***********************************************/

.sample-contract-page .contract-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid var(--accent-red);
    background: var(--content-bg);
    animation: blood-pulse 2s ease-in-out infinite;
}

.sample-contract-page .contract-header {
    text-align: center;
    border-bottom: 2px solid var(--accent-red);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.sample-contract-page .contract-header h1 {
    color: var(--accent-red);
    font-family: 'TopSecretStamp', 'Special Elite', 'Courier New', monospace;
    font-size: var(--font-size-xl);
    margin: 0;
}

.sample-contract-page .contract-header h2 {
    font-family: var(--font-monospace);
    font-size: var(--font-size-lg);
    color: var(--primary-color);
    margin: var(--spacing-sm) 0;
}

.sample-contract-page .contract-section {
    margin-bottom: var(--spacing-md);
}

.sample-contract-page .contract-section h3 {
    font-size: var(--font-size-lg);
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.sample-contract-page .signature-block {
    margin-top: calc(var(--spacing-md) * 2);
    display: flex;
    justify-content: space-between;
}

.sample-contract-page .signature-line {
    width: 40%;
    border-top: 1px solid var(--primary-color);
    text-align: center;
    padding-top: var(--spacing-sm);
}

.sample-contract-page .note {
    font-style: italic;
    color: var(--shadow-medium);
    text-align: center;
    margin-top: var(--spacing-md);
}

/***********************************************/
/* Accessibility: Reduced Motion                */
/***********************************************/

@media (prefers-reduced-motion: reduce) {
    .website-title-banner,
    .vertical-navbar,
    .section-header__book,
    .video,
    .image,
    footer,
    .content-container,
    .text-content,
    .services-page,
    .accordion-item,
    .sample-contract-page .contract-container {
        animation: none;
        box-shadow: none;
    }
}
.slideshow-wrapper {
    max-width: 1044px;
    margin: 1.5rem auto;
    border: 2px solid var(--accent-red);
    overflow: hidden;
}

.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slideshow-image {
    border: 5px solid lime !important;
    background: #000 !important;
}

#framedSlideshowBg, #eventsSlideshowBg, #constructionSlideshowBg, #defaultSlideshowBg {
    width: 100%;
    aspect-ratio: 1044 /697;    /* preserves proportion */
    position: relative;
    overflow: hidden;
}

#framedSlideshow, #eventsSlideshow, #constructionSlideshow, #defaultSlideshow  {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card {
    display: block;                /* required to make the whole area clickable */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Prevent any forced stretching or height changes */
.post-card,
.post-card .post {
    height: auto !important;       /* ← key: keep natural height from content */
    min-height: 0;                 /* prevent flex/grid from expanding */
}

/* Ensure image doesn't cause weird sizing */
.post-card .image,
.post-card .image img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;          /* clicks go through to the <a> */
}

/* Optional hover (only visual feedback, no size change) */
.post-card:hover {
    background-color: rgba(0,0,0,0.03);
    transition: background-color 0.2s ease;


}

.posts-row {
  display: flex;
  flex-wrap: nowrap;           /* forces them to stay in one row */
  gap: 16px;                   /* space between the posts */
  justify-content: space-between;  /* or space-around, center, etc. */
  margin: 20px 0;
}

.posts-row .post {
  flex: 1;                     /* each post takes equal width */
  min-width: 0;                /* prevents overflow issues */
  margin: 0;                   /* override any previous margins */
  box-sizing: border-box;
}

/* Make images fill the post nicely */
.posts-row .post img {
  width: 224px;
  height: auto;
  display: block;
  object-fit: cover;           /* or contain, depending on what you want */
}

/* Optional: keep your original post styling but adjust for this context */
.posts-row .post {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .posts-row {
    flex-wrap: wrap;
  }
  
  .posts-row .post {
    flex: 1 1 45%;           /* 2 per row on medium screens */
  }
}

@media (max-width: 500px) {
  .posts-row .post {
    flex: 1 1 100%;          /* 1 per row on small screens */
  }
}