.elementor-kit-4{--e-global-color-primary:#8B7355;--e-global-color-secondary:#F5F2ED;--e-global-color-text:#3A3633;--e-global-color-accent:#D4A574;--e-global-typography-primary-font-family:"Amatic SC";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-letter-spacing:1px;--e-global-typography-secondary-font-family:"Patrick Hand";--e-global-typography-secondary-font-size:36px;--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Patrick Hand";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-letter-spacing:1px;--e-global-typography-accent-font-family:"Reenie Beanie";--e-global-typography-accent-font-size:20px;--e-global-typography-accent-font-weight:bold;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.book-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.book-tags span {
    background: #D4A574; /* Honey Gold */
    color: #3A3633;      /* Charcoal Gray */
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1.5px solid #8B7355; /* Soft sepia line like ink drawing */
}

.book-tags span:hover {
    background: #8B7355; /* Sepia Brown */
    color: #F5F2ED;      /* Soft Parchment */
    transform: translateY(-2px);
    border-color: #D4A574; /* Honey Gold accent on hover */
}

/* Poetry Filter Buttons */
.filter-btn {
    padding: 12px 24px !important;
    background: #F5F2ED !important;   /* Soft Parchment */
    border: 2px solid #8B7355 !important; /* Sepia border */
    border-radius: 25px !important;
    color: #3A3633 !important;        /* Charcoal Gray */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Georgia', serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin: 5px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 10px rgba(139, 115, 85, 0.06) !important; /* Softer sepia shadow */
}

.filter-btn:hover {
    background: #D4A574 !important; /* Honey Gold */
    color: #3A3633 !important;      /* Charcoal Gray */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(212, 165, 116, 0.13) !important;
    border-color: #8B7355 !important;
}

.filter-btn.active {
    background: #8B7355 !important; /* Sepia Brown */
    color: #F5F2ED !important;      /* Parchment */
    border-color: #D4A574 !important; /* Honey Gold */
    box-shadow: 0 4px 15px rgba(139, 115, 85, 0.18) !important;
}

.filter-btn.active:hover {
    background: #D4A574 !important;
    color: #3A3633 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .poetry-filters {
        padding: 0 20px !important;
    }
    .filter-btn {
        padding: 10px 18px !important;
        font-size: 13px !important;
        margin: 3px !important;
    }
}
/* Include all previous CSS plus these additions */

/* Avatar Modal Styling */
.avatar-modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    display: none;
}

.avatar-modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 40px;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 5px 30px rgba(0,0,0,0.3);
}

.avatar-modal-content h3 {
    font-family: 'Amatic SC', cursive;
    font-size: 36px;
    color: #3A3633;
    text-align: center;
    margin-bottom: 30px;
}

.close-modal {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 30px;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
}

.close-modal:hover {
    color: #3A3633;
}

/* Contributor Actions Styling */
.contributor-actions {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 2px solid #f0f0f0;
}

.contributor-actions h4 {
    font-family: 'Caveat', cursive;
    font-size: 28px;
    color: #D4A574;
    margin-bottom: 15px;
}

.contributor-button {
    display: inline-block;
    background: #D4A574;
    color: white;
    padding: 10px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-family: 'Patrick Hand', cursive;
    font-size: 16px;
    margin-right: 15px;
    margin-bottom: 10px;
    transition: all 0.3s;
}

.contributor-button:hover {
    background: #8B7355;
    transform: translateY(-2px);
}

/* All other CSS from previous solution remains the same *//* End custom CSS */