/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ACCT Brand Colors */

:root {
    --burnt-sienna: #A0522D;        /* Warm reddish-brown */
    --stag-beetle-shell: #2F3849;   /* Dark navy charcoal */
    --stormy-periwinkle: #7B8CAE;   /* Blue-gray */
    --rustwood-red: #8B4513;        /* Dark reddish-brown */
    --deepwater-mussel: #2C3E50;    /* Navy blue */
    --dune-lichen: #FFF8DC;         /* Cream off-white */
    --orchid-mantis: #6B395B;       /* Purple */
    --river-depths: #1C4B5C;        /* Dark teal */
    --light-grey: #f5f5f5;          /* Light grey */
    
    /* Primary colors for design */
    --primary-purple: var(--orchid-mantis);
    --primary-red: var(--rustwood-red);
    --primary-navy: var(--stag-beetle-shell);
    --primary-teal: var(--river-depths);
    --text-dark: var(--stag-beetle-shell);
    --text-medium: #666666;             /* Medium gray for body text */
    --text-light: var(--dune-lichen);
    --background-light: var(--dune-lichen);
}

/* Header/Navigation */
.header {
    background: rgba(255, 248, 220, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(47, 56, 73, 0.1);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo-img {
    height: 50px;
    width: auto;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-purple);
}

/* Dropdown Navigation Styles */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dropdown-arrow {
    width: 16px;
    height: 16px;
    fill: var(--text-dark);
    transition: transform 0.3s ease, fill 0.3s ease;
    flex-shrink: 0;
}

.nav-dropdown:hover .dropdown-arrow {
    fill: var(--primary-purple);
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 200px;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 0.5rem 0;
    list-style: none;
    border: 1px solid rgba(47, 56, 73, 0.1);
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.25rem;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.dropdown-menu a:hover {
    background: rgba(123, 140, 174, 0.08);
    color: var(--stormy-periwinkle);
    border-left-color: var(--stormy-periwinkle);
    padding-left: 1.5rem;
}

.dropdown-menu a:active {
    background: rgba(28, 75, 92, 0.1);
    color: var(--river-depths);
    border-left-color: var(--river-depths);
}

.shop-btn {
    background: var(--primary-red);
    color: var(--text-light) !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.3s ease;
    text-transform: uppercase;
    text-decoration: none !important;
}

.shop-btn:hover {
    background: #654321;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    transition: 0.3s;
}

/* Hero Section Container */
.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
}

.hero-content {
    position: absolute;
    top: 40%;
    left: 2rem;
    transform: translateY(-50%);
    z-index: 2;
    max-width: 10rem;
    text-align: left;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: var(--text-light);
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.1rem;
    word-spacing: 100vw;
}

/* Purple Banner with SVG Mask Hand-Torn Edge */
.purple-banner {
    position: relative;
    background-color: var(--primary-purple);
    color: var(--text-light);
    text-align: center;
    padding: 16rem 2rem 6rem 2rem;
    margin-top: -180px;
    z-index: 1;

    /* Hand-torn top edge fixed to remove white gap */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: top;

    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: top;
}

/* Beetle texture overlay for purple banner */
.purple-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/beetle-banner-texture.png');
    background-size: 300px 300px;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

.welcome-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    color: var(--text-light);
    font-weight: 400;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

/* Content Section */
.content {
    padding: 6rem 0;
    background: var(--background-light);
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.content-image {
    position: relative;
    overflow: visible;
}

.beetle-card {
    position: relative;
    display: inline-block;
}



/* Ultra-smooth organic blob shape for the beetle image */
.beetle-img {
    width: 100%;
    display: block;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    /* Perfectly smooth organic shape using border-radius */
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    transform: rotate(5deg);
}



.content-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
}

.content-paragraph {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 2rem;
}

/* Large raindrop/kidney-shaped button */
.learn-more-btn {
    position: absolute;
    bottom: 8%; /* Position within the image bounds */
    right: 5%; /* Position within the image bounds */
    background-color: #7e4f48; /* User's specified color */
    color: #fff;
    font-size: 1.6rem; /* much larger text */
    padding: 2rem 3.5rem; /* much bigger padding for prominence */
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    
    /* Distinctive raindrop/kidney shape */
    border-radius: 80% 20% 85% 15% / 25% 75% 25% 75%;
    
    /* Enhanced depth with softer shadow */
    box-shadow: 0 10px 30px rgba(126, 79, 72, 0.35), 0 5px 12px rgba(0,0,0,0.12);
    
    /* Minimal transition - no bounce */
    transition: opacity 0.2s ease;
    z-index: 2;
}

/* Biodiversity Section */
.biodiversity-section {
    background-color: var(--stormy-periwinkle);
    padding: 6rem 0;
    color: var(--dune-lichen);
    position: relative;
    overflow: hidden;
}

/* Antennae texture overlay */
.biodiversity-section::before {
    content: '';
    position: absolute;
    top: 70%;
    right: 5%;
    width: 55%;
    height: 75%;
    background-image: url('../images/antennae_texture.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
    transform: rotate(-40deg);
    transform-origin: bottom left;
}

.biodiversity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.biodiversity-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dune-lichen);
    margin-bottom: 2rem;
    letter-spacing: 0.1em;
}

.biodiversity-text {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 3rem;
    color: var(--dune-lichen);
    opacity: 0.95;
}

.mission-btn {
    display: inline-block;
    background-color: var(--text-light);
    color: var(--stormy-periwinkle);
    padding: 1rem 2.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 0;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mission-btn:hover {
    background-color: var(--dune-lichen);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.biodiversity-beetle {
    width: 100%;
    height: auto;
    border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: rotate(-3deg);
}

/* Dive Deeper Section */
.dive-deeper-section {
    background-color: var(--dune-lichen);
    padding: 6rem 0;
    color: var(--text-dark);
}

.dive-deeper-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.dive-deeper-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2rem;
    letter-spacing: 0.1em;
}

.dive-deeper-text {
    font-size: 1.3rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
    font-weight: 500;
}

.dive-deeper-subtext {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    color: #666;
}

.dive-deeper-beetle {
    width: 100%;
    height: auto;
    border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: rotate(2deg);
}

/* Resources Grid */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.resource-box {
    background-color: #fff;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 2px solid #e5e5e5;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
}

.resource-box:hover {
    border-color: var(--stormy-periwinkle);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.resource-box:hover .resource-icon {
    stroke: var(--stormy-periwinkle);
    opacity: 1;
    transform: scale(1.1);
}

.resource-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem auto;
    opacity: 0.8;
    stroke: var(--rustwood-red);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}

.resource-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    text-decoration: none;
}

.resource-box .resource-title {
    text-decoration: none;
}

/* Threatened Species Focus Resource Box */
.threatened-species-box {
    position: relative;
    overflow: hidden;
}

.resource-beetle-image {
    position: relative;
    width: 100%;
    height: 120px;
    margin-bottom: 1rem;
    border-radius: 6px;
    overflow: hidden;
}

.beetle-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.beetle-letter {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(47, 56, 73, 0.9);
    color: var(--dune-lichen);
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: none;
}

.resource-content {
    text-align: center;
    flex: 1;
}

.threatened-species-box .resource-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.resource-description {
    font-size: 0.9rem;
    color: var(--text-dark);
    opacity: 0.8;
    line-height: 1.4;
    margin: 0;
}

/* Contact and Message Button */
.contact-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #666;
}

.message-btn {
    display: inline-block;
    background-color: var(--river-depths);
    color: var(--text-light);
    padding: 1.2rem 2.8rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 0;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.message-btn:hover {
    background-color: var(--stag-beetle-shell);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

/* Make a Splash Section */
.splash-section {
    background-color: #7e4f48;
    padding: 8rem 0;
    color: var(--text-light);
    position: relative;
    overflow: hidden;
}

/* Head texture overlay */
.splash-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -30%;
    width: 120%;
    height: 140%;
    background-image: url('../images/head-texture.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
}

.splash-content {
    max-width: 600px;
    position: relative;
    z-index: 2;
}

.splash-heading {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 2rem;
    letter-spacing: 0.1em;
}

.splash-text {
    font-size: 1.4rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    color: var(--text-light);
    font-weight: 500;
}

.splash-subtext {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 3rem;
    color: var(--text-light);
    opacity: 0.9;
}

/* Splash section shop button - user specified color and much longer */
.splash-section .shop-btn {
    display: inline-block;
    background-color: #f9f2dc; /* Light cream */
    color: #3a4663 !important; /* Force exact color specified by user */
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
    padding: 1.2rem 7rem; /* Much longer button with more space */
    margin-top: 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.splash-section .shop-btn:hover {
    background-color: #e8dec6;
    color: #3a4663 !important; /* Maintain color on hover */
    transform: translateY(-2px);
}

/* Current Ripples Section */
.ripples-section {
    background-color: var(--dune-lichen);
    padding: 8rem 0 6rem 0;
    position: relative;
}

/* Wavy top border */
.ripples-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #7e4f48;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,8 C15,3 25,12 40,7 C55,2 65,11 80,6 C90,3 95,8 100,5 L100,0 L0,0 Z" fill="white"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: top;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,8 C15,3 25,12 40,7 C55,2 65,11 80,6 C90,3 95,8 100,5 L100,0 L0,0 Z" fill="white"/></svg>');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: top;
}

.ripples-header {
    text-align: center;
    margin-bottom: 4rem;
}

.ripples-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--stormy-periwinkle);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.ripples-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.05em;
}

/* ===============================
   STATIC NEWS GRID
   =============================== */

/* News Carousel Container */
.news-carousel {
    margin-bottom: 6rem;
}

/* News Grid Layout */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* News Card */
.news-card {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    display: block;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* News Image */
.news-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-card:hover .news-image {
    transform: scale(1.05);
}

/* News Overlay */
.news-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, 0.4) 30%,
        rgba(0, 0, 0, 0.8) 100%
    );
    color: #ffffff;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: background 0.3s ease;
}

.news-card:hover .news-overlay {
    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, 0.5) 20%,
        rgba(0, 0, 0, 0.9) 100%
    );
}

/* News Label */
.news-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    opacity: 0.9;
}

/* News Title */
.news-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin: 0 0 0.8rem 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* News Excerpt - Always visible but subtle */
.news-card .news-excerpt {
    font-size: 0.9rem;
    color: #ffffff !important;
    line-height: 1.4;
    margin-bottom: 1rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.news-card:hover .news-excerpt {
    opacity: 1;
}

/* Read More Link */
.news-read-more {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    opacity: 0.9;
    transition: all 0.3s ease;
}

.news-card:hover .news-read-more {
    opacity: 1;
    color: #ffffff;
    transform: translateX(5px);
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .news-card {
        aspect-ratio: 4/3;
    }
    
    .news-overlay {
        padding: 1.5rem;
    }
    
    .news-title {
        font-size: 1.2rem;
    }
    
    .news-excerpt {
        font-size: 0.85rem;
        color: #ffffff;
        opacity: 0.85;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    }
}

/* Tagline Section (for Mission page) */
.tagline-section {
    background-color: var(--dune-lichen);
    padding: 6rem 0;
}

.tagline-section .tagline {
    margin-top: 0;
}

/* Tagline */
.tagline {
    text-align: center;
    margin-top: 4rem;
}

.tagline-text {
    font-size: 2.2rem;
    font-weight: 400;
    font-family: 'Courier New', 'Monaco', 'Menlo', 'Lucida Console', 'Liberation Mono', monospace;
    color: var(--text-dark);
    opacity: 0.4;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* New Footer Design */
.footer {
    background: transparent;
    padding: 0;
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
}

/* Left Action Section */
.footer-action {
    background: var(--river-depths);
    position: relative;
    display: flex;
    align-items: center;
    padding: 4rem;
    overflow: hidden;
}

.footer-action-content {
    position: relative;
    z-index: 2;
    color: var(--text-light);
}

.action-button-group {
    margin-bottom: 2rem;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #7dd3fc;
    text-decoration: none;
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(125, 211, 252, 0.2);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.action-btn:hover {
    color: #38bdf8;
    border-bottom-color: #38bdf8;
    padding-left: 0.5rem;
}

.action-arrow {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.action-btn:hover .action-arrow {
    transform: translateX(4px);
}

.donate-btn {
    display: inline-block;
    background-color: #f9f2dc; /* Light cream - matching Make a Splash button */
    color: #3a4663 !important; /* Dark blue text - matching Make a Splash button */
    padding: 1.2rem 4rem; /* Longer padding like Make a Splash button */
    text-decoration: none;
    font-weight: 500;
    font-size: 1.2rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    border: 2px solid #f9f2dc;
}

.donate-btn:hover {
    background-color: #e8dec6;
    color: #3a4663 !important; /* Maintain color on hover */
    transform: translateY(-2px);
}

/* Beetle Overlay */
.footer-beetle-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/beetle-4.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 1;
    filter: blur(1px) contrast(1.2);
}

/* Right Links Section */
.footer-links-section {
    background: #56668c;
    padding: 4rem;
    color: var(--text-light);
}

.footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-column-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    color: var(--text-light);
}

.footer-column-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column-links li {
    margin-bottom: 1rem;
}

.footer-column-links a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
    opacity: 0.8;
}

.footer-column-links a:hover {
    opacity: 1;
    color: var(--dune-lichen);
}

/* Social Icons */
.footer-social {
    display: flex;
    gap: 1rem;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--river-depths);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--text-light);
}

