/* Mavion News 2026 — unified public newsroom layer */
:root {
  --mv-ink: #07162f;
  --mv-ink-2: #0a1d3c;
  --mv-blue: #138bd1;
  --mv-electric: #16b9ee;
  --mv-paper: #f5f7fb;
  --mv-rule: rgba(224,234,249,.18);
  --mv-muted: #aab8cf;
  --mv-wrap: 1240px;
}

/* Lightweight cross-document navigation. Modern Chromium/Safari animate the
   root snapshot; unsupported browsers simply navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mv-page-out .12s ease-out both; }
::view-transition-new(root) { animation: mv-page-in .18s ease-out both; }
@keyframes mv-page-out { to { opacity: 0; transform: translateY(-3px); } }
@keyframes mv-page-in { from { opacity: 0; transform: translateY(5px); } }

/* The home screen is deliberately still: no scroll-reveal observers, looping
   dots, tickers, shimmers or decorative motion competing with the stories. */
body.home-broadcast *,
body.home-broadcast *::before,
body.home-broadcast *::after { animation: none !important; }
body.home-broadcast .reveal,
body.home-broadcast .reveal.in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html { background: var(--mv-ink); }
body {
  background: var(--mv-ink) !important;
  color: #f7f9fd;
  font-family: 'BBC Reith Sans','TT Norms Pro',Arial,Helvetica,sans-serif !important;
}
body::before, body::after, .backdrop::before, .backdrop::after { background: none !important; }

