/* WAR NEWS WIRE — warnewswire.com
   Retro-modern WWII wire service aesthetic
   Fonts: Special Elite (typewriter), Oswald (bold headlines), IBM Plex Mono (body)
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #0a0a08;
    color: #d4cfc4;
    font-family: "IBM Plex Mono", "Courier New", Courier, monospace;
    font-size: 15px;
    line-height: 1.5;
}

/* ── FIXED SITE HEADER ─────────────────────────────────────── */

#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #0a0a08;
}

/* ── TICKER BAR ──────────────────────────────────────────── */

#ticker-bar {
    background: #1a0000;
    color: #fff;
    display: flex;
    align-items: center;
    height: 38px;
    border-bottom: 2px solid #8b0000;
    font-family: "IBM Plex Mono", monospace;
}

.ticker-label {
    background: #8b0000;
    color: #ffd700;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    letter-spacing: 3px;
    flex-shrink: 0;
    animation: pulse-label 2s ease-in-out infinite;
}

@keyframes pulse-label {
    0%, 100% { background: #8b0000; }
    50% { background: #6b0000; }
}

#ticker-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
    position: relative;
}

#ticker-track {
    display: flex;
    white-space: nowrap;
    animation: ticker-scroll var(--ticker-duration, 15s) linear infinite;
    gap: 50px;
}

#ticker-track:hover {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(var(--ticker-scroll-dist, -50%)); }
}

#ticker-text {
    display: inline;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #e8e0d0;
}

.ticker-item a {
    color: #e8e0d0;
    text-decoration: none;
    transition: color 0.15s;
}

.ticker-item a:hover {
    color: #ff4444;
}

.ticker-bullet {
    color: #8b0000;
    font-weight: bold;
    margin: 0 8px;
}

.ticker-source {
    color: #8b6060;
    font-size: 12px;
    margin-left: 4px;
    margin-right: 12px;
}

.ticker-price {
    color: #ffd700;
    font-weight: bold;
}

.ticker-price .ticker-bullet {
    color: #ffa500;
}

.ticker-timer {
    background: #111;
    color: #8b0000;
    font-weight: bold;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 12px;
    flex-shrink: 0;
    min-width: 36px;
    justify-content: center;
    border-left: 1px solid #333;
}

/* ── HEADER ──────────────────────────────────────────────── */

header {
    text-align: center;
    padding: 8px 20px 6px;
    border-bottom: 1px solid #222;
    background: #0a0a08;
}

.header-row {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.site-title {
    font-family: "Oswald", Impact, sans-serif;
    font-size: 64px;
    font-weight: 700;
    color: #e8e0d0;
    letter-spacing: 12px;
    text-transform: uppercase;
    line-height: 1;
}

.subtitle {
    margin-top: 2px;
}

.subtitle-link {
    font-family: "Special Elite", "Courier New", monospace;
    font-size: 16px;
    color: #8b0000;
    letter-spacing: 5px;
    text-decoration: none;
    border-bottom: 1px dotted #8b0000;
    transition: color 0.2s;
}

.subtitle-link:hover {
    color: #cc0000;
}

.update-time {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: #444;
    margin-top: 4px;
    letter-spacing: 1px;
}

#breaking-timer, #top-stories-timer {
    color: #666;
    font-weight: bold;
}

/* ── CATEGORY NAV ────────────────────────────────────────── */

#category-nav {
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 6px 10px;
    background: #0d0d0b;
    border-bottom: 2px solid #8b0000;
    flex-wrap: wrap;
}

