/* ============================================================
   OFF THE PRESS — style.css
   Pixel-perfect Cloudflare Pages rebuild
   ============================================================ */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:        #c8102e;
  --red-dark:   #a50e25;
  --black:      #111111;
  --dark:       #1a1a1a;
  --mid-gray:   #555555;
  --light-gray: #e8e8e8;
  --border:     #dddddd;
  --bg:         #f4f4f4;
  --white:      #ffffff;
  --header-bg:  #1b1b1b;
  --font-sans:  'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Merriweather', Georgia, serif;
  --max-width:  1200px;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--black);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input { font-family: inherit; }

/* ---- Layout Helpers ---- */
.container-fluid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 15px;
}

.hidden-mobile { display: flex; }

/* ---- MOBILE DRAWER ---- */
.mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}

.mobile-overlay.active { display: block; }

.mobile-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 300px; height: 100%;
  background: var(--header-bg);
  color: var(--white);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.mobile-drawer.open { transform: translateX(0); }

.mobile-menu__top { padding: 20px 15px; }

.mobile-menu__close {
  color: var(--white); font-size: 20px;
  margin-bottom: 20px; display: block;
}

.mobile-newsletter h3 {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  color: var(--white); margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.mobile-nav-list { margin: 15px 0; }
.mobile-nav-list li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-nav-list a {
  display: block; padding: 10px 0;
  color: var(--white); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.mobile-nav-list a:hover { color: var(--red); }

.mobile-trending h4 {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 15px 0 5px;
}

.mobile-search {
  display: flex; gap: 5px; margin-top: 15px;
}
.mobile-search input {
  flex: 1; padding: 8px 10px; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2); color: var(--white);
  font-size: 13px; border-radius: 2px;
}
.mobile-search button {
  padding: 8px 12px; background: var(--red); color: var(--white);
  border-radius: 2px;
}

/* ---- HEADER ---- */
.main-header {
  background: var(--header-bg);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.header-inner {
  display: flex;
  align-items: stretch;
  min-height: 70px;
}

.header-left {
  display: flex;
  align-items: center;
  padding: 10px 15px 10px 0;
  flex-shrink: 0;
}

.header-logo {
  width: 220px;
  height: auto;
}

.header-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid rgba(255,255,255,0.08);
}

.header-top-row {
  display: flex;
  align-items: center;
  padding: 8px 0 8px 15px;
  gap: 15px;
  flex: 1;
}

/* Top nav */
.top-nav ul {
  display: flex;
  gap: 0;
  align-items: center;
}
.top-nav a {
  display: block;
  padding: 6px 14px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color 0.15s;
  white-space: nowrap;
}
.top-nav a:hover,
.top-nav a.active { color: var(--white); }
.top-nav a.active { border-bottom: 2px solid var(--red); }

/* Top-nav dropdown */
.top-nav .has-dropdown {
  position: relative;
}
.top-nav .dropdown-trigger {
  cursor: pointer;
}
.top-nav .dropdown-caret {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  transition: transform 0.15s;
}
.top-nav .has-dropdown:hover .dropdown-caret,
.top-nav .has-dropdown:focus-within .dropdown-caret {
  transform: translateY(1px);
}
.top-nav .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--header-bg);
  border: 1px solid rgba(255,255,255,0.15);
  border-top: 2px solid var(--red);
  padding: 4px 0;
  margin: 0;
  display: none;
  flex-direction: column;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.top-nav .has-dropdown:hover .dropdown-menu,
.top-nav .has-dropdown:focus-within .dropdown-menu {
  display: flex;
}
.top-nav .dropdown-menu li {
  list-style: none;
}
.top-nav .dropdown-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  border-bottom: none;
}
.top-nav .dropdown-menu a:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
}

.header-right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Newsletter in header */
.header-newsletter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.newsletter-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.newsletter-form.inline {
  display: flex;
  gap: 5px;
}
.newsletter-form input[type="email"],
.newsletter-form input[type="text"] {
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-size: 12px;
  border-radius: 2px;
  width: 180px;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.45); }
.newsletter-form button {
  padding: 6px 12px;
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.15s;
}
.newsletter-form button:hover { background: var(--red-dark); }