.wrap, .mast__inner { max-width: var(--mv-wrap) !important; }
.mast {
  background: var(--mv-ink) !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
}
.mast.is-scrolled {
  background: rgba(7,22,47,.96) !important;
  border-bottom-color: var(--mv-rule) !important;
  backdrop-filter: blur(16px) !important;
}
.mast__inner {
  height: 76px !important;
  display: grid !important;
  grid-template-columns: minmax(170px,1fr) auto minmax(170px,1fr);
  align-items: center;
  gap: clamp(14px,2vw,28px) !important;
}
.mast__inner > .brand { justify-self: start; }
.brand img { width: 58px !important; height: 36px !important; border-radius: 0 !important; object-fit: contain !important; transform: scale(1.45); transform-origin: left center; }
.brand__name { font-family: inherit !important; font-weight: 700 !important; letter-spacing: -.02em !important; }
.mast__nav {
  display: flex; align-items: center; justify-self: center; margin: 0 !important; gap: 2px !important;
  min-height: 44px; padding: 4px 5px; border: 1px solid rgba(224,234,249,.14); border-radius: 13px;
  background: rgba(255,255,255,.025); box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
body.home-broadcast .mast__nav { gap: 2px !important; }
.mast__nav a {
  font: 500 .88rem/1 inherit !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: rgba(247,249,253,.82) !important;
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 9px 14px !important; border-radius: 9px;
}
.mast__nav a::after { display: none !important; }
.mast__nav a:hover { color: #fff !important; background: rgba(255,255,255,.07); }
.mast__iplayer {
  padding: 8px 15px !important; border: 1px solid rgba(247,249,253,.45); border-radius: 9px;
  background: rgba(247,249,253,.09); color: #fff !important;
}
body.home-broadcast .mast__nav .mast__iplayer {
  min-height: 34px; padding: 8px 15px !important; border-color: rgba(247,249,253,.45) !important;
  border-radius: 9px !important; background: rgba(247,249,253,.09) !important;
}
.mast__tools,
body.home-broadcast .mast__tools {
  display: flex !important;
  justify-self: end;
  margin: 0 !important;
  gap: 10px;
}
body.home-broadcast .mast__tools .iconbtn:first-child,
body.home-broadcast .burger { display: grid !important; }
body.home-broadcast .mast__tools .subscribe { display: inline-flex !important; }
body.home-broadcast .mast .brand__name { display: inline !important; }
.iconbtn, .subscribe { border-radius: 999px !important; }

/* Homepage — broadcast board, not a generic card feed. */
body.home-broadcast .hero { max-width: none !important; padding: 0 !important; }
body.home-broadcast .hero__grid {
  max-width: var(--mv-wrap); min-height: 430px; margin: 0 auto;
  padding: 24px clamp(26px,4vw,58px) 44px;
  grid-template-columns: minmax(0,1.45fr) minmax(280px,.75fr) !important;
  gap: clamp(34px,5vw,76px) !important;
  align-items: center;
}
body.home-broadcast .hero__lead { min-height: 0 !important; }
body.home-broadcast .hero__title {
  max-width: 760px; font-size: clamp(2.35rem,4.4vw,4.7rem) !important;
  font-weight: 400 !important; line-height: .98 !important; letter-spacing: -.045em !important;
}
body.home-broadcast .hero__dek { max-width: 690px; color: #c4cee0 !important; font-size: 1.08rem !important; line-height: 1.32 !important; }
body.home-broadcast .hero__pill,
body.home-broadcast .hero__body > .kick {
  position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important; padding: 7px 12px 7px 26px !important;
  background: linear-gradient(110deg,#ffffff 0%,#dcecff 100%) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.18); letter-spacing: .08em !important;
}
body.home-broadcast .hero__pill::before,
body.home-broadcast .hero__body > .kick::before {
  content: ''; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px;
  transform: translateY(-50%); border-radius: 50%; background: #e32636;
  box-shadow: 0 0 0 4px rgba(227,38,54,.12);
}
body.home-broadcast .hero__rail {
  align-self: stretch; display: flex; flex-direction: column; justify-content: center;
  border-left: 0; padding-left: 0;
}
body.home-broadcast .hero-art {
  overflow: hidden; border: 1px solid rgba(225,236,252,.24) !important; border-radius: 16px !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.025);
}
body.home-broadcast .hero-art .media,
body.home-broadcast .hero-art .media img { border-radius: inherit !important; }
body.home-broadcast .hero-art::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(145deg,rgba(255,255,255,.11),transparent 34%,rgba(7,22,47,.08));
}
body.home-broadcast .rail__head { color: #fff !important; letter-spacing: .13em !important; }
body.home-broadcast .tw {
  max-width: none !important; padding: clamp(48px,6vw,78px) max(clamp(26px,4vw,58px),calc((100vw - var(--mv-wrap))/2 + 58px)) !important;
  background: #06112b !important;
}
.tw__head, .sec__title { font-family: 'BBC Reith Sans','TT Norms Pro',Arial,sans-serif !important; }
.tw__head { font-family: 'TT Norms Pro Expanded','BBC Reith Sans',Arial,sans-serif !important; font-size: clamp(1.45rem,2vw,2rem) !important; font-weight: 800 !important; letter-spacing: -.035em !important; text-transform: uppercase; }
.tw__head em { font-family: 'BBC Reith Sans','TT Norms Pro',Arial,sans-serif !important; font-weight: 500 !important; letter-spacing: .1em !important; }
.sec { padding-block: clamp(58px,7vw,96px) !important; }
.sec__index { color: #79a9e8 !important; }
.sec__title { font-weight: 500 !important; letter-spacing: -.035em !important; }
.sec__more { color: #d5e6ff !important; }

/* Featured is one continuous editorial surface, not a dark inset billboard. */
body.home-broadcast main > .sec.wrap:not(.tw) {
  max-width: none !important;
  background: var(--mv-ink) !important;
  padding-inline: max(clamp(26px,4vw,58px),calc((100vw - var(--mv-wrap))/2 + 58px)) !important;
}
body.home-broadcast #featWrap { padding-top: 8px; }
body.home-broadcast #featWrap .feat__top {
  grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr) !important;
  gap: clamp(28px,4vw,60px) !important; align-items: start;
  padding: clamp(24px,3vw,40px) 0; margin-bottom: 0 !important;
  border-top: 1px solid var(--mv-rule); border-bottom: 1px solid var(--mv-rule);
}
body.home-broadcast #featWrap .card--lead .media { aspect-ratio: 16/9 !important; max-height: 520px; }
body.home-broadcast #featWrap .card--lead .ct { font-size: clamp(1.7rem,2.5vw,2.7rem) !important; max-width: 22ch; }
body.home-broadcast #featWrap .feat__side { gap: 0 !important; }
body.home-broadcast #featWrap .feat__side .card--h {
  grid-template-columns: 124px minmax(0,1fr) !important; padding: 0 0 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--mv-rule);
}
body.home-broadcast #featWrap .feat__row { gap: clamp(20px,3vw,40px) !important; padding-top: clamp(28px,4vw,48px); }

/* A full newsroom menu with strong hierarchy and generous tap targets. */
.sheet {
  background: rgba(4,14,31,.985) !important; backdrop-filter: blur(22px) !important;
  padding: 0 clamp(22px,4vw,58px) clamp(28px,5vh,52px) !important;
}
.sheet__top {
  max-width: var(--mv-wrap); width: 100%; min-height: 76px;
  margin: 0 auto !important; border-bottom: 1px solid var(--mv-rule);
}
.sheet__brand img { width: 58px !important; height: 36px !important; transform: scale(1.45); transform-origin: left center; }
.sheet__links {
  max-width: calc(var(--mv-wrap) - 116px); width: 100%; margin: 0 auto;
  padding: clamp(30px,5vh,52px) 0 0 !important;
  display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: clamp(36px,6vw,76px) !important; row-gap: 0 !important;
}
.sheet__links a {
  min-height: clamp(64px,8vh,78px); padding: 0 !important;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--mv-rule);
  font-family: 'BBC Reith Sans','TT Norms Pro',Arial,sans-serif !important; font-weight: 500 !important;
  transition: color .16s ease,padding .16s ease,background .16s ease;
}
.sheet__links a:hover { padding-left: 7px !important; padding-right: 3px !important; }
.sheet__links a::after { content: '↗'; float: none; color: #6f98ce; font-size: .7em; }
.sheet__sub {
  max-width: calc(var(--mv-wrap) - 116px); width: 100%;
  margin: clamp(24px,4vh,36px) auto 0 !important; padding: 0 !important;
}
.sheet.is-open ~ .mp-card { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* Cards and story lists */
.card, .story-card, .latest__item, .trend, .live, .cat-card {
  border-color: var(--mv-rule) !important;
  box-shadow: none !important;
}
.latest__item, .rail-story, .tw__list li { transition: opacity .16s ease, transform .16s ease; }
.latest__item:hover, .rail-story:hover, .tw__list li:hover { transform: translateX(3px); }
.media, .article__media { background: #0b2144 !important; }

/* Article masthead: restrained copy with an editorial type wall. */
.article-broadcast-stage {
  width: 100% !important; max-width: none !important; min-height: clamp(640px,72vh,780px) !important;
  margin: 0 !important; box-sizing: border-box;
  grid-template-columns: minmax(0,720px) minmax(340px,560px) !important;
  justify-content: center; align-items: start;
  gap: clamp(64px,7vw,120px) !important;
  padding: clamp(42px,5vw,72px) max(clamp(24px,4vw,64px),calc((100vw - 1460px)/2)) clamp(54px,6vw,86px) !important;
  background: #091a36 !important;
}
.article-broadcast-main { width: 100%; min-width: 0; }
.article-broadcast-stage .article__head { max-width: 720px !important; padding-top: 0 !important; }
.article-broadcast-stage .article__title {
  max-width: 700px !important;
  font-size: clamp(2.75rem,4.15vw,4.55rem) !important; line-height: .98 !important;
  font-weight: 400 !important; letter-spacing: -.04em !important;
}
.article-broadcast-stage .article__lede {
  max-width: 660px !important; margin-top: 22px !important;
  color: #c2cee0 !important; font-size: clamp(1rem,1.25vw,1.18rem) !important; line-height: 1.42 !important;
}
.article-broadcast-stage .story-hero__chip--live {
  position: relative; display: inline-flex; align-items: center;
  min-height: 30px; padding: 7px 13px 7px 28px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  background: linear-gradient(110deg,#fff 0%,#dcecff 100%);
  color: #07162f; box-shadow: 0 10px 28px rgba(0,0,0,.18);
  font: 700 .68rem/1 'BBC Reith Sans','TT Norms Pro',Arial,sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
}
.article-broadcast-stage .story-hero__chip--live::before {
  content: ''; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px;
  transform: translateY(-50%); border-radius: 50%; background: #e32636;
  box-shadow: 0 0 0 4px rgba(227,38,54,.13);
}
.article-broadcast-stage .article__meta {
  margin-top: 28px !important;
  gap: 9px !important;
  color: #aebbd0 !important;
  font-family: 'BBC Reith Sans','TT Norms Pro',Arial,sans-serif !important;
  font-size: .78rem !important;
  font-weight: 400 !important;
  letter-spacing: -.005em !important;
  line-height: 1.35;
}
.article-broadcast-stage .article__meta .byline {
  color: #eef5ff !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}
.article-broadcast-stage .article__meta .sep {
  color: rgba(190,207,232,.45) !important;
  font-size: .82em;
}
.article-broadcast-stage .article__views {
  gap: 5px;
  color: #aebbd0;
  font-variant-numeric: tabular-nums;
}
.article-broadcast-stage .article__views svg {
  width: 15px;
  height: 15px;
  color: #86a6d2;
}
.article-broadcast-stage .article__views-count {
  color: #eef5ff;
  font-weight: 700;
}
.article-broadcast-stage .article__hero {
  width: 100% !important; max-width: 720px !important; margin-top: 38px !important;
}
.article-broadcast-stage .article__media {
  width: 100% !important; margin: 0 !important;
  aspect-ratio: 16/9 !important; border-radius: 16px !important;
  border: 1px solid rgba(225,236,252,.24) !important;
  box-shadow: 0 28px 74px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.025) !important;
}
.article-typewall { min-height: 100% !important; }
.article-typewall span { color: rgba(31,77,137,.58) !important; font-size: clamp(8rem,11vw,12rem) !important; }
.article__layout {
  width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box;
  grid-template-columns: 52px minmax(0,760px) 220px !important;
  justify-content: center !important; gap: clamp(30px,3.5vw,58px) !important; align-items: start;
  padding: clamp(64px,7vw,104px) clamp(24px,5vw,88px) !important;
  background: #123b70 !important;
}
.article__rail { grid-column: 1; }
.article__body { grid-column: 2; width: 100%; max-width: 760px !important; }
.article__layout > .story-toc { grid-column: 3; }
.article__body .prose { width: 100%; max-width: none !important; font-size: 1.08rem; line-height: 1.72; }
.article__body .prose p { max-width: 70ch; }
.article__body .prose > p:last-child:empty,
.article__body .prose > p:last-child:has(> br:only-child) { display: none; }
.story-page .story-support {
  background: #0a1d36;
  border-color: rgba(144,181,224,.2);
  border-radius: 10px;
}
.story-page .story-support__icon {
  color: #67d4f6;
  background: #12385f;
  border: 1px solid rgba(91,192,232,.22);
}
.story-page .story-support__icon svg { width: 20px; height: 20px; display: block; }
.story-page .cirya-pill { display: none !important; }
.story-page .mp-card { display: none !important; }

/* Icon fallbacks remain legible even when an external symbol font is blocked. */
.article__rail-btn .material-symbols-rounded,
.story-share-bar__btn .material-symbols-rounded { display: none !important; }
.article__rail-btn[data-tool="settings"]::before { content: 'Aa'; font: 700 .72rem/1 inherit; }
.article__rail-btn[data-tool="listen"]::before { content: '▶'; font-size: .82rem; }
.article__rail-btn[data-tool="bookmark"]::before { content: '☆'; font-size: 1.3rem; line-height: 1; }
.article__rail-btn[data-share="link"]::before,
.story-share-bar__btn[data-share="link"]::before { content: '↗'; font-size: 1rem; }

/* Forms, focus and reduced motion */
input, textarea, select, button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--mv-electric) !important; outline-offset: 3px !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

@media (max-width: 1180px) {
  .mast__inner { grid-template-columns: minmax(150px,1fr) auto !important; }
  .mast__nav { display: none !important; }
  .article-broadcast-stage {
    grid-template-columns: minmax(0,1.35fr) minmax(250px,.65fr) !important;
    gap: clamp(36px,5vw,68px) !important;
  }
  .article-typewall span:nth-child(3) { display: none; }
  .article-typewall span:nth-child(1) { left: 30%; }
  .article-typewall span:nth-child(2) { left: 72%; }
  .article__layout { grid-template-columns: 48px minmax(0,760px) !important; }
  .article__layout > .story-toc { display: none !important; }
}

@media (max-width: 900px) {
  .mast__nav { display: none !important; }
  body.home-broadcast .hero__grid { grid-template-columns: 1fr !important; min-height: 0; }
  body.home-broadcast .hero__rail { border: 0; padding: 8px 0 0; }
  .article-broadcast-stage {
    grid-template-columns: 1fr !important; min-height: auto !important;
    padding: clamp(34px,6vw,56px) clamp(24px,6vw,52px) clamp(48px,7vw,68px) !important;
  }
  .article-typewall { display: none !important; }
  .article-broadcast-stage .article__title { font-size: clamp(2.5rem,7.5vw,4.35rem) !important; }
  .article__layout {
    grid-template-columns: minmax(0,760px) !important; justify-content: center !important;
    padding: clamp(48px,7vw,72px) clamp(24px,6vw,52px) !important;
    background: #0d2c52 !important;
  }
  .article__rail { display: none !important; }
  .article__body { grid-column: 1; }
  body.home-broadcast #featWrap .feat__top { grid-template-columns: 1fr !important; }
  body.home-broadcast #featWrap .feat__side { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px !important; }
  body.home-broadcast #featWrap .feat__side .card--h { grid-template-columns: 112px minmax(0,1fr) !important; margin: 0; }
}

@media (max-width: 600px) {
  .mast__inner { height: 64px !important; }
  .subscribe { display: none !important; }
  .article-broadcast-stage { padding-inline: 20px !important; }
  .article-broadcast-stage .article__title { font-size: clamp(2.25rem,11vw,3.35rem) !important; }
  .article-broadcast-stage .article__hero { margin-top: 30px !important; }
  .article-broadcast-stage .article__media { border-radius: 12px !important; }
  .article__layout {
    padding: 38px 18px 56px !important;
    background: #0b2444 !important;
  }
  .article__body .prose { font-size: 1rem; line-height: 1.7; }
  .article__body .prose p { color: #d7e3f2; }
  .story-page .story-support {
    align-items: flex-start;
    gap: 12px;
    margin-top: 30px;
    padding: 16px;
  }
  .story-page .story-support__icon { width: 38px; height: 38px; border-radius: 8px; }
  .story-page .story-support__text strong { font-size: .9rem; }
  .story-page .story-support__text span { font-size: .78rem; line-height: 1.5; }
  .article__views-sep { display: none !important; }
  body.home-broadcast .hero__title { font-size: clamp(2.25rem,11vw,3.35rem) !important; }
  .tw__grid, .latest__grid { grid-template-columns: 1fr !important; }
  body.home-broadcast main > .sec.wrap:not(.tw) { padding-inline: 20px !important; }
  body.home-broadcast #featWrap .feat__side, body.home-broadcast #featWrap .feat__row { grid-template-columns: 1fr !important; }
  body.home-broadcast #featWrap .feat__side .card--h { grid-template-columns: 104px minmax(0,1fr) !important; }
  .brand img, .sheet__brand img { width: 48px !important; height: 30px !important; }
  .sheet__links { grid-template-columns: 1fr; padding-top: 24px !important; }
}