/* ============================================================
   NNEWS WIRE — main stylesheet
   Black & white, white background, thin rules, compact headlines.
   No heavy libraries. Mobile-first responsive, no horizontal scroll.
   ============================================================ */
:root{
  --ink:#111111; --paper:#ffffff; --grey:#666666; --faint:#999999;
  --line:#111111; --hairline:#dddddd; --red:#e00000; --green:#0a7a2f;
  --max:1180px; --radius:6px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ line-height:1.2; margin:0 0 .5em; }
p{ margin:0 0 1em; overflow-wrap:break-word; }
.site-main{ max-width:var(--max); margin:0 auto; padding:0 16px 32px; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Header: top bar ---------- */
.site-header{ border-bottom:2px solid var(--line); }
.topbar{
  max-width:var(--max); margin:0 auto; padding:14px 16px 10px;
  display:grid; grid-template-columns:1fr; align-items:center; gap:12px;
  text-align:center;
}
.topbar-centre{ text-align:center; min-width:0; }
/* N News logo: bold black square with a white "N", then "NEWS" in a
   strong newspaper serif wordmark. Pure HTML/CSS, no image. */
.site-logo{ display:inline-flex; align-items:center; gap:10px; line-height:1; text-decoration:none; }
.site-logo:hover{ text-decoration:none; }
.site-logo-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.08em; height:1.08em; background:#111; color:#fff;
  font-family:Georgia,'Times New Roman',serif; font-weight:900;
  font-size:clamp(28px,5vw,44px); line-height:1; flex:0 0 auto;
}
.site-logo-word{
  font-family:Georgia,'Times New Roman',serif; font-weight:900;
  font-size:clamp(28px,5vw,44px); letter-spacing:.06em; line-height:1;
  text-transform:uppercase; color:#111;
}
body.night .site-logo-word{ color:#fff; }
.site-tagline{ margin:4px 0 0; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); }
.custom-logo{ max-height:64px; width:auto; margin:0 auto; }

