@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,600&display=swap');

/* ============================================
   PLUG TV KENYA — DESIGN TOKENS
   ============================================ */
:root{
  --pt-black:      #0A0503;
  --pt-charcoal:   #150B06;
  --pt-panel:      #1E120B;
  --pt-ink:        #241811;
  --pt-gold:       #FFB400;
  --pt-gold-dim:   #C98900;
  --pt-gold-pale:  #FFE9B8;
  --pt-cream:      #FFF8EC;
  --pt-cream-2:    #FBF2E1;
  --pt-white:      #FFFFFF;
  --pt-line:       rgba(21,11,6,0.12);
  --pt-line-dark:  rgba(255,180,0,0.18);

  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Montserrat', sans-serif;

  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 18px;

  --shadow-card: 0 2px 4px rgba(21,11,6,0.06), 0 12px 28px -14px rgba(21,11,6,0.25);
  --shadow-pop:  0 20px 60px -20px rgba(10,5,3,0.55);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--pt-cream);
  color:var(--pt-ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font-family:inherit; }
.wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--pt-gold);
  outline-offset:2px;
}

/* ============================================
   UTILITIES
   ============================================ */
.eyebrow{
  font-family:var(--font-display);
  font-weight:800;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.channel-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:11px;
  letter-spacing:.08em;
  padding:5px 10px 5px 8px;
  border-radius:999px;
  background:var(--pt-black);
  color:var(--pt-gold);
  text-transform:uppercase;
}
.channel-badge .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--pt-gold);
}
.channel-badge.on-gold{
  background:var(--pt-gold);
  color:var(--pt-black);
}
.channel-badge.on-gold .dot{ background:var(--pt-black); }

/* ============================================
   TOP UTILITY BAR
   ============================================ */
.topbar{
  background:var(--pt-black);
  color:rgba(255,255,255,.6);
  font-size:12.5px;
  font-weight:500;
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  min-height:38px;
  gap:12px;
}
.topbar-left{ display:flex; align-items:center; gap:18px; min-width:0; flex-shrink:1; }
.topbar-left .live-dot{
  color:var(--pt-gold); font-weight:800; display:flex; align-items:center; gap:6px;
  white-space:nowrap; flex-shrink:0;
}
.pulse{
  width:7px; height:7px; border-radius:50%;
  background:#FF4B2B;
  box-shadow:0 0 0 0 rgba(255,75,43,.7);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,75,43,.55); }
  70%{ box-shadow:0 0 0 7px rgba(255,75,43,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,75,43,0); }
}
.topbar-right{ display:flex; align-items:center; gap:16px; }
.topbar-right a:hover{ color:var(--pt-gold); }
.social-row{ display:flex; gap:12px; }
.social-row svg{ width:14px; height:14px; fill:currentColor; opacity:.75; transition:opacity .2s; }
.social-row a:hover svg{ opacity:1; }

/* ============================================
   HEADER
   ============================================ */
header.site-header{
  background:var(--pt-black);
  border-bottom:1px solid rgba(255,180,0,.14);
  position:sticky; top:0; z-index:60;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:104px;
  gap:24px;
}
.brand{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.brand img{ height:80px; width:80px; }
.brand .word{
  font-family:var(--font-display);
  font-weight:900;
  font-size:25px;
  letter-spacing:.01em;
  color:var(--pt-white);
  line-height:1;
}
.brand .word span{ color:var(--pt-gold); }
.brand .tagline{
  font-size:10.5px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.45);
  font-weight:700;
  margin-top:4px;
}