.cat-link {
    font-family: "Oswald", sans-serif;
    color: #888;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 4px 14px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.cat-link:hover,
.cat-link.active {
    color: #e8e0d0;
    border-color: #8b0000;
    background: #1a0a0a;
}

.war-stats-link {
    color: #ffc107;
    font-weight: 700;
}

.war-stats-link:hover {
    color: #ffd54f;
    border-color: #ffc107;
    background: #1a1500;
}

.ai-analysis-link {
    color: #00e5ff;
    font-weight: 700;
    animation: ai-pulse 2s ease-in-out infinite;
    border: 1px solid #00e5ff;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

.ai-analysis-link:hover {
    color: #fff;
    border-color: #00e5ff;
    background: #002a33;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.8);
}

@keyframes ai-pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 6px rgba(0, 229, 255, 0.5); }
    50% { opacity: 0.6; text-shadow: 0 0 2px rgba(0, 229, 255, 0.2); }
}

.breaking-link {
    color: #cc4444;
}

.breaking-link:hover,
.breaking-link.active {
    color: #ff4444;
    border-color: #cc0000;
    background: #1a0a0a;
}

/* ── LIVE BAR ────────────────────────────────────────────── */

#live-bar {
    display: flex;
    align-items: center;
    background: #0d1a00;
    border-bottom: 1px solid #1a3300;
    padding: 0;
    min-height: 28px;
    font-size: 12px;
}

.live-label {
    background: #333;
    color: #999;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 0 12px;
    height: 28px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: background 0.3s, color 0.3s;
}

.live-label.on-air {
    background: #cc0000;
    color: #fff;
    animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { background: #cc0000; }
    50% { background: #880000; }
}

#live-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
    position: relative;
    font-family: "IBM Plex Mono", monospace;
}

#live-track {
    display: flex;
    white-space: nowrap;
    animation: live-scroll var(--live-duration, 15s) linear infinite;
    gap: 80px;
}

#live-track:hover {
    animation-play-state: paused;
}

#live-track.no-scroll {
    animation: none;
    padding-left: 16px;
}

@keyframes live-scroll {
    0%   { transform: translateX(var(--live-scroll-start, 0px)); }
    100% { transform: translateX(var(--live-scroll-dist, -50%)); }
}

/* Desktop: hide duplicate text — full-width sweep, not seamless loop */
@media (min-width: 769px) {
    #live-text-dup { display: none; }
}

#live-text {
    display: inline;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #668866;
}

#live-content a {
    color: #88cc88;
    text-decoration: none;
    font-weight: bold;
}

#live-content a:hover {
    color: #aaffaa;
}

.live-bullet {
    color: #006600;
    font-weight: bold;
    margin: 0 8px;
}

.live-time {
    color: #556655;
    font-size: 11px;
    font-weight: normal;
}

/* ── TOP ROW (Last 24h | Breaking | Broadcasts) ─────────── */

#top-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 1400px;
    margin: 0 auto;
    border-bottom: 3px double #222;
}

#top-row > .top-col {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 16px;
    border-right: 1px solid #1a1a18;
}

.top-col:last-child {
    border-right: none;
}

#top-col-center {
    background: #150000;
    border-left: 1px solid #330000;
    border-right: 1px solid #330000;
}

/* ── BREAKING NEWS ───────────────────────────────────────── */

.breaking-header {
    font-family: "Oswald", sans-serif;
    font-size: 22px;
    color: #cc0000;
    letter-spacing: 4px;
    margin-bottom: 10px;
    animation: flash-break 1.5s ease-in-out infinite;
}

@keyframes flash-break {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.breaking-update-note {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: #663333;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.breaking-update-note span {
    color: #994444;
    font-weight: bold;
}

/* ── SECTION HEADERS ─────────────────────────────────────── */

.section-header {
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    color: #8b0000;
    letter-spacing: 3px;
    padding: 10px 20px 6px;
    max-width: 1400px;
    margin: 0 auto;
    border-bottom: 1px solid #222;
}

/* ── 3-COLUMN LAYOUT ─────────────────────────────────────── */

#main-content {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
}

.column {
    flex: 1;
    padding: 14px 16px;
    border-right: 1px solid #1a1a18;
}

.column:last-child {
    border-right: none;
}

#col-center {
    flex: 1.5;
    border-left: 1px solid #1a1a18;
}