/* Social nav in header */
.social-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-nav a {
  display: flex;
  align-items: center;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.social-nav a:hover { opacity: 1; }
.social-nav img { width: 20px; height: 20px; object-fit: contain; }

/* Mobile trigger */
.mobile-trigger {
  display: none;
  color: var(--white);
  font-size: 20px;
  padding: 5px 8px;
}

/* Trending bar */
.trending-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--red);
  padding: 0 15px;
  height: 34px;
  overflow: hidden;
}
.trending-label {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  white-space: nowrap;
  padding-right: 12px;
  border-right: 1px solid rgba(255,255,255,0.3);
  margin-right: 12px;
}
.trending-nav {
  display: flex;
  gap: 0;
  flex: 1;
}
.trending-nav a {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.9);
  padding: 0 12px;
  height: 34px;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.trending-nav a:hover {
  background: rgba(0,0,0,0.15);
  color: var(--white);
}
.header-search {
  margin-left: auto;
}
.header-search a {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  padding: 5px;
  display: block;
}
.header-search a:hover { color: var(--white); }

/* ---- MAIN LAYOUT ---- */
.main { padding: 15px 0 30px; }

.content-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.col-main {
  flex: 1;
  min-width: 0;
}

.col-sidebar {
  width: 300px;   /* fit a standard 300px sidebar ad (was 280 → too narrow, ads wouldn't fill) */
  flex-shrink: 0;
  padding-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- SECTION HEADERS ---- */
.section, .post-wrapper { margin-bottom: 5px; }

.header-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  margin-bottom: 5px;
  border-bottom: 3px solid var(--red);
}
.header-wrap h2 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--black);
  white-space: nowrap;
}
.title-wrap {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Breaking Now gets a special oversized header */
.section--tight .header-wrap h2 {
  font-size: 28px;
  letter-spacing: 0.08em;
  color: var(--red);
}

/* ---- FEATURED POST (BREAKING NOW) ---- */
.section--tight { padding: 10px 0; }

.featured-post {
  background: var(--white);
  padding: 14px 18px 18px;
  margin-bottom: 5px;
  text-align: center;
}
.featured-post .featured-kicker h1 {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
  margin-bottom: 12px;
  display: block;
  line-height: 1.1;
}
.featured-post .featured-kicker:hover h1 { color: var(--red-dark); }
.featured-post .featured-img-link {
  display: block;
  max-width: 72%;
  margin: 0 auto 12px;
}
.featured-post img {
  width: 100%;
  height: auto;
  display: block;
}
.featured-post h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--black);
  max-width: 85%;
  margin: 0 auto;
}
.featured-post h2:hover { color: var(--red); }
.featured-post a { display: block; }

/* ---- TRENDING EXCLUSIVE ITEM ---- */
.trending-exclusive {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 0 12px !important;
  color: var(--white) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
  border-left: 1px solid rgba(255,255,255,0.3) !important;
  position: relative;
}
.trending-exclusive::before {
  content: '🔥';
  font-size: 12px;
  flex-shrink: 0;
}
.trending-exclusive:hover {
  background: rgba(0,0,0,0.15) !important;
  color: var(--white) !important;
}

/* ---- X / TWITTER FEED ---- */
.sidebar-x-feed {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 10px 12px 12px;
}
.sidebar-x-feed .header-wrap {
  margin-bottom: 8px;
}
.x-feed-loading {
  font-size: 12px;
  color: #999;
  text-align: center;
  padding: 12px 0 4px;
  font-style: italic;
}
.x-feed-fallback {
  text-align: center;
  padding: 10px 0 4px;
  font-size: 12px;
}
.x-feed-fallback a {
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
}

/* ---- TWO-COLUMN FEED ---- */
.two-col-feed {
  display: flex;
  gap: 0;
  background: var(--white);
}

.single-column {
  flex: 1;
  padding: 0;
  min-width: 0;   /* allow the flex column to shrink so an injected ad iframe can't blow out the row */
}

.single-column:first-child {
  border-right: 1px solid var(--border);
}

.clip.layout__basic {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  display: block;
}

.clip.layout__basic:last-child { border-bottom: none; }

.clip.layout__basic a.nt-link {
  color: var(--black);
  display: block;
}
.clip.layout__basic a.nt-link:hover { color: var(--red); }