nav.main-nav{ display:flex; align-items:center; gap:2px; }
nav.main-nav a{
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  color:rgba(255,255,255,.78);
  padding:10px 14px;
  border-radius:var(--radius-s);
  position:relative;
  transition:color .2s;
}
nav.main-nav a::after{
  content:'';
  position:absolute; left:14px; right:14px; bottom:4px; height:2px;
  background:var(--pt-gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
nav.main-nav a:hover{ color:var(--pt-white); }
nav.main-nav a:hover::after, nav.main-nav a.active::after{ transform:scaleX(1); }
nav.main-nav a.active{ color:var(--pt-gold); }

.header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--pt-white); background:rgba(255,255,255,.06);
  transition:background .2s;
}
.icon-btn:hover{ background:rgba(255,180,0,.18); }
.icon-btn svg{ width:16px; height:16px; fill:currentColor; }
.btn-live{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--pt-gold);
  color:var(--pt-black);
  font-weight:800; font-size:12.5px; letter-spacing:.03em;
  padding:11px 18px;
  border-radius:999px;
  transition:transform .18s, box-shadow .18s;
  white-space:nowrap;
}
.btn-live:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(255,180,0,.55); }
.btn-live .play{
  width:9px; height:9px; border-radius:1px;
  background:var(--pt-black);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}

.menu-toggle{ display:none; }

/* ============================================
   BREAKING TICKER
   ============================================ */
.ticker-bar{
  background:var(--pt-gold);
  color:var(--pt-black);
  overflow:hidden;
  position:relative;
}
.ticker-bar .wrap{ display:flex; align-items:stretch; padding:0; max-width:100%; }
.ticker-tag{
  flex-shrink:0;
  background:var(--pt-black);
  color:var(--pt-gold);
  font-weight:800; font-size:12px; letter-spacing:.08em;
  display:flex; align-items:center; gap:8px;
  padding:9px 20px;
  clip-path:polygon(0 0,100% 0,88% 100%,0% 100%);
  padding-right:34px;
}
.ticker-viewport{
  overflow:hidden; flex:1; display:flex; align-items:center;
  padding-left:24px;
}
.ticker-track{
  display:flex; align-items:center; gap:56px;
  white-space:nowrap;
  animation:ticker 32s linear infinite;
}
.ticker-track span{ font-weight:700; font-size:13px; }
.ticker-track .sep{ opacity:.5; font-weight:900; }
@keyframes ticker{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}
@media (max-width:720px){
  /* Slower pace on small screens — less width means less time to read
     each headline before it scrolls past, so we give it more room to breathe. */
  .ticker-track{ animation-duration:46s; }
  .ticker-track span{ font-size:12.5px; }
}

/* ============================================
   HERO
   ============================================ */
.hero{
  background:var(--pt-black);
  padding:44px 0 56px;
  position:relative;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.65fr 1fr;
  gap:32px;
}
.hero-feature{
  border-radius:var(--radius-l);
  overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--pt-panel);
  box-shadow:var(--shadow-pop);
}
.hero-feature .thumb{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  flex-shrink:0;
}
.hero-feature .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-feature .thumb .thumb-art{ width:100%; height:100%; }
.hero-feature .thumb::after{
  content:'';
  position:absolute; inset:0;
  /* Just enough scrim at the top-left for the badge to stay legible —
     the rest of the photo stays fully visible. */
  background:linear-gradient(160deg, rgba(10,5,3,.55) 0%, rgba(10,5,3,0) 32%);
  pointer-events:none;
}
.hero-feature .thumb .channel-badge{
  position:absolute; top:16px; left:16px; z-index:2;
}
.hero-feature .content{
  position:relative; z-index:2;
  padding:24px 28px 30px;
  color:var(--pt-white);
}
.hero-feature .content .channel-badge{ margin-bottom:16px; }
.hero-feature h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(22px,2.6vw,32px);
  line-height:1.18;
  letter-spacing:-.01em;
  margin-bottom:12px;
  cursor:pointer;
}
.hero-feature h1:hover{ color:var(--pt-gold); }
.hero-feature p.excerpt{
  color:rgba(255,255,255,.72);
  font-size:15px;
  max-width:64ch;
  margin-bottom:18px;
  font-weight:500;
}
.meta-row{
  display:flex; align-items:center; gap:14px;
  font-size:12.5px; color:rgba(255,255,255,.6); font-weight:600;
}
.avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--pt-gold); color:var(--pt-black);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:10.5px;
}
.meta-row .divider{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; }

