/* ============================================================
   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); }

/* ---- 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;
  /* Right padding must match .trending-bar's (0 15px) — they are siblings in
     .header-right, and the ticker is the visual edge the eye lines up against.
     With 0 here the last item in the row (SUBSCRIBE) hung 15px past the red
     bar below it and read as the header bleeding over. */
  padding: 8px 15px;
  gap: 15px;
  flex: 1;
}

/* Top nav */
.top-nav ul {
  display: flex;
  gap: 0;
  align-items: center;
}
.top-nav a {
  display: block;
  /* 10px, not 14px. The header content area is capped at --max-width 1200px, so
     the top row's budget is FIXED and does not grow with the window: 1170 content
     - 235 logo - 1 border - 30 row padding = 904px for nav + newsletter. Measured
     from Lato 700 metrics, the six nav labels at 14px padding need 688px, leaving
     216px for a newsletter block that needs 242px — the row overflowed by 42px
     and still overflowed by 2px with the input squeezed to its 110px floor, which
     is why narrowing the input alone never fixed it. At 10px the nav is 640px and
     the row fits at the input's full 150px. The input's 150->110 shrink range then
     covers the residual uncertainty in the serif "Inkling" label, whose font is
     OS-dependent and cannot be measured here. */
  padding: 6px 10px;
  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); }

.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: 1;   /* see the input sizing note below — this is what lets the
                       top row absorb slack instead of overflowing */
  min-width: 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); }

/* Header newsletter sizing. The top row (logo · nav · form · social icons) has
   no elastic element of its own — the nav links are white-space:nowrap and the
   icons are fixed-size — so a hard-coded input width has nowhere to give and the
   row spills past the right edge, pushing the social icons out of view. Making
   the input the item that absorbs the slack keeps the row on one line: it holds
   150px when there's room and squeezes to 110px (still wide enough for the
   "Email address" placeholder) before anything else is displaced. flex-shrink on
   the wrapper (above) is what lets that squeeze reach the input at all. Scoped
   to .header-newsletter so the mobile drawer and sidebar forms, which are
   full-width in their own containers, are untouched. */
.header-newsletter .newsletter-form.inline {
  min-width: 0;
}
.header-newsletter .newsletter-form input[type="email"] {
  width: auto;
  flex: 0 1 150px;
  min-width: 110px;
}

/* 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; }

/* Header social icons are hidden (2026-07-30, owner call). The top row already
   carries six nav items plus the subscribe form, and the icons were crowding the
   right edge. The same links live in .footer-social on every page, so nothing
   becomes unreachable. The markup is left in place — this is a display decision,
   and deleting it from five page headers would be harder to reverse. Specificity
   (0,2,0) is deliberate: it has to beat .hidden-mobile's display:flex. */
.main-header .social-nav { display: none; }

/* 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);
}
/* ---- 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;
  /* Stretch to the full row height even though .content-row is align-items:
     flex-start (2026-07-30). A sticky element can only travel inside its
     containing block, and this column's own content is far shorter than a
     60-headline main column — so Ezoic's Sticky Sidebar unit (107) ran out of
     column almost immediately and never stuck. Stretching gives it the main
     column's height to travel through.
     Visually inert: the children keep their natural heights and stack from the
     top, and this column has no background or border, so the extra height is
     empty space nobody can see. Verified no sidebar child uses flex-grow or
     height:100%, which would otherwise stretch to fill it. */
  align-self: stretch;
  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 is NO LONGER global (2026-07-30). Ezoic's docs say not to
   style the placeholder div itself, and on a sidebar slot the clip is actively
   harmful: `position: sticky` can only travel inside its containing block, so a
   clipped, ad-height wrapper pins Ezoic's Sticky Sidebar unit in place and it
   behaves like a static div. Telemetry: 107 FILLS on 95.8% of desktop pageviews
   but only 7.0% of readers ever have it in view, while sidebar-top 903 reaches
   100% — the shape of a sticky unit that never sticks.
   It is deliberately KEPT on banner + in-feed below: those sit in the 850px
   content column and the fluid/native creative on 101 lays out wider than that
   on some impressions. Ezoic confirmed they will NOT constrain a fluid creative
   to our width, so removing the clip there trades a cut-off ad for a
   horizontally-scrolling page. Drop it once {id:101, fluid:false} is live. */
