@font-face {
    font-family: 'Built Titling';
    src: url('/assets/fonts/built-titling/built%20titling%20sb.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

/* Basic page reset for a clean blank canvas */
html,
body {
    margin: 0;
    padding: 0;
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    overscroll-behavior: none; /* Disables rubber-banding / bounce effect to prevent seeing background on touch devices */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'Google Sans Flex', sans-serif;
    background-color: #000000;
    color: #e0e0e0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    overflow-x: hidden; /* Prevents horizontal scrolling from overdrawn elements */
    transition: background-color 0.5s ease-in-out;
}

body.header-inverted {
    background-color: #ffffff; /* Gives Safari a white base to correctly tint the top status bar */
}

/* Main Background Container and Fade Layer */
#main-bg,
#bg-fade-layer {
    position: fixed;
    top: var(--bg-shift, 0px);
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    --bg-shift: 0px;
    transform: scaleX(-1) translate3d(0, 0px, 0); /* Parallax Shift is now handled via JS */
    z-index: -5;
    transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
    pointer-events: none;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#bg-fade-layer {
    z-index: -4 !important; /* Just above main background */
}

/* Mirrored Extensions for Seamless Off-Screen Filling */
#main-bg::before,
#main-bg::after,
#bg-fade-layer::before,
#bg-fade-layer::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    pointer-events: none;
}

#main-bg::before,
#bg-fade-layer::before {
    top: -100%;
    transform: scaleY(-1);
}

#main-bg::after,
#bg-fade-layer::after {
    top: 100%;
    transform: scaleY(-1);
}

/* Shift Entire Background Containers Down */
body.bg-shifted #main-bg,
body.bg-shifted #bg-fade-layer {
    --bg-shift: 75px;
}

/* Original Black Fade Overlay for Top of Page */
#top-fade {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
    z-index: -1; /* Above social-bg-wrapper (-2) */
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

body.header-inverted #top-fade {
    opacity: 0; /* Hides the dark gradient so Safari's UI algorithm doesn't read it as black */
}

/* Background Noise Overlay */
#bg-noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-size: 400px 400px; /* Doubled the noise scale for better visibility on high density screens */
    opacity: 0.05;
    z-index: -1; /* Above social-bg-wrapper (-2) */
    pointer-events: none;
    animation: grain-shift 0.4s step-end infinite;
}

/* Shared Wrapper for Social Backgrounds */
#social-bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--header-height, 175px); /* Dynamically matches the header's height */
    background-color: rgba(0, 0, 0, 0.8); /* Dark base behind the grid */
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    opacity: 0; /* Starts hidden */
    transform: translateY(-30px); /* Start slightly offset upwards */
    transition: opacity 0.25s ease-in-out 0.15s, transform 0.25s ease-in-out, height 0.5s ease-in-out; /* Match inner grid timings */
    z-index: -2; /* Drops behind header */
    pointer-events: none; /* Prevents it from blocking clicks */
    overflow: hidden;
}

#social-bg-wrapper.active {
    opacity: 1; /* Fades in */
    transform: translateY(0); /* Slides down into place */
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, height 0.5s ease-in-out; /* Instant fade in */
}

/* Instagram & TikTok Hover Background Images */
#instagram-bg,
#tiktok-bg,
#youtube-bg {
    position: absolute;
    top: 0;
    left: -100px;
    width: calc(100vw + 200px);
    padding: 0 100px;
    box-sizing: border-box;
    height: 100%;
    opacity: 0; /* Starts hidden */
    transform: translateX(0); /* Baseline horizontal position */
    transition: opacity 0.25s ease-in-out 0.15s, transform 0.25s ease-in-out; /* Delayed fade out enables crossfading */
    z-index: 1; /* Internal stacking base */
}

#instagram-bg.hidden-left,
#tiktok-bg.hidden-left,
#youtube-bg.hidden-left {
    transform: translateX(-50px);
}

