@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&family=IBM+Plex+Mono:wght@600&family=Newsreader:opsz,wght@6..72,400&display=swap');
.banner,.banner *{box-sizing:border-box;}
.banner{position:relative;display:flex;align-items:center;gap:12px;margin:20px 0 0;padding:12px 14px;background:#fff;border:1px solid #DCE6F7;border-radius:6px;box-shadow:0 1px 2px rgba(18,22,29,.06),0 6px 20px rgba(47,107,216,.12);font-family:'DM Sans',system-ui,sans-serif;transition:box-shadow .2s,transform .2s;}
.banner:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(18,22,29,.06),0 10px 28px rgba(47,107,216,.18);}
.banner-date{flex:none;display:flex;flex-direction:column;align-items:center;width:44px;background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px #CBDCF8;}
.banner-date .w{width:100%;padding:1px 0 2px;background:#2F6BD8;color:#fff;font-size:10px;line-height:1.2;font-weight:500;text-align:center;}
/* top:1.75px centres the Newsreader 20px digits between the strip and the month */
.banner-date .d{padding-top:2px;position:relative;top:1.75px;font-family:'Newsreader',Georgia,serif;font-size:20px;line-height:1;color:#12161D;}
.banner-date .m{padding:0 0 3px;font-size:10px;line-height:1.2;color:#737B88;}
.banner-text{min-width:0;}
.banner-when{display:flex;align-items:flex-start;gap:7px;margin:0;font-size:14px;line-height:1.4;font-weight:500;color:#204E9E;}
.live-dot{position:relative;flex:none;width:8px;height:8px;margin-top:5.8px;border-radius:50%;background:#E5484D;} /* centred on the first 19.6px line */
.live-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:#E5484D;animation:livepulse 1.8s ease-out infinite;}
@keyframes livepulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
.banner .banner-title{margin:5px 0 0;padding:0;font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:20px;line-height:1.25;letter-spacing:-0.01em;color:#12161D;}
.banner a.banner-cta{flex:none;margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;font-weight:600;line-height:1.4;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;color:#fff;background:#2F6BD8;border:1px solid #2F6BD8;padding:7px 14px;border-radius:3px;white-space:nowrap;transition:background .2s,border-color .2s;}
/* the whole banner is the link target */
.banner a.banner-cta::after{content:'';position:absolute;inset:0;}
.banner a.banner-cta:hover{background:#204E9E;border-color:#204E9E;color:#fff;}
.banner a.banner-cta:focus-visible{outline:3px solid #12161D;outline-offset:3px;}
.banner .sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* the page header loses the top padding it has when it opens the page;
   !important because style.css sets header padding with !important on phones */
.banner + header{padding-top:24px !important;}
@media (prefers-reduced-motion:reduce){.live-dot::after{animation:none;}.banner,.banner:hover{transform:none;transition:none;}}
@media (max-width:720px){
  .banner{flex-wrap:wrap;gap:12px 14px;padding:12px;margin-top:14px;}
  .banner-text{flex:1;}
  .banner .banner-title{font-size:18px;}
  .banner a.banner-cta{flex-basis:100%;margin-left:0;text-align:center;}
}