:root {
    --transition-speed: 0.6s;
    --tab-width: 40px;
    --tab-height: calc(100vh / 6);
}

html,
body,
.binder-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Yu Gothic', sans-serif;
}

/* Hide global header if present */
body>header,
.site-header,
#masthead {
    display: none !important;
}

.binder-container {
    width: 100vw;
    height: 100vh;
    background-image: radial-gradient(#dcdcdc 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 2000px;
}

.binder-wrapper {
    position: relative;
    width: calc(100vw - (var(--tab-width) * 2));
    /* Reserve space for tabs */
    height: 100vh;
    display: flex;
    background-color: #B8E994;
    /* Match Home page color for the left side initially */
}

.sheet-stack {
    position: relative;
    width: 50%;
    /* Right side by default */
    height: 100%;
    margin-left: 50%;
    /* Offset to the right half */
    transform-style: preserve-3d;
}

.sheet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: none;
    /* Removed shadow for seamless look */
    transform-origin: left center;
    transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1), z-index var(--transition-speed);
    transform-style: preserve-3d;
}

/* Sheet Face Logic (Front/Back) */
.sheet-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.sheet-face.front {
    z-index: 2;
    transform: rotateY(0deg);
    background-color: var(--sheet-color);
}

.sheet-face.back {
    z-index: 1;
    transform: rotateY(180deg);
    background-color: var(--back-color);
    box-shadow: none;
    /* Removed shadow to eliminate center fold line */
}

/* Content within the face */
.sheet-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 40px;
    box-sizing: border-box;
    overflow-y: auto;
    /* Background color is handled by sheet-face */
    background-color: transparent !important;
}

.sheet.is-flipped {
    transform: rotateY(-180deg);
}

.sheet.is-flipped .sheet-tab {
    /* When sheet flips 180deg, the "right" edge becomes the visual "left" edge. */
    transform: rotateY(180deg);
    right: calc(var(--tab-width) * -0.9);
    left: auto;
    border-radius: 8px 0 0 8px;
}

/* ... existing styles ... */

.sheet.is-flipped .sheet-tab:hover {
    transform: rotateY(180deg) translateX(-5px);
}

/* =========================================
   Community Archive Styles
   ========================================= */

/* Grid Layout (2 columns x 4 rows = 8 items per page side) */
.community-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
    height: 100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* Futuristic Ticket Design (3D) */
.community-ticket {
    position: relative;
    width: 100%;
    /* Min height to ensure aspect ratio */
    min-height: auto;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

/* Hover Effect on Container */
.community-ticket:hover {
    transform: translateY(-2px) scale(1.02);
    z-index: 10;
}

/* Faces */
/* Faces */
.ticket-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    padding: 0;
    /* Removing padding to allow image to be edge-to-edge */
    box-sizing: border-box;
    backface-visibility: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.98));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Align content to top */
    backdrop-filter: blur(5px);
    overflow: hidden;
    /* Clip image rounded corners */
}

