:root {
    --charcoal: #333333;
    --feed-width: 375px;
    --header-padding: 10px; /* Define padding as a variable for consistency */
    --logo-height: 65px; /* Define logo height as a variable */
    --gap-between-header-and-feed: 30px; /* Define gap between header and first article */
    --modal-header-height: 60px; /* Define modal header height */
    --modal-footer-height: 50px; /* Define modal footer height */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0; /* Adjusted to account for fixed header */
    background-color: #f4f4f4;
    max-width: var(--feed-width);
    margin: 0 auto;
    position: relative; /* Ensure proper stacking context */
    z-index: 1; /* Base z-index for body */
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: var(--feed-width);
    background-color: #ffffff;
    padding: var(--header-padding);
    display: flex;
    justify-content: space-between; /* Logo left, search right */
    align-items: center;
    border-bottom: 1px solid var(--charcoal);
    z-index: 1000; /* Above all content */
    box-shadow: none; /* Subtle depth */
    min-height: calc(var(--logo-height) + var(--header-padding) * 2); /* Ensure header height accommodates logo */
}

.logo {
    height: var(--logo-height); /* Set logo height to 65px */
    width: auto; /* Scale width proportionally */
    vertical-align: middle; /* Align with search bar */
    box-shadow: none;
}

#searchInput {
    height: 30px; /* Keep search bar height at 30px */
    padding: 5px;
    font-size: 1em;
    width: 150px; /* Shortened search bar width */
    border: 1px solid var(--charcoal);
    border-radius: 2px;
    vertical-align: middle; /* Align with logo */
    box-sizing: border-box; /* Include padding in width calculation */
}

.feed-container {
    margin-top: calc(var(--logo-height) + var(--header-padding) * 2 + var(--gap-between-header-and-feed)); /* Add gap below header */
    max-width: var(--feed-width);
    z-index: 1; /* Ensure feed is below modal */
}

.feed-item {
    border: 3px solid var(--charcoal);
    margin-bottom: 20px;
    border-radius: 2px;
    overflow: hidden;
    background-color: white;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle depth for each card */
    z-index: 1; /* Ensure feed items are below modal */
}