.col-header {
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    color: #8b0000;
    letter-spacing: 3px;
    border-bottom: 1px solid #2a2a28;
    padding-bottom: 4px;
    margin-bottom: 10px;
    margin-top: 20px;
    font-weight: 600;
}

.col-header:first-child {
    margin-top: 0;
}

/* ── LINK LISTS ──────────────────────────────────────────── */

.link-list {
    list-style: none;
}

.link-item {
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px dotted #1a1a18;
}

.link-item:last-child {
    border-bottom: none;
}

.link-item a {
    font-family: "Special Elite", "Courier New", monospace;
    color: #d4cfc4;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.35;
    display: block;
    transition: color 0.15s;
}

.link-item a:hover {
    color: #cc0000;
}

.link-item a:visited {
    color: #807a6e;
}

.link-item.breaking a {
    color: #ff4444;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
}

.editorial-text {
    font-family: "Special Elite", "Courier New", monospace;
    color: #d4cfc4;
    font-size: 15px;
    line-height: 1.35;
    display: block;
    cursor: default;
}

/* Override: inside the FLASH ticker and the LIVE bar, editorial items must
   stay inline so they don't break the horizontal scroll into multiple rows.
   Latent bug from Apr 5 editorial-system rollout — fixed 2026-04-07. */
#ticker-track .editorial-text,
#live-track .editorial-text {
    display: inline;
}

/* Editorial items are now clickable links (to /opinions). Suppress the
   default anchor styling that would otherwise make them blue/underlined,
   while preserving the typewriter look. The bold red "MY LITTLE OPINION:"
   heading is handled separately by .editorial-title. */
a.editorial-text {
    color: #d4cfc4;
    text-decoration: none;
    cursor: pointer;
}
a.editorial-text:hover {
    color: #ffffff;
}

.link-source {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: #555;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.link-time {
    font-size: 11px;
    color: #444;
}

.no-articles {
    color: #333;
    font-style: italic;
    font-size: 13px;
    padding: 6px 0;
    font-family: "IBM Plex Mono", monospace;
}

/* ── DEEP CUTS SECTION ───────────────────────────────────── */

#deep-cuts-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 16px;
    border-top: 3px double #222;
}

.deep-cuts-header {
    color: #b8860b !important;
    font-size: 16px !important;
    letter-spacing: 3px !important;
}

.deep-cuts-sub {
    color: #666;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: lowercase;
    font-style: italic;
    margin-left: 8px;
}

/* ── WAR BY THE NUMBERS ─────────────────────────────────── */

#war-stats-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 16px;
    border-top: 3px double #222;
}

.war-stats-header {
    color: #cc3333 !important;
    font-size: 16px !important;
    letter-spacing: 3px !important;
}

.war-stats-sub {
    color: #666;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: lowercase;
    font-style: italic;
    margin-left: 8px;
}