.trending-panel{
  background:var(--pt-panel);
  border-radius:var(--radius-l);
  padding:24px;
  display:flex; flex-direction:column;
}
.trending-panel .panel-head{
  display:flex; align-items:center; gap:10px;
  color:var(--pt-white);
  margin-bottom:18px;
}
.panel-head svg{ width:16px; height:16px; fill:var(--pt-gold); }
.panel-head span{
  font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
}
.trending-list{ display:flex; flex-direction:column; }

/* Friendly placeholder for "nothing here yet" states — used instead of a
   blank box so it reads as intentional rather than broken. */
.empty-state{
  grid-column:1/-1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  padding:38px 20px;
  text-align:center;
  border-radius:var(--radius-m);
  font-weight:600; font-size:13px;
}
.empty-state--light{
  color:rgba(36,24,17,.55);
  background:rgba(21,11,6,.03);
  border:1px dashed rgba(21,11,6,.14);
}
.empty-state--dark{
  color:rgba(255,255,255,.55);
  width:100%;
}
.empty-state svg{ flex-shrink:0; }
.trending-item{
  display:flex; gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.trending-item:last-child{ border-bottom:none; padding-bottom:0; }
.trending-item:first-child{ padding-top:0; }
.trending-num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:26px;
  color:transparent;
  -webkit-text-stroke:1.4px var(--pt-gold);
  line-height:1;
  flex-shrink:0;
  width:30px;
}
.trending-item a{
  color:var(--pt-white);
  font-weight:700;
  font-size:13.5px;
  line-height:1.4;
}
.trending-item a:hover{ color:var(--pt-gold); }
.trending-item .cat{
  display:block;
  color:var(--pt-gold);
  font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:5px;
}

/* ============================================
   CATEGORY FILTER
   ============================================ */
.category-strip{
  background:var(--pt-cream);
  border-bottom:1px solid var(--pt-line);
  position:sticky; top:104px; z-index:40;
}
.category-strip .wrap{
  display:flex; gap:8px;
  padding-top:14px; padding-bottom:14px;
  overflow-x:auto;
  scrollbar-width:none;
}
.category-strip .wrap::-webkit-scrollbar{ display:none; }
.cat-pill{
  flex-shrink:0;
  font-size:12.5px; font-weight:700;
  padding:9px 16px;
  border-radius:999px;
  border:1.5px solid var(--pt-line);
  color:var(--pt-ink);
  transition:all .18s;
  white-space:nowrap;
}
.cat-pill:hover{ border-color:var(--pt-gold); }
.cat-pill.active{
  background:var(--pt-black);
  border-color:var(--pt-black);
  color:var(--pt-gold);
}

/* ============================================
   ARTICLE GRID
   ============================================ */
.section{ padding:52px 0; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:28px;
  gap:16px;
}
.section-head h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:26px;
  letter-spacing:-.01em;
  display:flex; align-items:center; gap:12px;
}
.section-head h2::before{
  content:'';
  width:26px; height:4px;
  background:var(--pt-gold);
  border-radius:2px;
  display:inline-block;
}
.section-head .view-all{
  font-size:12.5px; font-weight:800; letter-spacing:.04em;
  color:var(--pt-ink);
  border-bottom:2px solid var(--pt-gold);
  padding-bottom:2px;
  flex-shrink:0;
}

.article-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.card{
  background:var(--pt-white);
  border-radius:var(--radius-m);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
  cursor:pointer;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 40px -20px rgba(21,11,6,.35);
}
.card .thumb{
  position:relative;
  height:170px;
  overflow:hidden;
}
.card .thumb .channel-badge{
  position:absolute; top:12px; left:12px; z-index:2;
}
.card .body{
  padding:18px 20px 20px;
  display:flex; flex-direction:column; flex:1;
}
.card .cat-label{
  font-size:11px; font-weight:800; letter-spacing:.08em;
  color:var(--pt-gold-dim);
  text-transform:uppercase;
  margin-bottom:8px;
}
.card h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  line-height:1.32;
  margin-bottom:10px;
  flex:1;
}
.card p.excerpt{
  font-size:13.5px;
  color:rgba(36,24,17,.65);
  line-height:1.55;
  margin-bottom:16px;
}
.card .meta-row{
  color:rgba(36,24,17,.55);
  font-size:11.5px;
}
.card .avatar{ width:22px; height:22px; font-size:9px; }