#instagram-bg.hidden-right,
#tiktok-bg.hidden-right,
#youtube-bg.hidden-right {
    transform: translateX(50px);
}

#instagram-bg.active,
#tiktok-bg.active,
#youtube-bg.active {
    opacity: 1; /* Fades in */
    transform: translateX(0); /* Slides into place horizontally */
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; /* Instant fade in */
    z-index: 2; /* Brings entering overlay to the front so it cleanly fades over the exiting one */
}

/* Social Media Grid Layouts */
#instagram-grid,
#tiktok-grid,
#youtube-grid {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    opacity: 0.5; /* Dims the photos so the white header text remains readable */
    width: max-content; /* Allows grid to size to its content for animation */
}

#instagram-grid img,
#tiktok-grid img,
#youtube-grid img {
    height: 100%;
    width: auto; /* Allows natural aspect ratio */
    flex-shrink: 0; /* Prevents images from squishing to fit the screen width */
    object-fit: cover;
    filter: grayscale(100%);
}

/* The Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100; /* Ensures the header stays cleanly above the new background layer and mobile menu */
    padding: 31px 40px;
    font-family: 'Google Sans Flex', sans-serif;
    transition: padding 0.5s ease-in-out;
}

/* Fixed-height background layer */
.site-header::before {
    content: '';
    position: absolute;
    top: -2px; /* Overdraw slightly to prevent 1px sub-pixel gaps at the top of the screen */
    left: 0;
    width: 100%;
    height: calc(var(--header-height, 300px) + 72px); /* Extended 70px deeper */
    background-color: #ffffff; /* Match newspaper background */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    -webkit-mask-image: radial-gradient(ellipse 150% 100% at top center, black 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 150% 100% at top center, black 35%, transparent 100%);
    z-index: -1; 
    pointer-events: none;
    opacity: var(--header-mask-opacity, 0); /* Fades in smoothly as content scrolls up */
    transition: height 0.5s ease-in-out; 
    transform: translateZ(0); /* Forces iOS Safari to dynamically repaint the opacity */
}

/* Animated Grain/Noise Layer for Header Fade */
.site-header::after {
    content: '';
    position: absolute;
    top: -22px; /* Overdraw slightly to prevent 1px sub-pixel gaps at the top of the screen */
    left: 0;
    width: 100%;
    height: calc(var(--header-height, 300px) + 112px); /* Extended deeper */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    opacity: var(--header-mask-opacity, 0); /* Scales with the header mask */
    -webkit-mask-image: radial-gradient(ellipse 150% 100% at top center, black 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 150% 100% at top center, black 35%, transparent 100%);
    z-index: -1; 
    pointer-events: none;
    transition: height 0.5s ease-in-out; 
}