/* Apply all 64 colors to .title-bar, .summary-bar, and .author-bar */
.feed-item:nth-child(1) .title-bar,
.feed-item:nth-child(1) .summary-bar,
.feed-item:nth-child(1) .author-bar {
    background-color: #3B3A36;
}
.feed-item:nth-child(2) .title-bar,
.feed-item:nth-child(2) .summary-bar,
.feed-item:nth-child(2) .author-bar {
    background-color: #41403E;
}
.feed-item:nth-child(3) .title-bar,
.feed-item:nth-child(3) .summary-bar,
.feed-item:nth-child(3) .author-bar {
    background-color: #4B4A48;
}
.feed-item:nth-child(4) .title-bar,
.feed-item:nth-child(4) .summary-bar,
.feed-item:nth-child(4) .author-bar {
    background-color: #504F4D;
}
.feed-item:nth-child(5) .title-bar,
.feed-item:nth-child(5) .summary-bar,
.feed-item:nth-child(5) .author-bar {
    background-color: #555452;
}
.feed-item:nth-child(6) .title-bar,
.feed-item:nth-child(6) .summary-bar,
.feed-item:nth-child(6) .author-bar {
    background-color: #5A5957;
}
.feed-item:nth-child(7) .title-bar,
.feed-item:nth-child(7) .summary-bar,
.feed-item:nth-child(7) .author-bar {
    background-color: #5F5E5C;
}
.feed-item:nth-child(8) .title-bar,
.feed-item:nth-child(8) .summary-bar,
.feed-item:nth-child(8) .author-bar {
    background-color: #646361;
}
.feed-item:nth-child(9) .title-bar,
.feed-item:nth-child(9) .summary-bar,
.feed-item:nth-child(9) .author-bar {
    background-color: #696866;
}
.feed-item:nth-child(10) .title-bar,
.feed-item:nth-child(10) .summary-bar,
.feed-item:nth-child(10) .author-bar {
    background-color: #6E6D6B;
}
.feed-item:nth-child(11) .title-bar,
.feed-item:nth-child(11) .summary-bar,
.feed-item:nth-child(11) .author-bar {
    background-color: #737270;
}
.feed-item:nth-child(12) .title-bar,
.feed-item:nth-child(12) .summary-bar,
.feed-item:nth-child(12) .author-bar {
    background-color: #787775;
}
.feed-item:nth-child(13) .title-bar,
.feed-item:nth-child(13) .summary-bar,
.feed-item:nth-child(13) .author-bar {
    background-color: #7D7C7A;
}
.feed-item:nth-child(14) .title-bar,
.feed-item:nth-child(14) .summary-bar,
.feed-item:nth-child(14) .author-bar {
    background-color: #82817F;
}
.feed-item:nth-child(15) .title-bar,
.feed-item:nth-child(15) .summary-bar,
.feed-item:nth-child(15) .author-bar {
    background-color: #878684;
}
.feed-item:nth-child(16) .title-bar,
.feed-item:nth-child(16) .summary-bar,
.feed-item:nth-child(16) .author-bar {
    background-color: #8C8B89;
}
.feed-item:nth-child(17) .title-bar,
.feed-item:nth-child(17) .summary-bar,
.feed-item:nth-child(17) .author-bar {
    background-color: #91908E;
}
.feed-item:nth-child(18) .title-bar,
.feed-item:nth-child(18) .summary-bar,
.feed-item:nth-child(18) .author-bar {
    background-color: #969593;
}
.feed-item:nth-child(19) .title-bar,
.feed-item:nth-child(19) .summary-bar,
.feed-item:nth-child(19) .author-bar {
    background-color: #9B9A98;
}
.feed-item:nth-child(20) .title-bar,
.feed-item:nth-child(20) .summary-bar,
.feed-item:nth-child(20) .author-bar {
    background-color: #A09F9D;
}
.feed-item:nth-child(21) .title-bar,
.feed-item:nth-child(21) .summary-bar,
.feed-item:nth-child(21) .author-bar {
    background-color: #A5A4A2;
}
.feed-item:nth-child(22) .title-bar,
.feed-item:nth-child(22) .summary-bar,
.feed-item:nth-child(22) .author-bar {
    background-color: #AAA9A7;
}
.feed-item:nth-child(23) .title-bar,
.feed-item:nth-child(23) .summary-bar,
.feed-item:nth-child(23) .author-bar {
    background-color: #AFAEA9;
}
.feed-item:nth-child(24) .title-bar,
.feed-item:nth-child(24) .summary-bar,
.feed-item:nth-child(24) .author-bar {
    background-color: #B4B3B1;
}
.feed-item:nth-child(25) .title-bar,
.feed-item:nth-child(25) .summary-bar,
.feed-item:nth-child(25) .author-bar {
    background-color: #B9B8B6;
}
.feed-item:nth-child(26) .title-bar,
.feed-item:nth-child(26) .summary-bar,
.feed-item:nth-child(26) .author-bar {
    background-color: #BEBDBB;
}
.feed-item:nth-child(27) .title-bar,
.feed-item:nth-child(27) .summary-bar,
.feed-item:nth-child(27) .author-bar {
    background-color: #C3C2C0;
}
.feed-item:nth-child(28) .title-bar,
.feed-item:nth-child(28) .summary-bar,
.feed-item:nth-child(28) .author-bar {
    background-color: #C8C7C5;
}
.feed-item:nth-child(29) .title-bar,
.feed-item:nth-child(29) .summary-bar,
.feed-item:nth-child(29) .author-bar {
    background-color: #CDCCCB;
}
.feed-item:nth-child(30) .title-bar,
.feed-item:nth-child(30) .summary-bar,
.feed-item:nth-child(30) .author-bar {
    background-color: #D2D1D0;
}
.feed-item:nth-child(31) .title-bar,
.feed-item:nth-child(31) .summary-bar,
.feed-item:nth-child(31) .author-bar {
    background-color: #D7D6D5;
}
.feed-item:nth-child(32) .title-bar,
.feed-item:nth-child(32) .summary-bar,
.feed-item:nth-child(32) .author-bar {
    background-color: #DBDAD8;
}
.feed-item:nth-child(33) .title-bar,
.feed-item:nth-child(33) .summary-bar,
.feed-item:nth-child(33) .author-bar {
    background-color: #DEDDD9;
}
.feed-item:nth-child(34) .title-bar,
.feed-item:nth-child(34) .summary-bar,
.feed-item:nth-child(34) .author-bar {
    background-color: #E1E0DD;
}
.feed-item:nth-child(35) .title-bar,
.feed-item:nth-child(35) .summary-bar,
.feed-item:nth-child(35) .author-bar {
    background-color: #E4E3E0;
}
.feed-item:nth-child(36) .title-bar,
.feed-item:nth-child(36) .summary-bar,
.feed-item:nth-child(36) .author-bar {
    background-color: #E7E6E3;
}
.feed-item:nth-child(37) .title-bar,
.feed-item:nth-child(37) .summary-bar,
.feed-item:nth-child(37) .author-bar {
    background-color: #EAE9E6;
}
.feed-item:nth-child(38) .title-bar,
.feed-item:nth-child(38) .summary-bar,
.feed-item:nth-child(38) .author-bar {
    background-color: #EDECE9;
}
.feed-item:nth-child(39) .title-bar,
.feed-item:nth-child(39) .summary-bar,
.feed-item:nth-child(39) .author-bar {
    background-color: #F0EFEF;
}
.feed-item:nth-child(40) .title-bar,
.feed-item:nth-child(40) .summary-bar,
.feed-item:nth-child(40) .author-bar {
    background-color: #F3F2F2;
}
.feed-item:nth-child(41) .title-bar,
.feed-item:nth-child(41) .summary-bar,
.feed-item:nth-child(41) .author-bar {
    background-color: #F6F5F5;
}
.feed-item:nth-child(42) .title-bar,
.feed-item:nth-child(42) .summary-bar,
.feed-item:nth-child(42) .author-bar {
    background-color: #F8F7F7;
}
.feed-item:nth-child(43) .title-bar,
.feed-item:nth-child(43) .summary-bar,
.feed-item:nth-child(43) .author-bar {
    background-color: #FAFAFA;
}
.feed-item:nth-child(44) .title-bar,
.feed-item:nth-child(44) .summary-bar,
.feed-item:nth-child(44) .author-bar {
    background-color: #FDFDFD;
}
.feed-item:nth-child(45) .title-bar,
.feed-item:nth-child(45) .summary-bar,
.feed-item:nth-child(45) .author-bar {
    background-color: #C0C6C7;
}
.feed-item:nth-child(46) .title-bar,
.feed-item:nth-child(46) .summary-bar,
.feed-item:nth-child(46) .author-bar {
    background-color: #B6B6B4;
}
.feed-item:nth-child(47) .title-bar,
.feed-item:nth-child(47) .summary-bar,
.feed-item:nth-child(47) .author-bar {
    background-color: #BCC6CC;
}
.feed-item:nth-child(48) .title-bar,
.feed-item:nth-child(48) .summary-bar,
.feed-item:nth-child(48) .author-bar {
    background-color: #98AFC7;
}
.feed-item:nth-child(49) .title-bar,
.feed-item:nth-child(49) .summary-bar,
.feed-item:nth-child(49) .author-bar {
    background-color: #838996;
}
.feed-item:nth-child(50) .title-bar,
.feed-item:nth-child(50) .summary-bar,
.feed-item:nth-child(50) .author-bar {
    background-color: #778899;
}
.feed-item:nth-child(51) .title-bar,
.feed-item:nth-child(51) .summary-bar,
.feed-item:nth-child(51) .author-bar {
    background-color: #708090;
}
.feed-item:nth-child(52) .title-bar,
.feed-item:nth-child(52) .summary-bar,
.feed-item:nth-child(52) .author-bar {
    background-color: #6D7B8D;
}
.feed-item:nth-child(53) .title-bar,
.feed-item:nth-child(53) .summary-bar,
.feed-item:nth-child(53) .author-bar {
    background-color: #657383;
}
.feed-item:nth-child(54) .title-bar,
.feed-item:nth-child(54) .summary-bar,
.feed-item:nth-child(54) .author-bar {
    background-color: #616D7E;
}
.feed-item:nth-child(55) .title-bar,
.feed-item:nth-child(55) .summary-bar,
.feed-item:nth-child(55) .author-bar {
    background-color: #646D7E;
}
.feed-item:nth-child(56) .title-bar,
.feed-item:nth-child(56) .summary-bar,
.feed-item:nth-child(56) .author-bar {
    background-color: #71797E;
}
.feed-item:nth-child(57) .title-bar,
.feed-item:nth-child(57) .summary-bar,
.feed-item:nth-child(57) .author-bar {
    background-color: #566D7E;
}
.feed-item:nth-child(58) .title-bar,
.feed-item:nth-child(58) .summary-bar,
.feed-item:nth-child(58) .author-bar {
    background-color: #737CA1;
}
.feed-item:nth-child(59) .title-bar,
.feed-item:nth-child(59) .summary-bar,
.feed-item:nth-child(59) .author-bar {
    background-color: #728FCE;
}
.feed-item:nth-child(60) .title-bar,
.feed-item:nth-child(60) .summary-bar,
.feed-item:nth-child(60) .author-bar {
    background-color: #4863A0;
}
.feed-item:nth-child(61) .title-bar,
.feed-item:nth-child(61) .summary-bar,
.feed-item:nth-child(61) .author-bar {
    background-color: #2F539B;
}
.feed-item:nth-child(62) .title-bar,
.feed-item:nth-child(62) .summary-bar,
.feed-item:nth-child(62) .author-bar {
    background-color: #2B547E;
}
.feed-item:nth-child(63) .title-bar,
.feed-item:nth-child(63) .summary-bar,
.feed-item:nth-child(63) .author-bar {
    background-color: #36454F;
}
.feed-item:nth-child(64) .title-bar,
.feed-item:nth-child(64) .summary-bar,
.feed-item:nth-child(64) .author-bar {
    background-color: #29465B;
}
.feed-item:nth-child(65) .title-bar,
.feed-item:nth-child(65) .summary-bar,
.feed-item:nth-child(65) .author-bar {
    background-color: #2B3856;
}
.feed-item:nth-child(n+65) .title-bar,
.feed-item:nth-child(n+65) .summary-bar,
.feed-item:nth-child(n+65) .author-bar {
    background-color: #123456; /* Repeat from the start after 64 */
}