.war-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.stat-card {
    display: block;
    background: #111;
    border: 1px solid #222;
    padding: 12px 14px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.stat-card:hover {
    border-color: #444;
    background: #1a1a1a;
}

.stat-source {
    color: #cc3333;
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.stat-label {
    color: #ccc;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 4px;
}

.stat-note {
    color: #666;
    font-size: 11px;
    line-height: 1.4;
}

.stat-bias {
    color: #666;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-left: 6px;
}

.stat-numbers {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-figure {
    color: #aaa;
    font-size: 12px;
    font-family: "IBM Plex Mono", monospace;
    line-height: 1.5;
}

.stat-card, .stat-card:visited, .stat-card:hover .stat-figure {
    text-decoration: none;
}

.stat-card .stat-figure {
    color: #aaa;
}

body.readable .stat-card .stat-figure {
    color: #000 !important;
}

.stat-updated {
    color: #666;
    font-size: 10px;
    font-style: italic;
    margin-top: 4px;
    text-align: right;
}

@media (max-width: 768px) {
    .war-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ── BOTTOM SECTIONS ─────────────────────────────────────── */

#bottom-sections {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    border-top: 3px double #222;
}

.bottom-col {
    flex: 1;
    padding: 14px 16px;
    border-right: 1px solid #1a1a18;
}

.bottom-col:last-child {
    border-right: none;
}

/* ── HAPPENING NOW ───────────────────────────────────────── */

.happening-now-header {
    color: #cc4400 !important;
    font-size: 18px !important;
    letter-spacing: 4px !important;
    animation: happening-pulse 3s ease-in-out infinite;
}

@keyframes happening-pulse {
    0%, 100% { color: #cc4400; }
    50% { color: #ff6600; }
}

/* ── AGITPROP (in bottom section) ────────────────────────── */

.agitprop-col {
    background: #0d0d00;
}

.agitprop-header {
    color: #b8860b !important;
}

.agitprop-warning {
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    color: #ff3300;
    letter-spacing: 3px;
    font-weight: 700;
    text-transform: uppercase;
}

.agitprop-timer {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    color: #666600;
    letter-spacing: 1px;
    font-weight: normal;
    margin-left: 8px;
}

.agitprop-col .link-item a {
    color: #c4b878;
}

.agitprop-col .link-item a:hover {
    color: #ffd700;
}

.agitprop-col .link-item a:visited {
    color: #8a8040;
}

.agitprop-col .link-source {
    color: #666600;
}

.podcast-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px dotted #1a1a18;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
}

.podcast-item:last-child {
    border-bottom: none;
}

.podcast-name {
    font-family: "Special Elite", monospace;
    color: #d4cfc4;
    font-size: 15px;
    min-width: 200px;
}

.podcast-status {
    color: #555;
    font-size: 12px;
}

.podcast-live {
    color: #00cc00;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.podcast-live a {
    color: #00cc00;
    text-decoration: none;
}

.podcast-live a:hover {
    color: #00ff00;
}

.podcast-episode a {
    color: #888;
    text-decoration: none;
    font-size: 13px;
}

.podcast-episode a:hover {
    color: #d4cfc4;
}

/* ── CUSTOM SECTIONS ─────────────────────────────────────── */

#custom-sections-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

#custom-sections {
    display: flex;
    border-top: 2px solid #1a1a18;
}

.custom-section-col {
    flex: 1;
    padding: 14px 16px;
    border-right: 1px solid #1a1a18;
}

.custom-section-col:last-child {
    border-right: none;
}

/* ── FAVORITE LINKS ──────────────────────────────────────── */

#favorite-links {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 20px;
    border-top: 3px double #222;
    text-align: center;
}

.fav-links-row {
    margin-bottom: 8px;
    line-height: 2;
}

.fav-links-row a {
    font-family: "Oswald", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-decoration: none;
    letter-spacing: 2px;
    margin: 0 10px;
    transition: color 0.2s;
}

.fav-links-row a:hover {
    color: #d4cfc4;
}

.fav-podcasts {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted #222;
}

.fav-label {
    font-family: "Oswald", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #8b0000;
    letter-spacing: 2px;
    margin-right: 6px;
}

.fav-podcasts a {
    color: #888;
}

.fav-podcasts a:hover {
    color: #cc4400;
}

/* ── LAST 24 HOURS ───────────────────────────────────────── */

.last24h-header {
    color: #cc6600 !important;
    letter-spacing: 4px !important;
    font-size: 18px !important;
}

#last24h-links .link-item a {
    font-size: 16px;
    font-weight: bold;
}

#last24h-links .link-item.graded {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
}

#last24h-links .link-item.graded .link-source {
    width: 100%;
    padding-left: 38px;
}

.grade {
    display: inline-block;
    font-weight: bold;
    font-size: 10px;
    padding: 1px 4px;
    margin-right: 6px;
    border: 1px solid;
    font-family: 'Courier New', monospace;
    letter-spacing: 0;
    flex-shrink: 0;
    line-height: 1.4;
}