.social-icon:hover {
    background: var(--text-light);
    transform: translateY(-2px);
}

.social-icon:hover svg {
    fill: var(--river-depths);
}

/* Footer Bottom */
.footer-bottom {
    background: var(--stag-beetle-shell);
    padding: 1.5rem 0;
}

.footer-bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-light);
    font-size: 0.9rem;
}

.footer-bottom-links {
    display: flex;
    gap: 2rem;
}

.footer-bottom-links a {
    color: var(--text-light);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer-bottom-links a:hover {
    opacity: 1;
}

.footer-copyright {
    margin: 0;
    opacity: 0.8;
}

.subscribe-btn {
    background: transparent;
    color: var(--text-light);
    border: 2px solid var(--text-light);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.subscribe-btn:hover {
    background: var(--text-light);
    color: var(--stag-beetle-shell);
}

/* About Page Styles */
.about-hero {
    height: 70vh;
    background-image: url('../images/who-we-are.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(47, 79, 79, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-hero-title {
    font-size: 4rem;
    font-weight: 700;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.about-hero-subtitle {
    font-size: 1.4rem;
    color: var(--text-light);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Who We Are Banner - Same settings as homepage purple banner */
.who-we-are-banner {
    position: relative;
    background-color: #2e4857;
    color: var(--text-light);
    text-align: center;
    padding: 16rem 2rem 6rem 2rem;
    margin-top: -180px;
    z-index: 1;

    /* Hand-torn top edge fixed to remove white gap */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: top;

    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: top;
}

/* Beetle texture overlay for who we are banner */
.who-we-are-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/beetle-banner-texture.png');
    background-size: 300px 300px;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

.banner-text {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    color: var(--dune-lichen);
    font-weight: 400;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    text-align: center;
}



.members-section {
    padding: 5rem 2rem;
    background: var(--dune-lichen);
    position: relative;
    overflow: hidden;
}

.members-section::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 900px;
    height: 900px;
    background-image: url('../images/head-texture-2.png');
    background-size: contain;
    background-position: bottom left;
    background-repeat: no-repeat;
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
    transform: translate(-300px, 20px);
}

.members-section .container {
    position: relative;
    z-index: 2;
}



.members-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.members-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    min-width: 300px;
}

.members-list li {
    padding: 1rem 1.5rem;
    margin-bottom: 0.5rem;
    background: #ffffff;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: var(--text-dark);
}

.members-list li:hover {
    background-color: var(--stormy-periwinkle);
    color: var(--text-light);
    transform: translateX(8px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.members-list li.active {
    background-color: var(--river-depths);
    color: var(--text-light);
    transform: translateX(15px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.member-details {
    flex: 1;
    background: #ffffff;
    padding: 2.5rem;
    min-height: 250px;
    border-radius: 0px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    text-align: left;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s ease;
    border-left: 4px solid var(--rustwood-red);
}

.member-details.show {
    opacity: 1;
    transform: translateY(0);
}

#member-name {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--stag-beetle-shell);
    font-weight: 600;
}

#member-role {
    font-size: 1.1rem;
    color: var(--stormy-periwinkle);
    font-weight: 500;
    margin-bottom: 1.5rem;
}

#member-bio {
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.6;
    margin: 0;
}

/* Our Mission Page Styles */
.mission-hero {
    height: 70vh;
    background-image: url('../images/our-mission.jpg');
    background-size: cover;
    background-position: center 30%;
    background-attachment: scroll;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Our Mission Banner - Same settings as homepage purple banner */
.our-mission-banner {
    position: relative;
    background-color: #3a4663;
    color: var(--text-light);
    text-align: center;
    padding: 16rem 2rem 6rem 2rem;
    margin-top: -180px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hand-torn top edge fixed to remove white gap */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: top;

    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: top;
}

/* Beetle texture overlay for our mission banner */
.our-mission-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/beetle-banner-texture.png');
    background-size: 300px 300px;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

.our-mission-banner .banner-text {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    color: var(--dune-lichen);
    font-weight: 400;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    text-align: center;
}

/* WATER Mission Grid Section */
.water-mission-grid {
    padding: 6rem 2rem;
    background: var(--dune-lichen);
    position: relative;
    overflow: hidden;
}

.water-mission-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: -200px;
    bottom: 0;
    background-image: url('../images/adaegus-1.png');
    background-size: 1200px auto;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    opacity: 0.03;
    z-index: 0;
}

.water-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.water-box {
    position: relative;
    background: #ffffff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 300px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.water-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.water-image-container {
    position: relative;
    width: 40%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
}

.water-beetle-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.water-beetle-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(47, 56, 73, 0.15);
    transition: all 0.3s ease;
}

.water-box:hover .water-beetle-filter {
    background: rgba(47, 56, 73, 0.05);
}

.water-letter-overlay {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    font-size: 8rem;
    font-weight: 800;
    color: rgba(123, 63, 0, 0.5);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 3;
    line-height: 1;
}

.water-box:hover .water-letter-overlay {
    color: rgba(123, 63, 0, 0.6);
}

.water-content {
    padding: 2rem;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.water-content h3 {
    font-size: 1.3rem;
    color: var(--stag-beetle-shell);
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.water-content p {
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.4;
    margin: 0;
    opacity: 0.8;
}

/* Mobile Menu Styles - Consolidated in responsive section at end of file */

/* Animation Classes */
.fade-in {
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header.scrolled {
    background: rgba(255, 248, 220, 0.98);
    box-shadow: 0 2px 20px rgba(47, 56, 73, 0.1);
}

/* Responsive Design - Consolidated in responsive section at end of file */

/* Small mobile styles - Consolidated in responsive section at end of file */

/* ===============================
   NEWS PAGE STYLES (ACCT Now)
   =============================== */

/* News Hero Section */
.news-hero {
    height: 70vh;
    background-image: url('../images/beetle-16.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(47, 79, 79, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}



/* News Content Section */
.news-content-section {
    padding: 6rem 0;
    background: var(--light-grey);
}

/* Featured Article */
.featured-article {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 6rem;
    padding: 3rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.featured-article-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.featured-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.featured-article:hover .featured-img {
    transform: scale(1.05);
}

.article-category {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--primary-red);
    color: var(--text-light);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.featured-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.featured-subtitle {
    font-size: 1.2rem;
    color: var(--stormy-periwinkle);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.article-meta {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.author-info, .article-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--stag-beetle-shell);
    font-size: 0.9rem;
}

.author-icon, .date-icon {
    width: 16px;
    height: 16px;
    stroke: var(--stormy-periwinkle);
    fill: none;
    stroke-width: 2;
}

.featured-excerpt {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 2rem;
    opacity: 0.8;
}

.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-purple);
    color: var(--text-light);
    padding: 0.875rem 1.75rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
}

.read-more-btn:hover {
    background: #5a2d4a;
    transform: translateY(-2px);
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
    align-items: start; /* Ensure cards align to top */
}

.news-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure full height usage */
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.news-card-image {
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* Prevent image from shrinking */
}

.news-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-card:hover .news-img {
    transform: scale(1.1);
}

.news-card .article-category {
    top: 0.75rem;
    left: 0.75rem;
    font-size: 0.7rem;
    padding: 0.375rem 0.75rem;
}

.news-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow content to grow and fill space */
    min-height: 0; /* Ensure proper flexbox behavior */
}

.news-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.3;
    flex-shrink: 0; /* Prevent title from shrinking */
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--stormy-periwinkle);
    flex-shrink: 0; /* Prevent meta from shrinking */
}

.news-author {
    font-weight: 500;
}

.news-date {
    opacity: 0.8;
}

.news-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    opacity: 0.8;
    flex-grow: 1; /* Allow excerpt to take available space */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limit to 4 lines */
    line-clamp: 4; /* Standard property for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-link {
    color: var(--primary-purple);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    margin-top: auto; /* Push link to bottom */
    align-self: flex-start; /* Align to start of container */
    flex-shrink: 0; /* Prevent link from shrinking */
}

.news-link:hover {
    color: #5a2d4a;
}

/* Newsletter Signup */
.newsletter-signup {
    background: var(--primary-teal);
    color: var(--text-light);
    padding: 4rem 3rem;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 4rem;
}

.newsletter-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.newsletter-text {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    max-width: 400px;
    margin: 0 auto;
}

.newsletter-input {
    flex: 1;
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
}

.newsletter-btn {
    background: var(--primary-red);
    color: var(--text-light);
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.newsletter-btn:hover {
    background: #654321;
}

/* Annual Report Section */
.annual-report-section {
    padding: 6rem 0;
    background: #f8f9fa;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 3rem;
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
}

.report-item {
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.report-year {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-purple);
    margin-bottom: 1rem;
}

.report-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.report-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dark);
    opacity: 0.8;
    margin-bottom: 2rem;
}

.report-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.report-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.report-btn.primary {
    background: var(--primary-red);
    color: var(--text-light);
}

.report-btn.primary:hover {
    background: #654321;
}

.report-btn.secondary {
    background: transparent;
    color: var(--primary-purple);
    border: 2px solid var(--primary-purple);
}

.report-btn.secondary:hover {
    background: var(--primary-purple);
    color: var(--text-light);
}

/* Responsive Design - News Page - Consolidated in responsive section at end of file */

/* ===============================
   ACCT TOGETHER PAGE STYLES
   =============================== */

/* Together Hero Section - Clean Display */
.together-hero {
    height: 70vh;
    background-image: url('../images/latissmus-old-page.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.together-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(47, 79, 79, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Together Banner - Same settings as homepage purple banner but with teal color */
.together-banner {
    position: relative;
    background-color: #1C4B5C; /* River Depths */
    color: var(--text-light);
    text-align: center;
    padding: 16rem 2rem 6rem 2rem;
    margin-top: -180px;
    z-index: 3;

    /* Hand-torn top edge fixed to remove white gap */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: top;

    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: top;
}

/* Beetle texture overlay for together banner */
.together-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/beetle-banner-texture.png');
    background-size: 300px 300px;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

/* Events Section */
.events-section {
    padding: 6rem 0;
    background: var(--light-grey);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--stormy-periwinkle);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.event-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    gap: 1.5rem;
}

.event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.event-date {
    background: var(--primary-teal);
    color: var(--text-light);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    min-width: 80px;
    height: fit-content;
}

.event-month {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.event-day {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.event-year {
    font-size: 0.8rem;
    opacity: 0.8;
}

.event-content {
    flex: 1;
}

.event-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.event-location {
    color: var(--stormy-periwinkle);
    font-weight: 500;
    margin-bottom: 1rem;
}

.event-description {
    color: var(--text-dark);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.event-actions {
    display: flex;
    gap: 1rem;
}

.event-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.event-btn.primary {
    background: var(--primary-purple);
    color: var(--text-light);
}

.event-btn.primary:hover {
    background: #5a2d4a;
}

.event-btn.secondary {
    background: transparent;
    color: var(--primary-teal);
    border: 2px solid var(--primary-teal);
}

.event-btn.secondary:hover {
    background: var(--primary-teal);
    color: var(--text-light);
}

/* Balfour-Browne Club Section */
.balfour-browne-section {
    padding: 6rem 0;
    background: #f8f9fa;
}

.club-header {
    text-align: center;
    margin-bottom: 4rem;
}

.club-content {
    max-width: 1000px;
    margin: 0 auto;
}

/* Club Story with Portrait */
.club-story {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: start;
    margin-bottom: 4rem;
    padding: 3rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.story-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

.story-paragraph {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.portrait-frame {
    text-align: center;
    position: relative;
}

.portrait-img {
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    
    /* Vintage photo filter to improve quality and add character */
    filter: 
        contrast(1.2) 
        brightness(1.1) 
        sepia(15%) 
        saturate(0.8)
        blur(0.3px);
    
    /* Subtle grain effect */
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(0,0,0,0.02) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0,0,0,0.02) 0%, transparent 50%);
}

.portrait-caption {
    margin-top: 1rem;
}

.portrait-caption h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.portrait-caption p {
    font-size: 0.9rem;
    color: var(--stormy-periwinkle);
    font-style: italic;
}

/* Club Activities */
.club-activities {
    margin-bottom: 4rem;
}

.activities-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 2rem;
    text-align: center;
}

.activities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.activity-item {
    background: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.activity-item:hover {
    transform: translateY(-3px);
}

.activity-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
    background: var(--primary-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--text-light);
    fill: none;
    stroke-width: 2;
}

.activity-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.activity-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-dark);
    opacity: 0.8;
}

/* Membership Information */
.membership-info {
    background: var(--primary-purple);
    color: var(--text-light);
    padding: 3rem;
    border-radius: 12px;
    text-align: center;
}

.membership-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.membership-text {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.membership-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 3rem;
    margin-bottom: 2.5rem;
    text-align: left;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1rem;
    line-height: 1.5;
}

.benefit-item svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-light);
    fill: none;
    stroke-width: 3;
    flex-shrink: 0;
    margin-top: 2px;
}

.membership-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.membership-btn {
    padding: 0.875rem 1.75rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.membership-btn.primary {
    background: var(--text-light);
    color: var(--primary-purple);
}

.membership-btn.primary:hover {
    background: var(--background-light);
    transform: translateY(-2px);
}

.membership-btn.secondary {
    background: transparent;
    color: var(--text-light);
    border: 2px solid var(--text-light);
}

.membership-btn.secondary:hover {
    background: var(--text-light);
    color: var(--primary-purple);
}

/* Responsive Design - ACCT Together Page */
@media (max-width: 768px) {
    .together-hero {
        height: 50vh;
        background-attachment: scroll;
    }

    .together-banner {
        padding: 12rem 1rem 4rem 1rem;
        margin-top: -120px;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .events-grid {
        grid-template-columns: 1fr;
    }

    .event-card {
        flex-direction: column;
        text-align: center;
    }

    .event-date {
        align-self: center;
    }

    .event-actions {
        justify-content: center;
        flex-direction: column;
    }

    .club-story {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
        text-align: center;
    }

    .story-title {
        font-size: 1.6rem;
    }

    .story-paragraph {
        font-size: 1rem;
    }

    .activities-grid {
        grid-template-columns: 1fr;
    }

    .membership-info {
        padding: 2rem;
    }

    .membership-title {
        font-size: 1.6rem;
    }
    
    .membership-benefits {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: left;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    
    .benefit-item {
        justify-content: flex-start;
        text-align: left;
    }

    .membership-actions {
        flex-direction: column;
    }

    .membership-btn {
        width: 100%;
        text-align: center;
    }
}

/* ===============================
   NEWSLETTERS PAGE STYLES
   =============================== */

/* Newsletters Hero Section with Beetle Image */
.newsletters-hero {
    height: 70vh;
    background-image: url('../images/hero-beetle.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletters-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(47, 56, 73, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletters-hero .hero-content {
    text-align: center;
    color: var(--text-light);
    max-width: 800px;
    padding: 2rem;
}

.newsletters-hero .hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Newsletters Banner - Same settings as homepage purple banner but with rustwood red */
.newsletters-banner {
    position: relative;
    background-color: var(--rustwood-red);
    color: var(--text-light);
    text-align: center;
    padding: 16rem 2rem 6rem 2rem;
    margin-top: -180px;
    z-index: 1;

    /* Hand-torn top edge fixed to remove white gap */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: top;

    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: top;
}

/* Beetle texture overlay for newsletters banner */
.newsletters-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/beetle-banner-texture.png');
    background-size: 300px 300px;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

/* Newsletters Content Section */
.newsletters-content-section {
    padding: 6rem 0;
    background: var(--light-grey);
}

.newsletters-intro {
    text-align: center;
    margin-bottom: 4rem;
}

/* Current Newsletter Featured Section */
.current-newsletter {
    background: #ffffff;
    border-radius: 16px;
    padding: 3rem;
    margin-bottom: 6rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 3px solid var(--rustwood-red);
}

.current-newsletter-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.current-badge {
    background: var(--rustwood-red);
    color: var(--text-light);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 1rem;
}

.current-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.current-date {
    font-size: 1.2rem;
    color: var(--stormy-periwinkle);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.current-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Newsletter Covers */
.newsletter-cover {
    background: #faf0e6;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    position: relative;
    aspect-ratio: 3/4;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 2px solid #ddd;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.newsletter-cover:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.newsletter-cover.current {
    border: 3px solid var(--rustwood-red);
    background: #fff8dc;
}

.cover-beetle {
    width: 80px;
    height: 120px;
    margin-bottom: 1rem;
}

.cover-text h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--rustwood-red);
    margin-bottom: 0.5rem;
    font-family: serif;
}

.cover-text p {
    font-size: 0.75rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.cover-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--stormy-periwinkle);
}

/* Download Buttons */
.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--rustwood-red);
    color: var(--text-light);
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.download-btn:hover {
    background: #654321;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 69, 19, 0.3);
}

.download-btn:hover .download-icon {
    transform: translateY(2px);
    animation: bounce 0.6s ease infinite;
}

.download-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform 0.3s ease;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

.current-download {
    font-size: 1.1rem;
    padding: 1rem 2rem;
}

/* Newsletter Archive */
.newsletters-archive {
    margin-top: 4rem;
}

.archive-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 3rem;
    text-align: center;
}

.newsletters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.newsletter-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.newsletter-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.newsletter-info {
    margin-top: 1.5rem;
}

.newsletter-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.newsletter-date {
    font-size: 0.95rem;
    color: var(--stormy-periwinkle);
    margin-bottom: 1.5rem;
}

.newsletter-item .download-btn {
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
}

/* Subscription Information */
.subscription-info {
    background: var(--primary-teal);
    color: var(--text-light);
    padding: 3rem;
    border-radius: 12px;
    text-align: center;
    margin-top: 3rem;
}

.subscription-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.subscription-text {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    opacity: 0.9;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.subscription-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.subscription-btn {
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.subscription-btn.primary {
    background: var(--text-light);
    color: var(--primary-teal);
}

.subscription-btn.primary:hover {
    background: var(--background-light);
    transform: translateY(-2px);
}

.subscription-btn.secondary {
    background: transparent;
    color: var(--text-light);
    border: 2px solid var(--text-light);
}

.subscription-btn.secondary:hover {
    background: var(--text-light);
    color: var(--primary-teal);
}

/* Responsive Design - Newsletters Page */
@media (max-width: 768px) {
    .newsletters-hero {
        height: 50vh;
        background-attachment: scroll;
    }

    .newsletters-hero .hero-title {
        font-size: 2.2rem;
    }

    .newsletters-hero .hero-subtitle {
        font-size: 1rem;
    }

    .newsletters-hero .hero-content {
        padding: 1.5rem;
    }

    .newsletters-banner {
        padding: 12rem 1rem 4rem 1rem;
        margin-top: -120px;
    }

    .current-newsletter {
        padding: 2rem;
        margin-bottom: 4rem;
    }

    .current-newsletter-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .current-title {
        font-size: 2rem;
    }

    .newsletters-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
    }

    .newsletter-item {
        padding: 1.5rem;
    }

    .subscription-info {
        padding: 2rem;
    }

    .subscription-title {
        font-size: 1.6rem;
    }

    .subscription-actions {
        flex-direction: column;
    }

    .subscription-btn {
        width: 100%;
        text-align: center;
    }
}

/* Year Navigation Styles */
.year-navigation {
    margin-bottom: 3rem;
}

.year-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.year-tab {
    background: transparent;
    border: 2px solid var(--rustwood-red);
    color: var(--rustwood-red);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.year-tab:hover,
.year-tab.active {
    background: var(--rustwood-red);
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
}

.year-section {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.year-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.year-header {
    text-align: center;
    margin-bottom: 3rem;
}

.year-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.year-subtitle {
    font-size: 1rem;
    color: var(--stormy-periwinkle);
}

/* Compact list view for older years */
.newsletters-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.newsletter-list-item {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.newsletter-list-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.newsletter-number {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1.1rem;
}

.download-btn.compact {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}

/* Mobile responsive year navigation */
@media (max-width: 768px) {
    .year-tabs {
        gap: 0.25rem;
    }
    
    .year-tab {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .newsletters-list {
        grid-template-columns: 1fr;
    }
    
    .newsletter-list-item {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* Activity Link Styling */
.activity-link {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--rustwood-red);
    color: var(--text-light);
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.activity-link:hover {
    background: var(--text-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
}

/* Species Profiles Page Styles */

/* Species Profiles Hero Section */
.species-profiles-hero-bg {
    background-image: url('../images/beetle-2.jpg');
}

.species-profiles-hero-bg .about-hero-overlay {
    background: none;
}

/* Footer beetle overlay restored to show beetle image on left side - override removed */



/* Species Profiles Content */
.species-profiles-content-section {
    padding: 4rem 0;
    background: var(--light-grey);
}

.species-profiles-intro {
    text-align: center;
    margin-bottom: 4rem;
}

.species-profiles-intro .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.species-profiles-intro .section-subtitle {
    font-size: 1.2rem;
    color: var(--text-dark);
    opacity: 0.8;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Species Grid */
.species-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.species-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(47, 56, 73, 0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.species-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.species-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 220px;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 248, 220, 0.5) 0%, rgba(255, 248, 220, 0.8) 100%);
    border-radius: 8px;
    padding: 1rem;
}

.species-img {
    max-width: 200px;
    max-height: 200px;
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
    padding: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.species-img:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.species-info {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.species-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    font-style: italic;
}

.species-common-name {
    font-size: 1rem;
    color: var(--primary-teal);
    font-weight: 600;
    margin-bottom: 1rem;
}

.species-description {
    font-size: 0.95rem;
    color: var(--text-dark);
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.species-meta {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    margin-top: auto;
    flex-wrap: wrap;
}

.conservation-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.conservation-status.endangered {
    background: rgba(220, 38, 127, 0.1);
    color: #dc267f;
    border: 1px solid rgba(220, 38, 127, 0.3);
}

.conservation-status.uk-bap-priority {
    background: rgba(255, 126, 103, 0.1);
    color: #ff7e67;
    border: 1px solid rgba(255, 126, 103, 0.3);
}

.conservation-status.vulnerable {
    background: rgba(255, 206, 84, 0.1);
    color: #ffb347;
    border: 1px solid rgba(255, 206, 84, 0.3);
}

.habitat-type {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    background: rgba(28, 75, 92, 0.1);
    color: var(--primary-teal);
    border: 1px solid rgba(28, 75, 92, 0.3);
}

.species-link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--primary-teal);
    color: var(--text-light);
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.species-link:hover {
    background: var(--primary-navy);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(28, 75, 92, 0.3);
}

/* Additional Information Section */
.species-info-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.info-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--primary-teal);
}

.info-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.info-card p {
    font-size: 1rem;
    color: var(--text-dark);
    opacity: 0.8;
    line-height: 1.6;
}

.status-legend {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-item .conservation-status {
    flex-shrink: 0;
}

.status-item span:last-child {
    font-size: 0.9rem;
    color: var(--text-dark);
    opacity: 0.7;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .species-profiles-hero .hero-title {
        font-size: 2.5rem;
    }
    
    .species-profiles-hero .hero-subtitle {
        font-size: 1.1rem;
        padding: 0 1rem;
    }
    
    .species-profiles-banner .banner-text {
        font-size: 2rem;
    }
    
    .species-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .species-card {
        padding: 1.25rem;
    }
    
    .species-image {
        height: 180px;
    }
    
    .species-img {
        max-width: 150px;
        max-height: 150px;
        width: 140px;
        height: 140px;
    }
    
    .species-meta {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    
    .species-info-section {
        grid-template-columns: 1fr;
    }
    

}

@media (max-width: 480px) {
    .species-card {
        padding: 1rem;
    }
    
    .species-name {
        font-size: 1.2rem;
    }
    
    .species-common-name {
        font-size: 0.9rem;
    }
    
    .species-description {
        font-size: 0.9rem;
    }
}

/* Water Box Link Styling for Our Mission Page */
.water-mission-grid .water-box-link {
    text-decoration: none;
    color: var(--text-dark);
    cursor: pointer;
}

.water-mission-grid .water-box-link:hover {
    text-decoration: none;
    color: var(--text-dark);
}

.water-mission-grid .water-box-link .water-content h3 {
    color: var(--stag-beetle-shell) !important;
    transition: color 0.3s ease;
}

.water-mission-grid .water-box-link .water-content p {
    color: var(--text-dark) !important;
    transition: color 0.3s ease;
}

.water-mission-grid .water-box-link:hover .water-content h3 {
    color: var(--primary-teal) !important;
}

.water-mission-grid .water-box-link:hover .water-content p {
    color: var(--text-dark) !important;
}

/* Species Profile Infographic Styles */
.species-profile-infographic {
    background: linear-gradient(135deg, var(--background-light) 0%, rgba(255, 248, 220, 0.3) 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

.profile-nav {
    margin-bottom: 2rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-teal);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.back-link:hover {
    color: var(--text-dark);
    transform: translateX(-5px);
}

.back-link svg {
    fill: currentColor;
}

/* Infographic Poster */
.infographic-poster {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    padding: 3rem;
    max-width: 1400px;
    margin: 0 auto;
    border: 2px solid rgba(47, 56, 73, 0.1);
}

/* Poster Header */
.poster-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 3px solid var(--primary-burnt-sienna);
    background: linear-gradient(135deg, rgba(160, 82, 45, 0.05) 0%, rgba(160, 82, 45, 0.1) 100%);
    padding: 2rem;
    border-radius: 12px;
}

.header-content {
    flex: 1;
}

.species-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--primary-burnt-sienna);
    margin: 0 0 0.5rem 0;
    font-style: italic;
    line-height: 1.1;
}

.species-subtitle {
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--text-dark);
    opacity: 0.7;
    margin: 0 0 1rem 0;
}

.common-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-teal);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.acct-logo-section {
    text-align: center;
    padding-left: 2rem;
}

.poster-logo {
    width: 80px;
    height: auto;
    margin-bottom: 1rem;
}

.organisation {
    font-size: 0.9rem;
    color: var(--text-dark);
    opacity: 0.7;
    font-weight: 500;
    line-height: 1.3;
}

/* Poster Content Grid */
.poster-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
    align-items: start;
}

.poster-column {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    height: 100%;
}

/* Poster Sections */
.poster-section {
    background: white;
    border: 2px solid rgba(47, 56, 73, 0.1);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.poster-section .section-title {
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-stag-beetle);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-burnt-sienna);
}

/* Overview Section */
.overview-section {
    background: linear-gradient(135deg, rgba(255, 248, 220, 0.3) 0%, rgba(255, 248, 220, 0.6) 100%);
    border-color: var(--primary-burnt-sienna);
}

.species-image-section {
    text-align: center;
    margin: 1rem 0;
}

.profile-species-img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
    padding: 1rem;
}

.key-facts {
    margin-top: 1rem;
    display: grid;
    gap: 0.5rem;
}

.fact-item {
    padding: 0.5rem;
    background: rgba(160, 82, 45, 0.1);
    border-radius: 6px;
    font-size: 1.05rem;
    border-left: 3px solid var(--primary-burnt-sienna);
    margin: 0.51rem 0;
}

/* Taxonomy Section */
.taxonomy-section {
    background: linear-gradient(135deg, rgba(123, 140, 174, 0.1) 0%, rgba(123, 140, 174, 0.2) 100%);
    border-color: var(--primary-periwinkle);
}

.taxonomy-section .taxonomy-tree {
    flex-grow: 1;
}

.taxonomy-tree {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
    justify-content: space-between;
}

.taxonomy-level {
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    font-size: 0.9rem;
    border-left: 3px solid var(--primary-periwinkle);
    display: flex;
    align-items: center;
    min-height: 2.5rem;
}

.taxonomy-level.highlight {
    background: rgba(123, 140, 174, 0.2);
    font-weight: 600;
    border-left-color: var(--primary-stag-beetle);
}

.rank {
    font-weight: 500;
    margin-right: 0.5rem;
}

/* Distribution Section */
.distribution-section {
    background: linear-gradient(135deg, rgba(28, 75, 92, 0.05) 0%, rgba(28, 75, 92, 0.1) 100%);
    border-color: var(--primary-river-depths);
}

.distribution-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.distribution-text p:not(:first-child),.ecology-details p:not(:first-child) {
    margin-top: 1rem;
}

.distribution-map {
    text-align: center;
    padding: 1.5rem;
    background: rgba(28, 75, 92, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(28, 75, 92, 0.2);
}

.map-image {
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.distribution-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.stat-item {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--stormy-periwinkle);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(43, 75, 92, 0.08);
}

.stat-number {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--stag-beetle-shell);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--deepwater-mussel);
    font-weight: 500;
    line-height: 1.3;
}

/* Ecology Section */
.ecology-section {
    background: linear-gradient(135deg, rgba(107, 57, 91, 0.05) 0%, rgba(107, 57, 91, 0.1) 100%);
    border-color: var(--primary-orchid-mantis);
}

.habitat-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.habitat-item {
    text-align: center;
    padding: 1rem;
    background: rgba(107, 57, 91, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(107, 57, 91, 0.2);
}

.habitat-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 0.5rem auto;
    color: var(--primary-orchid-mantis);
}

.habitat-icon svg {
    width: 32px;
    height: 32px;
}

.habitat-item h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-orchid-mantis);
    margin: 0 0 0.5rem 0;
}