/* Reserve a modest leaderboard height so the slot doesn't shift content when
   Ezoic fills it (Cumulative Layout Shift). A no-fill leaves a small blank band. */
.otp-ad--banner  { margin: 4px 0 12px; min-height: 90px; overflow: hidden; }
.otp-ad--sidebar { margin: 0 0 12px; }
/* Reserve the standard 300x250 in-feed rectangle height so an in-feed ad does
   not shove the headlines below it down when Ezoic fills the slot (this was the
   #post-list / ezoic-ad-wrapper CLS offender). Same reserve-to-kill-CLS tradeoff
   as the banner/cnx above: a no-fill leaves a ~250px blank band. In-feed slots
   are injected ONLY when Ezoic is enabled (ezPlan bails off-domain), so the
   preview/pages.dev feed is unaffected. Pairs with Ezoic's native reserved-space
   setting; dial down here if no-fill gaps read too large. */
.otp-ad--infeed  { margin: 12px 0; min-height: 250px; overflow: hidden; }

/* 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. */
/* Reserve outstream-player height so the Connatix player doesn't shove content
   down when it loads mid-scroll (the video is the worst CLS offender). TRADEOFF:
   on a no-fill this leaves a ~180px blank band — dial down / scope to desktop if
   the mobile gap looks bad. */
.cnx-slot { overflow: hidden; max-width: 100%; min-height: 180px; }
.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; }
/* Site nav in the footer. This is for crawlers as much as for readers: the
   homepage carries ~79 outbound publisher links against a handful of internal
   ones, so Google had almost no page graph for offthepress.com and fell back to
   the legacy WordPress corpus when building sitelinks for the brand result.
   /whats-new/, /newsletter-signup/ and the /games/ hub were all in sitemap.xml
   with zero inbound links from anywhere on the site until this shipped. */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  max-width: 760px;
}
.footer-nav a {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.footer-nav a:hover { color: var(--red); }

.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: 17px;
  line-height: 1.65;
  color: var(--dark);
  margin: 0 0 32px 0;
  /* Reflow the closing lines so the paragraph never ends on a stranded word. */
  text-wrap: pretty;
}
.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; }

/* ---- Privacy Policy body ----
   Scoped to .policy-body (privacy-policy/index.html only), NOT .page-article,
   so About / What's New / newsletter-signup are provably untouched. Fixes two
   things the base sheet does not provide and that page now needs:

   1. The global reset is `ul { list-style: none }` (line ~44), which would
      render the service-provider list as an unindented wall of text.
   2. The global `a { color: inherit; text-decoration: none }` makes links
      visually identical to body copy. On this page the links ARE the opt-out
      mechanisms readers are instructed to use, so an invisible link is a
      compliance problem, not just a styling nit. */
/* GPC status line. California §7025(c)(6), in force since 2026-01-01, requires
   a business that honors the signal to visibly display that it has. Styled as a
   callout rather than body copy so it reads as a live statement about THIS
   visit instead of more policy prose. Green rule when the signal is present,
   because that is the state a reader is looking to confirm. */
.policy-body .gpc-status {
  border-left: 4px solid var(--red);
  background: var(--bg);
  padding: 12px 16px;
  margin: 0 0 16px 0;
  font-weight: 700;
}
.policy-body .gpc-status.gpc-on { border-left-color: #1a7f37; }

.policy-body ul {
  list-style: disc;
  padding-left: 24px;
  margin: 0 0 16px 0;
}
.policy-body li {
  margin: 0 0 8px 0;
  line-height: 1.6;
}
.policy-body a {
  color: var(--red);
  text-decoration: underline;
}
.policy-body a:hover { text-decoration: none; }

@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;
}
/* Scroll lock for the YouTube lightbox, applied to <html> and NOT to body.
   Ezoic overwrites body's inline style attribute with its own
   "overflow-y: visible !important" after DOMContentLoaded, which beats both the
   inline lock main.js sets and any body rule in this file (inline !important
   outranks an author stylesheet). Ezoic does not touch <html>, and per CSS
   overflow propagation a non-visible overflow on <html> applies straight to the
   viewport, so body's value stops mattering. Without this, a ?live= deep link
   (which opens the lightbox on DOMContentLoaded, before Ezoic lands) leaves the
   page scrolling behind the modal. Measured 2026-07-31. */
html.yt-lightbox-open {
  overflow: hidden !important;
}
.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
   the full width under the nav links above. 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; }
}