/* ===== EXACT HOME PAGE CSS (base) ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
  font-family: 'Playfair Fallback';
  src: local('Georgia'), local('Times New Roman'), local('serif');
  size-adjust: 112%;
  ascent-override: 97%;
  descent-override: 27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica'), local('sans-serif');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}


:root {
  --bg: #FAFAF7;
  --card-1: #FFFFFF;
  --card-2: #FEF9F3;
  --card-3: #F5FAFF;
  --card-4: #F7FCF7;
  --card-5: #FFF9F2;
  --card-6: #F9F3FA;
  --card-7: #F3FBFA;
  --card-8: #FFF4F4;
  --card-9: #F8F8F4;
  --card-10: #F4F5FF;
  --text-primary: #1A1A2E;
  --text-secondary: #4A4A5A;
  --text-muted: #7A7A8A;
  --accent: #C41E3A;
  --border: #E5E5E0;
  --shadow: rgba(0, 0, 0, 0.06);
}

html, body { height: 100%; }
body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
}

.app { min-height: 100vh; display: flex; flex-direction: column; }
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.nav-container { width: min(1320px, calc(100% - 32px)); }

.top-ad { background: #f2f2f2; border-bottom: 1px solid var(--border); padding: 2px 0; min-height: 58px; }
.ad-box {
  background: #f2f2f2;
  border: 1px dashed #bbb;
  color: #666;
  text-align: center;
  font-size: 12px;
  padding: 12px;
  border-radius: 6px;
  margin: 20px 0;
  position: static;
  top: 20px;
}
.top-ad .ad-box { min-height: 38px; display: flex; align-items: center; justify-content: center; }
.ticker-wrap { background: var(--accent); color: #fff; padding: 8px 0; font-size: 13px; min-height: 38px; gap: 16px;}
.ticker-label { font-weight: 700; letter-spacing: 1px; margin-right: 12px; }

.masthead { text-align: center; padding: 22px 0 16px; background: #f2f2f2; border-bottom: 1px solid var(--border); min-height: 128px; }
.masthead h1 { font-family: 'Playfair Display', 'Playfair Fallback', serif; font-size: clamp(34px, 5vw, 58px); line-height: 1.1; font-weight: 700; }
.brand-link { color: var(--text-primary); text-decoration: none; transition: color 0.2s ease; }
.brand-link:hover { color: var(--accent); }
.masthead p { color: var(--text-muted); min-height: 21px; }


/* Header custom lines */
#tagline {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  margin: 8px 0 10px 0 !important;
  padding: 0 !important;
  font-weight: 600;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.6px !important;
  text-transform: none !important;
  color: var(--text-muted);
}

#usTime {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  color: var(--text-muted);
}

 /* Nav bar */
 .nav-bar { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 2px solid var(--border); }
 .nav-inner { width: min(1320px, calc(100% - 32px)); margin: 0 auto; min-height: 56px; display: flex; align-items: center; gap: 18px; }