.clip.layout__basic p {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--black);
  margin: 0;
  transition: color 0.15s;
}
.clip.layout__basic a.nt-link:hover p { color: var(--red); }

/* Text-only clips get a subtle left accent on hover */
.clip.layout__basic:not(.photo) {
  border-left: 3px solid transparent;
  padding-left: 9px;
  transition: border-color 0.15s, background 0.15s;
}
.clip.layout__basic:not(.photo):hover {
  border-left-color: var(--red);
  background: #fafafa;
}

/* Photo clips */
.clip.photo {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.clip.photo .photo-link {
  flex-shrink: 0;
}
.clip.photo .photo-link img {
  width: 130px;
  height: 80px;
  object-fit: cover;
  display: block;
}
.clip.photo .nt-link:not(.photo-link) {
  flex: 1;
}

/* ---- COLUMN BREAK (visual gap between the two cols in feed) ---- */
.column-break-desktop {
  display: none;
}

/* ---- POST WRAPPER (category grids, etc) ---- */
.post-wrapper {
  background: var(--white);
  margin-bottom: 8px;
}

.additional-content.row {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 5px 15px;
  border-bottom: 1px solid var(--border);
}
.additional-content.row:last-child { border-bottom: none; }

.col-xs-12 { width: 100%; padding: 0 10px; }
.col-sm-4 { width: 33.333%; }

/* ---- YOUTUBE CAROUSEL ---- */
.yt-carousel-wrapper {
  padding: 12px 12px 16px;
}
.yt-carousel-wrapper .header-wrap {
  margin-bottom: 12px;
}
.yt-channel-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.yt-channel-link:hover { text-decoration: underline; }

.yt-carousel-container {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.yt-track-outer {
  flex: 1;
  overflow: hidden;
}
.yt-track {
  display: flex;
  gap: 12px;
  transition: transform 0.35s ease;
  will-change: transform;
  min-height: 180px;
  align-items: flex-start;
}

.yt-nav {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  font-size: 22px;
  line-height: 1;
  color: var(--black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.yt-nav:hover:not(:disabled) {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.yt-nav:disabled { opacity: 0.3; cursor: default; }

.yt-card {
  flex: 0 0 calc(33.333% - 8px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
}
.yt-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.yt-card__thumb {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
}
.yt-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.15s;
}
.yt-card:hover .yt-card__play { opacity: 1; }
.yt-card__body {
  padding: 8px 9px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.yt-card__title {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--black);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yt-card__date {
  font-size: 11px;
  color: var(--mid-gray);
  margin-top: auto;
}
.yt-loading, .yt-error {
  width: 100%;
  text-align: center;
  padding: 30px 0;
  font-size: 13px;
  color: #999;
  font-style: italic;
}
.yt-error a { color: var(--red); text-decoration: underline; }
.yt-view-all {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
}
.yt-view-all:hover { text-decoration: underline; }

/* ---- X POSTS FEED ---- */
/* X oembed wrapper — Twitter widget renders native blockquote cards inside here */
.x-posts-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.x-post-embed {
  border-bottom: 1px solid var(--border);
  padding: 4px 0 2px;
  overflow: hidden;
}
.x-post-embed:last-child { border-bottom: none; }
/* Scale the native tweet card to fit the sidebar width */
.x-post-embed .twitter-tweet {
  margin: 0 !important;
  max-width: 100% !important;
}
.x-post-embed iframe {
  max-width: 100% !important;
}

/* ---- EXCLUSIVE LIST ---- */
.exclusive-section { padding: 10px 10px 15px; }
.exclusive-list { padding: 0 5px; }
.exclusive-list li {
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}
.exclusive-list li:last-child { border-bottom: none; }
.exclusive-list a {
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.4;
  display: block;
  transition: color 0.15s;
}
.exclusive-list a:hover { color: var(--red); }

/* ---- SIDEBAR ---- */

/* Ezoic ad placeholder slots */
/* OTP ad-slot wrappers. IMPORTANT: the class is `otp-ad`, NOT `ezoic-ad` — Ezoic
   puts its OWN `ezoic-ad` class on the elements it injects, so styling `.ezoic-ad`
   here would fight Ezoic's own sizing/collapsing. We only style our placeholder
   wrappers. An empty wrapper is invisible (0 height) but keeps its container width
   so Ezoic can measure the slot; Ezoic sizes and collapses the ad itself. The
   overflow guard just stops a too-wide ad from blowing out the layout. */
.otp-ad { text-align: center; overflow: hidden; }
.otp-ad--banner  { margin: 4px 0 12px; }
.otp-ad--sidebar { margin: 0 0 12px; }
.otp-ad--infeed  { margin: 12px 0; }

/* Connatix outstream slots. Same collapse-until-fill convention as .otp-ad:
   no reserved height, the player expands when it loads. The mobile slot markup
   exists in the main column at every width but only displays below the
   .col-sidebar cutoff (901px); the loader at the foot of index.html boots only
   the player matching the viewport, so the hidden slot never loads anything. */
.cnx-slot { overflow: hidden; max-width: 100%; }
.cnx-slot--mobile { display: none; }
@media (max-width: 900px) {
  .cnx-slot--mobile { display: block; margin: 12px 0; }
}

.sidebar-newsletter {
  background: var(--white);
  padding: 16px 15px;
  border: 1px solid var(--border);
}
.sidebar-newsletter h3 {
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--black);
  margin-bottom: 12px;
}
.newsletter-form.sidebar {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.newsletter-form.sidebar input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--black);
  font-size: 13px;
  border-radius: 2px;
}
.newsletter-form.sidebar button {
  width: 100%;
  padding: 9px;
  background: var(--red);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.15s;
}
.newsletter-form.sidebar button:hover { background: var(--red-dark); }

/* Sidebar Exclusive Reporting */
.sidebar-exclusive {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 10px 12px 12px;
}
.sidebar-exclusive .header-wrap {
  margin-bottom: 4px;
}
.sidebar-exclusive .exclusive-list li {
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}
.sidebar-exclusive .exclusive-list li:last-child { border-bottom: none; }
.sidebar-exclusive .exclusive-list a {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.4;
  display: block;
  transition: color 0.15s;
  border-left: 3px solid transparent;
  padding-left: 7px;
}
.sidebar-exclusive .exclusive-list a:hover {
  color: var(--red);
  border-left-color: var(--red);
}

/* ---- FOOTER ---- */
.site-footer {
  background: var(--header-bg);
  padding: 25px 0 20px;
  margin-top: 10px;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.footer-logo { height: 38px; width: auto; display: block; margin: 0 auto; }
.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}
.footer-social a {
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.footer-social a:hover { opacity: 1; }
.footer-social img { width: 22px; height: 22px; object-fit: contain; }
.footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.03em;
}
.footer-copy a { color: rgba(255,255,255,0.5); }
.footer-copy a:hover { color: var(--white); }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .col-sidebar { display: none; }
  .content-row { gap: 0; }
}

/* ---- Mobile Featured Stories inline block ---- */
.mobile-featured-block {
  display: none;  /* hidden by default; shown only inside the mobile feed */
  background: #fafafa;
  border-top: 3px solid var(--red);
  border-bottom: 1px solid var(--border);
  margin: 16px 0;
  padding: 16px;
}
.mobile-featured-block .mobile-featured-header {
  border-bottom: 2px solid var(--red);
  margin-bottom: 12px;
  padding-bottom: 8px;
}
.mobile-featured-block .mobile-featured-header h2 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--black);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.mobile-featured-block .mobile-featured-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-featured-block .mobile-featured-list li {
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.mobile-featured-block .mobile-featured-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.mobile-featured-block .mobile-featured-list a {
  color: var(--black);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
  display: block;
}
.mobile-featured-block .mobile-featured-list a:hover {
  color: var(--red);
}
@media (max-width: 768px) {
  .mobile-featured-block { display: block; }
}

/* ================================================================
   SECONDARY PAGES — About, Research Locker
   ================================================================ */
.page-main {
  background: var(--white);
  padding: 40px 0 60px 0;
  min-height: calc(100vh - 200px);
}
.page-article {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}
.page-title {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 900;
  margin: 0 0 24px 0;
  line-height: 1.15;
  color: var(--black);
  border-bottom: 3px solid var(--red);
  padding-bottom: 16px;
}
.page-lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--dark);
  margin: 0 0 32px 0;
}
.page-roster {
  background: var(--bg);
  border-left: 3px solid var(--red);
  padding: 20px 24px;
  margin: 0 0 32px 0;
}
.page-roster p {
  margin: 0 0 10px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dark);
}
.page-roster p:last-child { margin-bottom: 0; }
.page-roster strong {
  color: var(--black);
  font-weight: 700;
}
.page-contact {
  font-size: 15px;
  line-height: 1.6;
  color: var(--dark);
  margin: 0;
}
.page-contact a {
  color: var(--red);
  text-decoration: none;
  font-weight: 700;
}
.page-contact a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .page-main { padding: 24px 0 40px 0; }
  .page-title { font-size: 32px; }
  .page-lede  { font-size: 16px; }
}

