/*======================================================================
    NICK MASTER PORTFOLIO COMPREHENSIVE COMBINED CORE CSS SHEET
======================================================================*/

/* =====================================================================
   1. CORE GLOBALS & TYPOGRAPHY
===================================================================== */
html, body {
    font-family: Tahoma, Arial; 
    padding: 0px; 
    margin: 0px; 
    color: #333333;
    background: #333333;
    font-size: 16px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100% !important;
}
img { width: 100%; height: auto; display: block; }
a { color: #ffffff; outline: 0; }
a:hover, a:focus { text-decoration: none; color: #cccccc; }
p { color: #333333; }
h1, h2, h3, h4, h5, h6 { font-family: Tahoma, Arial; font-weight: 400; }

h1 {   
    font-size: clamp(2.5rem, 6vw, 3.5rem); 
    font-family: 'Dancing Script', cursive; 
    color: #cccccc; 
    background: transparent !important; 
    padding: 0px !important; 
    float: none !important; 
    text-shadow: 4px 2px 2px rgba(33, 33, 33, 1); 
    margin: 0 auto 8px auto !important; 
    display: block !important;
    text-align: center !important; 
}
h2 { font-size: 24px; color: #333333; margin-top: 0px; }
h3 { text-align: center; font-size: 2em; }
.clear { clear: both; }
.content { display: none; height: auto; }
.homepage { display: block; }
.storiesshow { display: block; }

/* =====================================================================
   2. GLOBAL LAYOUT CONTAINERS & HEADER/FOOTER
===================================================================== */
.logocontainer {
    width: 100% !important;
    max-width: 1140px; 
    margin: 0 auto !important;
    padding: 30px 15px 10px 15px !important;
    text-align: center !important; 
    box-sizing: border-box !important;
}

.nick_smalltitle { 
    float: none !important; 
    padding: 0px !important; 
    font-size: 1em; 
    color: #b5b5b5;
    margin: 0 auto 20px auto !important; 
    display: block !important;
    text-align: center !important; 
}

.footer-container {
    width: 100% !important;
    max-width: 1140px; 
    margin: 0 auto !important;
    padding: 30px 15px 10px 15px !important;
    text-align: center !important; 
    box-sizing: border-box !important;
    clear: both !important;
}
.nick_footer { text-align: center !important; font-size: 14px; color: #b5b5b5; margin: 30px auto 60px auto !important; clear: both; }

/* =====================================================================
   3. NAVIGATION TILES & FLUID TEXTURES
===================================================================== */
.nick_link, .nick_linkpoems, .nick_linkcontact { 
    font-size: 2em; 
    color: #ffffff; 
    width: 100% !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

#menu-1 .nick_link a, #menu-1 .nick_linkcontact a{
    font-family: 'Dancing Script', cursive !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
    font-size: 1.2em;
}
.story-select-btn {
    font-family: 'Dancing Script', cursive !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
}

.nick_mainpoems, .nick_mainstories, .nick_mainmisc,
.nick_mainabout, .nick_maincontact, .nick_storiesback {
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important; 
    background-position: center center !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    float: none !important; 
}

.nick_mainpoems   { background-image: url('../img/author/background_gold.png') !important; }
.nick_mainstories { background-image: url('../img/author/background_red.png') !important; }
.nick_mainmisc    { background-image: url('../img/author/background_green.png') !important; }
.nick_mainabout   { background-image: url('../img/author/background_blue.png') !important; }
.nick_maincontact { background-image: url('../img/author/background_purple.png') !important; }
.nick_storiesback { background-image: url('../img/author/background_white.png') !important; }

/* Structural Utility Classes */
.nick_graybg { float: left; background: #cccccc; overflow: hidden; width: 100%; }
.nick_paddinggap { padding: 30px; }
.nick_frame { float: left; overflow-x:hidden; margin-top: 30px; }

/* =====================================================================
   4. GLOBAL GRID IMAGE CONTAINERS
===================================================================== */
.nick_mainimg {
    width: 100% !important;
    box-sizing: border-box !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important; 
    background-position: center center !important;
    display: block !important;
}

.nick_grid_bg_large { background-image: url('../img/author/img_bg.png') !important; }
.nick_grid_bg_small { background-image: url('../img/author/bg_img_sml.png') !important; }

.nick_mainimg img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.nick_mainimg .nick-foreground-graphic {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 10px !important; 
}

/* =====================================================================
   5. LIGHTBOX WIDGET ELEMENTS & RESPONSIVE TABS
===================================================================== */
#lightbox { cursor: pointer; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.75); z-index: 9999999; }
#lightbox img { display: block; position: absolute; box-shadow: 0 0 20px #000; }
.lightbox-loading { width: 31px; height: 31px; position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px; background: url(../img/author/loading.gif) no-repeat; }
.lightbox-caption { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; background: rgba(0, 0, 0, 0.75); padding: 10px; color: #fff; }
.lightbox-button { position: absolute; z-index: 99999; width: 32px; height: 32px; opacity: 0.6; transition: all 0.2s; }
.lightbox-button:hover { opacity: 1; transform: scale(1.2); }
.lightbox-close { right: 30px; top: 30px; background-image: url("../img/author/close.png"); }
.lightbox-next { right: 30px; top: 50%; background-image: url("../img/author/next.png"); }
.lightbox-previous { left: 30px; top: 50%; background-image: url("../img/author/next.png"); }

ul.resp-tabs-list { margin: 0px; padding: 0px; }
.resp-tabs-list li { font-weight: 600; font-size: 13px; display: inline-block; padding: 13px 15px; margin: 0; list-style: none; cursor: pointer; float: left; }
.resp-tabs-container { padding: 0px; background-color: #fff; clear: left; }
h2.resp-accordion { cursor: pointer; display: none; height: 90px; line-height: 90px; text-indent: 15px; margin: 0; }
.resp-tab-content { display: none; padding: 0px; border: 1px solid #c1c1c1; }
.resp-tab-active { background-color: #fff; }
.resp-content-active, .resp-accordion-active { display: block; }
.resp-vtabs ul.resp-tabs-list { float: left; width: 30%; }
.resp-vtabs .resp-tabs-list li { display: block; float: none; }
.resp-vtabs .resp-tabs-container { float: left; width: 68%; min-height: 250px; border: 1px solid #c1c1c1; }
@media only screen and (max-width: 992px) {
    ul.resp-tabs-list { display: none; }
    h2.resp-accordion { display: block; margin-bottom: 20px; }
    .resp-vtabs .resp-tabs-container { width: 100%; float: none; }
}

/* =====================================================================
   6. RESTORED GLOBAL GRID BREAKPOINTS (CRUCIAL FOR HOMEPAGE)
===================================================================== */
/* --- GLOBAL SIZES (MOBILE / SMARTPHONES) --- */
@media(min-width:320px) {
    .nick_leftgap { padding: 0px 4px !important; }
    .nick_botgap { margin-bottom: 12px !important; }
    
    .nick_mainpoems, .nick_mainstories, .nick_mainmisc, .nick_mainabout, 
    .nick_mainimg, .nick_storiesback, .nick_maincontact { margin-bottom: 12px !important; }
    
    .nick_insidestories { height: auto; padding-bottom: 15px; }
    .homepage .container .col-sm-6 { float: left !important; width: 50% !important; }
    
    .nick_link { font-size: 1.1rem; height: auto !important; min-height: 84px !important; line-height: normal !important; padding: 25px 10px !important; }
    .nick_link a { display: block; width: 100%; height: 100%; }
}

/* --- TABLET SCREEN TARGETS --- */
@media(min-width: 600px) and (max-width: 991px) {
    .homepage .container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important; max-width: 720px; margin: 0 auto; }
    .homepage .container .col-sm-6 { width: 50% !important; float: none !important; display: flex !important; flex-direction: column !important; padding: 0 6px !important; }
    
    /* Scoped exclusively to homepage so it stops breaking stories */
    .homepage .nick_mainpoems, .homepage .nick_mainstories, .homepage .nick_mainmisc, .homepage .nick_mainabout, 
    .homepage .nick_mainimg, .homepage .nick_storiesback, .homepage .nick_maincontact { margin-bottom: 12px !important; }
    
    .homepage .nick_link { height: auto !important; min-height: 110px !important; line-height: normal !important; font-size: 1.5rem !important; padding: 35px 10px !important; }
}

/* --- DESKTOP VIEWPORTS BREAKPOINT ENGINE --- */
@media(min-width:992px) {
    html, body { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; }
    #menu-container { width: 100% !important; position: relative !important; overflow: visible !important; }
    
    .homepage .container { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 940px !important; margin: 20px auto 0 auto !important; }
    .homepage .container .col-sm-6 { float: none !important; width: 25% !important; padding: 0 6px !important; display: flex !important; flex-direction: column !important; }
    
    .nick_mainpoems, .nick_mainstories, .nick_mainmisc, .nick_mainabout, 
    .nick_mainimg, .nick_storiesback, .nick_maincontact { margin-bottom: 12px !important; }

    .nick_link { height: auto !important; min-height: 120px !important; line-height: normal !important; font-size: 1.6em !important; padding: 40px 15px !important; }
    .nick_insidestories { height: 260px; }
}

/* --- LARGE MONITORS --- */
@media(min-width:1200px) {
    .homepage .container { width: 1140px !important; margin: 30px auto 0 auto !important; }
    .homepage .container .col-sm-6 { padding: 0px 8px !important; }
    
    .nick_mainpoems, .nick_mainstories, .nick_mainmisc, .nick_mainabout, 
    .nick_mainimg, .nick_storiesback, .nick_maincontact { margin-bottom: 16px !important; }
    
    .nick_link { height: auto !important; min-height: 145px !important; line-height: normal !important; font-size: 1.8em !important; padding: 50px 20px !important; }
    .nick_insidestories { height: 316px; }
}

/* =====================================================================
   7. IMMERSIVE OVERLAY READER (BOOK-TURNING MECHANICS)
===================================================================== */
#story-reader {
    position: fixed !important; top: 0; left: 0; width: 100vw !important; height: 100vh !important;
    background-color: rgba(14, 14, 14, 0.98) !important; z-index: 999999 !important;
    display: none; flex-direction: column !important; justify-content: center !important; align-items: center !important;
}
.nick-story-scroller-container {
    width: 92vw !important; max-width: 1100px !important; height: 82vh !important; max-height: 750px !important;
    border: 1px solid #D1B200; overflow: hidden !important; position: relative; background: #111111; perspective: 1500px;
}
.nick-story-content-track, .story-instance-data, .nick-story-section { position: relative !important; width: 100% !important; height: 100% !important; }
.nick-page-panel { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; transform-origin: left center; z-index: 1; }
.story-full-image-box, .story-full-image-box img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.story-full-text-box { width: 100% !important; height: 100% !important; padding: 40px 35px !important; background: #1e1e1e; overflow-y: auto !important; }
.story-full-text-box h3 { font-size: 1.85rem !important; color: #D1B200 !important; margin-bottom: 25px !important; }
.story-full-text-box p { 
    font-family: 'Dancing Script', cursive !important; /* Applies the cursive font to all text */
    font-size: 1.5rem !important; /* Increased from 1.15rem */
    line-height: 1.90 !important; 
    color: #dfdfdf !important; 
    text-align: justify; 
}
.story-full-text-box p:first-of-type::first-letter {
    float: left !important;
    font-family: 'Dancing Script', cursive !important; /* Uses your fancy heading font */
    font-size: 4.5rem !important; /* Makes it span about 3 lines of text */
    line-height: 0.8 !important; /* Tightens the box so text wraps cleanly under it */
    margin: 0.05em 0.15em 0 0 !important; /* Spacing right and bottom */
    color: #D1B200 !important; /* Your signature Gold */
    text-transform: uppercase !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
}
#close-story-reader { padding: 12px 35px !important; border: 1px solid #D1B200 !important; background: transparent !important; color: #D1B200 !important; cursor: pointer; }
#close-story-reader:hover { background: #D1B200 !important; color: #111111 !important; }

/* =====================================================================
   8. STORIES ENGINE SLIDER VIEWPORT
===================================================================== */
.nick-stories-slider-viewport { width: 100% !important; overflow: hidden !important; position: relative; clear: both; }

.nick-stories-slider-track { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; }
.nick-stories-slider-page { float: left; }
.nick-stories-slider-page::after { content: ""; display: table; clear: both; }

@media(max-width: 991px) {
    .stories-grid-container .container { display: block !important; width: 100% !important; padding: 0 15px !important; }
    .nick-stories-slider-page .col-sm-6 { float: left !important; width: 50% !important; padding: 0 4px !important; }
}

@media (min-width: 992px) {
    .stories-grid-container .nick-stories-slider-page { display: block !important; width: 100% !important; clear: both; }
    .stories-grid-container .nick-stories-slider-page .col-md-3 { padding-left: 6px !important; padding-right: 6px !important; box-sizing: border-box !important; }
    .stories-grid-container .nick-stories-slider-page:nth-child(2) .col-md-3:nth-child(3) { clear: none !important; float: left !important; }
}

.nick-stories-dots-container { text-align: center !important; margin: 25px auto 0 auto !important; width: 100% !important; }
.nick-dot { display: inline-block !important; width: 12px !important; height: 12px !important; margin: 0 6px !important; background: #555555 !important; border-radius: 50% !important; cursor: pointer; }
.nick-dot.active { background: #D1B200 !important; transform: scale(1.3); }

/* =====================================================================
   9. LOCALIZED SCROLLMAGIC POEM TARGETING MATRICES
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Nanum+Pen+Script&family=Roboto&display=swap');

.o-page { overflow: visible !important; width: 100% !important; background-color: hsla(52, 40%, 96%, 1.00); }
.o-main { margin: 0 auto; max-width: 37.5rem; padding: 1.25rem; }
.o-container { margin: 1.25rem 0; }
.o-container p { margin: 1.25rem 0 !important; opacity: 0; transform: translateY(20px); font-family: 'Roboto', sans-serif; font-size: 0.875rem; color: #404040 !important; text-align: left !important; }
.c-author { font-size: 3.75rem; filter: url('#liquify'); opacity: 0; text-align: center; transform: translateY(50px); }

.c-author__korean { font-family: 'Nanum Pen Script', cursive; font-size: 6.25rem; font-weight: 400; color: #000000 !important; text-transform: capitalize; }
.c-author__english { font-family: 'Roboto', sans-serif; font-size: 1.25rem; color: #555555 !important; letter-spacing: 1px; font-weight: 300; margin-top: 5px; }

.o-page .c-transition { height: 250px; width: 400px; margin: 5rem 0; overflow: hidden; position: relative; }
.o-page .c-transition::before { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/204808/ink-photo-frame.png'); background-size: 100% 100%; background-position: 50% 50%; content: ''; height: 100%; position: absolute; width: 100%; top: 0; left: 0; z-index: 3; }
.o-page .c-transition::after { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/204808/ink-transition-sprite.png'); background-size: 100% 100%; content: ''; height: 100%; left: 50%; position: absolute; top: 0; transform: translateX(-1.25%); width: 4000%; z-index: 2; }
.o-page .c-transition.is-active::after { animation: ink-transition-animation 2s steps(39) 0.5s forwards; }
.o-page .c-transition--portrait { height: 400px; width: 250px; }
.o-page .c-transition--portrait::before { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/204808/ink-photo-frame-portrait.png'); }
.o-page .c-transition--large { height: 375px; width: 600px; }
.o-page .c-transition--center { margin-left: auto; margin-right: auto; }
.o-page .c-transition__img { height: 100%; object-fit: cover; opacity: 0; width: 100%; z-index: 1; }
.o-page .c-transition.is-active .c-transition__img { opacity: 1; }
.o-page .c-transition--img-top .c-transition__img { object-position: 50% 0; }
.u-korean { font-family: 'Nanum Gothic', sans-serif !important; }
.u-spacing-top-small { margin-top: -0.9375rem !important; }

@keyframes ink-transition-animation { 0% { transform: translateX(-1.25%); } 99% { transform: translateX(-98.75%); opacity: 1; } 100% { transform: translateX(-98.75%); opacity: 0; } }

.o-page .c-text-ink-mask { position: relative; overflow: hidden; width: 100%; max-width: 600px; margin: 0 auto; padding: 10px 20px; }
.o-page .c-text-ink-mask::after { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/204808/ink-transition-sprite.png'); background-size: 100% 100%; content: ''; height: 100%; left: 50%; position: absolute; top: 0; transform: translateX(-1.25%); width: 4000%; z-index: 5; pointer-events: none; }
.o-page .c-text-ink-mask.is-active::after { animation: ink-transition-animation 2s steps(39) 0.2s forwards; }
.o-container .poem-card-headline, .o-container .read-poem-prompt { opacity: 0; transform: translateY(20px); }

/* =====================================================================
   10. POEM SHOWCASE CARD AND STICKY NAVIGATION
===================================================================== */
.poem-showcase-card { width: 100% !important; margin-bottom: 75px !important; text-align: center !important; display: block !important; }
.poem-showcase-card .poem-card-headline { font-family: 'Tahoma', Arial, sans-serif !important; font-size: 1.85rem !important; font-weight: 400 !important; color: #111111 !important; margin: 25px auto 12px auto !important; text-align: center !important; letter-spacing: 0.5px !important; }
.o-container .poem-showcase-card p.poem-card-theme-text { max-width: 520px !important; margin: 0 auto !important; opacity: 0; transform: translateY(20px); font-family: 'Roboto', sans-serif !important; font-size: 0.95rem !important; line-height: 1.65 !important; color: #555555 !important; text-align: center !important; }

/* FIXED VIEWPORT STICKY BACK NAVIGATION */
.nick-sticky-back-container { position: fixed !important; bottom: 30px !important; right: 30px !important; z-index: 9999999 !important; width: 64px !important; height: 64px !important; display: none; transform: scale(0.7); opacity: 0; }
.nick-sticky-back-container a { display: block !important; width: 100% !important; height: 100% !important; outline: none !important; cursor: pointer !important; }
.nick-sticky-back-container img { width: 100% !important; height: 100% !important; display: block !important; object-fit: contain !important; filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.45)) !important; transition: transform 0.25s ease !important; }
.nick-sticky-back-container:hover img { transform: scale(1.1) !important; }
@media (max-width: 767px) { .nick-sticky-back-container { bottom: 20px !important; right: 20px !important; width: 50px !important; height: 50px !important; } }

/* DYNAMIC VIEWPORT CANVAS OVERRIDES */
#menu-2.standalone-poems-canvas { overflow: visible !important; height: auto !important; min-height: 100vh !important; padding-bottom: 120px !important; }

/* =====================================================================
   11. IMMERSIVE FULL-SCREEN SINGLE POEM SCROLL-ROLL READER
===================================================================== */
.read-poem-prompt { display: inline-block; font-size: 0.85rem; color: #C584F8; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; margin-top: 5px; cursor: pointer; transition: color 0.2s ease; }
.poem-showcase-card:hover .read-poem-prompt { color: #111111; }

#poem-modal-reader { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background-color: hsla(52, 40%, 96%, 1.00) !important; z-index: 99999999 !important; opacity: 0; display: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --clip-reveal-delta: 0px; --crease-scale-y: 0; --crease-opacity: 0; }
.poem-scroll-scroller-viewport { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; }
.poem-scroll-scroll-content { position: absolute !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; overflow-y: scroll !important; overflow-x: hidden !important; scrollbar-width: none; }
.poem-scroll-scroll-content::-webkit-scrollbar { display: none; }
.poem-scroll-entries-track { 
    width: 100% !important; 
    max-width: 600px !important; 
    margin: 0 auto !important; 
    padding: 0 20px !important; 
    /* Removed height completely so JS can control it dynamically */
}
.poem-scroll-article { position: sticky !important; top: 100px; margin-top: 100px; width: 100% !important; transform-origin: 50% 0px; }
.poem-scroll-compact-crease { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; transform-origin: 50% 0; transform: scaleY(var(--crease-scale-y)); z-index: 10; }
.poem-scroll-compact-crease::before { content: ''; position: absolute !important; left: 0; right: 0; top: 0; height: 60px; filter: blur(4px); background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)); opacity: var(--crease-opacity); }
.poem-scroll-compact-crease::after { content: ''; display: block !important; width: 100%; height: 24px; background: linear-gradient(#d5d5d5, #ffffff 65%, #dddddd); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06); }

.poem-scroll-inner-paper { background: #ffffff !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important; border-radius: 4px; transform: translateY(calc(var(--clip-reveal-delta) * -1)); clip-path: polygon(0 var(--clip-reveal-delta), 100% var(--clip-reveal-delta), 100% 100%, 0% 100%); }
.poem-scroll-header-info { padding: 35px 40px 20px 40px !important; border-bottom: 1px solid #f2f0ea !important; text-align: center !important; }
.poem-scroll-header-info h1 { font-family: 'DM Serif Display', serif !important; font-size: 2.35rem !important; font-weight: 400 !important; color: #111111 !important; text-shadow: none !important; margin: 0 !important; padding: 0 !important; letter-spacing: 0.5px !important; display: block !important; }
.poem-scroll-text-body { padding: 35px 45px 50px 45px !important; font-family: 'Poppins', sans-serif !important; font-size: 1.05rem !important; line-height: 1.85 !important; color: #444444 !important; }
.poem-scroll-text-body p { margin: 0 0 20px 0 !important; color: #444444 !important; text-align: center !important; opacity: 1 !important; transform: none !important; }

#close-poem-modal-reader { position: fixed !important; bottom: 30px !important; left: 50% !important; transform: translateX(-50%) scale(1) !important; z-index: 100000000 !important; padding: 12px 35px !important; border: 1px solid #111111 !important; background: #111111 !important; color: #ffffff !important; font-family: 'Poppins', sans-serif !important; font-size: 0.9rem !important; font-weight: 500 !important; letter-spacing: 1px; text-transform: uppercase; border-radius: 50px; cursor: pointer !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; transition: all 0.25s ease !important; }
#close-poem-modal-reader:hover { background: #ffffff !important; color: #111111 !important; transform: translateX(-50%) scale(1.05) !important; }

/* =====================================================================
   12. ISOLATED MISC GALLERY PARALLAX SECTION
===================================================================== */
#menu-4 .misc-page__title { display: flex; min-height: 20vh; text-align: center; color: #9d5a4d; font-size: 6rem; font-family: 'Dancing Script', cursive; text-shadow: 0 4px 15px rgba(0,0,0,0.9); z-index: 5; margin: 10v; }
#menu-4 .misc-content__item { min-height: 60vh; display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 5vh; perspective: 1200px; }
.misc-image-column { width: 500px; flex-shrink: 0; }
#menu-4 .misc-content__item-imgwrap { width: 100%; transform-style: preserve-3d; will-change: transform; }
#menu-4 .misc-content__item-img { width: 100%; height: 300px; background-size: cover; background-position: center; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.misc-content__item-info { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 15px; padding: 0 20px; margin-right: 50px; margin-left: 5px; }
#menu-4 .misc-content__item-title { position: static; text-align: left; margin: 0px 5px 20px; font-family: 'Dancing Script', cursive; font-size: 3.5rem; line-height: 1; color: #9d5a4d; }
.misc-content__item-description { color: rgba(255,255,255,.45); font-size: 0.95rem; line-height: 1.45; margin-bottom: 20px; }
.misc-read-more { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 46px; border: 2px solid #ff7b00; color: #ff7b00; text-decoration: none; font-size: 0.95rem; font-weight: 600; transition: all .3s ease; }
.misc-read-more:hover { background: #ff7b00; color: #120605; }
@media (min-width: 1200px) { .misc-read-more { min-width: 220px; height: 58px; font-size: 1.05rem; } }
@media (max-width: 900px) { #menu-4 .misc-content__item { flex-direction: column; gap: 20px; text-align: center; } .misc-image-column { width: 100%; } .misc-content__item-info { width: 100%; align-items: center; } #menu-4 .misc-content__item-title { font-size: 2.8rem; } #menu-4 .misc-page__title { font-size: 3.5rem; } }

/* =====================================================================
   13. INDEPENDENT MISC ARTICLE ZOOM OPENER MODULE
===================================================================== */
#zoom-article-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background: #111111 !important; z-index: 99999999 !important; overflow-x: hidden !important; overflow-y: auto !important; transition: opacity 0.4s ease; }
#zoom-article-overlay .zoom-container { height: 100vh; overflow: hidden; position: relative; perspective: 100vh; width: 100%; }
#zoom-article-overlay .zoom-scroll-prompt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ff7b00; font-size: 1.15rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; z-index: 100; opacity: 1; pointer-events: none; text-shadow: 0 4px 10px rgba(0,0,0,0.8); animation: zoomPromptBounce 2s infinite ease-in-out; }
@keyframes zoomPromptBounce { 0%, 100% { margin-top: 0; } 50% { margin-top: 15px; } }
#zoom-article-overlay .zoom-heading { font-size: clamp(3rem, 6vw, 6rem); text-align: center; font-family: 'Dancing Script', cursive; color: #9d5a4d; opacity: 0; position: absolute; left: 50%; top: 50%; white-space: nowrap; margin: 0; z-index: 50; text-shadow: 0 4px 15px rgba(0,0,0,0.9); }
#zoom-article-overlay .zoom-item { position: absolute; transform-origin: center center; will-change: transform, opacity; }
#zoom-article-overlay .zoom-item img { width: 100%; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.9); }
#zoom-article-overlay .zoom-item[data-layer="3"] { opacity: 0.6; z-index: 3; }
#zoom-article-overlay .zoom-item[data-layer="2"] { opacity: 0.4; z-index: 2; }
#zoom-article-overlay .zoom-item[data-layer="1"] { opacity: 0.2; z-index: 1; }

#zoom-article-overlay .item-1 { left: 28vw; top: 8%;  width: 45vw; }  
#zoom-article-overlay .item-2 { left: 55vw; top: 30%; width: 35vw; }  
#zoom-article-overlay .item-3 { left: 50vw; top: 65%; width: 42vw; }  
#zoom-article-overlay .item-4 { left: 25vw; top: 80%; width: 38vw; }  
#zoom-article-overlay .item-5 { left: 5vw;  top: 58%; width: 40vw; }  
#zoom-article-overlay .item-6 { left: 8vw;  top: 25%; width: 32vw; }  
#zoom-article-overlay .zoom-item:not(.zoom-heading) { max-height: 400px; max-width: 400px; }

#zoom-article-overlay .zoom-article-content { min-height: 100vh; background: #111111; display: flex; justify-content: center; padding: 100px 20px; }
#zoom-article-overlay .article-text-body { max-width: 800px; width: 100%; color: #e0e0e0; font-family: Tahoma, Arial, sans-serif; font-size: 1.15rem; line-height: 1.8; }
#zoom-article-overlay .intro-text { font-size: 1.75rem; line-height: 1.5; color: #ff7b00; margin-bottom: 40px; }
#zoom-article-overlay p { margin-bottom: 25px; }

#zoom-article-back-btn { position: fixed !important; bottom: 30px !important; right: 30px !important; z-index: 100000000 !important; width: 64px !important; height: 64px !important; visibility: hidden; opacity: 0; transform: scale(0.7); }
#zoom-article-back-btn img { width: 100% !important; height: 100% !important; display: block !important; object-fit: contain !important; filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.45)) !important; transition: transform 0.25s ease !important; }
#zoom-article-back-btn:hover img { transform: scale(1.1) !important; }

@media (min-width: 768px) {
    #zoom-article-overlay .item-1 { left: 41vw; top: 10%; width: 18vw; }
    #zoom-article-overlay .item-2 { left: 68vw; top: 25%; width: 14vw; }
    #zoom-article-overlay .item-3 { left: 65vw; top: 60%; width: 16vw; }
    #zoom-article-overlay .item-4 { left: 42vw; top: 76%; width: 15vw; }
    #zoom-article-overlay .item-5 { left: 18vw; top: 62%; width: 13vw; }
    #zoom-article-overlay .item-6 { left: 15vw; top: 22%; width: 17vw; }
}

/* =====================================================================
   14. DISINTEGRATION TRANSITION EFFECT STYLES
===================================================================== */
.disintegration-container { position: absolute; pointer-events: none; z-index: 9999; }
.disintegration-container .capture-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; will-change: transform, opacity; }

/* =====================================================================
   15. MASONRY GRID FIX: IMAGES STRETCH TO FILL HEIGHT
===================================================================== */
@media(min-width: 600px) {
    /* Scoped exclusively to the homepage */
    .homepage .container { display: flex !important; align-items: stretch !important; }
    .homepage .container .col-sm-6 { display: flex !important; flex-direction: column !important; }
    .homepage .container .col-sm-6 > .nick_mainimg { flex-grow: 1 !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; }
    .homepage .container .col-sm-6 > .nick_mainimg img { flex-grow: 1 !important; height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: center !important; }
    .homepage .container .col-sm-6 > div:not(.nick_mainimg) { flex-grow: 0 !important; flex-shrink: 0 !important; height: auto !important; }
    .homepage .container .col-sm-6 .nick_link { flex-grow: 0 !important; height: auto !important; }
}

/* =====================================================================
   16. ABOUT SECTION: STRICT VIEWPORT MASONRY GRID
===================================================================== */
#menu-5 { height: 100vh; height: 100dvh; overflow: hidden !important; padding-top: 85px; padding-bottom: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
#menu-5 .about-fullscreen-container { height: 100%; max-height: 85vh; width: 100%; max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; }
#menu-5 .about-masonry-row { height: 100%; display: flex; flex-direction: row !important; align-items: stretch; margin: 0; gap: 15px; }
#menu-5 .about-col-left, #menu-5 .about-col-right { width: calc(50% - 7.5px) !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; }

#menu-5 .about-col-left { gap: 0 !important; justify-content: flex-start !important; }
#menu-5 .about-img-small { flex: 0 0 35% !important; margin: 0 0 5px 0 !important; padding: 0 !important; display: flex !important; }
#menu-5 .about-text-block { margin: 0 !important; flex: 1 1 auto !important; color: white; }
#menu-5 .about-col-left .nick_botgap, #menu-5 .about-col-left .nick_mainimg { margin-bottom: 0 !important; }

#menu-5 .about-col-right { gap: 15px !important; }
#menu-5 .about-img-small { flex: 0 0 35%; min-height: 0; }
#menu-5 .about-text-block { flex: 1; min-height: 0; background: #1e1e1e; border-radius: 4px; padding: min(3vh, 25px) min(3vw, 25px); box-shadow: 0 10px 30px rgba(0,0,0,0.4); display: flex; flex-direction: column; justify-content: center; overflow: hidden !important; }

#menu-5 .about-img-large { flex: 1 1 auto !important; min-height: 0; display: flex !important; margin-bottom: 0 !important; }
#menu-5 .about-col-right > div:last-child { flex-grow: 1 !important; flex-basis: auto !important; max-height: 120px !important; margin-bottom: 0 !important; background-color: #f4ebd8 !important; background-image: url('../img/author/background_white.png') !important; background-size: 100% 100% !important; background-position: center !important; border-radius: 4px; display: flex !important; flex-direction: column !important; justify-content: center !important; overflow: hidden !important; }
#menu-5 .about-col-right > div:last-child .nick_link { flex-grow: 1 !important; height: 100% !important; width: 100% !important; min-height: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; }
#menu-5 .about-back-btn .nick_link a { height: 100% !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; font-family: 'Dancing Script', cursive !important; font-size: clamp(1.2rem, 2vw, 1.6rem) !important; color: #000000 !important; text-shadow: none !important; }

#menu-5 .about-heading { font-family: 'Dancing Script', cursive; color: #ffffff !important; font-size: clamp(1.5rem, 6vw, 2.5rem) !important; margin: 0 0 1.5vh 0; text-align: left; line-height: 1.1; white-space: normal !important; }
#menu-5 .about-bio { font-size: min(2.2vh, 3vw, 1.05rem); line-height: 1.45; color: #ffffff !important; text-align: justify; margin: 0; }

/* =====================================================================
   17. CONTACT SECTION: STRICT VIEWPORT MASONRY GRID
===================================================================== */
#menu-6 { height: 100vh; height: 100dvh; overflow: hidden !important; padding-top: 85px; padding-bottom: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
#menu-6 .contact-fullscreen-container { height: 100%; max-height: 85vh; width: 100%; max-width: 1140px; margin: 0 auto; }
#menu-6 .contact-masonry-row { height: 100%; display: flex; flex-direction: row !important; align-items: stretch; margin: 0; gap: 15px; }
#menu-6 .contact-col-left, #menu-6 .contact-col-right { width: calc(50% - 7.5px) !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 15px; }

#menu-6 .contact-img-tall { flex: 1; min-height: 0; overflow: hidden; border-radius: 4px; }
#menu-6 .contact-img-tall img { height: 100%; width: 100%; object-fit: cover; }
#menu-6 .social-icons a { display: inline-block; flex-shrink: 0 !important; transition: transform 0.2s ease; margin: 0; }
#menu-6 .social-icons a img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block; filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.3)); }
#menu-6 .social-icons a:hover { transform: scale(1.15); }

@media (min-width: 768px) { #menu-6 .social-icons { display: flex !important; align-items: center !important; justify-content: center !important; gap: 25px !important; } #menu-6 .social-icons a { width: 75px !important; height: 75px !important; } }
@media (max-width: 767px) { #menu-6 .social-icons { display: grid !important; grid-template-columns: repeat(2, max-content) !important; justify-content: center !important; gap: 15px 25px !important; } #menu-6 .social-icons a { width: 55px !important; height: 55px !important; } }

#menu-6 .contact-info-tile { flex: 0 0 25%; background: #2a2a2a; border-radius: 4px; padding: 20px; display: flex; flex-direction: column; justify-content: center; }
#menu-6 .contact-info-tile h3 { color: #D1B200; font-family: 'Dancing Script', cursive; margin: 0 0 10px 0; font-size: 2rem; }
#menu-6 .contact-info-tile p { color: #ccc; margin: 0; font-size: 1rem; }

#menu-6 .contact-form-tile.old-paper-form { flex: 1; background-color: #f4ebd8 !important; background-image: url('../img/author/background_white.png') !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; background-position: center !important; border-radius: 4px; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; justify-content: center; overflow-y: auto !important; scrollbar-width: none; }
#menu-6 .contact-form-tile.old-paper-form::-webkit-scrollbar { display: none; }
#menu-6 .contact-form-tile.old-paper-form::before { display: none !important; }

#menu-6 .nick-input, #menu-6 .nick-input:focus, #menu-6 .nick-input:active { background-color: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; color: #111 !important; font-family: 'Dancing Script', cursive !important; font-size: clamp(1.4rem, 4vw, 2.2rem) !important; height: auto !important; margin-bottom: 20px !important; padding: 5px 0 !important; margin-bottom: clamp(10px, 2vh, 20px) !important; }
#menu-6 textarea.nick-input { height: 120px !important; resize: none !important;  height: clamp(60px, 12vh, 120px) !important; flex-shrink: 1 !important; }
#menu-6 .nick-input::placeholder { color: rgba(30, 30, 30, 0.6) !important; font-family: 'Dancing Script', cursive !important; opacity: 1 !important; }

#menu-6 .nick-submit-btn { align-self: flex-end !important; margin-top: auto !important; margin-bottom: 5px !important; width: auto !important; flex-shrink: 0 !important; background: transparent !important; border: 2px solid #333 !important; color: #333 !important; font-family: 'Dancing Script', cursive !important; font-size: clamp(1.2rem, 3vw, 1.8rem) !important; padding: 5px 30px !important; border-radius: 4px; transition: all 0.3s ease; cursor: pointer; }
#menu-6 .nick-submit-btn:hover { background: #333 !important; color: #f4ebd8 !important; transform: rotate(-3deg); }
@media (max-width: 767px) { #menu-6 .nick-submit-btn { margin-right: 15px !important; } #menu-6 .contact-form-tile.old-paper-form { padding: 30px 20px !important; } }

#menu-6 .contact-info-tile.whatsapp-pill { flex: 0 0 auto !important; background: #1e1e1e; border-radius: 100px !important; padding: 15px 30px 15px 15px !important; display: flex; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.4); overflow: hidden; }
#menu-6 .contact-info-tile.whatsapp-pill:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(37, 211, 102, 0.15); }
#menu-6 .wa-link-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; width: 100%; text-decoration: none !important; }
#menu-6 .wa-logo-circle { width: clamp(65px, 8vw, 85px); height: clamp(65px, 8vw, 85px); border: 2px solid #555; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #111; transition: all 0.3s ease; }
#menu-6 .wa-logo-circle i { font-size: clamp(35px, 4vw, 45px); color: #25D366; transition: all 0.3s ease; }
#menu-6 .contact-info-tile.whatsapp-pill:hover .wa-logo-circle { border-color: #25D366; background: #25D366; }
#menu-6 .contact-info-tile.whatsapp-pill:hover .wa-logo-circle i { color: #111; }
#menu-6 .wa-text-block { display: flex; flex-direction: column; justify-content: center; margin-left: clamp(15px, 2vw, 25px); }
#menu-6 .wa-text-block h3 { font-family: 'Dancing Script', cursive !important; color: #D1B200 !important; font-size: clamp(1.2rem, 6vw, 2.4rem) !important; margin: 0 0 2px 0 !important; line-height: 1.1 !important; white-space: normal !important; }
#menu-6 .wa-text-block p { margin: 0 !important; color: #ccc !important; font-size: clamp(0.7rem, 3.5vw, 1rem) !important; line-height: 1.4 !important; word-break: break-word !important; }
#menu-6 .wa-text-block p.wa-cta { color: #25D366 !important; font-weight: normal !important; font-style: italic !important; margin-top: 4px !important; font-size: clamp(0.7rem, 3vw, 0.95rem) !important; }
@media (max-width: 767px) { #menu-6 .contact-info-tile.whatsapp-pill { border-radius: 50px !important; padding: 15px !important; } }

/* =====================================================================
   18. ABSOLUTE FIT-TO-SCREEN MASONRY FIX (PRESERVES EXACT RATIOS)
===================================================================== */
@media (min-width: 992px) {
    .logocontainer { height: 12vh !important; padding: 2vh 15px 0 15px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; margin: 0 auto !important; }
    h1 { margin: 0 auto !important; font-size: clamp(2rem, 5vh, 3.5rem) !important; }
    .nick_smalltitle { margin: 0 auto !important; font-size: clamp(0.8rem, 2vh, 1rem) !important; }

    .footer-container { height: 6vh !important; padding: 0 15px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; }
    .nick_footer { margin: 0 auto !important; font-size: clamp(0.7rem, 1.5vh, 14px) !important; }

    .homepage .container{ height: 80vh !important; margin: 0 auto !important; display: flex !important; align-items: stretch !important; }

    .homepage .container .col-sm-6, .nick-stories-slider-page .col-sm-6 { height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; }

    .homepage .container .col-sm-6 > div, .nick-stories-slider-page .col-sm-6 > div { margin-bottom: 1.5vh !important; min-height: 0 !important; }
    .homepage .container .col-sm-6 > div:last-child, .nick-stories-slider-page .col-sm-6 > div:last-child { margin-bottom: 0 !important; }

    .homepage .container .col-sm-6 > div:not(.nick_mainimg), .nick-stories-slider-page .col-sm-6 > div:not(.nick_mainimg) { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
    .homepage .container .col-sm-6 > .nick_mainimg, .nick-stories-slider-page .col-sm-6 > .nick_mainimg { flex: 3 !important; }
    .homepage .container .col-sm-6 > .nick_mainimg img, .nick-stories-slider-page .col-sm-6 > .nick_mainimg img { height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: center !important; }

    .nick_link { height: 100% !important; width: 100% !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: clamp(1.2rem, 3.5vh, 1.8rem) !important; }
}

/* =====================================================================
   HANDHELD / MOBILE DEVICE GRID FIX (STORIES Under 992px)
===================================================================== */
@media (max-width: 991px) {
    .nick-stories-slider-viewport { height: 75vh !important; }
    .nick-stories-slider-track { height: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; }
    .nick-stories-slider-page { width: 100vw !important; height: 100% !important; display: block !important; }

    .nick-stories-slider-page .row {
        width: 100% !important; height: 100% !important; margin: 0 !important;
        display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
        align-content: stretch !important;
    }

    .nick-stories-slider-page .col-sm-6 {
        width: 50% !important; height: 50% !important; 
        display: flex !important; flex-direction: column !important;
        padding: 8px !important; box-sizing: border-box !important; 
        gap: 10px !important; 
    }

    .nick-stories-slider-page .col-sm-6 > div { margin: 0 !important; }

    .nick-stories-slider-page .nick_mainstories,
    .nick-stories-slider-page .nick_storiesback {
        flex: 0 0 55px !important; height: 55px !important; width: 100% !important; display: block !important;
    }
    
    .nick-stories-slider-page .nick_link { 
        height: 55px !important; width: 100% !important; padding: 0 !important; margin: 0 !important; display: block !important;
    }

    .nick-stories-slider-page .nick_link a {
        display: block !important; height: 55px !important; line-height: 55px !important;
        width: 100% !important; margin: 0 !important; padding: 0 !important;
        font-size: 1.3rem !important; text-align: center !important;
    }

    .nick-stories-slider-page .nick_mainimg {
        flex: 1 1 0% !important; 
        position: relative !important; 
        overflow: hidden !important; 
        display: block !important; width: 100% !important;
    }

    .nick-stories-slider-page .nick_mainimg img {
        position: absolute !important; top: 0 !important; left: 0 !important; 
        width: 100% !important; height: 100% !important;
        object-fit: cover !important; 
        object-position: center !important; display: block !important;
    }
}
/* =====================================================================
   20. STRICT DESKTOP MASONRY OVERRIDE (MENU 1 & MENU 3)
===================================================================== */
@media (min-width: 992px) {
    /* 1. Force parents to be Flex Rows and lock height to 80vh */
    #menu-1 .container,
    #menu-3 .nick-stories-slider-page {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        height: 80vh !important;
    }

    /* Kill any lingering Bootstrap pseudo-elements that break flex rows */
    #menu-1 .container::before, #menu-1 .container::after,
    #menu-3 .nick-stories-slider-page::before, #menu-3 .nick-stories-slider-page::after {
        display: none !important;
    }

    /* 2. Force the 4 columns to sit side-by-side (25% width) */
    #menu-1 .container .col-sm-6,
    #menu-3 .nick-stories-slider-page .col-sm-6 {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 25% !important;
        height: 100% !important;
        float: none !important; /* Overrides Bootstrap float */
        padding: 0 8px !important;
    }

    /* 3. Strip old margins to prevent >100% overflow */
    #menu-1 .container .col-sm-6 > div,
    #menu-3 .nick-stories-slider-page .col-sm-6 > div {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 4. Exact 80% / 20% Math with a 15px gap calculated in */
    /* Images take 80% */
    #menu-1 .container .col-sm-6 > .nick_mainimg,
    #menu-3 .nick-stories-slider-page .col-sm-6 > .nick_mainimg {
        flex: 0 0 calc(80% - 7.5px) !important;
        height: calc(80% - 7.5px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    /* Buttons take 20% */
    #menu-1 .container .col-sm-6 > div:not(.nick_mainimg),
    #menu-3 .nick-stories-slider-page .col-sm-6 > div:not(.nick_mainimg) {
        flex: 0 0 calc(20% - 7.5px) !important;
        height: calc(20% - 7.5px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 5. Homepage Column 4 Exception (About/Contact has 3 items) */
    /* Total 100% divided into 60/20/20 with gaps accounted for */
    #menu-1 .container .col-sm-6:nth-child(4) > .nick_mainimg {
        flex: 0 0 calc(60% - 10px) !important;
        height: calc(60% - 10px) !important;
    }
    #menu-1 .container .col-sm-6:nth-child(4) > div:not(.nick_mainimg) {
        flex: 0 0 calc(20% - 10px) !important;
        height: calc(20% - 10px) !important;
    }

    /* 6. Lock the images inside to fill the space without stretching */
    #menu-1 .container .col-sm-6 > .nick_mainimg img,
    #menu-3 .nick-stories-slider-page .col-sm-6 > .nick_mainimg img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Background graphic exception */
    #menu-1 .container .col-sm-6 > .nick_mainimg img.nick-foreground-graphic {
        object-fit: contain !important;
    }

    /* Expand links */
    #menu-1 .container .col-sm-6 .nick_link,
    #menu-3 .nick-stories-slider-page .col-sm-6 .nick_link {
        width: 100% !important;
        height: 100% !important;
    }
    /* 7. Expand links and dead-center the text */
    #menu-1 .container .col-sm-6 .nick_link,
    #menu-3 .nick-stories-slider-page .col-sm-6 .nick_link {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important; /* Overrides the massive padding from Section 6 */
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #menu-1 .container .col-sm-6 .nick_link a,
    #menu-3 .nick-stories-slider-page .col-sm-6 .nick_link a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important; /* Neutralizes weird line-height text shifts */
    }
}

/* =====================================================================
   21. FIX: CENTER TITLES IN THE 20% BUTTONS
===================================================================== */
@media (min-width: 992px) {
    /* Strip the old massive padding and min-height so text fits in the box */
    #menu-1 .container .col-sm-6 .nick_link,
    #menu-3 .nick-stories-slider-page .col-sm-6 .nick_link {
        padding: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        
        /* Force perfect dead-center alignment */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}


/* =====================================================================
   CURSIVE HEADINGS FOR STORIES AND POEMS
===================================================================== */

/* 1. Stories Modal Heading */
.story-full-text-box h3 { 
    font-family: 'Dancing Script', cursive !important; 
    font-size: 3rem !important; /* Increased size since cursive runs smaller */
    color: #D1B200 !important; /* Keeps your yellow color */
    text-align: center !important; 
    margin-bottom: 25px !important; 
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important; /* Optional: adds readability against the dark background */
}

/* 2. Stories Modal Heading */
.story-full-text-box h5 { 
    font-family: 'Dancing Script', cursive !important; 
    font-size: 1.7rem !important; /* Increased size since cursive runs smaller */
    color: #D1B200 !important; /* Keeps your yellow color */
    text-align: center !important; 
    margin-bottom: 15px !important; 
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5) !important; /* Optional: adds readability against the dark background */
}

/* 3. Poems Modal Heading */
.poem-scroll-header-info h1 { 
    font-family: 'Dancing Script', cursive !important; 
    font-size: 3.5rem !important; 
    font-weight: 400 !important; 
    color: #111111 !important; 
    text-shadow: none !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    letter-spacing: 1px !important; 
    display: block !important; 
}