.habitat-item p {
    font-size: 0.8rem;
    color: var(--text-dark);
    opacity: 0.8;
    margin: 0;
}

.ecology-details p {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    border-left: 3px solid var(--primary-orchid-mantis);
}

/* Conservation Section */
.conservation-section {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.05) 0%, rgba(139, 69, 19, 0.1) 100%);
    border-color: var(--primary-rustwood-red);
}

.status-indicator {
    text-align: center;
    margin-bottom: 1.5rem;
}

.status-badge {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background: rgba(220, 38, 127, 0.1);
    color: #dc267f;
    border: 1px solid rgba(220, 38, 127, 0.3);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.status-indicator.endangered .status-badge {
    background: rgba(220, 38, 127, 0.1);
    color: #dc267f;
    border: 1px solid rgba(220, 38, 127, 0.3);
}

/* Threatened status - Orange */
.status-indicator.uk-bap-priority .status-badge {
    background: rgba(255, 126, 103, 0.1);
    color: #ff7e67;
    border: 1px solid rgba(255, 126, 103, 0.3);
}

/* Vulnerable status - Yellow/Golden */
.status-indicator.vulnerable .status-badge {
    background: rgba(255, 206, 84, 0.1);
    color: #ffb347;
    border: 1px solid rgba(255, 206, 84, 0.3);
}

.status-description {
    font-size: 0.9rem;
    color: var(--text-dark);
    opacity: 0.7;
    margin: 0;
}

.threats-list {
    margin-bottom: 1.5rem;
}

.threats-list h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-rustwood-red);
    margin: 0 0 0.5rem 0;
}