/* Thumbnail placeholder art (CSS-generated, per category) */
.thumb-art{
  width:100%; height:100%;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.thumb-art::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.15), transparent 40%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
}
.thumb-art .glyph{ position:relative; z-index:2; width:38%; height:38%; opacity:.9; }
.thumb-art .glyph svg{ width:100%; height:100%; fill:rgba(255,255,255,.85); }

.cat-geopolitics{ background:linear-gradient(135deg,#0D1B24,#1B3B4D); }
.cat-politics{ background:linear-gradient(135deg,#241811,#3B2716); }
.cat-business{ background:linear-gradient(135deg,#14202B,#1F3A4D); }
.cat-entertainment{ background:linear-gradient(135deg,#3A1621,#5C1E30); }
.cat-sports{ background:linear-gradient(135deg,#0F2A1D,#175539); }
.cat-opinion{ background:linear-gradient(135deg,#2B2107,#4A3A0C); }
.cat-lifestyle{ background:linear-gradient(135deg,#301A2C,#54294B); }
.cat-technology{ background:linear-gradient(135deg,#111827,#1E2E4A); }
.cat-county{ background:linear-gradient(135deg,#1E1509,#3E2B0E); }

/* ============================================
   NEWSLETTER CTA
   ============================================ */
.newsletter{
  background:var(--pt-gold);
  color:var(--pt-black);
  padding:52px 0;
  position:relative;
  overflow:hidden;
}
.newsletter .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.newsletter h2{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(22px,3vw,30px);
  letter-spacing:-.01em;
  max-width:14ch;
}
.newsletter p{ font-weight:600; opacity:.8; margin-top:8px; max-width:36ch; font-size:14px;}
.newsletter form{
  display:flex; gap:10px;
  background:var(--pt-black);
  padding:6px; border-radius:999px;
  min-width:380px;
}
.newsletter input{
  flex:1;
  background:transparent;
  border:none; outline:none;
  color:var(--pt-white);
  font-size:13.5px;
  font-weight:600;
  padding:10px 16px;
}
.newsletter input::placeholder{ color:rgba(255,255,255,.4); }
.newsletter button{
  background:var(--pt-gold);
  color:var(--pt-black);
  font-weight:800; font-size:13px;
  padding:12px 22px;
  border-radius:999px;
  transition:transform .18s;
}
.newsletter button:hover{ transform:translateY(-1px); }

/* ============================================
   FOOTER
   ============================================ */
footer{ background:var(--pt-black); color:rgba(255,255,255,.55); padding-top:56px; }
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand .brand img{ height:64px; width:64px; }
.footer-brand .brand .word{ font-size:22px; }
.footer-brand p{ font-size:13px; line-height:1.7; max-width:34ch; margin-bottom:18px; }
.footer-phone{ margin-top:-6px; }
.footer-phone a{
  font-weight:700; font-size:13.5px;
  color:var(--pt-gold);
  letter-spacing:.01em;
}
.footer-phone a:hover{ color:var(--pt-white); }
.footer-col h4{
  color:var(--pt-white);
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:16px;
}
.footer-col ul li{ margin-bottom:11px; }
.footer-col a{ font-size:13.5px; transition:color .18s; }
.footer-col a:hover{ color:var(--pt-gold); }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s;
}
.footer-social a:hover{ background:var(--pt-gold); color:var(--pt-black); }
.footer-social svg{ width:14px; height:14px; fill:currentColor; }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
  font-size:12px;
  flex-wrap:wrap; gap:10px;
}
.footer-bottom .legal-links{ display:flex; gap:18px; }
.footer-bottom a:hover{ color:var(--pt-gold); }

/* ============================================
   CATEGORY PAGE HEADER
   ============================================ */
.category-hero{
  background:var(--pt-black);
  padding:40px 0 28px;
}
.category-hero .eyebrow{
  color:var(--pt-gold-dim);
  font-family:var(--font-display);
  font-weight:800;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.category-hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(28px,4vw,42px);
  color:var(--pt-white);
  letter-spacing:-.01em;
}

/* ============================================
   ARTICLE PAGE
   ============================================ */
@keyframes skeleton-shimmer{
  0%{ background-position:-400px 0; }
  100%{ background-position:400px 0; }
}
.skeleton-line, .skeleton-block{
  background:linear-gradient(90deg, rgba(21,11,6,.06) 25%, rgba(21,11,6,.11) 37%, rgba(21,11,6,.06) 63%);
  background-size:800px 100%;
  animation:skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius:6px;
  color:transparent !important;
}
.skeleton-line{ display:block; height:1em; margin-bottom:10px; }
.skeleton-title{ height:1.1em; width:70%; margin-bottom:18px; }
.article-hero-frame.skeleton-block{ border-radius:var(--radius-l); background:linear-gradient(90deg, rgba(21,11,6,.06) 25%, rgba(21,11,6,.11) 37%, rgba(21,11,6,.06) 63%); background-size:800px 100%; }
.article-page{ background:var(--pt-cream); padding:40px 0 12px; }
.wrap.article-wrap{ max-width:760px; }
.article-topline{ margin-bottom:18px; }
#article-category{ display:inline-flex; }
.article-page h1#article-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(26px,4vw,38px);
  line-height:1.2;
  color:var(--pt-ink);
  margin-bottom:18px;
}
.article-byline{
  color:rgba(36,24,17,.55);
  padding-bottom:22px;
  margin-bottom:0;
  border-bottom:1px solid var(--pt-line);
}
.article-byline .avatar{ background:var(--pt-black); color:var(--pt-gold); }

.share-row{
  display:flex; align-items:center; gap:10px;
  margin:18px 0 28px;
}
.share-label{
  font-family:var(--font-display);
  font-weight:800;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pt-gray, rgba(36,24,17,.5));
  margin-right:2px;
}
.share-btn{
  width:36px; height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--pt-light-gray, rgba(21,11,6,.05));
  color:var(--pt-ink);
  transition:background .18s, color .18s, transform .18s;
  flex-shrink:0;
}
.share-btn svg{ width:16px; height:16px; fill:currentColor; }
.share-btn:hover{ transform:translateY(-2px); }
.share-facebook:hover{ background:#1877F2; color:#fff; }
.share-x:hover{ background:#000; color:#fff; }
.share-whatsapp:hover{ background:#25D366; color:#fff; }
.share-copy:hover{ background:var(--pt-gold); color:var(--pt-black); }
.share-copy.share-copied{ background:var(--pt-gold); color:var(--pt-black); }
.article-hero-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius-l);
  overflow:hidden;
  margin:28px 0 32px;
  background:var(--pt-panel);
  box-shadow:var(--shadow-card);
}
.article-body .lede{
  font-size:16px; font-weight:600;
  color:var(--pt-ink);
  margin-bottom:18px;
  line-height:1.6;
}
.article-body p{
  font-size:15.5px; line-height:1.85;
  color:rgba(36,24,17,.82);
  margin-bottom:16px;
}
.article-body strong{ font-weight:800; color:var(--pt-ink); }
.article-body a{
  color:var(--pt-gold-dim);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(197,138,0,.35);
  text-underline-offset:2px;
}
.article-body a:hover{ color:var(--pt-black); text-decoration-color:currentColor; }
.article-body em{ font-style:italic; }
/* ============================================
   STATIC INFO PAGES (About, Careers, Privacy, etc.)
   ============================================ */
.info-hero{
  background:var(--pt-black);
  padding:44px 0 30px;
}
.info-hero .eyebrow{
  color:var(--pt-gold-dim);
  font-family:var(--font-display);
  font-weight:800;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.info-hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(28px,4vw,42px);
  color:var(--pt-white);
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.info-hero p{
  color:rgba(255,255,255,.65);
  font-size:15px;
  max-width:60ch;
}
.info-page{ background:var(--pt-cream); padding:44px 0 60px; }
.wrap.info-wrap{ max-width:780px; }
.info-page h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:21px;
  color:var(--pt-black);
  margin:34px 0 14px;
  letter-spacing:-.01em;
}
.info-page h2:first-child{ margin-top:0; }
.info-page p{
  font-size:15.5px; line-height:1.85;
  color:rgba(36,24,17,.82);
  margin-bottom:16px;
}
.info-page ul{
  margin:0 0 16px;
  padding-left:0;
  list-style:none;
}
.info-page ul li{
  font-size:15.5px; line-height:1.75;
  color:rgba(36,24,17,.82);
  padding-left:24px;
  position:relative;
  margin-bottom:8px;
}
.info-page ul li::before{
  content:'';
  position:absolute; left:2px; top:9px;
  width:7px; height:7px; border-radius:2px;
  background:var(--pt-gold);
}
.info-page strong{ font-weight:800; color:var(--pt-ink); }
.info-page .lede{
  font-size:16.5px; font-weight:600;
  color:var(--pt-ink);
  margin-bottom:8px;
  line-height:1.6;
}
.info-contact-card{
  background:var(--pt-white);
  border:1px solid var(--pt-line);
  border-radius:var(--radius-m);
  padding:24px;
  margin-top:8px;
}
.info-contact-card .row{
  display:flex; align-items:center; gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--pt-line);
  font-size:14.5px;
}
.info-contact-card .row:last-child{ border-bottom:none; }
.info-contact-card .row strong{ min-width:90px; color:var(--pt-black); }
.info-contact-card .row a{ color:var(--pt-gold-dim); font-weight:700; }
.info-contact-card .row a:hover{ color:var(--pt-black); }
.info-form{ margin-top:20px; display:flex; flex-direction:column; gap:14px; }
.info-form input, .info-form textarea{
  width:100%;
  border:1px solid var(--pt-border-gray, var(--pt-line));
  border-radius:var(--radius-s);
  padding:13px 14px;
  font-family:var(--font-body);
  font-size:14px;
  background:var(--pt-white);
  color:var(--pt-ink);
}
.info-form input:focus, .info-form textarea:focus{ outline:2px solid var(--pt-gold); }
.info-form button{
  align-self:flex-start;
  background:var(--pt-gold);
  color:var(--pt-black);
  font-weight:800; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:13px 26px;
  border-radius:999px;
}
.info-form button:hover{ background:var(--pt-gold-dim); }
.sitemap-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:28px;
  margin-top:8px;
}
.sitemap-grid h3{
  font-family:var(--font-display);
  font-weight:800;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--pt-gold-dim);
  margin-bottom:12px;
}
.sitemap-grid ul{ list-style:none; }
.sitemap-grid li{ margin-bottom:9px; }
.sitemap-grid a{ font-size:14px; color:var(--pt-ink); font-weight:600; }
.sitemap-grid a:hover{ color:var(--pt-gold-dim); }

/* ============================================
   WATCH LIVE PAGE
   ============================================ */
.live-player-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:var(--pt-black);
  border-radius:var(--radius-l);
  overflow:hidden;
  box-shadow:var(--shadow-pop);
}
.live-player-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.live-offline-placeholder{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  color:rgba(255,255,255,.4);
}
.live-offline-placeholder p{
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  color:rgba(255,255,255,.5);
}
.live-fallback-note{
  margin-top:24px;
  padding:22px 24px;
  background:var(--pt-white);
  border:1px solid var(--pt-line);
  border-radius:var(--radius-m);
}
.live-fallback-note p{
  font-size:14.5px;
  line-height:1.7;
  color:rgba(36,24,17,.75);
}
.live-fallback-note strong{ color:var(--pt-ink); }

.article-body .pull-quote{
  margin:28px 0;
  padding:6px 0 6px 24px;
  border-left:4px solid var(--pt-gold);
  font-family:var(--font-display);
  font-weight:700;
  font-size:21px;
  line-height:1.5;
  color:var(--pt-black);
}
.article-body .article-inline-image{
  margin:28px 0;
}
.article-body .article-inline-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
}
.article-body .article-inline-image figcaption{
  margin-top:8px;
  font-size:12.5px;
  color:rgba(36,24,17,.55);
  font-weight:600;
  line-height:1.5;
}

.article-body .article-inline-embed{ margin:28px 0; }
.article-body .article-inline-video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius-m);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  background:var(--pt-black);
}
.article-body .article-inline-video iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.article-body .article-inline-card{
  display:flex; align-items:center; gap:10px;
  padding:14px 18px;
  border:1.5px solid var(--pt-line);
  border-radius:var(--radius-m);
  background:var(--pt-white);
  color:var(--pt-ink);
  font-weight:700;
  font-size:14px;
  transition:border-color .18s, background .18s;
}
.article-body .article-inline-card:hover{
  border-color:var(--pt-gold);
  background:var(--pt-cream-2);
}
.article-body .article-inline-card svg{ flex-shrink:0; color:var(--pt-gold-dim); }

/* Related Articles / More Stories — real sections at the bottom of every
   article page, so readers keep browsing (and reach the footer) by
   scrolling instead of hitting a dead end. */
.reader-related{
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid var(--pt-line);
}
.reader-related-head{ margin-bottom:18px; }
.reader-related-head .eyebrow{ color:var(--pt-gold-dim); display:block; margin-bottom:4px; }
.reader-related-head h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:19px;
  color:var(--pt-black);
}
.reader-related-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.reader-related-grid .card{ box-shadow:none; border:1px solid var(--pt-line); }
.reader-related-grid .card:hover{ box-shadow:var(--shadow-card); }
@media (max-width:560px){
  .reader-related-grid{ grid-template-columns:1fr; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1080px){
  .article-grid{ grid-template-columns:repeat(2,1fr); }
  .hero .wrap{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  nav.main-nav{
    position:fixed; top:104px; left:0; right:0; bottom:0;
    background:var(--pt-black);
    flex-direction:column; align-items:stretch;
    padding:12px 20px;
    transform:translateX(-100%);
    transition:transform .28s ease;
    z-index:59;
    gap:0;
    overflow-y:auto;
  }
  nav.main-nav.open{ transform:translateX(0); }
  nav.main-nav a{ padding:16px 6px; border-bottom:1px solid rgba(255,255,255,.08); font-size:15px; }
  .menu-toggle{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.06); color:var(--pt-white);
  }
  .menu-toggle svg{ width:18px; height:18px; fill:currentColor; }
  .header-actions .icon-btn.search{ display:none; }
}
@media (max-width:720px){
  .site-header .wrap{ height:82px; }
  .brand img{ height:58px; width:58px; }
  .brand .word{ font-size:19px; }
  .brand .tagline{ display:none; }
  nav.main-nav{ top:82px; }
  .hero{ padding:28px 0 40px; }
  .hero-feature .content{ padding:20px; }
  .article-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .newsletter form{ min-width:0; width:100%; }
  .newsletter .wrap{ flex-direction:column; align-items:flex-start; }
  .category-strip{ top:82px; }
  .article-page{ padding:24px 0 8px; }
  .article-hero-frame{ margin:20px 0 24px; }
  .reader-related-head h2{ font-size:17px; }

  /* Top bar: keep "ON AIR NOW" fully visible by dropping lower-priority
     items instead of letting everything squeeze onto one cramped row. */
  .topbar .wrap{ padding-top:8px; padding-bottom:8px; }
  .topbar-left > span:not(.live-dot){ display:none; }
  .topbar-right > a{ display:none; }
  .social-row{ gap:10px; }
}