/* ---- Research Locker stats ---- */
.locker-stats {
  display: flex;
  justify-content: space-around;
  background: var(--bg);
  border-top: 3px solid var(--red);
  border-bottom: 1px solid var(--border);
  padding: 24px 16px;
  margin: 32px 0;
}
.locker-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.locker-stat__num {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
}
.locker-stat__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.locker-section-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  margin: 32px 0 16px 0;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--red);
  padding-bottom: 8px;
}

.locker-list {
  border-top: 1px solid var(--border);
}
.locker-doc {
  display: grid;
  grid-template-columns: 50px 160px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.locker-doc__num {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--mid-gray);
  text-align: center;
}
.locker-doc__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.locker-doc__date {
  font-size: 13px;
  color: var(--mid-gray);
  font-weight: 700;
}
.locker-doc__cat {
  font-size: 11px;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.locker-doc__title {
  color: var(--black);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.35;
}
.locker-doc__title:hover { color: var(--red); }

.locker-cta {
  margin: 40px 0 0 0;
  text-align: center;
}
.locker-cta__btn {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  padding: 14px 28px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 14px;
  transition: background 0.2s;
}
.locker-cta__btn:hover {
  background: var(--red-dark);
  color: var(--white);
}

@media (max-width: 600px) {
  .locker-stats { flex-direction: column; gap: 16px; }
  .locker-doc {
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
  }
  .locker-doc__meta {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    gap: 12px;
  }
  .locker-doc__title {
    grid-column: 2;
    grid-row: 2;
    font-size: 15px;
  }
  .locker-doc__num {
    grid-row: 1 / span 2;
  }
}

@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
  .mobile-trigger { display: block !important; }

  /* Mobile header row: hamburger (far left) · logo · LIVE button (far right).
     align-items:center so the moved hamburger and the LIVE button sit level with
     the logo; gap gives the hamburger a little air before the logo. */
  .header-inner { min-height: 56px; align-items: center; gap: 4px; }
  .header-logo { width: 160px; }
  .header-right { border-left: none; }
  .header-top-row {
    justify-content: space-between;
    padding: 8px 0 8px 10px;
  }
  .header-right-actions { margin-left: auto; }  /* float the LIVE button to the far right */

  .two-col-feed { flex-direction: column; }
  .single-column:first-child { border-right: none; border-bottom: 2px solid var(--border); }

  .yt-card { flex: 0 0 calc(50% - 6px); }
  .featured-post .featured-kicker h1 { font-size: 26px; }
  .featured-post h2 { font-size: 18px; }
  .section--tight .header-wrap h2 { font-size: 22px; }
}