.threats-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.threats-list li {
    padding: 0.3rem 0px;
    border-bottom: 1px solid rgba(139, 69, 19, 0.1);
    position: relative;
    padding-left: 1.5rem;
    margin-top: 1rem;
    padding-bottom: 1rem;
    font-weight: bold;
    font-size: 1rem;
}

.threats-list li::before {
    content: "⚠️";
    position: absolute;
    left: -0.5rem;
    font-size: 1rem;
    top: calc(50% - 1rem);
}

.population-trend {
    text-align: center;
}

.population-trend h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-rustwood-red);
    margin: 0 0 0.5rem 0;
}

.trend-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem;
    background: rgba(139, 69, 19, 0.1);
    border-radius: 8px;
}

.trend-arrow {
    font-size: 1.2rem;
    color: #d32f2f;
}

.trend-text {
    font-weight: 600;
    color: #d32f2f;
}

/* Actions Section */
.actions-section {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.05) 0%, rgba(44, 62, 80, 0.1) 100%);
    border-color: var(--primary-deepwater-mussel);
}

.action-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(44, 62, 80, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(44, 62, 80, 0.1);
}

.step-number {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-deepwater-mussel);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    border: 2px solid var(--primary-deepwater-mussel);
}

.step-content h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-deepwater-mussel);
    margin: 0 0 0.3rem 0;
}

.step-content p {
    font-size: 0.8rem;
    color: var(--text-dark);
    opacity: 0.8;
    margin: 0;
}

/* Key Info Section */
.key-info-section {
    background: linear-gradient(135deg, rgba(255, 248, 220, 0.3) 0%, rgba(255, 248, 220, 0.6) 100%);
    border-color: var(--primary-dune-lichen);
}

.key-info-section .info-grid {
    flex-grow: 1;
}