.ticket-image {
    width: 100%;
    height: 45%;
    /* Image takes 45% of height */
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ticket-content-wrapper {
    flex: 1;
    /* Take remaining space */
    padding: 15px;
    /* Add padding here for text */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ticket-face.front {
    z-index: 2;
    transform: rotateY(0deg);
    border-left: 6px solid #FF6B6B;
    /* Pop accent color stripe */
}

.ticket-face.back {
    z-index: 1;
    transform: rotateY(180deg);
    background: #fff;
    border-right: 6px solid #FF6B6B;
    /* Mirrored stripe */
    overflow-y: auto;
}

/* Face Content Styling */
.ticket-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ticket-taxonomy {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    background: #eee;
    padding: 2px 8px;
    border-radius: 4px;
    align-self: flex-start;
}

.ticket-title {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    line-height: 1.3;
}

.ticket-body {
    font-size: 0.85rem;
    color: #555;
    flex-grow: 1;
    margin-top: 8px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Back Content */
.ticket-back-image {
    width: 100%;
    height: 300px;
    /* Taller for details */
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #eee;
}

.ticket-back-content {
    padding: 20px;
    /* Padding for back content */
}

.ticket-back-content h2 {
    margin-top: 0;
    color: #FF6B6B;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.ticket-full-content {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #444;
}

/* Expanded Card (Overlay) Animation */
/* Expanded Card (Overlay) Animation */
.community-ticket.expanded {
    position: absolute;
    /* Set by JS initially */
    z-index: 9999;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;

    /* Ensure initial transform state */
    transform: rotateY(0deg);

    /* Define ALL transitions here */
    transition:
        top 1.0s cubic-bezier(0.25, 1, 0.5, 1),
        left 1.0s cubic-bezier(0.25, 1, 0.5, 1),
        width 1.0s cubic-bezier(0.25, 1, 0.5, 1),
        height 1.0s cubic-bezier(0.25, 1, 0.5, 1),
        transform 1.0s cubic-bezier(0.45, 0, 0.55, 1);
}

.community-ticket.expanded.is-animating {
    /* Rotation: 180deg (0.5 turns) to reveal back face */
    transform: rotateY(180deg);
    /* DO NOT redefine transition property here, or it overrides the above */
}

.community-ticket.expanded .ticket-face {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

/* Close Button (on Back Face) */
.ticket-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    /* Back face is mirrored, so this might be visual Left? No, backface hidden handles it */
    /* wait, rotateY(180) mirrors X axis. Right becomes Left visually IF we look from behind. */
    /* But we face the back. */
    width: 30px;
    height: 30px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pagination Buttons */
.pagination-btn {
    position: absolute;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #333;
    color: #fff;
    border: none;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background 0.2s ease;
    z-index: 20;
}

.pagination-btn:hover {
    transform: scale(1.1);
    background: #555;
}

.pagination-btn.prev-btn {
    left: 20px;
    /* Bottom Left of Left Page */
}

.pagination-btn.next-btn {
    right: 20px;
    /* Bottom Right of Right Page */
}

/* Specific color states for active viewing */


.page-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #333;
}

/* Tabs */
/* Tabs */
.sheet-tab {
    position: absolute;
    right: calc(var(--tab-width) * -0.9);
    top: calc(var(--order) * var(--tab-height));
    width: var(--tab-width);
    height: var(--tab-height);
    background-color: var(--sheet-color);
    border: none;
    border-radius: 0 8px 8px 0;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, right 0.3s ease;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding: 10px 0;
    letter-spacing: 2px;
}

.sheet-tab:hover {
    transform: translateX(5px);
}

.sheet.is-flipped .sheet-tab {
    /* When sheet flips 180deg, the "right" edge becomes the visual "left" edge.
       We keep the tab attached to that edge.
       We rotate the tab 180deg to correct the text mirroring.
       We DO NOT change 'right' to 'left' positioning relative to the spine. */
    transform: rotateY(180deg);

    /* Ensure no spine-relative positioning overrides */
    right: calc(var(--tab-width) * -0.9);
    left: auto;

    /* Border radius flips visually with the sheet rotation, so we keep the original definition?
       Original: 0 8px 8px 0.
       Mirrored: looks like 8px 0 0 8px.
       Visual desired: 8px 0 0 8px (sticking out left).
       So we don't need to change border-radius if the geometry flips.
       BUT, if we rotate the tab 180deg relative to the sheet...
       Let's assume the rotation handles the text.
    */
}

.sheet.is-flipped .sheet-tab:hover {
    transform: rotateY(180deg) translateX(5px);
}

/* Specific color states for active viewing */
/* We reveal the sheet color on the front content only if it's the active one? 
   No, the user image shows the whole page background colored. */
/* Specific color states for active viewing */
/* We reveal the sheet color on the front content only if it's the active one? 
   No, the user image shows the whole page background colored. */
.sheet-content {
    background-color: transparent;
    /* Reset to transparent as face handles color */
}

/* =========================================
   New Card UI Styles
   ========================================= */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

.card-image {
    width: 100%;
    height: 140px;
    background-color: #f0f0f0;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #eee;
}

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

.card-image .no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 0.9rem;
    background: #e0e0e0;
}

.card-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card h3 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: #333;
    line-height: 1.4;
}

.card p,
.card-excerpt {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
    flex-grow: 1;
}

/* Sponsor Card Tweaks */
.sponsor-card .card-image {
    height: 120px;
    background: #fff;
    /* White background for logos */
    padding: 10px;
    box-sizing: border-box;
}

.sponsor-card .card-image img {
    object-fit: contain;
    /* Contain logo */
}

/* Contact Form Wrapper */
.contact-form-wrapper {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* News List */
.news-list {
    margin-top: 20px;
}

.news-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px 0;
}

.news-date {
    font-size: 0.85rem;
    color: #666;
    margin-right: 15px;
    font-family: monospace;
}

.news-item a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.2s;
}