/* Navigation Layout */
.nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Grouped Navigation Links */
.nav-links {
    display: flex;
    align-items: center;
    flex: 1; /* Forces both link groups to equal width, keeping logo perfectly centered */
    gap: 0px;
    opacity: 1;
    visibility: visible;
    max-height: 80px; /* Safe upper bound to animate collapsing from */
    overflow: hidden; /* Ensures text doesn't spill out when collapsing */
    transform: translateY(0);
    transition: opacity 0.4s ease, max-height 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

.nav-left {
    justify-content: flex-end;
    order: 1;
}

.nav-right {
    justify-content: flex-start;
    order: 3;
}

/* Text Button Styling */
.nav-button {
    text-decoration: none;
    color: #e0e0e0;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 12px 6px; /* Reduced from 12px to bring buttons noticeably closer together */
    transition: color 0.3s ease, font-weight 0.3s ease, text-shadow 0.3s ease;
    white-space: nowrap;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Shared Icon Button Styling */
.icon-btn {
    position: relative;
    padding-left: calc(6px + 1.6em); /* Adjusted for the new tighter 6px base padding */
}

.icon-btn::before {
    content: '';
    position: absolute;
    left: 6px; /* Pins icon to the tighter padding boundary */
    top: calc(50% - 1px);
    transform: translateY(-50%); /* True vertical centering */
    margin-top: 2px; /* Shifts all icons down by 2px */
    width: 1.2em; /* Uniform icon width */
    height: 1.2em; /* Uniform icon height */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.88; /* Matches the #e0e0e0 default text color */
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.icon-btn:hover::before {
    opacity: 1; /* Brightens to #ffffff on hover */
}

/* Specific Icon Image Assignments */
.apple-logo-btn::before { 
    background-image: url('/assets/logos/svg/Apple_logo_white.svg'); 
    margin-top: 0; /* Prevents the 2px downward shift from affecting the desktop Apple logo */
}
.apple-music-btn::before { background-image: url('/assets/logos/svg/apple-music-white.svg'); }
.instagram-btn::before { background-image: url('/assets/logos/svg/Instagram_white.svg'); }
.tiktok-btn::before { background-image: url('/assets/logos/svg/tiktok-simplified-white-icon.svg'); }
.spotify-btn::before { background-image: url('/assets/logos/svg/spotify-white-icon.svg'); }
.youtube-btn::before { background-image: url('/assets/logos/svg/YouTube_light_icon.svg'); }
.email-btn::before { background-image: url('/assets/logos/svg/email_icon_white.svg'); }

/* Reserves space for the bolder font on hover to prevent layout shifting */
.nav-button::after {
    content: attr(data-text);
    display: block;
    font-weight: 900;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
}

/* Button Hover Effect */
.nav-button:hover {
    color: #ffffff;
    font-weight: 900;
}

/* Logo Styling */
.logo {
    padding: 0 15px; /* Creates space between logo and nav links */
    flex-shrink: 0; /* Prevents logo from shrinking */
    transition: margin 0.5s ease-in-out, padding 0.5s ease-in-out, transform 0.5s ease-in-out, opacity 0.4s ease;
    order: 2;
}

body.menu-open .logo {
    opacity: 0;
    pointer-events: none;
}

.logo img {
    max-height: 75px;
    width: auto;
    user-select: none;
    filter: brightness(1) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
    transition: max-height 0.5s ease-in-out, filter 0.2s ease-in-out;
}

body.header-inverted .logo img {
    filter: brightness(0); /* Turn black on the light background */
}

/* Responsive Navigation: Force single line on smaller screens */
@media (max-width: 1050px) {
    .nav-container {
        display: grid;
        /* Stack the logo on top, and put the links side-by-side underneath */
        grid-template-areas: 
            "logo logo"
            "left right";
        grid-template-columns: 1fr 1fr;
        align-items: center;
        row-gap: 10px;
        column-gap: 5px; /* Matches the new tighter gap between individual buttons */
    }

    .logo {
        grid-area: logo;
        display: flex;
        justify-content: center;
        margin-bottom: 0px;
        padding: 0;
    }

    .nav-links {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap; /* Forces buttons to stay on a single line */
        gap: 5px; /* Brought closer together on tablet layout */
    }

    .nav-left {
        grid-area: left; /* Assign left links to the left area */
        justify-content: flex-end;
    }

    .nav-right {
        grid-area: right; /* Assign right links to the right area */
        justify-content: flex-start;
    }
}

/* Scrolled Header State or Menu Open */
body.scrolled .nav-container,
body.menu-open .nav-container {
    row-gap: 0;
}

body.scrolled .nav-links,
body.menu-open .nav-links {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
}

@media (max-width: 1050px) {
    body.scrolled .nav-links,
    body.menu-open .nav-links {
        max-height: 0; /* Only collapse height on grid layout to mimic mobile wrap animation */
    }
}

body.scrolled .hamburger-btn,
body.menu-open .hamburger-btn {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

body.header-inverted .hamburger-btn {
    filter: none;
}

/* Turn the hamburger icon black when scrolled against the light background */
body.header-inverted .hamburger-btn:not(.open) span {
    background-color: #1a1a1a;
}

/* Enlarge logo layout size on scroll, but only on desktop where nav links are visible */
@media (min-width: 851px) {
    body.scrolled .logo img {
        max-height: 100px; /* Actually grows the layout dimensions */
    }
}

/* Main content area */
.main-content {
    position: relative;
    z-index: 10;
    padding: 120px 30px 20px; /* 30px shorter top padding */
    margin-top: calc(100vh - 100px); /* Fallback for older browsers */
    margin-top: calc(100svh - 100px); /* Moved up further to reveal more of the 250px mobile crumple */
    display: flex;
    flex-direction: column;
    gap: 80px;
    text-align: center;
    min-height: 100vh; /* Ensures the black background extends past the bottom of the screen on short pages */
    min-height: 100dvh; /* Better handling for mobile address bars */
    background-color: #ffffff; /* Newspaper base color */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    box-shadow: 0 50vh 0 0 #ffffff; /* Extends solid newspaper securely below without adding scrollable page height! */
}

/* Crumpled Paper Edge at Top behind Content */
.main-content::before {
    content: '';
    position: absolute;
    bottom: calc(100% - 2px); /* Anchor to the top of the content block, overlapping by 2px to prevent seams */
    left: 0;
    width: 100%;
    height: 250px; /* Twice as large */
    background-color: transparent;
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E"),
        var(--mirrored-paper-url, url('/assets/papercrumble/papercrumble.png'));
    background-size: 200px 200px, auto 100%; /* Tiles the noise on top, scales the paper underneath */
    background-position: top left, var(--crumple-offset, 0px) bottom;
    background-repeat: repeat, repeat-x; 
    -webkit-mask-image: var(--mirrored-paper-url, url('/assets/papercrumble/papercrumble.png'));
    -webkit-mask-size: auto 100%;
    -webkit-mask-position: var(--crumple-offset, 0px) bottom;
    -webkit-mask-repeat: repeat-x;
    mask-image: var(--mirrored-paper-url, url('/assets/papercrumble/papercrumble.png'));
    mask-size: auto 100%;
    mask-position: var(--crumple-offset, 0px) bottom;
    mask-repeat: repeat-x;
    z-index: -1;
    pointer-events: none;
}

@media (min-width: 851px) {
    .main-content {
        margin-top: calc(100vh + 50px); /* Fallback for older browsers */
        margin-top: calc(100svh + 50px); /* Moved up to reveal more of the 500px desktop crumple */
    }
    .main-content::before {
        height: 500px; /* 2x bigger on wider screens */
    }
}

@keyframes grain-shift {
    0% { background-position: 0 0; }
    20% { background-position: -15px 15px; }
    40% { background-position: 15px -10px; }
    60% { background-position: -10px -15px; }
    80% { background-position: 20px 10px; }
    100% { background-position: 0 0; }
}

/* Dummy text blocks */
.content-block {
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 60px 40px;
    border-radius: 30px;
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2; /* Ensures content stays above background clippings */
}

/* Newspaper style for standard non-member content blocks */
.content-block:not(.member-block) {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 20px;
}

.content-block:not(.member-block) h2 {
    color: #1a1a1a;
    text-shadow: none;
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -1px;
    border-top: 2px solid #1a1a1a;
    border-bottom: 4px double #1a1a1a;
    padding: 15px 0;
    margin: 0 auto 25px auto;
    max-width: 800px;
}

.content-block:not(.member-block) h2.welcome-heading {
    font-family: 'Built Titling', sans-serif;
    font-size: clamp(2.8rem, 14vw, 6rem);
    line-height: 1;
}

.welcome-heading .mobile-break {
    display: none;
}

.content-block:not(.member-block) p {
    color: #2b2b2b;
    font-family: 'Domine', serif;
    font-size: 1.5rem; /* Increased for better readability */
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

.content-block:not(.member-block) p a {
    color: #000000;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.content-block:not(.member-block) p a:hover {
    color: #666666;
}

.content-block h2 {
    font-family: 'Domine', serif;
    font-size: 2.2rem;
    margin-top: 0;
    margin-bottom: 20px;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.content-block p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    color: #e0e0e0;
}

.content-block p a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.content-block p a:hover {
    color: #aaaaaa;
}

/* Members Grid Layout */
.members-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    z-index: 2;
}

/* Band Member Blocks */
.member-block {
    padding: 20px;
    display: flex;
    align-items: stretch;
    text-align: left;
    gap: 30px;
    border-radius: 30px;
    position: relative;
}

/* Subtle checkerboard pattern at the bottom of the member cards */
.member-block::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px; /* Two rows of 20px squares */
    background-color: rgba(0, 0, 0, 0.4); /* Darkens the bottom edge */
    background-image: 
        linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 0.05) 50%),
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 50%, transparent 50%);
    background-size: 40px 20px; /* Each gradient row is exactly half the total height */
    background-position: 0 0, 0 20px; /* Top row, Bottom row */
    background-repeat: repeat-x, repeat-x; /* Only repeat horizontally */
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    z-index: -1; /* Places it behind text and images, but above the card's blur layer */
    pointer-events: none;
}