.nav-cats {
  flex: 1;
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 8px 0;
  justify-content: center;
}
 .nav-cats::-webkit-scrollbar { display: none; }
 .nav-cat {
   border: 1px solid var(--border);
   background: #f6f6f4;
   color: var(--text-secondary);
   white-space: nowrap;
   padding: 8px 12px;
   border-radius: 6px;
   font-size: 15px;
   font-weight: 600;
   text-decoration: none;
 }
 .nav-cat.active { background: var(--accent); color: #fff; border-color: var(--accent); }

 /* Article wrapper */
 .article-wrapper { width: min(1120px, calc(100% - 32px)); margin: 18px auto 40px; }

 /* News meta */
 .news-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px; }
 .news-meta .cat { color: var(--accent); font-weight: 700; }

 /* News title */
 .news-title { font-family: 'Playfair Display', 'Playfair Fallback', serif; font-size: clamp(24px, 2.6vw, 26px); line-height: 1.32; margin: 8px 0; }

 /* News summary */
 .news-summary { color: var(--text-secondary); font-size: 15px; line-height: 1.75; }

 /* Article card wrapper */
 .article-card-wrapper {
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 20px 22px;
   box-shadow: 0 2px 10px var(--shadow);
   background: #fff;
 }

 /* Article body content */
 .article-content p {
   color: var(--text-secondary);
   font-size: 15px;
   line-height: 1.75;
   margin-top: 10px;
 }

 .article-content h2 {
   font-family: 'Playfair Display', 'Playfair Fallback', serif;
   font-size: 22px;
   font-weight: 700;
   color: var(--text-primary);
   margin: 28px 0 12px;
   padding-bottom: 8px;
   border-bottom: 2px solid var(--border);
 }

 .article-content h3 {
   font-size: 18px;
   font-weight: 700;
   color: var(--text-primary);
   margin: 22px 0 10px;
 }

 .article-content ul,
 .article-content ol {
   color: var(--text-secondary);
   font-size: 15px;
   line-height: 1.75;
   margin: 10px 0 10px 22px;
 }

 .article-content li {
   margin-bottom: 6px;
 }

 .article-content blockquote {
   border-left: 4px solid var(--accent);
   background: var(--card-8);
   padding: 16px 20px;
   margin: 20px 0;
   border-radius: 0 8px 8px 0;
   font-style: italic;
   color: var(--text-secondary);
   font-size: 15px;
   line-height: 1.75;
 }

 .article-content strong {
   color: var(--text-primary);
   font-weight: 600;
 }

 /* Key points box */
 .key-points {
   background: var(--card-8);
   border: 1px solid #fecaca;
   border-radius: 10px;
   padding: 20px 22px;
   margin: 22px 0;
 }
 .key-points h3 {
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: var(--accent);
   margin: 0 0 12px;
   border-bottom: none;
   padding-bottom: 0;
 }
 .key-points ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 .key-points li {
   position: relative;
   padding-left: 20px;
   margin-bottom: 8px;
   font-size: 14px;
   line-height: 1.65;
   color: var(--text-secondary);
 }
 .key-points li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 7px;
   width: 7px;
   height: 7px;
   background: var(--accent);
   border-radius: 50%;
 }

 /* Week badge */
 .week-badge {
   display: inline-block;
   margin-top: 14px;
   background: var(--card-8);
   color: var(--accent);
   font-size: 12px;
   font-weight: 600;
   padding: 5px 14px;
   border-radius: 20px;
   letter-spacing: 0.4px;
 }

.department {
   display: inline-block;
   margin-top: 14px;
   background:var(--accent);
   color: var(--card-8);
   font-size: 12px;
   font-weight: 800;
   padding: 5px 14px;
   border-radius: 20px;
   letter-spacing: 0.4px;
}

 .Published_Date {
   display: inline-block;
   margin-top: 14px;
   background: #f1f1f1;
   color: #666;
   font-size: 12px;
   font-weight: 600;
   padding: 5px 14px;
   border-radius: 20px;
   letter-spacing: 0.4px;
 }

 /* Official source section */
 .official-source-box {
   margin-top: 24px;
   border: 1px solid var(--border);
   border-left: 4px solid var(--accent);
   border-radius: 0 10px 10px 0;
   padding: 18px 22px;
   background: var(--card-9);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
 }
 .official-source-box h2 {
   font-family: 'Inter', 'Inter Fallback', sans-serif;
   font-size: 15px;
   font-weight: 700;
   color: var(--text-primary);
   margin: 0;
   border-bottom: none;
   padding-bottom: 0;
 }
 .official-link-btn {
   display: inline-block;
   background: var(--accent);
   color: #fff;
   text-decoration: none;
   border-radius: 6px;
   font-size: 12px;
   font-weight: 700;
   padding: 9px 16px;
   text-transform: uppercase;
   transition: background 0.2s;
 }
 .official-link-btn:hover {
   background: #a01830;
 }

.related-box {
  background: #f9f7f4;
  border: 1px solid #e0ddd8;
  border-radius: 8px;
  padding: 10px 20px 12px;
  margin: 24px 0;
}

.related-box h2 {
  margin: 0 0 10px;
  padding-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #222222;
  border-bottom: 1px solid #e0ddd8;
  line-height: 1.3;
}

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

.related-box li {
  margin: 0 0 6px;
}

.related-box li:last-child {
  margin-bottom: 0;
}

.related-box a,
.related-box a:hover,
.related-box a:focus,
.related-box a:active,
.related-box a:visited {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #222222;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 0.2s ease;
}

.related-box a:hover,
.related-box a:focus {
  color: #c0392b;
  background: transparent !important;
}