.news-item a:hover {
    color: #0073aa;
}


/* =========================================
   Root Page Calendar Button (Updated)
   ========================================= */
/* =========================================
   Root Page Action Buttons
   ========================================= */
.root-action-buttons {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 15px;
    z-index: 20;
}

.root-calendar-btn {
    /* Reset absolute position as it's now in flex container */
    position: static;
    background-color: #3498DB;
    color: white;
    border: none;
    border-radius: 12px;
    /* Rounded Square */
    padding: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 10;
}

.root-calendar-btn svg {
    width: 28px;
    height: 28px;
}

.root-calendar-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);
}

.root-instagram-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Circle */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.root-instagram-btn:hover {
    transform: translateY(-3px) rotate(5deg);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}


/* =========================================
   Calendar Modal (Full Screen) - Extreme Coupy & Playful
   ========================================= */
.calendar-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(93, 64, 55, 0.6);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.calendar-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.calendar-modal-content {
    width: 90vw;
    height: 85vh;
    max-width: 1200px;
    max-height: 800px;
    display: flex;
    position: relative;
    box-shadow: 0 30px 60px rgba(60, 40, 30, 0.3);
    border-radius: 30px 25px 35px 20px;
    /* Sketchbook organic shape */
    overflow: visible;
    /* Allow masking tape to stick out */
    background: #fffef7;
    transform: scale(0.95) rotate(-1deg);
    /* Slight overall tilt */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    font-family: 'Hachi Maru Pop', cursive;
    color: #5d4037;
    border: 8px solid #f0f0f0;
    /* Thick paper border */
}

.calendar-modal.is-open .calendar-modal-content {
    transform: scale(1) rotate(0deg);
    /* Straighten slightly on open */
}

.modal-close-btn {
    position: absolute;
    top: -20px;
    right: -20px;
    background: #ff7043;
    /* Bright Orange */
    color: #fff;
    border: 3px solid #fff;
    font-size: 2rem;
    line-height: 1;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: rotate(15deg);
    transition: all 0.2s;
}

.modal-close-btn:hover {
    background: #ff5722;
    transform: rotate(0deg) scale(1.1);
}

/* layout */
.modal-left {
    width: 55%;
    padding: 15px;
    /* Further reduced from 25px */
    background: #fffef7;
    border-right: 4px dashed #ddd;
    /* Perforated line */
    display: flex;
    flex-direction: column;
    border-radius: 20px 0 0 20px;
}