@media (max-width: 480px) {
  .trending-bar { display: none; }
  .featured-post .featured-kicker h1 { font-size: 20px; }
  .featured-post h2 { font-size: 16px; }
  .clip.photo .photo-link img { width: 95px; height: 60px; }
  .yt-card { flex: 0 0 calc(100% - 0px); }
}

/* ---- Feed loading skeleton ---- */
.feed-loading {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: #bbb;
  font-style: italic;
  letter-spacing: 0.05em;
}

/* ---- Feed load failure (after retries) — never a dead spinner ---- */
.feed-error {
  padding: 28px 20px;
  text-align: center;
}
.feed-error__msg {
  margin: 0 0 14px;
  font-size: 14px;
  color: #666;
}
.feed-error__retry {
  display: inline-block;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: #c8102e;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.feed-error__retry:hover { background: #a00d24; }

/* ---- High importance headlines ---- */
.clip.high-importance .nt-link p,
.clip.high-importance .nt-link p:visited {
  color: #c8102e;
  font-weight: 700;
}
.clip.high-importance .nt-link:hover p {
  color: #a00d24;
}

/* ---- Category filter tabs ---- */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 4px;
  margin-bottom: 8px;
}
.cat-tab {
  background: #f0f0f0;
  border: none;
  border-radius: 3px;
  padding: 5px 12px;
  font-size: 12px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: #333;
  transition: background 0.15s, color 0.15s;
}
.cat-tab:hover {
  background: #1b1b1b;
  color: #fff;
}
.cat-tab.active {
  background: #c8102e;
  color: #fff;
}