/* ---------- Masthead row below logo ---------- */
.masthead{
  max-width:var(--max); margin:0 auto; padding:8px 16px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 18px;
  border-top:1px solid var(--hairline); font-size:13px;
}
.masthead-item{ white-space:nowrap; }
.masthead-label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); }
.masthead-timer .masthead-clock{ font-variant-numeric:tabular-nums; font-weight:700; }
.day-night-toggle{
  cursor:pointer; background:#111; color:#fff; border:1px solid #111; border-radius:999px;
  padding:4px 12px; font-size:13px; line-height:1.4;
}
.day-night-toggle .dn-sun{ display:none; }
body.night .day-night-toggle .dn-moon{ display:none; }
body.night .day-night-toggle .dn-sun{ display:inline; }
.masthead-search .search-form{ display:flex; gap:4px; }
.masthead-search .search-field{ border:1px solid var(--line); border-radius:3px; padding:4px 8px; font-size:13px; width:150px; background:#fff; color:#111; }
.masthead-search .search-submit{ border:1px solid var(--line); background:#111; color:#fff; border-radius:3px; padding:4px 10px; cursor:pointer; font-size:13px; }
.masthead-cats{ display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:center; }
.masthead-cats a{ font-size:13px; font-weight:600; }
.masthead-cats a:hover{ text-decoration:underline; }

/* ---------- Risk Alert (blinks ALL the time, red glow) ---------- */
@keyframes risk-blink{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(224,0,0,.55), 0 0 12px 2px rgba(224,0,0,.45); }
  50%{ opacity:.55; box-shadow:0 0 0 6px rgba(224,0,0,0), 0 0 4px 0 rgba(224,0,0,.15); }
}
.risk-alert{
  display:inline-block; background:var(--red); color:#fff !important; font-weight:800;
  border-radius:4px; animation:risk-blink 1.1s ease-in-out infinite; text-transform:uppercase;
}
.risk-alert:hover{ text-decoration:none; }
.risk-alert-big{ font-size:18px; padding:10px 22px; letter-spacing:.06em; }
.risk-alert-nav{ font-size:11px; padding:3px 8px; letter-spacing:.04em; }

/* ---------- Mobile category bar (mobile ONLY) ---------- */
.mobile-catbar{ display:none; }
.mcb-popup, .mcb-popup-backdrop{ display:none; }

@media (max-width:768px){
  .masthead-cats{ display:none; } /* desktop nav hidden on mobile; mobile bar takes over */
  .topbar{ grid-template-columns:1fr; text-align:center; padding:10px 12px 6px; }
  .masthead{ flex-direction:column; gap:6px; padding:8px 12px; }
  .masthead-search .search-field{ width:170px; }

  /* Mobile category bar: centred middle row */
  .mobile-catbar{
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:8px 12px; border-top:1px solid var(--hairline); background:#fff;
    position:sticky; top:0; z-index:60;
  }
  .mcb-home{ font-weight:800; font-size:14px; flex:0 0 auto; }
  .mcb-slider{ flex:0 1 auto; min-width:0; overflow:hidden; text-align:center; position:relative; height:22px; }
  .mcb-slide{
    display:none; font-size:14px; font-weight:600; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; max-width:38vw;
  }
  .mcb-slide.is-active{ display:inline-block; animation:mcb-fade .4s ease; }
  @keyframes mcb-fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
  @keyframes seeall-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
  .mcb-seeall{
    flex:0 0 auto; cursor:pointer; border:1px solid var(--green); background:var(--green); color:#fff;
    font-size:13px; font-weight:700; border-radius:999px; padding:5px 12px;
    animation:seeall-blink 1.2s ease-in-out infinite; white-space:nowrap;
  }

  /* Popup: centred, max-width 340px, never wider than screen - 32px, max-height 76vh,
     zoom-in from the middle: scale .82 -> 1.02 -> 1 */
  .mcb-popup-backdrop{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:90;
  }
  .mcb-popup-backdrop[hidden]{ display:none; }
  .mcb-popup{
    display:block; position:fixed; z-index:91; left:50%; top:50%;
    width:min(340px, calc(100vw - 32px)); max-height:76vh; overflow-y:auto;
    transform:translate(-50%,-50%); background:#fff; color:#111;
    border:1px solid #111; border-radius:10px; padding:20px 18px 14px;
    box-shadow:0 12px 40px rgba(0,0,0,.35);
  }
  .mcb-popup[hidden]{ display:none; }
  .mcb-popup.is-open{ animation:mcb-zoom .28s ease forwards; }
  @keyframes mcb-zoom{
    0%{ transform:translate(-50%,-50%) scale(.82); opacity:0; }
    70%{ transform:translate(-50%,-50%) scale(1.02); opacity:1; }
    100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  }
  .mcb-popup-close{
    position:absolute; top:8px; right:10px; border:0; background:none; font-size:26px;
    line-height:1; cursor:pointer; color:#111; padding:4px 8px;
  }
  .mcb-popup-title{ font-size:18px; margin:0 0 10px; padding-right:32px; }
  .mcb-popup-list{ list-style:none; margin:0; padding:0; }
  .mcb-popup-list a{ display:block; padding:10px 4px; border-top:1px solid var(--hairline); font-weight:600; font-size:15px; }
}

/* ---------- Section titles ---------- */
.section-title{
  font-size:18px; font-weight:900; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:2px solid var(--line); padding-bottom:6px; margin:0 0 14px;
}
.section-title a:hover{ text-decoration:none; }
.section-more, .section-more-link{ font-size:13px; font-weight:700; }

/* ---------- Hero: 2 lead cards + Top Stories right ---------- */
.hero{ display:grid; grid-template-columns:1fr 340px; gap:24px; padding:20px 0 8px; }
.hero-leads{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.hero-card a{ display:block; }
.hero-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; border:1px solid var(--hairline); }
.hero-kicker{ display:inline-block; margin-top:8px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:#111; color:#fff; padding:2px 8px; }
.hero-card h2{ font-size:19px; margin:8px 0 6px; }
.hero-excerpt{ font-size:14px; color:#333; margin:0 0 6px; }
.hero-card time{ font-size:12px; color:var(--grey); }
.hero-top{ border-left:1px solid var(--hairline); padding-left:20px; min-width:0; }
.top-list{ list-style:none; margin:0; padding:0; counter-reset:top; }
.top-list li{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--hairline); font-size:14px; line-height:1.35; }
.top-list li:last-child{ border-bottom:0; }
.top-num{ font-weight:900; font-size:15px; color:var(--faint); flex:0 0 20px; }

/* ---------- Today Trending ticker: 120s slow loop, never stops ---------- */
.ticker-wrap{
  display:flex; align-items:stretch; gap:0; margin:14px 0 4px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden;
}
.ticker-label{
  flex:0 0 auto; background:#111; color:#fff; font-weight:800; text-transform:uppercase;
  font-size:13px; letter-spacing:.06em; padding:8px 12px; display:flex; align-items:center;
}
.ticker-viewport{ flex:1 1 auto; overflow:hidden; min-width:0; }
.ticker-track{
  display:inline-flex; white-space:nowrap; padding:8px 0;
  animation:ticker-scroll 120s linear infinite; will-change:transform;
}
.ticker-track:hover{ animation-play-state:running; } /* never stops, even on hover */
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker-item{ font-size:14.5px; padding:0 18px; border-right:1px solid var(--hairline); }
.ticker-item a{ font-weight:600; }

/* ---------- World Risks spotlight ---------- */
.risks-spotlight{ margin:22px 0 8px; padding:16px; border:2px solid var(--red); border-radius:var(--radius); }
.risks-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.risks-title{ border-bottom:0; margin:0; padding-bottom:0; color:var(--red); }

/* ---------- Category sections + cards ---------- */
.cat-section{ padding:20px 0 6px; }
.cat-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.cat-head .section-title{ flex:1 1 auto; }
.card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.post-card{
  border:1px dashed #999; /* small dash + gap, lightly rounded, square */
  border-radius:var(--radius); overflow:hidden; background:#fff; min-width:0;
}
.post-card a{ display:block; height:100%; }
.post-card a:hover{ text-decoration:none; }
.post-card a:hover .card-title{ text-decoration:underline; }
.card-thumb img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.card-body{ display:block; padding:10px 12px 12px; }
.card-cat{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); }
.card-title{ font-size:15px; margin:4px 0 6px; }
.card-meta{ font-size:12px; color:var(--grey); }

/* Lazy-load reveal on scroll */
.lazy-section{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.lazy-section.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .lazy-section{ opacity:1; transform:none; transition:none; }
  .ticker-track{ animation-duration:240s; }
}

/* ---------- Archive / category page ---------- */
.archive-head{ padding:20px 0 4px; border-bottom:2px solid var(--line); margin-bottom:18px; }
.archive-title{ font-size:30px; font-weight:900; text-transform:uppercase; margin:0; }
.archive-desc{ color:#333; font-size:14px; margin-top:6px; }
.archive-grid{ margin-top:4px; }
.nnews-pagination{ margin:24px 0; text-align:center; }
.nnews-pagination ul{ list-style:none; margin:0; padding:0; display:inline-flex; flex-wrap:wrap; gap:6px; }
.nnews-pagination a, .nnews-pagination .current{
  display:inline-block; border:1px solid var(--line); padding:6px 12px; font-size:14px; font-weight:600; border-radius:3px;
}
.nnews-pagination .current{ background:#111; color:#fff; }
.no-posts{ padding:24px 0; color:var(--grey); }

/* ---------- Single post ---------- */
.single-wrap{ display:grid; grid-template-columns:1fr 300px; gap:28px; padding-top:20px; align-items:start; }
.single-cat{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:0 0 8px; }
.single-title{ font-size:32px; font-weight:900; }
.single-meta{ font-size:13px; color:var(--grey); border-bottom:1px solid var(--hairline); padding-bottom:12px; }
.single-thumb{ margin:0 0 18px; }
.single-thumb img{ width:100%; }
.single-content{ font-size:17px; line-height:1.7; overflow-wrap:break-word; }
.single-content img{ margin:12px 0; }
.single-tags{ font-size:13px; color:var(--grey); }
.related{ margin-top:28px; }
.comments-wrap{ margin-top:28px; border-top:1px solid var(--hairline); padding-top:16px; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-body{ border:1px solid var(--hairline); border-radius:var(--radius); padding:12px; margin-bottom:12px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{
  width:100%; border:1px solid var(--line); border-radius:3px; padding:8px; font:inherit; font-size:14px;
}
.comment-form .submit{ background:#111; color:#fff; border:1px solid #111; border-radius:3px; padding:8px 18px; cursor:pointer; font-size:14px; }
.site-sidebar{ min-width:0; }
.site-sidebar .widget{ border:1px solid var(--hairline); border-radius:var(--radius); padding:14px; margin-bottom:16px; }
.widget-title{ font-size:15px; text-transform:uppercase; letter-spacing:.05em; border-bottom:2px solid var(--line); padding-bottom:6px; }

/* ---------- Pages ---------- */
.page-wrap{ max-width:820px; margin:0 auto; padding:24px 16px 40px; }
.page-title{ font-size:30px; font-weight:900; }
.page-content{ font-size:16px; line-height:1.7; }

/* ---------- Footer gallery + footer ---------- */
.footer-gallery{ max-width:var(--max); margin:0 auto; padding:24px 16px 8px; border-top:2px solid var(--line); }
.footer-gallery-title{ font-size:16px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; }
.footer-gallery-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.footer-gallery-item{ position:relative; display:block; border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; }
.footer-gallery-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.footer-gallery-fallback{ display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; background:#eee; font-weight:700; font-size:13px; text-align:center; padding:8px; }
.footer-gallery-cat{
  position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.75); color:#fff;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:4px 6px;
}
.site-footer{ border-top:1px solid var(--hairline); margin-top:20px; padding:20px 16px 28px; text-align:center; font-size:13px; color:var(--grey); }
.footer-nav a{ font-weight:600; margin:0 6px; }
.footer-sep{ color:var(--faint); }
.copyright{ margin:10px 0 0; }

/* ---------- Ads (hidden when empty — slots print nothing) ---------- */
.nnews-ad{ text-align:center; margin:16px auto; max-width:100%; overflow:hidden; }
.nnews-ad ins{ background:transparent; }
.nnews-ad-sticky_top{ position:sticky; top:0; z-index:70; background:#fff; margin:0; border-bottom:1px solid var(--hairline); }
.nnews-ad-sticky_bottom{ position:fixed; left:0; right:0; bottom:0; z-index:70; background:#fff; margin:0; border-top:1px solid var(--hairline); padding:6px 0; }
.nnews-slide-ad{
  position:fixed; right:14px; bottom:14px; z-index:80; width:300px; max-width:calc(100vw - 28px);
  background:#fff; border:1px solid #111; border-radius:8px; padding:10px; box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.nnews-timer-ad{
  position:fixed; right:14px; bottom:14px; z-index:81; width:320px; max-width:calc(100vw - 28px);
  background:#fff; border:1px solid #111; border-radius:8px; padding:10px; box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.nnews-ad-close{
  position:absolute; top:2px; right:6px; border:0; background:none; font-size:22px; cursor:pointer; line-height:1; z-index:2;
}

/* ---------- Night mode ---------- */
body.night{ background:#111; color:#eee; --ink:#eee; --paper:#111; --grey:#bbb; --hairline:#333; }
body.night a{ color:#eee; }
body.night .site-header, body.night .ticker-wrap, body.night .footer-gallery{ border-color:#eee; }
body.night .post-card, body.night .site-sidebar .widget, body.night .comment-body{ background:#1a1a1a; }
body.night .day-night-toggle{ background:#eee; color:#111; border-color:#eee; }
body.night .masthead-search .search-field{ background:#1a1a1a; color:#eee; border-color:#eee; }
body.night .masthead-search .search-submit{ background:#eee; color:#111; border-color:#eee; }
body.night .hero-excerpt{ color:#ccc; }
body.night .mcb-popup{ background:#1a1a1a; color:#eee; border-color:#eee; }
body.night .mcb-popup-close{ color:#eee; }
body.night .mobile-catbar{ background:#111; }
body.night .nnews-slide-ad, body.night .nnews-timer-ad{ background:#1a1a1a; border-color:#eee; }
body.night .nnews-ad-close{ color:#eee; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .card-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-gallery-grid{ grid-template-columns:repeat(4,1fr); }
  .hero{ grid-template-columns:1fr 300px; }
}
@media (max-width:768px){
  .hero{ grid-template-columns:1fr; gap:16px; }
  .hero-leads{ grid-template-columns:1fr; } /* 2 lead cards stacked on mobile */
  .hero-top{ border-left:0; padding-left:0; border-top:1px solid var(--hairline); padding-top:8px; }
  .ticker-label{ font-size:9px; padding:8px 8px; } /* label much smaller on mobile */
  .ticker-item{ font-size:13.5px; padding:0 12px; } /* ticker text 13.5px mobile */
  .card-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .footer-gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .single-wrap{ grid-template-columns:1fr; }
  .single-title{ font-size:25px; }
  .archive-title, .page-title{ font-size:24px; }
  .risk-alert-big{ font-size:15px; padding:8px 16px; }
  .risks-spotlight{ padding:12px; }
  .site-main{ padding:0 12px 24px; }
}
@media (max-width:420px){
  .card-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .card-title{ font-size:13px; }
  .footer-gallery-grid{ grid-template-columns:repeat(2,1fr); }
}

.related-posts{margin:24px 0}
.related-posts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.related-post-card{border:1px dashed #999;border-radius:6px;overflow:hidden;background:#fff}
.related-post-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.related-post-card h3{font-size:14px;line-height:1.35;padding:8px 10px;margin:0}
@media (max-width:480px){
	.related-posts-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
	.related-post-card h3{font-size:12px;padding:6px}
}

/* ============================================================
   Homepage sliders — Part 11 (appended; no existing rule changed)
   Left: Latest posts slider, horizontal (transform translateX
   + opacity, 500ms ease). Right: Top Stories slider, vertical
   bottom-to-top (transform translateY + opacity, 500ms ease).
   Viewports hide overflow; the track holds every slide in the DOM,
   so the viewport height is set by the tallest slide and the page
   never jumps while slides change.
   ============================================================ */
.hero-slider {
  display: block;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.hero-track {
  display: flex;
  position: relative;
  transition: transform 500ms ease;
  will-change: transform;
}
.hero-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  min-width: 0;
  opacity: .25;
  transition: opacity 500ms ease;
}
.hero-slide.is-active { opacity: 1; }
.top-slider {
  display: block;
  overflow: hidden;
  position: relative;
  min-width: 0;
}
.top-track {
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 500ms ease;
  will-change: transform;
}
.top-slide {
  flex: 0 0 auto;
  min-width: 0;
  opacity: .25;
  transition: opacity 500ms ease;
}
.top-slide.is-active { opacity: 1; }
@media (max-width: 1024px) {
  .hero-slide { gap: 12px; }
}
@media (max-width: 768px) {
  .hero-slide { grid-template-columns: 1fr; gap: 16px; }
  .hero-slider, .top-slider { overflow: hidden; }
}
/* Top Stories continuous scroller (revised Part 11): the track now holds a single/* ============================================================
   Mobile article-page horizontal-overflow fix (Part 11 follow-up)
   Root cause: the article layout is a CSS grid (.single-wrap:
   1fr 300px; 1fr on <=768px) whose article item (.single-post)
   and content block (.single-content) had no min-width: 0. A grid
   item's default min-width: auto lets a long unbreakable run in
   the article body (the long source URLs in the Sources list, any
   long URL or word, an embedded iframe or a wide table) size the
   1fr track wider than the phone viewport. The body-only
   overflow-x: hidden did not stop phones widening the page, so
   the widened column was clipped on the right: titles cut off,
   paragraphs spilling past the viewport. These rules constrain
   the whole chain and let long content wrap. Desktop layout is
   unchanged.
   ============================================================ */

/* 1. Box model: include pseudo-elements so padding and borders
   never push an element wider than its container. */
*, *::before, *::after { box-sizing: border-box; }

/* 2. Safety net only (after the root-cause fix in 3): the page may
   never be wider than the device viewport. */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }

/* 3. Article chain: every container in the single-post layout must
   be able to shrink below its longest unbreakable content. */
.single-wrap,
.single-post,
.single-content,
.single-head,
.single-foot,
.site-sidebar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* 4. Headings and paragraphs: never wider than the article, and
   always allowed to wrap (headings had no wrapping protection). */
.single-title,
.single-content h1,
.single-content h2,
.single-content h3,
.single-content p,
.single-content a,
.single-meta,
.single-tags {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

/* 5. Media in article content: images, video and embeds never
   exceed the article width. */
.single-content img,
.single-content video,
.single-content iframe,
.single-thumb img {
  max-width: 100%;
}
.single-content img,
.single-thumb img {
  height: auto;
}
.single-content figure {
  max-width: 100%;
}

/* 6. Tables and code: never widen the page. A table scrolls inside
   its wrapper; a code block scrolls inside itself. */
.single-content table { max-width: 100%; }
.single-content figure.wp-block-table { max-width: 100%; overflow-x: auto; }
.single-content pre { max-width: 100%; overflow-x: auto; }
.single-content code { overflow-wrap: break-word; }

/* 7. Related articles: stay inside the article. The 3-column
   one-row mobile layout is kept unchanged. */
.related-posts,
.related-posts-grid {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.related-post-card { min-width: 0; }
.related-post-card h3 { overflow-wrap: break-word; }

/* 8. Top Stories scroller: the viewport height glides to the
   incoming window (wire.js sets it on every step), so exactly
   six items are visible at rest. */
.top-slider { transition: height 500ms ease; }

   /* <ol class="top-list"> of 10 items; it is a plain block so JS translateY moves the
   whole list, one item at a time, with the 500ms ease from the rule above. */
.top-track { display: block; }