.title-bar {
    padding: 15px;
    margin: 0;
    position: relative;
    z-index: 1; /* Keep bars below image */
}
.title-bar h2 {
    margin: 0 0 5px 0;
    font-size: 1.2em;
    color: #ffffff; /* Ensure readability on dark backgrounds */
}
.byline {
    margin: 0 0 10px 0; /* Add 10px space (tidbit) before image */
    font-size: 0.9em;
    opacity: 0.9;
    color: #ffffff; /* Ensure readability on dark backgrounds */
}

.feed-item img {
    width: 100%;
    height: auto; /* This is the key change! It maintains the image's original aspect ratio */
    object-fit: contain; /* This is also key. It ensures the entire image is visible, fitting within the frame without being cropped */
    display: block;
    position: relative;
    z-index: 2; /* Place image above bars */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow to lift image */
    margin-top: -5px; /* Slight overlap to enhance "on top" effect */
}


.summary-bar {
    padding: 15px;
    margin: 0;
    position: relative;
    z-index: 1; /* Keep bars below image */
}
.summary-bar p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.4;
    color: #ffffff; /* Ensure readability on dark backgrounds */
}

.share-bar {
    background-color: white;
    padding: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #eee;
}

.share-bar a {
    color: #666;
    font-size: 1.2em;
    text-decoration: none;
    margin: 0 5px;
}