.grade-a-plus { color: #ff0000; border-color: #ff0000; }
.grade-a      { color: #ff3300; border-color: #ff3300; }
.grade-b-plus { color: #cc6600; border-color: #cc6600; }
.grade-b      { color: #999900; border-color: #999900; }
.grade-c      { color: #666666; border-color: #666666; }

/* ── ANONYMOUS CONTACT ───────────────────────────────────── */

#contact-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 20px;
    border-top: 1px solid #1a1a18;
}

#contact-section .section-header {
    padding: 0 0 8px;
    max-width: none;
}

.contact-note {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: #555;
    margin-bottom: 10px;
    font-style: italic;
}

#tip-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

#tip-message {
    flex: 1;
    background: #111;
    border: 1px solid #333;
    color: #d4cfc4;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    padding: 8px;
    resize: vertical;
    min-height: 50px;
}

#tip-message:focus {
    outline: none;
    border-color: #8b0000;
}

.tip-submit {
    font-family: "Oswald", sans-serif;
    background: #1a0000;
    color: #8b0000;
    border: 1px solid #8b0000;
    padding: 8px 16px;
    font-size: 13px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tip-submit:hover {
    background: #8b0000;
    color: #fff;
}

.tip-status {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: #888;
    margin-top: 6px;
    min-height: 16px;
}

.footer-stats {
    color: #8b7500;
    letter-spacing: 3px;
    font-size: 14px;
    margin-top: 8px;
}
.footer-policy {
    color: #555;
    letter-spacing: 2px;
    margin-top: 6px;
}

/* ── FOOTER ──────────────────────────────────────────────── */

footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #1a1a18;
    color: #333;
    font-size: 12px;
    font-family: "IBM Plex Mono", monospace;
    letter-spacing: 0.5px;
}

/* ── FIELD LIBRARY ───────────────────────────────────────── */

#field-library {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 20px;
    border-top: 1px solid #1a1a18;
}

.library-header {
    color: #8b6600 !important;
}

.library-subtitle {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: #555;
    margin-bottom: 14px;
    font-style: italic;
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.library-item {
    padding: 10px;
    border: 1px solid #1a1a18;
    background: #0d0d0b;
}

.library-category {
    font-family: "Oswald", sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #8b6600;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.library-title {
    font-family: "Special Elite", "Courier New", monospace;
    font-size: 14px;
    color: #d4cfc4;
    text-decoration: none;
    display: block;
    line-height: 1.3;
    transition: color 0.15s;
}

.library-title:hover {
    color: #cc6600;
}

.library-author {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: #555;
    margin-top: 3px;
}

.library-pick {
    font-family: "Oswald", sans-serif;
    font-size: 9px;
    color: #ffd700;
    letter-spacing: 1px;
    margin-left: 6px;
}

/* ── SUPPORT THE WIRE ───────────────────────────────────── */

#support-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.support-border {
    border-top: 3px double #333;
    margin: 0 auto;
    max-width: 600px;
}

.support-header {
    font-family: "Oswald", sans-serif;
    font-size: 24px;
    color: #8b0000;
    letter-spacing: 6px;
    padding: 12px 0;
}

.support-body {
    padding: 14px 0;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    color: #888;
    line-height: 1.6;
}

.support-body p {
    margin-bottom: 2px;
}

.support-costs {
    margin-top: 10px !important;
    color: #aaa;
}

.support-cta {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 28px;
    font-family: "Oswald", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffd700;
    background: #1a0000;
    border: 2px solid #8b0000;
    text-decoration: none;
    transition: all 0.2s;
}

.support-cta:hover {
    background: #8b0000;
    color: #fff;
}

.support-onetime {
    margin-top: 10px !important;
    font-size: 12px;
    color: #555;
}

.support-digest {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #1a1a18;
    background: #0d0d0b;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.digest-header {
    font-family: "Oswald", sans-serif;
    font-size: 16px;
    color: #cc6600;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.subscribe-row {
    display: flex;
    gap: 8px;
}

#subscribe-email {
    flex: 1;
    background: #111;
    border: 1px solid #333;
    color: #d4cfc4;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    padding: 8px 10px;
}