.info-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    justify-content: space-evenly;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    border: 1px solid rgba(160, 82, 45, 0.15);
    min-height: 3rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.info-item:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(160, 82, 45, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.info-item strong {
    font-size: 0.9rem;
    color: var(--primary-burnt-sienna);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.025em;
    flex: 0 0 auto;
    margin-right: 1rem;
}

.info-item span {
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 500;
    line-height: 1.3;
    text-align: right;
    flex: 1 1 auto;
}

/* Poster Footer */
.poster-footer {
    padding-top: 2rem;
    border-top: 3px solid var(--primary-burnt-sienna);
    background: linear-gradient(135deg, rgba(47, 56, 73, 0.03) 0%, rgba(47, 56, 73, 0.08) 100%);
    padding: 2rem;
    border-radius: 12px;
}

.references {
    width: 100%;
}

.reference-grid {
    display: grid;
    gap: 0.5rem;
}

.reference-item {
    font-size: 0.8rem;
    color: var(--text-dark);
    opacity: 0.8;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    border-left: 2px solid var(--primary-periwinkle);
}

.reference-item strong {
    color: var(--primary-stag-beetle);
}

.reference-item a {
    color: var(--primary-teal);
    text-decoration: none;
}

.reference-item a:hover {
    text-decoration: underline;
}



/* Mobile Responsive */
@media (max-width: 1200px) {
    .poster-content {
        grid-template-columns: 1fr 1fr;
    }
    
    .species-title {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .infographic-poster {
        padding: 2rem;
    }
    
    .poster-header {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    
    .acct-logo-section {
        padding-left: 0;
    }
    
    .poster-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .species-title {
        font-size: 2.5rem;
    }
    
    .species-subtitle {
        font-size: 1.4rem;
    }
    
    .references {
        width: 100%;
    }
    
    .distribution-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .infographic-poster {
        padding: 1.5rem;
    }
    
    .species-title {
        font-size: 2rem;
    }
    
    .species-subtitle {
        font-size: 1.2rem;
    }
    
    .common-name {
        font-size: 1.1rem;
    }
    
    .profile-species-img {
        width: 150px;
        height: 150px;
    }
}

/* ===============================
   CONSOLIDATED RESPONSIVE STYLES
   =============================== */

/* Tablet and Mobile Styles - 768px and below */
@media (max-width: 768px) {
    /* ===== NAVIGATION STYLES ===== */
    .nav-menu {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        background: rgba(255, 248, 220, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 2rem 0;
        gap: 0.5rem;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 0 4px 20px rgba(47, 56, 73, 0.1);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }
    
    .nav-menu.active {
        transform: translateX(0);
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* Mobile Dropdown Styles */
    .nav-dropdown {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    
    .nav-dropdown > .nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 2rem;
        width: 100%;
    }
    
    .dropdown-arrow {
        margin-left: auto;
    }
    
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(5px);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        padding: 0;
        margin: 0;
    }
    
    .nav-dropdown.mobile-open .dropdown-menu {
        max-height: 200px;
        padding: 0.5rem 0;
    }
    
    .nav-dropdown.mobile-open .dropdown-arrow {
        transform: rotate(180deg);
    }
    
    .dropdown-menu a {
        padding: 0.75rem 3rem;
        font-size: 0.85rem;
        border-left: none;
        border-bottom: 1px solid rgba(123, 140, 174, 0.2);
    }
    
    .dropdown-menu a:hover {
        padding-left: 3rem;
        background: rgba(123, 140, 174, 0.15);
    }
    
    .dropdown-menu li:last-child a {
        border-bottom: none;
    }

    /* ===== HOMEPAGE STYLES ===== */
    .hero-content {
        left: 20px;
        text-align: left;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-image {
        height: auto;
        min-height: 400px;
    }
    
    .purple-banner {
        margin-top: -140px;
        padding: 12rem 1.5rem 5rem 1.5rem;
    }
    
    .purple-banner::before {
        background-size: 200px 200px;
    }
    
    .content {
        padding: 4rem 0;
    }
    
    .content-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .content-image {
        order: -1;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .beetle-card {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .learn-more-btn {
        bottom: 10%; /* slightly higher on mobile */
        right: 8%; /* centered better on mobile */
        padding: 1.5rem 2.8rem; /* substantial mobile size */
        font-size: 1.4rem; /* readable mobile text */
        border-radius: 75% 25% 80% 20% / 30% 70% 30% 70%; /* kidney shape for mobile */
    }
    
    /* Mobile styles for new sections */
    .biodiversity-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .biodiversity-heading {
        font-size: 2rem;
    }
    
    .biodiversity-text {
        font-size: 1.1rem;
    }
    
    .dive-deeper-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .dive-deeper-image {
        order: -1; /* Image first on mobile */
    }
    
    .dive-deeper-heading {
        font-size: 2rem;
    }
    
    
    
    .dive-deeper-text {
        font-size: 1.2rem;
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .resource-box {
        padding: 1.5rem 1rem;
    }
    
    .resource-icon {
        width: 50px;
        height: 50px;
    }
    
    /* Mobile styles for splash section */
    .splash-heading {
        font-size: 2.2rem;
    }
    
    .splash-text {
        font-size: 1.2rem;
    }
    
    .splash-subtext {
        font-size: 1rem;
    }
    
    .splash-section .shop-btn {
        padding: 1rem 5.5rem;
        font-size: 1.1rem;
        color: #3a4663 !important; /* Ensure mobile has correct color too */
    }
    
    /* Mobile styles for ripples section */
    .ripples-heading {
        font-size: 2rem;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .tagline-text {
        font-size: 1.8rem;
        font-family: 'Courier New', 'Monaco', 'Menlo', 'Lucida Console', 'Liberation Mono', monospace;
        opacity: 0.4;
        letter-spacing: 0.2em;
    }
    
    /* Mobile Footer Styles */
    .footer-main {
        grid-template-columns: 1fr;
    }
    
    .footer-action {
        padding: 3rem 2rem;
    }
    
    .footer-links-section {
        padding: 4rem 2rem 2rem 2rem;
    }
    
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .footer-bottom-links {
        order: -1;
    }
    
    .donate-btn {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    /* ===== ABOUT US PAGE STYLES ===== */
    .about-hero {
        height: 50vh;
        background-attachment: scroll;
    }
    
    .about-hero-title {
        font-size: 2.5rem;
    }
    
    .about-hero-subtitle {
        font-size: 1.1rem;
        padding: 0 1rem;
    }
    
    .who-we-are-banner {
        padding: 12rem 1rem 4rem 1rem;
        margin-top: -120px;
    }
    
    .who-we-are-banner::before {
        background-size: 200px 200px;
    }

    /* ===== OUR MISSION PAGE STYLES ===== */
    .mission-hero {
        height: 50vh;
        background-attachment: scroll;
    }
    
    .our-mission-banner {
        padding: 12rem 1rem 4rem 1rem;
        margin-top: -120px;
    }
    
    .our-mission-banner::before {
        background-size: 200px 200px;
    }
    
    .water-mission-grid {
        padding: 4rem 1rem;
    }
    
    .water-mission-grid::before {
        background-size: 120px 120px;
        background-position: top left, top right, bottom left, bottom right;
    }
    
    .water-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .water-box {
        padding: 2rem;
        text-align: center;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .water-image-container {
        height: 200px;
        width: 200px;
        margin: 0 auto 1.5rem auto;
    }
    
    .water-beetle-image {
        width: 200px;
        height: 200px;
    }
    
    .water-beetle-filter {
        width: 200px;
        height: 200px;
    }
    
    .water-letter-overlay {
        font-size: 4rem;
        top: 50%;
        left: 50%;
    }
    
    .water-box:hover .water-letter-overlay {
        font-size: 4rem;
    }
    
    .water-content {
        text-align: center;
    }
    
    .water-content h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .water-content p {
        font-size: 1rem;
    }
    
    .tagline-section {
        padding: 4rem 1rem;
    }
    
    .members-section {
        padding: 4rem 1rem;
    }
    
    .members-section::before {
        background-size: 140px 140px;
    }
    
    .members-container {
        max-width: none;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .members-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .members-list li {
        padding: 1rem;
        font-size: 0.9rem;
        text-align: center;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .member-details {
        padding: 2rem;
        text-align: center;
    }
    
    #member-name {
        font-size: 1.8rem;
    }
    
    #member-role {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    /* ===== NEWS PAGE STYLES ===== */
    .news-hero {
        height: 50vh;
        background-attachment: scroll;
    }

    .news-banner {
        padding: 12rem 1rem 4rem 1rem;
        margin-top: -120px;
    }

    .featured-article {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
        margin-bottom: 4rem;
    }

    .featured-title {
        font-size: 1.8rem;
    }

    .featured-subtitle {
        font-size: 1rem;
    }

    .article-meta {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .news-card-content {
        padding: 1.25rem;
    }

    .news-excerpt {
        -webkit-line-clamp: 3; /* Reduce to 3 lines on mobile */
        line-clamp: 3; /* Standard property for compatibility */
    }

    .newsletter-signup {
        padding: 3rem 2rem;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 1rem;
    }

    .newsletter-input,
    .newsletter-btn {
        width: 100%;
    }

    .section-title {
        font-size: 2rem;
    }

    .report-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .report-actions {
        flex-direction: column;
    }

    .report-btn {
        width: 100%;
        text-align: center;
    }

    /* ===== TOGETHER PAGE STYLES ===== */
    .together-hero {
        height: 50vh;
        background-attachment: scroll;
    }

    .together-banner {
        padding: 12rem 1rem 4rem 1rem;
        margin-top: -120px;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .events-grid {
        grid-template-columns: 1fr;
    }

    .event-card {
        flex-direction: column;
        text-align: center;
    }

    .event-date {
        align-self: center;
    }

    .event-actions {
        justify-content: center;
        flex-direction: column;
    }

    .club-story {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
        text-align: center;
    }

    .story-title {
        font-size: 1.6rem;
    }

    .story-paragraph {
        font-size: 1rem;
    }

    .activities-grid {
        grid-template-columns: 1fr;
    }

    .membership-info {
        padding: 2rem;
    }

    .membership-title {
        font-size: 1.6rem;
    }
    
    .membership-benefits {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: left;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    
    .benefit-item {
        justify-content: flex-start;
        text-align: left;
    }

    .membership-actions {
        flex-direction: column;
    }

    .membership-btn {
        width: 100%;
        text-align: center;
    }

    /* ===== NEWSLETTERS PAGE STYLES ===== */
    .newsletters-hero {
        height: 50vh;
        background-attachment: scroll;
    }

    .newsletters-hero .hero-title {
        font-size: 2.2rem;
    }

    .newsletters-hero .hero-subtitle {
        font-size: 1rem;
    }

    .newsletters-hero .hero-content {
        padding: 1.5rem;
    }

    .newsletters-banner {
        padding: 12rem 1rem 4rem 1rem;
        margin-top: -120px;
    }

    .current-newsletter {
        padding: 2rem;
        margin-bottom: 4rem;
    }

    .current-newsletter-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .current-title {
        font-size: 2rem;
    }

    .newsletters-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
    }

    .newsletter-item {
        padding: 1.5rem;
    }

    .subscription-info {
        padding: 2rem;
    }

    .subscription-title {
        font-size: 1.6rem;
    }

    .subscription-actions {
        flex-direction: column;
    }

    .subscription-btn {
        width: 100%;
        text-align: center;
    }

    /* ===== YEAR NAVIGATION STYLES ===== */
    .year-tabs {
        gap: 0.25rem;
    }
    
    .year-tab {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .newsletters-list {
        grid-template-columns: 1fr;
    }
    
    .newsletter-list-item {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* ===== SPECIES PROFILES STYLES ===== */
    .species-profiles-hero .hero-title {
        font-size: 2.5rem;
    }
    
    .species-profiles-hero .hero-subtitle {
        font-size: 1.1rem;
        padding: 0 1rem;
    }
    
    .species-profiles-banner .banner-text {
        font-size: 2rem;
    }
    
    .species-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .species-card {
        padding: 1.25rem;
    }
    
    .species-image {
        height: 180px;
    }
    
    .species-img {
        max-width: 150px;
        max-height: 150px;
        width: 140px;
        height: 140px;
    }
    
    .species-meta {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    
    .species-info-section {
        grid-template-columns: 1fr;
    }

    /* ===== SPECIES PROFILE INFOGRAPHIC STYLES ===== */
    .infographic-poster {
        padding: 2rem;
    }
    
    .poster-header {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    
    .acct-logo-section {
        padding-left: 0;
    }
    
    .poster-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .references {
        width: 100%;
    }
    
    .distribution-stats {
        grid-template-columns: 1fr;
    }
}

/* Small Mobile Styles - 480px and below */
@media (max-width: 480px) {
    /* ===== HOMEPAGE SMALL MOBILE STYLES ===== */
    .hero-title {
        font-size: 2rem;
    }
    
    .welcome-title {
        font-size: 1.25rem;
    }
    
    .content-heading {
        font-size: 1.1rem;
    }
    
    .content-paragraph {
        font-size: 1rem;
    }

    /* ===== SPECIES PROFILES SMALL MOBILE STYLES ===== */
    .species-card {
        padding: 1rem;
    }
    
    .species-name {
        font-size: 1.2rem;
    }
    
    .species-common-name {
        font-size: 0.9rem;
    }
    
    .species-description {
        font-size: 0.9rem;
    }

    /* ===== SPECIES PROFILE INFOGRAPHIC SMALL MOBILE STYLES ===== */
    .infographic-poster {
        padding: 1.5rem;
    }
    
    .species-title {
        font-size: 2rem;
    }
    
    .species-subtitle {
        font-size: 1.2rem;
    }
    
    .common-name {
        font-size: 1.1rem;
    }
    
    .profile-species-img {
        width: 150px;
        height: 150px;
    }
}

.featured-article-link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

.featured-article-link:hover {
    text-decoration: none;
    color: inherit;
}

.news-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    cursor: pointer;
}

.news-card-link:hover {
    text-decoration: none;
    color: inherit;
}
/* ===============================
   ANNUAL REPORT SHOWCASE STYLES
   =============================== */

.report-showcase {
    max-width: 900px;
    margin: 0 auto;
}

.report-featured {
    background: white;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(123, 140, 174, 0.2);
}

.report-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--stormy-periwinkle), var(--burnt-sienna));
}

.report-year-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--burnt-sienna), var(--rustwood-red));
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(160, 82, 45, 0.3);
}

.report-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.report-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-medium);
    margin-bottom: 2.5rem;
}

.report-highlights {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: rgba(123, 140, 174, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(123, 140, 174, 0.2);
}

.highlight-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--stormy-periwinkle);
    stroke: var(--stormy-periwinkle);
    stroke-width: 1.5;
    flex-shrink: 0;
}

.highlight-item span {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.report-actions {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.report-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    min-width: 180px;
    justify-content: center;
}

.report-btn svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.report-btn.primary {
    background: linear-gradient(135deg, var(--burnt-sienna), var(--rustwood-red));
    color: white;
    box-shadow: 0 4px 15px rgba(160, 82, 45, 0.3);
}

.report-btn.primary:hover {
    background: linear-gradient(135deg, var(--rustwood-red), var(--burnt-sienna));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(160, 82, 45, 0.4);
}

.report-btn.secondary {
    background: white;
    color: var(--stormy-periwinkle);
    border-color: var(--stormy-periwinkle);
}

.report-btn.secondary:hover {
    background: var(--stormy-periwinkle);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(123, 140, 174, 0.3);
}

/* Responsive Design for Annual Report */
@media (max-width: 768px) {
    .report-featured {
        padding: 2rem;
    }
    
    .report-title {
        font-size: 1.8rem;
    }
    
    .report-highlights {
        flex-direction: column;
        gap: 1rem;
    }
    
    .report-actions {
        flex-direction: column;
    }
    
    .report-btn {
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .report-featured {
        padding: 1.5rem;
    }
    
    .report-title {
        font-size: 1.6rem;
    }
    
    .report-description {
        font-size: 1rem;
    }
}

/* ===============================
   CONSOLIDATED RESPONSIVE STYLES
   =============================== */

/* ===== NEWS ARTICLE ENHANCEMENTS ===== */

/* Article Page Layout */
.article-main {
    background: var(--dune-lichen);
    min-height: 100vh;
    position: relative;
}

.article-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 1rem;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin-top: -2rem;
    position: relative;
    z-index: 2;
}

/* Article Title in Banner */
.article-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dune-lichen);
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

/* Breadcrumb */
.breadcrumb {
    position: absolute;
    top: 2rem;
    left: 2rem;
    color: var(--dune-lichen);
    font-size: 0.9rem;
    z-index: 3;
}

.breadcrumb a {
    color: var(--dune-lichen);
    text-decoration: none;
    opacity: 0.8;
}

.breadcrumb a:hover {
    opacity: 1;
}

/* Enhanced Article Meta */
.article-wrapper .article-meta {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--dune-lichen);
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--stag-beetle-shell);
    font-size: 0.9rem;
    font-weight: 500;
}

.meta-icon {
    width: 18px;
    height: 18px;
    stroke: var(--stormy-periwinkle);
    fill: none;
    stroke-width: 2;
}

/* Article Lead Paragraph */
.article-lead {
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--stag-beetle-shell);
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--dune-lichen), rgba(255, 248, 220, 0.5));
    border-left: 4px solid var(--stormy-periwinkle);
    border-radius: 8px;
    font-weight: 500;
}

/* Stats/Impact Box */
.stats-box {
    background: var(--dune-lichen);
    border: 2px solid var(--stormy-periwinkle);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
    box-shadow: 0 4px 15px rgba(43, 75, 92, 0.1);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 2rem;
    text-align: center;
}

/* Article Content Styling */
.article-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-dark);
}

.article-content h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--stag-beetle-shell);
    margin: 2.5rem 0 1rem 0;
    border-bottom: 2px solid var(--stormy-periwinkle);
    padding-bottom: 0.5rem;
}