.share-bar a:hover {
    color: #3B3A36; /* Default first color for hover */
}

.author-bar {
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.author-bar a {
    color: white;
    font-size: 1.1em;
    text-decoration: none;
}

.author-bar a:hover {
    color: #ddd;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* This is the key change! */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: #ffffff;
    margin: 5% auto;
    padding: 0;
    width: 90%;
    max-width: 340px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 3001;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.modal-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 340px;
    height: var(--modal-header-height);
    background-color: #ffffff;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    z-index: 3002; /* Above content */
}

.back-btn {
    background: none;
    border: none;
    font-size: 1.5em;
    color: #333;
    cursor: pointer;
    padding: 5px;
    min-width: 44px; /* Touch-friendly */
}

.modal-title {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0;
    text-align: center;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #2B547E;
    width: 0%;
    transition: width 0.3s ease;
}

.close {
    color: #aaa;
    font-size: 1.5em;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
    min-width: 44px; /* Touch-friendly */
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
}

.modal-body {
    padding: 60px 10px 50px 10px; /* Offset for header and footer */
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    overflow-y: auto;
    flex-grow: 1;
    z-index: 3001; /* Above backdrop */
    background-color: #ffffff; /* Explicit background for content */
}

.modal-body h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20px;
    color: #2B547E;
}

.modal-body .byline {
    font-size: 0.9em;
    margin-bottom: 15px;
    color: #666;
}

.modal-body .article-content {
    margin-bottom: 10px;
}

.modal-body .article-content img {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 10px 0;
    object-fit: cover;
}

.modal-body .article-content p {
    margin-bottom: 1em;
    text-indent: 1em; /* Optional newspaper feel */
}

.modal-body .article-content hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #ccc;
}

.modal-body .reading-time {
    font-size: 0.8em;
    color: #666;
    text-align: right;
    margin-top: 10px;
}

.jump-to-top {
    position: fixed;
    bottom: 60px;
    right: 10px;
    padding: 10px;
    background-color: #2B547E;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    z-index: 3002;
}

.jump-to-top:hover {
    background-color: #1F45FC;
}

.modal-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 340px;
    height: var(--modal-footer-height);
    background-color: #ffffff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ccc;
    z-index: 3002; /* Above content */
}

.back-to-feed {
    background: none;
    border: 1px solid #2B547E;
    color: #2B547E;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    min-width: 100px; /* Touch-friendly */
}

.back-to-feed:hover {
    background-color: #2B547E;
    color: white;
}

/* Responsive for desktop - keeps skinny */
@media (min-width: 768px) {
    body {
        max-width: var(--feed-width);
    }
    .modal-content {
        max-width: 600px; /* Allow more width on desktop */
    }
    .modal-header, .modal-footer {
        max-width: 600px;
    }
}