#subscribe-email:focus {
    outline: none;
    border-color: #8b0000;
}

.subscribe-btn {
    font-family: "Oswald", sans-serif;
    background: #1a0000;
    color: #cc6600;
    border: 1px solid #cc6600;
    padding: 8px 18px;
    font-size: 13px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.subscribe-btn:hover {
    background: #cc6600;
    color: #fff;
}

.subscribe-status {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: #888;
    margin-top: 6px;
    min-height: 16px;
}

.digest-note {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: #555;
    margin-top: 6px;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 900px) {
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    .site-title {
        font-size: 42px;
        letter-spacing: 6px;
    }

    .subtitle-link {
        font-size: 13px;
        letter-spacing: 2px;
    }

    #main-content {
        flex-direction: column;
    }

    .column {
        border-right: none;
        border-bottom: 1px solid #1a1a18;
        padding: 14px 12px;
    }

    #col-center {
        border-left: none;
        order: -1;
    }

    #top-row {
        flex-direction: column;
    }

    .top-col {
        border-right: none;
        border-bottom: 1px solid #1a1a18;
        padding: 14px 12px;
    }

    #bottom-sections {
        flex-direction: column;
    }

    .bottom-col:first-child {
        border-right: none;
        border-bottom: 1px solid #1a1a18;
    }

    .podcast-item {
        flex-direction: column;
        gap: 2px;
    }

    .podcast-name {
        min-width: auto;
    }

    .library-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .subscribe-row {
        flex-direction: column;
    }

    /* Better touch targets on mobile */
    .link-item {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .link-item a {
        font-size: 16px;
        line-height: 1.45;
        padding: 4px 0;
    }

    .link-source {
        font-size: 12px;
        margin-top: 4px;
    }

    /* Support section mobile */
    .support-cta {
        font-size: 13px;
        padding: 12px 20px;
        letter-spacing: 1px;
    }

    .support-body {
        font-size: 14px;
        padding: 10px 8px;
    }

    .support-header {
        font-size: 20px;
        letter-spacing: 4px;
    }

    .digest-header {
        font-size: 14px;
        letter-spacing: 2px;
    }

    /* Favorite links mobile */
    .fav-links-row a {
        font-size: 12px;
        margin: 0 6px;
        letter-spacing: 1px;
        padding: 4px 0;
        display: inline-block;
    }

    #favorite-links {
        padding: 12px 10px;
    }

    /* Field library mobile */
    #field-library {
        padding: 12px 10px;
    }

    /* Contact section mobile */
    #tip-form {
        flex-direction: column;
    }

    #tip-message {
        font-size: 16px;
        min-height: 60px;
    }

    .tip-submit {
        padding: 12px 16px;
        font-size: 14px;
    }

    /* Category nav mobile */
    .cat-link {
        font-size: 12px;
        padding: 6px 10px;
        letter-spacing: 1px;
    }

    #category-nav {
        gap: 2px;
        padding: 6px 6px;
    }

    /* Update time mobile */
    .update-time {
        font-size: 11px;
    }

    /* Ticker mobile */
    #ticker-track { gap: 30px; }
    #live-track { gap: 40px; }

    .ticker-label {
        padding: 0 10px;
        font-size: 13px;
        letter-spacing: 2px;
    }

    /* Subscribe form mobile */
    #subscribe-email {
        font-size: 16px;
        padding: 10px;
    }

    .subscribe-btn {
        padding: 12px 18px;
        font-size: 14px;
    }

    /* Custom sections mobile */
    #custom-sections {
        flex-direction: column;
    }

    .custom-section-col {
        border-right: none;
        border-bottom: 1px solid #1a1a18;
    }

    .custom-section-col:last-child {
        border-bottom: none;
    }
}