.article-content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--deepwater-mussel);
    margin: 2rem 0 1rem 0;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content blockquote {
    background: var(--dune-lichen);
    border-left: 4px solid var(--burnt-sienna);
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 8px;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--stag-beetle-shell);
}

.article-content blockquote cite {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-weight: 600;
    color: var(--stormy-periwinkle);
    font-size: 1rem;
}

.article-content a {
    color: var(--stormy-periwinkle);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.3s ease;
}

.article-content a:hover {
    border-bottom-color: var(--stormy-periwinkle);
}

/* Related Articles */
.related-articles {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--dune-lichen);
}

.related-articles h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--stag-beetle-shell);
    margin-bottom: 1.5rem;
    text-align: center;
}

.related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.related-item {
    display: block;
    padding: 1rem;
    background: var(--dune-lichen);
    border-radius: 8px;
    text-decoration: none;
    color: var(--stag-beetle-shell);
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.related-item:hover {
    background: var(--stormy-periwinkle);
    color: white;
    border-color: var(--deepwater-mussel);
    transform: translateY(-2px);
}

/* Mobile Responsiveness for Articles */
@media (max-width: 768px) {
    .article-main-title {
        font-size: 1.8rem;
    }
    
    .breadcrumb {
        position: static;
        margin-bottom: 1rem;
        text-align: center;
    }
    
    .article-wrapper {
        margin: 1rem;
        padding: 2rem 1rem;
        margin-top: -1rem;
    }
    
    .article-wrapper .article-meta {
        flex-direction: column;
        gap: 1rem;
    }
    
    .article-lead {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
        padding: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .related-grid {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   RECORDING PAGE STYLES
   =============================== */

/* Recording Hero Section */
.recording-hero {
    height: 70vh;
    background-image: url('../images/recording-hero.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recording-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(47, 79, 79, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Recording Banner - Same settings as homepage purple banner but with Stormy Periwinkle color */
.recording-banner {
    position: relative;
    background-color: #7B8CAE; /* Stormy Periwinkle */
    color: var(--text-light);
    text-align: center;
    padding: 16rem 2rem 6rem 2rem;
    margin-top: -180px;
    z-index: 1;

    /* Hand-torn top edge fixed to remove white gap */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: top;

    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: top;
}

/* Beetle texture overlay for recording banner */
.recording-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/beetle-banner-texture.png');
    background-size: 300px 300px;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

/* Recording Content Section */
.recording-content-section {
    padding: 6rem 0;
    background: var(--light-grey);
}

.recording-section {
    margin-bottom: 6rem;
}

.recording-section:last-child {
    margin-bottom: 0;
}

.section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.recording-content-section .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Fix specific blue background sections with white text */
.element-header .section-title,
.element-header h3 {
    color: #ffffff;
}

.recording-content-section .section-title.large-title {
    font-size: 3.2rem;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.recording-content-section .section-subtitle {
    font-size: 1.2rem;
    color: #ffffff;
    max-width: 600px;
    margin: 1rem auto 0 auto;
    line-height: 1.6;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Why Record Grid */
.why-record-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    justify-content: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.reason-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reason-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.reason-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    stroke: var(--stormy-periwinkle);
    stroke-width: 2;
    fill: none;
}

.reason-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.reason-card p {
    color: var(--text-dark);
    opacity: 0.8;
    line-height: 1.6;
}

/* Record Elements */
.record-elements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    justify-content: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.element-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.element-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.element-header {
    background: linear-gradient(135deg, var(--stormy-periwinkle) 0%, #6a7ca0 100%);
    color: white;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.element-number {
    background: rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.element-header h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.element-content {
    padding: 2rem;
}

.element-content p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.element-content ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.element-content li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-dark);
    opacity: 0.9;
}

.element-content li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--stormy-periwinkle);
    font-weight: bold;
}

.helpful-links {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.grid-ref-btn,
.vice-county-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--stormy-periwinkle);
    color: white;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(123, 140, 174, 0.3);
}

.grid-ref-btn:hover,
.vice-county-btn:hover {
    background: var(--text-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(123, 140, 174, 0.4);
    color: white;
}

.grid-ref-btn svg,
.vice-county-btn svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Tools Grid */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    justify-content: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.tool-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.tool-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    stroke: var(--stormy-periwinkle);
    stroke-width: 2;
    fill: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.irecord-logo {
    width: 6rem;
    height: auto;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.irecord-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 2rem 1rem 1rem 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 12px;
    border: 2px solid rgba(123, 140, 174, 0.2);
}

.irecord-logo-small {
    width: 5rem;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.irecord-header h3 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--text-dark);
    font-weight: 600;
}

.tool-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.tool-card p {
    color: var(--text-dark);
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.tool-link {
    color: var(--stormy-periwinkle);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    margin-top: auto;
}

.tool-link:hover {
    color: var(--text-dark);
}

/* Verification Content */
.verification-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.verification-info h3,
.verification-evidence h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

.verification-content ul {
    list-style: none;
    padding: 0;
}

.verification-content li {
    padding: 0.75rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-dark);
    opacity: 0.9;
    line-height: 1.5;
}

.verification-content li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--stormy-periwinkle);
    font-weight: bold;
}

/* Submit Section */
.submit-section {
    background: white;
    padding: 4rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.submit-content {
    margin-top: 3rem;
}

.submit-card {
    background: linear-gradient(135deg, rgba(123, 140, 174, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%);
    padding: 3rem;
    border-radius: 16px;
    border: 2px solid rgba(123, 140, 174, 0.3);
    margin-bottom: 3rem;
    box-shadow: 0 8px 32px rgba(123, 140, 174, 0.15);
}

.submit-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

.submit-card p {
    color: var(--text-dark);
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: center;
}

.submit-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    text-align: left;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.submit-card li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-dark);
    opacity: 0.9;
}

.submit-card li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--stormy-periwinkle);
    font-weight: bold;
}

.submit-card .submit-btn {
    display: block;
    margin: 0 auto;
}

.submit-btn {
    display: inline-block;
    background: var(--stormy-periwinkle);
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--stormy-periwinkle) 0%, #6a7ca0 100%);
    color: white;
    text-align: center;
    padding: 4rem;
    border-radius: 12px;
}

.cta-content h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    min-width: 180px;
}

.cta-btn.primary {
    background: white;
    color: var(--stormy-periwinkle);
}

.cta-btn.primary:hover {
    background: var(--light-grey);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-btn.secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.cta-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Alternative Methods Styling */
.submit-alternatives {
    margin-top: 2rem;
}

.submit-alternatives h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

.alternative-methods {
    display: grid;
    gap: 1rem;
}

.method-item {
    background: rgba(123, 140, 174, 0.05);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--stormy-periwinkle);
}

.method-item strong {
    color: var(--text-dark);
    display: block;
    margin-bottom: 0.5rem;
}

.method-item a {
    color: var(--stormy-periwinkle);
    text-decoration: none;
    font-weight: 500;
    margin-left: 1rem;
}

.method-item a:hover {
    color: var(--text-dark);
}