.member-photo {
    width: 180px;
    height: 270px; /* 2:3 aspect ratio */
    border-radius: 10px; /* Creates a nice modern rounded square for the larger image */
    object-fit: cover;
    flex-shrink: 0; /* Prevents the large image from squishing */
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none; /* Disables right-click and pointer interaction */
    user-select: none; /* Disables highlighting */
    -webkit-user-drag: none; /* Disables drag-and-drop to desktop */
    -webkit-touch-callout: none; /* Disables long-press save menu on mobile */
}

/* Right-aligned member variant */
.member-block.right-aligned {
    flex-direction: row-reverse;
    text-align: right;
}

.member-block.right-aligned .member-info {
    align-items: flex-end;
    padding: 10px 0 10px 10px; /* Restores padding on the outer edge, top, and bottom */
}

.content-block .member-info h2 {
    margin-bottom: 7.5px; /* Brings the role extremely close to the name */
    line-height: 1; /* Removes the tall invisible bounding box from the heading font */
}

.content-block p.member-role {
    color: #aaaaaa;
    font-style: italic;
    margin-bottom: 15px;
}

.content-block p.member-bio {
    color: #cccccc;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.member-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
    padding: 10px 10px 10px 0; /* Restores padding on the outer edge, top, and bottom */
}

.member-socials {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.member-block.right-aligned .member-socials {
    align-items: flex-end;
}

.member-socials a {
    color: #ffffff;
    text-decoration: none;
    margin: 0;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.member-socials a:hover {
    color: #aaaaaa;
}

.member-socials .icon-btn {
    padding-left: 1.6em; /* Adjusts for absence of nav-button's 6px base padding */
}
.member-socials .icon-btn::before {
    left: 0; /* Aligns perfectly flush to the left text boundary */
    margin-top: 0; /* Moves the glyph up by exactly 2px */
    opacity: 1; /* Match the pure white starting text */
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.member-socials .icon-btn:hover::before {
    filter: brightness(0.66); /* Darkens the white icon to match the #aaaaaa text color */
}
.member-block.right-aligned .member-socials .icon-btn {
    padding-left: 0;
    padding-right: 1.6em; /* Move padding to the right for right-aligned items */
}
.member-block.right-aligned .member-socials .icon-btn::before {
    left: auto;
    right: 0; /* Pin the icon to the right side */
    margin-top: 0;
}

/* Grid responsive stacking */
@media (max-width: 1100px) {
    .members-grid {
        grid-template-columns: 1fr;
    }
}

/* Stack horizontally on smaller screens */
@media (max-width: 768px) {
    .content-block {
        border-radius: 20px;
    }
    .content-block:not(.member-block) h2 {
        font-size: 2.2rem;
        border-top: 1px solid #1a1a1a;
        border-bottom: 3px double #1a1a1a;
    }
    .content-block:not(.member-block) p {
        font-size: 1.3rem; /* Scaled up for mobile readability */
    }
    .member-block,
    .member-block.right-aligned {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        border-radius: 20px;
        gap: 20px;
    }
    .content-block .member-info h2 {
        margin-bottom: 5px; /* Restores a small gap between the name and the role */
    }
    .content-block .member-info p.member-role {
        margin-bottom: 10px;
    }
    .content-block .member-info p.member-bio {
        margin-bottom: 10px;
    }
    .member-info,
    .member-block.right-aligned .member-info {
        align-items: center;
        text-align: center;
        padding: 0; /* Resets extra padding on small screens to maintain a tight layout */
    }
    .member-socials .icon-btn,
    .member-block.right-aligned .member-socials .icon-btn {
        padding-left: 1.6em; /* Reset back to standard left-alignment when centered on mobile */
        padding-right: 0; /* Remove extra padding so the visual center of the icon+text aligns with the screen center */
    }
    .member-block.right-aligned .member-socials .icon-btn::before {
        left: 0;
        right: auto;
    }
    .member-socials,
    .member-block.right-aligned .member-socials {
        margin-top: 0;
        align-items: center;
    }
    .welcome-heading .mobile-break {
        display: inline;
    }
}

/* --- Debug Overrides --- */
.debug-hide-social-overlays #social-bg-wrapper {
    display: none !important;
}

.debug-disable-animations,
.debug-disable-animations *,
.debug-disable-animations *::before,
.debug-disable-animations *::after {
    transition: none !important;
    animation: none !important;
}

/* Disable main background shift */
.debug-disable-bg-sliding body.bg-shifted #main-bg,
.debug-disable-bg-sliding body.bg-shifted #bg-fade-layer {
    --bg-shift: 0px !important;
}

/* --- Newspaper Background Clippings --- */
.news-sidebar {
    position: absolute;
    top: 0;
    bottom: 180px; /* Stops the container just above the footer area */
    width: calc(50% - 410px); /* 820px center channel hugging the headings */
    display: block; /* Switched to block so float wrapping works */
    padding: 140px 0 0 0; /* Aligned exactly with the 'Welcome to Taxi Stand' heading */
    z-index: 0;
    pointer-events: none;
    overflow: hidden; /* Prevent long columns of articles from overflowing past the footer */
}

.news-sidebar.left { 
    left: 0; 
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
.news-sidebar.right { 
    right: 0; 
    padding-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
}

.bg-news-article {
    position: relative;
    width: auto;
    margin-bottom: 30px; /* Balanced with the divider's top margin to perfectly center it */
    z-index: 0;
    pointer-events: none; /* Prevents them from interrupting user scrolling/clicks */
    font-family: 'redacted_scriptregular', cursive, sans-serif;
    text-align: justify;
    padding: 0;
    opacity: 1; /* Fully visible, no fade */
    mix-blend-mode: multiply; /* Creates an authentic ink-on-paper bleed effect */
}

/* Establish BFC for the dividers so they dynamically stop at the floats without overlapping member cards */
.news-divider {
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.news-divider.bottom {
    height: 1px;
    margin-top: 30px;
}

.news-divider.bottom::after {
    content: '';
    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Establishes a BFC specifically for the image, so it resizes dynamically next to floats without making the text blocky */
.news-img-wrap {
    overflow: hidden;
    margin-bottom: 10px;
}

.bg-news-article h3 {
    font-size: 1.05rem;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    line-height: 1.2;
    color: #000000;
    font-family: 'redacted_scriptbold', cursive, sans-serif;
    font-weight: normal; /* Font file itself is already bold, prevent browser from double-bolding */
}

.bg-news-article p {
    font-size: 1.2rem; /* Significantly increased for the custom script font */
    line-height: 1.4;
    margin: 0;
    color: #1a1a1a;
}

.bg-news-article img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%) contrast(1.3);
    border: 1px solid #000000;
    box-sizing: border-box;
}

/* Invisible boundaries for wrapping text */
.sidebar-spacer,
.sidebar-strut {
    opacity: 0;
    pointer-events: none;
}

/* Hides the margin clippings on smaller screens so they don't overlap the center content */
@media (max-width: 1450px) { /* Increased threshold slightly to prevent overly squished columns */
    .news-sidebar {
        display: none;
    }
}

/* --- Mobile Navigation --- */
.hamburger-btn {
    display: flex; /* Kept in DOM for fluid layout transitioning */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    position: fixed;
    top: 58px; /* Aligned vertically with the logo */
    left: 40px;
    z-index: 1001;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, filter 0.3s ease;
}

.hamburger-btn span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
}

/* Hamburger Animation */
.hamburger-btn.open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger-btn.open span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.hamburger-btn.open {
    filter: none; /* Remove drop shadow when open on white background */
}

.hamburger-btn.open span {
    background-color: #000000;
}

/* Mobile Menu Overlay */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 999; /* Just below the mobile-nav (1000) */
    opacity: 0;
    pointer-events: none; /* Keeps the main page scrollable */
    transition: opacity 0.4s ease-in-out;
}