@media (max-width: 480px) {
    .site-title {
        font-size: 26px;
        letter-spacing: 3px;
    }

    .subtitle-link {
        font-size: 11px;
        letter-spacing: 1px;
    }

    header {
        padding: 6px 10px 4px;
    }

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

    .support-cta {
        font-size: 13px;
        padding: 14px 16px;
        letter-spacing: 1px;
        display: block;
    }

    .support-body {
        font-size: 13px;
    }

    .support-digest {
        padding: 12px 10px;
    }

    .cat-link {
        font-size: 11px;
        padding: 5px 7px;
    }

    .col-header {
        font-size: 15px;
        letter-spacing: 2px;
    }

    .link-item a {
        font-size: 15px;
    }

    .fav-links-row a {
        font-size: 11px;
        margin: 0 4px;
    }

    .fav-podcasts a {
        display: inline-block;
        margin-bottom: 4px;
    }

    .library-pick {
        display: block;
        margin-left: 0;
        margin-top: 2px;
    }

    /* Breaking news header mobile */
    .breaking-header {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .last24h-header {
        font-size: 15px !important;
    }

    /* Grade badges mobile */
    .grade {
        font-size: 9px;
        padding: 1px 3px;
    }

    #last24h-links .link-item a {
        font-size: 15px;
    }
}

/* ── READABLE MODE TOGGLE BUTTON ─────────────────────────── */

.readable-btn {
    font-family: "Oswald", sans-serif;
    color: #888;
    background: none;
    border: 1px solid #444;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    letter-spacing: 1px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.15s;
    position: absolute;
    right: 0;
    white-space: nowrap;
}

.readable-btn:hover {
    color: #e8e0d0;
    border-color: #8b0000;
    background: #1a0a0a;
}

body.readable .readable-btn {
    background: #333;
    color: #fff;
    border-color: #333;
}

@media (max-width: 768px) {
    .readable-btn {
        font-size: 10px;
        padding: 4px 8px;
        position: static;
        margin-top: 4px;
    }

    .header-row {
        flex-direction: column;
    }
}

/* ── READABLE MODE — Drudge Report style ─────────────────── */

body.readable {
    background: #ffffff;
    color: #000000;
}

/* Force ALL text black in readable mode — no gray anywhere.
   Exception: elements with dark backgrounds keep white text. */
body.readable,
body.readable * {
    color: #000;
}
/* White text on dark backgrounds */
body.readable .readable-btn,
body.readable .ticker-label,
body.readable .live-label,
body.readable .ticker-label *,
body.readable .live-label * {
    color: #fff;
}

/* Then restore specific colors for links and accents */
body.readable a { color: #0000cc; }
body.readable a:visited { color: #551a8b; }
body.readable a:hover { color: #cc0000; }
body.readable .breaking-link,
body.readable .link-item.breaking a,
body.readable .podcast-live a,
body.readable .agitprop-header,
body.readable .subtitle,
body.readable .subtitle-link,
body.readable .ticker-bullet,
body.readable .live-bullet { color: #cc0000; }
body.readable .ticker-label,
body.readable .live-label { color: #fff; }
body.readable .readable-btn { color: #fff; }

body.readable #site-header {
    background: #ffffff;
}

body.readable #ticker-bar {
    background: #f0f0f0;
    color: #111;
    border-bottom: 2px solid #cc0000;
}

body.readable .ticker-label {
    background: #cc0000;
    color: #fff;
}

body.readable #ticker-text,
body.readable #ticker-text-dup,
body.readable .ticker-item a {
    color: #111;
}

body.readable .ticker-source {
    color: #111;
}

body.readable .ticker-bullet {
    color: #cc0000;
}

body.readable .ticker-price {
    color: #b8860b;
}

body.readable .ticker-price .ticker-bullet {
    color: #d4a017;
}

body.readable header {
    border-bottom-color: #cc0000;
    background: #fff;
}

body.readable .site-title {
    color: #000;
}

body.readable .subtitle,
body.readable .subtitle-link {
    color: #cc0000;
}

body.readable .update-time {
    color: #111;
}

body.readable #category-nav {
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
}

body.readable .cat-link {
    color: #111;
    border-color: transparent;
}

body.readable .cat-link:hover,
body.readable .cat-link.active {
    color: #000;
    border-color: #cc0000;
    background: #e8e8e8;
}

body.readable .breaking-link {
    color: #cc0000;
}

body.readable #live-bar {
    background: #f8f8f8;
    border-bottom-color: #ddd;
}

body.readable .live-label {
    background: #cc0000;
    color: #fff;
}

body.readable #live-text,
body.readable #live-text-dup,
body.readable #live-text a,
body.readable #live-text-dup a {
    color: #000;
}

body.readable .live-time {
    color: #111;
}

body.readable .live-bullet {
    color: #cc0000;
}

body.readable .col-header {
    color: #000;
    border-bottom-color: #cc0000;
}

body.readable .link-item a {
    color: #0000cc;
}

body.readable .link-item a:visited {
    color: #551a8b;
}

body.readable .link-item a:hover {
    color: #cc0000;
}

body.readable .link-source {
    color: #111;
}

body.readable .link-time {
    color: #111;
}

body.readable .link-item.breaking a {
    color: #cc0000;
}

body.readable .no-articles {
    color: #333;
}

body.readable .podcast-item {
    border-bottom-color: #eee;
}

body.readable .podcast-name {
    color: #000;
}

body.readable .podcast-episode a {
    color: #0000cc;
}

body.readable .podcast-live a {
    color: #cc0000;
}

body.readable .podcast-status {
    color: #111;
}

body.readable #top-row,
body.readable #main-columns,
body.readable #bottom-sections,
body.readable #war-stats-section {
    border-color: #ddd;
}