/* ===============================
   NEWS ARTICLE PAGE STYLES
   =============================== */

/* News Hero Section */
.news-hero {
    height: 70vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(139, 69, 19, 0.5) 0%,      /* Rustwood Red with transparency */
        rgba(47, 56, 73, 0.4) 50%,     /* Stag Beetle Shell with transparency */
        rgba(28, 75, 92, 0.6) 100%     /* River Depths with transparency */
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Article title styling in news banner - Match banner-text style */
.news-banner .article-main-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 400;
    color: var(--dune-lichen);
    text-align: center;
    margin: 0;
    line-height: 1.3;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* News Banner - Consistent with other page banners */
.news-banner {
    position: relative;
    background-color: #2e4857; /* Stag Beetle Shell color like "Who we are" */
    color: var(--text-light);
    text-align: center;
    padding: 16rem 2rem 6rem 2rem;
    margin-top: -180px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hand-torn top edge fixed to remove white gap */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: top;

    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: top;
}

/* Beetle texture overlay for news banner */
.news-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/beetle-banner-texture.png');
    background-size: 300px 300px;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

/* ===============================
   BOOKS & PUBLICATIONS PAGE STYLES
   =============================== */

/* Books Hero Section */
.books-hero {
    height: 70vh;
    background-image: url('../images/beetle-11.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.books-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(160, 82, 45, 0.4) 0%,    /* Burnt Sienna with transparency */
        rgba(47, 56, 73, 0.3) 50%,    /* Stag Beetle Shell with transparency */
        rgba(44, 62, 80, 0.5) 100%    /* Deepwater Mussel with transparency */
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Books Banner - Same settings as other pages with Burnt Sienna color */
.books-banner {
    position: relative;
    background-color: #A0522D; /* Burnt Sienna */
    color: var(--text-light);
    text-align: center;
    padding: 16rem 2rem 6rem 2rem;
    margin-top: -180px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hand-torn top edge */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: top;

    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: top;
}

/* Beetle texture overlay for books banner */
.books-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/beetle-banner-texture.png');
    background-size: 300px 300px;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

.books-banner .banner-text {
    font-size: 3rem;
    font-weight: 700;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    display: block;
    color: var(--dune-lichen);
}

/* Books Content Section */
.books-content-section {
    padding: 6rem 0;
    background: var(--light-grey);
}

.books-featured {
    margin-bottom: 6rem;
    text-align: center;
}

.books-content-section .section-title.large-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.books-content-section .section-subtitle {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* Books Grid */
.books-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Book Card */
.book-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(47, 56, 73, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(47, 56, 73, 0.15);
}

.book-image {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 280px;
}

.book-cover {
    max-width: 100%;
    max-height: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.book-card:hover .book-cover {
    transform: scale(1.05);
}

.book-content {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.book-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.book-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}



.book-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #A0522D, #8B4513);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    align-self: center;
    margin: auto auto 0 auto;
    width: fit-content;
}

.book-button:hover {
    background: linear-gradient(135deg, #8B4513, #7A3E0F);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(160, 82, 45, 0.3);
}

.book-button svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Publications Section */
.publications-section {
    margin-top: 6rem;
    padding-top: 6rem;
    border-top: 1px solid rgba(47, 56, 73, 0.1);
}

.publications-category {
    margin-bottom: 4rem;
}

.category-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--burnt-sienna);
}

.category-note {
    font-size: 1rem;
    color: #666;
    margin-bottom: 2rem;
    font-style: italic;
}

.publications-list {
    display: grid;
    gap: 2rem;
}

.publication-item {
    background: #ffffff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--burnt-sienna);
    transition: all 0.3s ease;
}

.publication-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.publication-item.journal-access {
    border-left-color: var(--stormy-periwinkle);
    background: linear-gradient(135deg, rgba(123, 140, 174, 0.02) 0%, rgba(255, 255, 255, 1) 100%);
}

.publication-item.archive {
    border-left-color: var(--river-depths);
    background: linear-gradient(135deg, rgba(28, 75, 92, 0.02) 0%, rgba(255, 255, 255, 1) 100%);
}

.publication-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.publication-authors {
    font-size: 0.95rem;
    color: var(--burnt-sienna);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.publication-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.publication-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--burnt-sienna);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--burnt-sienna);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.publication-link:hover {
    background: var(--burnt-sienna);
    color: white;
    transform: translateY(-1px);
}

.access-note {
    display: inline-block;
    background: rgba(123, 140, 174, 0.1);
    color: var(--stormy-periwinkle);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

/* ===============================
   USEFUL LINKS PAGE STYLES
   =============================== */

/* Links Hero Section */
.links-hero {
    height: 70vh;
    background-image: url('../images/beetle-14.jpg');
    background-size: cover;
    background-position: center 90%;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.links-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(47, 56, 73, 0.4) 0%,     /* Stag Beetle Shell with transparency */
        rgba(123, 140, 174, 0.3) 50%, /* Stormy Periwinkle with transparency */
        rgba(28, 75, 92, 0.5) 100%    /* River Depths with transparency */
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Links Banner - Same settings as other pages with Stormy Periwinkle color */
.links-banner {
    position: relative;
    background-color: #7B8CAE; /* Stormy Periwinkle */
    color: var(--text-light);
    text-align: center;
    padding: 16rem 2rem 6rem 2rem;
    margin-top: -180px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hand-torn top edge */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: top;

    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: top;
}

/* Beetle texture overlay for links banner */
.links-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/beetle-banner-texture.png');
    background-size: 300px 300px;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

.links-banner .banner-text {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
    width: 100%;
    display: block;
    color: var(--dune-lichen);
}

/* Links Content Section */
.links-content-section {
    padding: 6rem 0;
    background: var(--light-grey);
}

.links-intro {
    margin-bottom: 6rem;
    text-align: center;
}

.links-content-section .section-title.large-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.links-content-section .section-subtitle {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 3rem;
    line-height: 1.6;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.links-category {
    margin-bottom: 6rem;
}

.links-category:last-child {
    margin-bottom: 0;
}

.category-header {
    text-align: center;
    margin-bottom: 4rem;
}

.category-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    position: relative;
}

.category-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--stormy-periwinkle), var(--primary-burnt-sienna));
    border-radius: 2px;
}

.category-description {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Links Grid */
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Link Cards */
.link-card {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.link-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--stormy-periwinkle), var(--burnt-sienna));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.link-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--stormy-periwinkle);
}

.link-card:hover::before {
    transform: scaleX(1);
}

.link-card.featured {
    border: 2px solid var(--stormy-periwinkle);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(123, 140, 174, 0.02) 100%);
}

.link-card.featured::before {
    background: linear-gradient(90deg, var(--burnt-sienna), var(--rustwood-red));
    transform: scaleX(1);
}

/* Link Card Content */
.link-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--stormy-periwinkle), var(--deepwater-mussel));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.link-icon svg {
    width: 60%;
    height: 60%;
    fill: white;
    stroke: white;
    stroke-width: 1.5;
    display: block;
    margin: auto;
}

.link-icon.water-drop {
    background: linear-gradient(135deg, var(--stormy-periwinkle), var(--river-depths));
}

.link-card:hover .link-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, var(--burnt-sienna), var(--rustwood-red));
}

.link-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.link-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.link-description {
    color: var(--text-medium);
    line-height: 1.6;
    margin-bottom: 2rem;
    flex: 1;
}

.link-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--stormy-periwinkle);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    align-self: flex-start;
    margin-top: auto;
}

.link-button:hover {
    background: var(--burnt-sienna);
    transform: translateX(3px);
}

.link-button svg {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s ease;
}

.link-button:hover svg {
    transform: translate(2px, -2px);
}

/* Featured cards special styling */
.link-card.featured .link-button {
    background: linear-gradient(135deg, var(--burnt-sienna), var(--rustwood-red));
    color: white;
    font-weight: 600;
}

.link-card.featured .link-button:hover {
    background: linear-gradient(135deg, var(--rustwood-red), var(--burnt-sienna));
    transform: translateX(3px) translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .links-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .link-card {
        padding: 2rem;
    }
    
    .category-title {
        font-size: 2rem;
    }
    
    .links-banner .banner-text {
        font-size: 2.5rem;
    }
    
    .links-content-section {
        padding: 4rem 0;
    }
    
    .links-intro {
        margin-bottom: 4rem;
    }
    
    .links-category {
        margin-bottom: 4rem;
    }
}

@media (max-width: 480px) {
    .link-card {
        padding: 1.5rem;
    }
    
    .link-icon {
        width: 3rem;
        height: 3rem;
    }
    
    .category-title {
        font-size: 1.8rem;
    }
    
    .links-banner .banner-text {
        font-size: 2rem;
    }
}

/* =============================================================================
   PRIVACY POLICY PAGE STYLES
   ========================================================================== */

/* Privacy Hero Section - Matching together-hero style */
.privacy-hero {
    height: 70vh;
    background-image: url('../images/beetle-15.jpg');
    background-size: cover;
    background-position: center 20%;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.privacy-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(47, 79, 79, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Privacy Banner - Same as together-banner style */
.privacy-banner {
    position: relative;
    background-color: #1C4B5C; /* River Depths - same as together-banner */
    color: var(--text-light);
    text-align: center;
    padding: 16rem 2rem 6rem 2rem;
    margin-top: -200px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hand-torn top edge fixed to remove white gap */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: top;

    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: top;
}

/* Beetle texture overlay for privacy banner */
.privacy-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/beetle-banner-texture.png');
    background-size: 300px 300px;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

.privacy-banner .banner-text {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    color: var(--dune-lichen);
    font-weight: 400;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Privacy Content Section - Light theme like Balfour-Browne Club */
.privacy-content-section {
    padding: 6rem 0;
    background: #f8f9fa;
    position: relative;
}

.privacy-content-section .container {
    position: relative;
    z-index: 1;
}

/* Privacy Overview */
.privacy-overview {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.overview-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.overview-subtitle {
    font-size: 1.2rem;
    color: var(--stormy-periwinkle);
    margin-bottom: 2rem;
    font-weight: 400;
}

.overview-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-dark);
    margin: 0;
    opacity: 0.9;
}

/* Policy Sections */
.policy-sections {
    max-width: 1000px;
    margin: 0 auto;
}

/* Photography Credits Section - with extra spacing */
.photography-credits-section {
    margin-top: 8rem; /* Extra padding between sections */
    margin-bottom: 5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(47, 56, 73, 0.1);
    overflow: hidden;
}

.credits-header {
    padding: 3rem 3rem 2rem;
    background: linear-gradient(135deg, var(--primary-navy), var(--stormy-periwinkle));
    color: white;
    text-align: center;
}

.credits-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
    text-align: center;
}

.credits-subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    text-align: center;
}

/* Legacy privacy section styles for backward compatibility */
.privacy-section {
    margin-bottom: 5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(47, 56, 73, 0.1);
    overflow: hidden;
}

.section-header {
    padding: 3rem 3rem 2rem;
    background: linear-gradient(135deg, var(--primary-navy), var(--stormy-periwinkle));
    color: white;
    text-align: center;
}