body.menu-open #menu-overlay {
    opacity: 1;
}

.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(15vw + 350px);
    max-width: calc(100vw - 30px);
    height: 100vh;
    height: 100dvh; /* Fixes bottom UI bar clipping on mobile devices */
    background-color: #ffffff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 31px 40px 100px 40px; /* Restored top padding to keep logo perfectly aligned */
    box-sizing: border-box;
    transform: translateX(calc(-100% - 40px)); /* Shift enough to fully hide the larger box-shadow when closed */
    transform-origin: left center; /* Ensures stretching and snapping always happens from the left edge */
    pointer-events: none;
    transition: transform 0.4s ease-in-out;
    box-shadow: 15px 0 30px rgba(0, 0, 0, 0.5); /* Adds a pronounced shadow to the right side */
}

/* Infinite left extension to cover background when dragged to the right */
.mobile-nav::before {
    content: '';
    position: absolute;
    top: 0;
    right: calc(100% - 1px); /* Overlap by 1px to prevent sub-pixel rendering gaps */
    width: 100vw;
    height: 100%;
    background-color: #ffffff;
}

/* Bottom checkerboard pattern */
.mobile-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100vw; /* Stretch across the infinite left extension */
    width: calc(100vw + 100%);
    height: 40px; /* Two rows of 20px squares */
    background-color: #ffffff; /* Solid base completely prevents background bleeding */
    background-image: 
        linear-gradient(to right, transparent 50%, #000000 50%),
        linear-gradient(to right, #000000 50%, transparent 50%);
    background-size: 40px 20px; /* Each gradient row is exactly half the total height */
    background-position: 0 0, 0 20px; /* Top row, Bottom row */
    background-repeat: repeat-x, repeat-x; /* Only repeat horizontally */
    z-index: 1;
    pointer-events: none;
}

.mobile-nav.open {
    transform: translateX(0);
    pointer-events: auto;
}

.mobile-logo {
    max-height: 84px;
    width: auto;
    margin-top: -5px;
    margin-bottom: 40px; /* Pushes the evenly spaced text buttons down without moving the logo */
    align-self: center; /* Forces the logo to center while the text buttons stay left-aligned */
    filter: brightness(0); /* Instantly turns the white logo black */
    user-select: none;
}

.mobile-nav .nav-button {
    font-size: clamp(22px, 2vw + 2vh, 36px); /* Slightly increased to hit the sweet spot between mobile and PC */
    font-weight: 900;
    color: #121212;
    text-shadow: none;
    text-align: left;
    padding: 8px 0;
    margin-top: auto;
}

.mobile-nav .nav-button:last-child {
    margin-bottom: auto;
}

/* Uniform Spacing for Mobile Icon Buttons */
.mobile-nav .icon-btn {
    padding-left: 1.6em; 
}

/* Adjust Icon Buttons for Mobile Menu's White Background */
.mobile-nav .icon-btn::before {
    left: 0; /* Align icon directly to the left edge */
    top: calc(50% - 2.5px); /* Nudges the logo up slightly more in the mobile menu */
    filter: invert(1); /* Turns the white SVG black to match the mobile text */
    opacity: 0.95; /* Matches the #121212 text color */
}

.mobile-nav .icon-btn:hover::before {
    opacity: 1; /* Matches the pure #000000 text color on hover */
}

.mobile-nav .nav-button:hover {
    color: #000000;
}

/* Wrap Detection / Hamburger Breakpoint */
@media (max-width: 850px) {
    .nav-container {
        row-gap: 0; /* Remove gap so the bottom row fully collapses */
    }
    .nav-links {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
                transform: translateY(-15px);
    }
    .hamburger-btn {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }
}

/* --- Easter Egg Animation --- */
@keyframes easterEggSpin {
    0% { transform: rotateY(0deg); opacity: 1; }
    40% { opacity: 1; }
    50% { opacity: 0; }
    60% { opacity: 1; }
    100% { transform: rotateY(360deg); opacity: 1; }
}

.spin-easter-egg {
    animation: easterEggSpin 1s ease-in-out !important;
}

/* --- Easter Egg Signature Hover --- */
.mobile-logo.signature-active {
    filter: brightness(0) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) !important;
    transition: filter 0.2s ease-in-out;
}