.modal-right {
    width: 45%;
    padding: 50px;
    background: #fff9c4;
    /* Pale Yellow Sketchbook Paper */
    overflow-y: auto;
    position: relative;
    border-radius: 0 20px 20px 0;
    /* Dot grid pattern */
    background-image: radial-gradient(#fdd835 15%, transparent 16%), radial-gradient(#fdd835 15%, transparent 16%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

/* Calendar Grid Styles */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    /* Reduced from 10px */
    max-width: 550px;
    /* Constrain width to match grid */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.calendar-header h3 {
    margin: 0;
    font-size: 2.8rem;
    font-weight: 400;
    color: #5d4037;
    /* Marker Highlight */
    background: linear-gradient(transparent 60%, rgba(255, 235, 59, 0.5) 60%);
    padding: 0 10px;
    transform: rotate(-2deg);
}

.calendar-header button {
    background: #fff;
    border: 2px solid #8d6e63;
    border-radius: 50% 40% 60% 45%;
    /* Blob shape */
    width: 50px;
    height: 50px;
    cursor: pointer;
    color: #5d4037;
    font-size: 1.5rem;
    font-family: inherit;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 0 #d7ccc8;
    /* 3D shadow */
}

.calendar-header button:hover {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 #d7ccc8;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: min-content;
    /* Don't stretch rows */
    gap: 10px;
    /* Increased from 5px */
    text-align: center;
    flex-grow: 0;
    /* STOP STRETCHING */
    max-width: 550px;
    /* Constrain width to keep circles small */
    margin: 0 auto;
    /* Center */
    width: 100%;
}

.weekday-header {
    font-weight: 700;
    color: #8d6e63;
    margin-bottom: 2px;
    /* Reduced from 5px */
    font-size: 1.4rem;
}

/* Bright Crayon Colors */
.weekday-header.is-saturday {
    color: #2196F3;
}

.weekday-header.is-sunday {
    color: #F44336;
}

.calendar-day {
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s;
    font-size: 1.8rem;
    font-weight: 400;
    position: relative;
    color: #5d4037;
}

/* Random tilts for numbers (using nth-child cycling) */
.calendar-day:nth-child(2n) {
    transform: rotate(2deg);
}

.calendar-day:nth-child(3n) {
    transform: rotate(-2deg);
}

.calendar-day:nth-child(5n) {
    transform: rotate(1.5deg);
}

.calendar-day:hover {
    transform: scale(1.2) rotate(0deg);
    color: #e65100;
    z-index: 10;
}

/* Crayon Day Colors */
.calendar-day.is-saturday {
    color: #2196F3;
}

.calendar-day.is-sunday {
    color: #F44336;
}

.calendar-day.is-holiday {
    color: #F44336;
}

/* Holidays Red */

/* Event Marker - Rough Scribble */
.calendar-day.has-event {
    font-weight: 900;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

.calendar-day.has-event::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 25px;
    height: 8px;
    background-color: #ffca28;
    /* Yellow Crayon */
    border-radius: 4px;
    z-index: -1;
    opacity: 0.7;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

/* Selection - Big Red Circle */
.calendar-day.is-selected {
    color: #d32f2f !important;
    transform: scale(1.1) rotate(-5deg) !important;
    z-index: 5;
}

.calendar-day.is-selected::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 4px solid #f44336;
    /* Red Crayon Line */
    border-radius: 60% 40% 70% 30% / 60% 50% 50% 40%;
    z-index: -1;
}

.calendar-day.is-selected::after {
    /* Hide the event marker bar if selected to avoid clutter, or keep it? 
       Let's keep it but adjust styling if needed.
       Actually, standard style overrides ::after so we need to be careful.
    */
    background-color: transparent !important;
    /* Hide straight bar */
    border-bottom: 3px solid #ffb74d;
    /* Dashed underline for event if selected? */
    width: 20px;
    height: 0;
    bottom: 5px;
    transform: translateX(-50%);
}


/* Event List (Right Side) */
#modal-selected-date {
    font-size: 2rem;
    color: #3e2723;
    margin-top: 0;
    margin-bottom: 30px;
    padding: 10px;
    background: #fff;
    display: inline-block;
    border: 2px solid #3e2723;
    box-shadow: 4px 4px 0 #efa3a3;
    /* Pink shadow */
    transform: rotate(-1deg);
}

.modal-event-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 20px;
    margin-bottom: 25px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: rotate(1deg);
    /* Slight tilt */
    border: none;
    font-family: 'Hachi Maru Pop', cursive;
}

/* Masking Tape Effect */
.modal-event-item::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 100px;
    height: 30px;
    background: rgba(255, 235, 59, 0.7);
    /* Yellow Tape */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.modal-event-item:nth-child(even)::before {
    background: rgba(100, 255, 218, 0.7);
    /* Teal Tape for variety */
    transform: translateX(-50%) rotate(2deg);
}

.modal-event-item:hover {
    transform: scale(1.02) rotate(0deg);
    z-index: 5;
}

.modal-event-inner {
    display: flex;
    gap: 20px;
}

.modal-event-img {
    width: 100%;
    /* Full width image for Polaroid look */
    height: 150px;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
}

.modal-event-content {
    flex-grow: 1;
}

.modal-event-content h4 {
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    color: #bf360c;
    /* Deep Orange */
    border-bottom: 2px dashed #ffab91;
    padding-bottom: 5px;
}

.modal-event-excerpt {
    font-size: 1.1rem;
    color: #4e342e;
    line-height: 1.6;
}

.no-events {
    text-align: center;
    padding: 40px;
    color: #8d6e63;
    font-size: 1.4rem;
    background: #fff;
    border: 3px dashed #bcaaa4;
    border-radius: 10px;
    transform: rotate(-2deg);
}