.privacy-content-section .section-title.large-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.privacy-content-section .section-subtitle {
    font-size: 1.2rem;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* Privacy Policy Content */
.privacy-policy-content,
.credits-content {
    padding: 3rem;
}

/* Policy Sections - Light theme like Balfour-Browne Club */
.policy-section {
    margin-bottom: 3rem;
    background: #ffffff;
    border-radius: 12px;
    padding: 3rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.policy-section:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.policy-section:last-child {
    margin-bottom: 0;
}

.policy-section h3 {
    color: var(--text-dark);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--stormy-periwinkle);
    padding-bottom: 0.5rem;
}

.policy-section p {
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    opacity: 0.9;
}

.policy-section p:last-child {
    margin-bottom: 0;
}

.policy-section ul {
    color: var(--text-dark);
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

.policy-section li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
    opacity: 0.9;
}

.policy-section a {
    color: var(--primary-teal);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.policy-section a:hover {
    color: var(--rustwood-red);
    border-bottom-color: var(--rustwood-red);
}

/* Credits section styling */
.credits-section {
    margin-bottom: 2.5rem;
}

.credits-section:last-child {
    margin-bottom: 0;
}

.credits-section h3 {
    color: var(--primary-navy);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--stormy-periwinkle);
    text-align: center;
}

.credits-section p {
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.credits-section a {
    color: var(--primary-teal);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.credits-section a:hover {
    color: var(--rustwood-red);
    border-bottom-color: var(--rustwood-red);
}

/* Credits Specific Styles */
.credits-intro {
    background: rgba(123, 140, 174, 0.1);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
    border-left: 4px solid var(--stormy-periwinkle);
}

.credits-intro p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--primary-navy);
    font-weight: 500;
}

.credit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.credit-item {
    background: rgba(255, 248, 220, 0.5);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 3px solid var(--burnt-sienna);
}

.credit-item strong {
    color: var(--primary-navy);
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

.credit-item p {
    margin: 0;
    color: var(--text-medium);
}

/* Photo Credits List Styling */
.photo-credits-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

.photo-credits-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(123, 140, 174, 0.1);
    line-height: 1.6;
    color: var(--text-dark);
}

.photo-credits-list li:last-child {
    border-bottom: none;
}

.photo-credits-list li strong {
    color: var(--text-dark);
    font-weight: 600;
}

.photo-credits-list a {
    color: var(--stormy-periwinkle);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.photo-credits-list a:hover {
    color: var(--text-dark);
    text-decoration: underline;
}

.credits-disclaimer {
    background: rgba(139, 69, 19, 0.1);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(139, 69, 19, 0.3);
    margin-top: 2rem;
}

.credits-disclaimer p {
    margin: 0;
    color: var(--rustwood-red);
    font-style: italic;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .privacy-banner .banner-text {
        font-size: clamp(1.3rem, 3.5vw, 2rem);
    }
    
    .overview-title {
        font-size: 2rem;
    }
    
    .overview-subtitle {
        font-size: 1.1rem;
    }
    
    .overview-description {
        font-size: 1rem;
    }
    
    .privacy-overview {
        margin-bottom: 3rem;
    }
    
    .policy-section {
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .policy-section h3 {
        font-size: 1.3rem;
    }
    
    .policy-section ul {
        margin-left: 1.5rem;
    }
    
    .photography-credits-section {
        margin-top: 6rem;
    }
    
    /* News Hero Mobile Styles */
    .news-hero {
        height: 50vh;
        background-attachment: scroll;
    }
    
    .news-banner {
        margin-top: -140px;
        padding: 12rem 1.5rem 5rem 1.5rem;
    }
    
    .news-banner::before {
        background-size: 200px 200px;
    }
    
    .news-banner .article-main-title {
        font-size: clamp(1.2rem, 3.5vw, 1.8rem);
        padding: 0;
        max-width: 90%;
    }
    
    .credits-title {
        font-size: 2rem;
    }
    
    .credits-subtitle {
        font-size: 1.1rem;
    }
    
    .privacy-content-section .section-title.large-title {
        font-size: 2rem;
    }
    
    .privacy-content-section .section-subtitle {
        font-size: 1.1rem;
    }
    
    .privacy-policy-content,
    .credits-content {
        padding: 2rem;
    }
    
    .section-header {
        padding: 2rem 2rem 1.5rem;
    }
    
    .credits-intro {
        padding: 1.5rem;
    }
    
    .credit-item {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .privacy-banner .banner-text {
        font-size: clamp(1.2rem, 3vw, 1.8rem);
    }
    
    .overview-title {
        font-size: 1.8rem;
    }
    
    .overview-subtitle {
        font-size: 1rem;
    }
    
    .privacy-content-section {
        padding: 4rem 0;
    }
    
    .privacy-overview {
        margin-bottom: 2.5rem;
    }
    
    .policy-section {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .policy-section h3 {
        font-size: 1.2rem;
    }
    
    .policy-section p {
        font-size: 0.95rem;
    }
    
    .policy-section ul {
        margin-left: 1.25rem;
    }
    
    .photography-credits-section {
        margin-top: 4rem;
    }
    
    .credits-title {
        font-size: 1.8rem;
    }
    
    .credits-subtitle {
        font-size: 1rem;
    }
    
    .privacy-content-section .section-title.large-title {
        font-size: 1.8rem;
    }
    
    .privacy-policy-content,
    .credits-content {
        padding: 1.5rem;
    }
    
    .section-header {
        padding: 1.5rem 1.5rem 1rem;
    }
    
    .credits-intro {
        padding: 1.25rem;
    }
    
    .credit-item {
        padding: 1rem;
    }
    
    /* Books Mobile Styles */
    .books-hero {
        height: 60vh;
        background-attachment: scroll;
    }
    
    .books-banner {
        margin-top: -140px;
        padding: 12rem 1.5rem 5rem 1.5rem;
    }
    
    .books-banner::before {
        background-size: 200px 200px;
    }
    
    .books-banner .banner-text {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
    }
    
    .books-content-section {
        padding: 4rem 0;
    }
    
    .books-content-section .section-title.large-title {
        font-size: 2.2rem;
    }
    
    .books-content-section .section-subtitle {
        font-size: 1.1rem;
        margin-bottom: 3rem;
    }
    
    .books-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .book-card {
        border-radius: 12px;
    }
    
    .book-image {
        padding: 1.5rem;
        min-height: 240px;
    }
    
    .book-cover {
        max-height: 200px;
    }
    
    .book-content {
        padding: 2rem;
    }
    
    .book-title {
        font-size: 1.3rem;
    }
    
    .book-description {
        font-size: 0.95rem;
    }
    
    .book-details {
        gap: 0.5rem;
    }
    
    .book-button {
        padding: 0.9rem 1.3rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .books-banner .banner-text {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }
    
    .books-content-section .section-title.large-title {
        font-size: 1.8rem;
    }
    
    .books-grid {
        gap: 1.5rem;
    }
    
    .book-image {
        padding: 1rem;
        min-height: 200px;
    }
    
    .book-cover {
        max-height: 160px;
    }
    
    .book-content {
        padding: 1.5rem;
    }
    
    .book-title {
        font-size: 1.2rem;
    }
    
    .book-description {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .book-details {
        margin-bottom: 1.5rem;
    }
    
    .book-type,
    .book-scope {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
    
    .book-button {
        padding: 0.8rem 1.2rem;
        font-size: 0.85rem;
    }
    
    /* Publications mobile styles */
    .publications-section {
        margin-top: 4rem;
        padding-top: 4rem;
    }
    
    .category-title {
        font-size: 1.4rem;
    }
    
    .publication-item {
        padding: 1.5rem;
    }
    
    .publication-title {
        font-size: 1.1rem;
    }
    
    .publications-list {
        gap: 1.5rem;
    }
}

/* ===============================
   SITEMAP PAGE STYLES
   =============================== */

/* Sitemap Hero */
.sitemap-hero {
    height: 70vh;
    background-image: url('../images/beetle-12.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sitemap-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(47, 56, 73, 0.8) 0%, rgba(123, 140, 174, 0.6) 100%);
    z-index: 1;
}

/* Sitemap Banner */
.sitemap-banner {
    position: relative;
    background-color: var(--stag-beetle-shell);
    color: var(--text-light);
    text-align: center;
    padding: 16rem 2rem 6rem 2rem;
    margin-top: -180px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hand-torn top edge */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: top;

    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 15" preserveAspectRatio="none"><path d="M0,4 C5,7 15,3 22,6 C30,4 38,8 46,4 C54,2 62,8 70,4 C78,3 85,7 92,3 C96,2 98,4 100,3 L100,15 L0,15 Z" fill="white"/></svg>');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: top;
}

/* Beetle texture overlay for sitemap banner */
.sitemap-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/beetle-banner-texture.png');
    background-size: 300px 300px;
    background-position: center;
    background-repeat: repeat;
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
}

/* Sitemap Content */
.sitemap-content-section {
    padding: 6rem 0;
    background: #f8f9fa;
    position: relative;
}

/* Sitemap Overview */
.sitemap-overview {
    text-align: center;
    margin-bottom: 5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.sitemap-overview .overview-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.sitemap-overview .overview-subtitle {
    font-size: 1.2rem;
    color: var(--stormy-periwinkle);
    margin-bottom: 2rem;
    font-weight: 400;
}

.sitemap-overview .overview-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-dark);
    margin: 0;
    opacity: 0.9;
}

/* Main Navigation Grid */
.sitemap-main-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Secondary Content Grid */
.sitemap-secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Utility Links Grid */
.sitemap-utility-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Sitemap Sections */
.sitemap-section {
    background: linear-gradient(135deg, var(--stag-beetle-shell) 0%, var(--deepwater-mussel) 100%);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 248, 220, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sitemap-section:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Uniform sizing for main sections */
.main-section {
    min-height: 200px;
}

.secondary-section {
    min-height: 250px;
}

.utility-section {
    min-height: 160px;
}

/* Sitemap Section Headers */
.sitemap-section .section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: #ffffff;
    flex-shrink: 0;
}

.section-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Icon Colors */
.home-icon { background: linear-gradient(135deg, var(--stormy-periwinkle) 0%, #6a7ca0 100%); }
.about-icon { background: linear-gradient(135deg, var(--burnt-sienna) 0%, #8b4513 100%); }
.news-icon { background: linear-gradient(135deg, var(--rustwood-red) 0%, #a0522d 100%); }
.community-icon { background: linear-gradient(135deg, var(--orchid-mantis) 0%, #8b5a8c 100%); }
.resources-icon { background: linear-gradient(135deg, var(--deepwater-mussel) 0%, #2c3e50 100%); }
.recording-icon { background: linear-gradient(135deg, var(--river-depths) 0%, #1c4b5c 100%); }
.species-icon { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); }
.articles-icon { background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); }
.external-icon { background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); }
.legal-icon { background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%); }

.sitemap-section .section-header h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--dune-lichen);
    margin: 0;
    flex: 1;
}

.sitemap-section .section-header h3 a {
    color: var(--dune-lichen);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sitemap-section .section-header h3 a:hover {
    color: #ffffff;
}

/* Section Content */
.section-description {
    color: var(--dune-lichen);
    opacity: 0.9;
    margin-bottom: 1rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* New section links styling */
.section-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
}

.section-links a {
    color: var(--dune-lichen);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 248, 220, 0.2);
}

.section-links a:hover {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.section-links a:last-child {
    border-bottom: none;
}

/* Sample links for secondary sections */
.sample-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
}

.sample-links a {
    color: var(--dune-lichen);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    padding: 0.25rem 0;
}

.sample-links a:hover {
    color: #ffffff;
}

.view-all-link {
    font-weight: 600;
    margin-top: 0.5rem;
    color: var(--stormy-periwinkle) !important;
}

.view-all-link:hover {
    color: #ffffff !important;
}



/* Sitemap Statistics */
.sitemap-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 4rem 0;
    padding: 2rem;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--stormy-periwinkle);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-dark);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* Sitemap Contact */
.sitemap-contact {
    text-align: center;
    background: linear-gradient(135deg, var(--stormy-periwinkle) 0%, #6a7ca0 100%);
    color: #ffffff;
    padding: 3rem 2rem;
    border-radius: 16px;
    max-width: 600px;
    margin: 2rem auto 0 auto;
}

.sitemap-contact h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.sitemap-contact p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    opacity: 0.95;
}

.sitemap-contact a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

.sitemap-contact a:hover {
    opacity: 0.8;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .sitemap-main-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .sitemap-secondary-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .sitemap-utility-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .sitemap-stats {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .sitemap-overview .overview-title {
        font-size: 2rem;
    }
    
    .main-section,
    .secondary-section,
    .utility-section {
        min-height: auto;
    }
}