.related-box a::before {
  content: "›";
  color: #c0392b;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}




 /* Share bar */
 .share-bar {
   margin-top: 24px;
   padding: 14px 0;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   gap: 10px;
 }
 .share-label {
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--text-muted);
   margin-right: 4px;
 }
 .share-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 1px solid var(--border);
   background: #fff;
   color: var(--text-muted);
   transition: all 0.2s;
   cursor: pointer;
   text-decoration: none;
 }
 .share-btn:hover {
   border-color: var(--accent);
   color: var(--accent);
 }
 .share-btn svg {
   width: 15px;
   height: 15px;
 }

 /* Breadcrumb */
 .breadcrumb {
   font-size: 13px;
   color: var(--text-muted);
   margin-bottom: 14px;
 }
 .breadcrumb a {
   color: var(--text-muted);
   text-decoration: none;
 }
 .breadcrumb a:hover {
   color: var(--accent);
 }
 .breadcrumb .sep {
   margin: 0 6px;
   color: var(--border);
 }
 .breadcrumb .current {
   color: var(--text-secondary);
   font-weight: 500;
 }

 /* Back link */
 .back-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 22px;
   font-size: 13px;
   font-weight: 700;
   color: var(--accent);
   text-decoration: none;
   border: 1px solid var(--accent);
   border-radius: 6px;
   padding: 9px 16px;
   text-transform: uppercase;
   transition: all 0.2s;
 }
 .back-link:hover {
   background: var(--accent);
   color: #fff;
 }
 .back-link svg {
   width: 14px;
   height: 14px;
 }

 /* Reading progress */
 #reading-progress {
   position: fixed;
   top: 0;
   left: 0;
   width: 0%;
   height: 3px;
   background: var(--accent);
   z-index: 9999;
   transition: width 0.1s linear;
 }
 .related-box li a {
   background: var(--card-3);
 }
 .related-box li a {
   padding: 10px 14px;
   border-radius: 6px;
   margin-bottom: 4px;
   border-bottom: none;
 }
 .related-box li:last-child a {
   margin-bottom: 0;
 }

 /* Same week archive alternating colors */
 #relatedWeekNews a:nth-child(odd) {
   background: var(--card-1);
 }
 #relatedWeekNews a:nth-child(even) {
   background: var(--card-6);
 }
 #relatedWeekNews a {
   padding: 10px 14px;
   border-radius: 6px;
   margin-bottom: 4px;
   border-bottom: none;
 }
 #relatedWeekNews a:last-child {
   margin-bottom: 0;
 }


 /* Footer */
 .site-footer { margin-top: auto; background: #000; color: rgba(255,255,255,.75); padding: 30px 0 16px; }
 .footer-top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.16); }
 .footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
 .footer-links a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 13px; }
 .footer-links a:hover { color: var(--accent); }
 .copyright { text-align: center; font-size: 12px; margin-top: 12px; color: rgba(255,255,255,.75); }

 /* Cookie */
 .cookie {
   position: fixed; right: 14px; bottom: 14px; z-index: 70; background: #fff; border: 1px solid var(--border);
   width: min(430px, calc(100% - 22px)); border-radius: 12px; padding: 16px;
   box-shadow: 0 16px 42px rgba(0,0,0,.12);
 }
 .cookie h4 { font-size: 20px; font-family: 'Playfair Display', 'Playfair Fallback', serif; margin-bottom: 6px; }
 .cookie p { font-size: 14px; color: var(--text-muted); }
 .cookie-actions { margin-top: 12px; display: flex; gap: 8px; }
 .cookie button { border-radius: 8px; padding: 9px 14px; border: 1px solid var(--border); cursor: pointer; }
 .cookie .ok { background: var(--accent); color: #fff; border-color: var(--accent); }

 @media (min-width: 1380px) { .side-ad { display: block; } }
 @media (max-width: 1000px) {
   .nav-inner { flex-wrap: wrap; }
 }
 @media (max-width: 640px) {
   .container { width: calc(100% - 18px); }
   .article-card-wrapper { padding: 16px; }
   .news-summary { font-size: 14px; }
   .footer-top { flex-direction: column; }
   .nav-cats {
     flex-wrap: wrap;
     overflow: visible;
     row-gap: 8px;
   }
   .official-source-box { flex-direction: column; align-items: flex-start; }

   #tagline {
     text-align: center !important;
     width: 100% !important;
     display: block !important;
     margin: 0 0 10px 0 !important;
     padding: 0 !important;
     font-weight: 600;
     font-style: italic;
     font-size: 14px !important;
     line-height: 1.5;
     letter-spacing: 0.4px !important;
     text-transform: none !important;
   }

   #usTime {
     text-align: center !important;
     width: 100% !important;
     display: block !important;
     margin: 0 !important;
     padding: 0 !important;
     font-size: 14px !important;
     line-height: 1.5;
     letter-spacing: 0.2px !important;
     text-transform: none !important;
   }
 }

 #tagline, #usTime, .page-hero p {
  min-height: 24px;
  font-display: swap;
}

#ticker-container a,
#ticker-container a:hover,
#ticker-container a:focus,
#ticker-container a:visited,
#ticker-container .tnews a {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}