.site-header .logo img.signature-active {
    filter: brightness(0) invert(1) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5)) !important;
    transition: filter 0.2s ease-in-out;
}

@media (hover: hover) {
    .mobile-logo.signature-active:hover {
        filter: brightness(0) drop-shadow(0.5px 0 0 #000) drop-shadow(-0.5px 0 0 #000) drop-shadow(0 0.5px 0 #000) drop-shadow(0 -0.5px 0 #000) !important;
    }

    .site-header .logo img.signature-active:hover {
        filter: brightness(0) invert(1) drop-shadow(0.5px 0 0 #fff) drop-shadow(-0.5px 0 0 #fff) drop-shadow(0 0.5px 0 #fff) drop-shadow(0 -0.5px 0 #fff) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5)) !important;
    }
}

/* --- Site Footer --- */
.site-footer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 40px;
}

.footer-socials a,
.footer-credits a {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.footer-socials a:hover {
    color: #666666;
}

.footer-socials .icon-btn {
    padding-left: 1.6em; /* Adjusts for absence of nav-button's 6px base padding */
}

.footer-credits .icon-btn {
    padding-left: 1.6em;
    margin-left: 2px; /* Pushes the glyph slightly away from the "Website by " text */
}

.footer-socials .icon-btn::before,
.footer-credits .icon-btn::before {
    left: 0;
    margin-top: 0;
    opacity: 1;
    filter: invert(1); /* Invert white icons to black */
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.footer-socials .icon-btn:hover::before,
.footer-credits .icon-btn:hover::before {
    filter: invert(0.6); /* Lighter black (grey) on hover */
}

.footer-credits p {
    color: #666666;
    font-size: 0.65rem;
    margin: 0;
}

.footer-credits a {
    color: #666666; /* Matches the "Website by" text color */
    font-size: 0.65rem;
}

.footer-credits a:hover {
    color: #1a1a1a; /* Darken on hover for contrast */
}

.footer-credits .icon-btn::before {
    filter: invert(0.6); /* Grey icon to match the text */
}

.footer-credits .icon-btn:hover::before {
    filter: invert(1); /* Black icon to match the hover text */
}