body.readable .top-col,
body.readable .main-col,
body.readable .bottom-col {
    border-color: #ddd;
}

body.readable .stat-card {
    background: #f5f5f5;
    border-color: #ddd;
    color: #000;
}

body.readable .stat-card:hover {
    background: #eee;
    border-color: #cc0000;
}

body.readable .stat-label {
    color: #000;
}

body.readable .stat-source {
    color: #111;
}

body.readable .stat-figure {
    color: #000;
}

body.readable .stat-bias {
    color: #111;
}

body.readable .fav-link {
    color: #0000cc;
}

body.readable .fav-link:hover {
    color: #cc0000;
}

body.readable footer {
    background: #f5f5f5;
    color: #111;
    border-top-color: #ddd;
}

body.readable footer a {
    color: #0000cc;
}

body.readable .agitprop-col {
    background: #fff8f0;
}

body.readable .agitprop-col .link-item a {
    color: #0000cc;
}

body.readable .agitprop-col .link-source {
    color: #000;
}

body.readable .agitprop-col .no-articles {
    color: #000;
}

body.readable .deep-cuts-header {
    color: #000;
}

body.readable .ticker-timer {
    color: #cc0000;
    background: #f0f0f0;
}

/* Subscribe / Daily Briefing box */
body.readable .support-digest {
    background: #f5f5f5;
    border-color: #ddd;
}
body.readable .digest-header {
    color: #8b6600;
}
body.readable .digest-note {
    color: #333;
}
body.readable #subscribe-email {
    background: #fff;
    border-color: #ccc;
    color: #000;
}
body.readable .subscribe-btn {
    background: #cc0000;
    color: #fff;
    border-color: #cc0000;
}
body.readable .subscribe-status {
    color: #333;
}

/* Ko-fi support button */
body.readable .support-cta {
    background: #cc0000;
    color: #fff;
    border-color: #cc0000;
}

/* Field Library cards — dark bg needs light text */
body.readable .library-item {
    background: #f5f5f5;
    border-color: #ddd;
}
body.readable .library-category {
    color: #8b6600;
}
body.readable .library-title {
    color: #0000cc;
}
body.readable .library-author {
    color: #333;
}
body.readable .library-pick {
    color: #8b6600;
}

/* Tip form */
body.readable #tip-message {
    background: #fff;
    border-color: #ccc;
    color: #000;
}
body.readable .tip-submit {
    background: #cc0000;
    color: #fff;
    border-color: #cc0000;
}