/* ---- Breaking badge ---- */
.breaking-badge {
  display: inline-block;
  background: #c8102e;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  font-family: 'Lato', sans-serif;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 2px;
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.clip.breaking .nt-link p {
  color: #c8102e;
  font-weight: 700;
}
.clip.breaking .nt-link:hover p {
  color: #a00d24;
}

/* ---- Headline timestamp ---- */
.headline-time {
  display: inline-block;
  font-size: 10px;
  color: #999;
  font-weight: 400;
  margin-left: 7px;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---- Last updated in header ---- */
.last-updated {
  font-size: 11px;
  color: #aaa;
  font-family: 'Lato', sans-serif;
  margin-left: 12px;
  font-style: italic;
}

/* ---- Mobile optimization ---- */
@media (max-width: 768px) {
  .two-col-feed {
    flex-direction: column;
  }
  .single-column {
    width: 100% !important;
    padding: 0 !important;
  }
  .content-row {
    flex-direction: column;
  }
  .col-main, .col-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }
  .col-sidebar {
    margin-top: 20px;
  }
  .featured-post img {
    max-width: 100% !important;
  }
  .category-tabs {
    gap: 4px;
  }
  .cat-tab {
    font-size: 11px;
    padding: 4px 9px;
  }
  .yt-card {
    min-width: 240px !important;
  }
  .header-inner {
    padding: 0 10px;
  }
  .trending-bar {
    display: none;
  }
  .last-updated {
    display: none;
  }
}

/* ---- Sidebar YouTube ---- */
.sidebar-youtube { margin-bottom: 24px; }

.view-channel-link {
  font-size: 11px;
  color: #c8102e;
  text-decoration: none;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.view-channel-link:hover { text-decoration: underline; }

.yt-sidebar-loading,
.yt-sidebar-error {
  font-size: 12px;
  color: #999;
  padding: 10px 0;
  font-style: italic;
}
.yt-sidebar-error a { color: #c8102e; }

.yt-sidebar-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #efefef;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}
.yt-sidebar-item:last-child { border-bottom: none; }
.yt-sidebar-item:hover .yt-sidebar-title { color: #c8102e; }
.yt-sidebar-item--live { background: #fff8f8; margin: 0 -8px; padding: 10px 8px; border-radius: 3px; }

.yt-sidebar-thumb {
  position: relative;
  flex-shrink: 0;
  width: 85px;
  height: 150px;     /* 9:16 portrait — clips the letterbox bars on Shorts */
  border-radius: 2px;
  overflow: hidden;
  background: #000;
}
.yt-sidebar-thumb img {
  /* Scale image to fill height; horizontal overflow (the black bars on
     vertical Shorts thumbnails) gets clipped by overflow:hidden above. */
  width: auto;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
}
.yt-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.15s;
}
.yt-sidebar-item:hover .yt-thumb-play { opacity: 1; }

.yt-thumb-live {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: #c8102e;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  font-family: 'Lato', sans-serif;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 2px;
}

.yt-sidebar-info { flex: 1; min-width: 0; }

.yt-live-badge {
  display: inline-block;
  background: #c8102e;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  font-family: 'Lato', sans-serif;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 2px;
  margin-bottom: 4px;
}
.yt-upcoming-badge {
  display: inline-block;
  background: #1b1b1b;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  padding: 2px 6px;
  border-radius: 2px;
  margin-bottom: 4px;
}

.yt-sidebar-title {
  font-size: 14px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  color: #1b1b1b;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Live pulse dot in section header ---- */
.yt-live-pulse {
  color: #c8102e;
  animation: pulse 1.2s ease-in-out infinite;
  display: inline-block;
  margin-right: 5px;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ---- YouTube Lightbox ---- */
#ytLightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yt-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  cursor: pointer;
}
.yt-lightbox-box {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 900px;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.yt-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #1b1b1b;
}
.yt-lightbox-title {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 40px);
}
.yt-lightbox-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  flex-shrink: 0;
}
.yt-lightbox-close:hover { color: #c8102e; }
.yt-lightbox-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.yt-lightbox-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.yt-sidebar-item--clickable {
  cursor: pointer;
}
.yt-sidebar-item--clickable:hover .yt-sidebar-title { color: #c8102e; }

@media (max-width: 768px) {
  .yt-lightbox-box { width: 98%; }
}

/* ---- Lightbox footer ---- */
.yt-lightbox-footer {
  padding: 10px 14px;
  background: #1b1b1b;
  text-align: center;
}
.yt-lightbox-yt-link {
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.03em;
}
.yt-lightbox-yt-link:hover { color: #c8102e; }

/* ---- Ad slot inside YouTube sidebar ---- */
.yt-sidebar-ad {
  margin: 10px 0;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  padding: 8px 0;
}

/* ---- Live Now banner below nav ---- */
.live-now-bar {
  background: #c8102e;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.live-now-dot {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.08em;
  white-space: nowrap;
  animation: pulse 1.2s ease-in-out infinite;
}
.live-now-title {
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-now-title:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .live-now-bar { padding: 8px 12px; }
  .live-now-title { font-size: 12px; }
}

/* ---- Live Now bar (replaces trending bar) ---- */
.live-now-bar {
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.live-now-dot {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: #c8102e;
  letter-spacing: 0.08em;
  white-space: nowrap;
  animation: pulse 1.2s ease-in-out infinite;
}
.live-now-title {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 600px;
}
.live-now-title:hover { color: #c8102e; }

/* ---- Live label in trending bar style ---- */
.live-label {
  color: #ffffff !important;
  animation: pulse 1.2s ease-in-out infinite;
}

/* ---- Remove flame from live now title ---- */
.live-now-title::before {
  content: '' !important;
  display: none !important;
}
.live-now-title {
  display: flex !important;
  align-items: center !important;
}

/* ---- Featured headline (Top Story box) ---- */
.featured-headline p {
  font-family: 'Lora', serif;
  font-size: 26px;
  font-weight: 700;
  color: #1b1b1b;
  line-height: 1.35;
  text-align: center;
  padding: 20px;
}
.featured-headline:hover p {
  color: #c8102e;
}

/* Trending headline: fill the available trending-bar width so it can run
   under the nav links above (up to the search icon). Ellipsis if it
   still overflows on very long headlines or narrow desktop widths. */
.trending-bar .trending-nav { min-width: 0; }
.trending-bar .trending-exclusive {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ============================================================
   Trending ticker (marquee) — added with the multi-headline
   feature. The single-link .trending-exclusive rules above are
   retained for the LIVE NOW bar which still uses that markup.
   ============================================================ */
#trendingTicker,
#liveNowTicker {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
#trendingTicker .ticker-track,
#liveNowTicker .ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
  animation: ticker-scroll linear infinite;
  will-change: transform;
}
#trendingTicker:hover .ticker-track,
#liveNowTicker:hover .ticker-track {
  animation-play-state: paused;
}
#trendingTicker .ticker-item,
#liveNowTicker .ticker-item {
  flex-shrink: 0;
}
#trendingTicker .ticker-sep,
#liveNowTicker .ticker-sep {
  opacity: 0.5;
  flex-shrink: 0;
  padding: 0 0.25rem;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  #trendingTicker .ticker-track,
  #liveNowTicker .ticker-track { animation: none; }
}
/* header overflow containment — ticker width fix */
.header-right { min-width: 0; }
.header-top-row { min-width: 0; }
/* ticker overflow containment fix */
.trending-bar { min-width: 0; }
.trending-bar .trending-nav { min-width: 0; flex: 1 1 auto; }

/* Inkling nav link */
.top-nav a.nav-inkling,
.mobile-nav-list a.nav-inkling {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 16px;
}

/* --- Low-res base64 blur-up thumbnails (every 5th clip per column, Google-News style) --- */
.clip.photo.lqip-clip .photo-link {
  overflow: hidden;
  display: block;
  position: relative;          /* anchor for the wire credit */
}

/* Wire attribution overlay. Required by the Reuters licence to appear wherever
   the photo appears. Sits inside the image box so it costs no layout height and
   the slot geometry is identical to the retired unlicensed thumbnails. */
.clip.photo.lqip-clip .photo-link .photo-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 7px;
  line-height: 1.25;
  padding: 1px 2px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  text-align: right;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.clip.photo.lqip-clip .photo-link img.lqip-img {
  width: 80px;
  height: 52px;
  object-fit: cover;
  image-rendering: auto;      /* crisp small thumbnail, Google-News style (no blur) */
}
@media (max-width: 480px) {
  .clip.photo.lqip-clip .photo-link img.lqip-img {
    width: 66px;
    height: 44px;
  }
}

/* --- Instagram sidebar (right rail, below Latest Videos) --- */
.sidebar-instagram #sidebarInstagramFeed { margin-top: 6px; }
.ig-follow-cta {
  display: block;
  text-align: center;
  padding: 12px;
  border: 1px solid #ececec;
  border-radius: 6px;
  color: #c8102e;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  background: linear-gradient(135deg, #fdf2f4, #ffffff);
}
.ig-follow-cta:hover { background: #c8102e; color: #fff; border-color: #c8102e; }
/* live-feed grid (populated once an Instagram source is connected) */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ig-grid a { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 3px; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   MOBILE "LIVE NOW" BUTTON + SHEET
   The button sits in the header actions but only appears on
   mobile (<=768px) AND only when JS flags a live stream
   (.is-live). Tapping it opens .live-sheet — a full-screen list
   of the streams live right now. Desktop keeps the Live Now bar
   and the sidebar, so the button stays hidden there regardless.
   ============================================================ */
.live-mobile-btn {
  display: none;                 /* desktop, and mobile with nothing live */
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: 4px;
  padding: 7px 10px;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(200,16,46,0.7);
  animation: live-btn-glow 1.8s infinite;
}
.live-mobile-btn__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--white);
  animation: live-btn-blink 1.4s ease-in-out infinite;
}
.live-mobile-btn__count {
  display: none;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: var(--white); color: var(--red);
  font-size: 10px; font-weight: 900; line-height: 16px; text-align: center;
}
.live-mobile-btn.has-multiple .live-mobile-btn__count { display: inline-block; }
@keyframes live-btn-glow {
  0%   { box-shadow: 0 0 0 0 rgba(200,16,46,0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(200,16,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); }
}
@keyframes live-btn-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.live-sheet { display: none; position: fixed; inset: 0; z-index: 1002; }
.live-sheet.open { display: block; }
.live-sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.live-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  max-height: 85vh;
  background: #141414;
  border-top: 3px solid var(--red);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.5);
  animation: live-sheet-up 0.22s ease;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@keyframes live-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.live-sheet__head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #2a2a2a;
}
.live-sheet__title {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-family: 'Lato', sans-serif; font-size: 15px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--white);
}
.live-sheet__pulse {
  width: 10px; height: 10px; border-radius: 50%; background: var(--red);
  animation: live-btn-blink 1.4s ease-in-out infinite;
}
.live-sheet__close {
  background: none; border: none; cursor: pointer;
  color: var(--white); font-size: 20px; line-height: 1; padding: 4px 8px;
}
.live-sheet__list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px;
}
/* Reuse the sidebar's live-item look, but as white cards stacked on the dark sheet. */
.live-sheet__list .yt-sidebar-item--live { margin: 0 0 8px; padding: 10px; border-bottom: none; }
.live-sheet__list .yt-sidebar-item--live:last-child { margin-bottom: 0; }
.live-sheet__list .yt-thumb-play { opacity: 1; background: rgba(0,0,0,0.2); } /* always show "tap to watch" (no hover on touch) */

@media (max-width: 768px) {
  .live-mobile-btn.is-live { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .live-mobile-btn, .live-mobile-btn__dot, .live-sheet__pulse, .live-sheet__panel { animation: none; }
}