.news-wrap{position:absolute;inset:0;pointer-events:none;z-index:10}
.news-wrap:not([data-state]) > *{display:none}

.news-shade{position:absolute;inset:0;pointer-events:none;transition:opacity .4s;
  background:linear-gradient(270deg,rgba(3,8,16,.9) 0,rgba(3,8,16,.8) 26%,rgba(3,8,16,.45) 35%,rgba(3,8,16,0) 48%)}

.news{position:absolute;right:80px;top:300px;width:460px;max-height:660px;display:flex;flex-direction:column;
  pointer-events:auto;color:#fff;font-family:'Saira Condensed',sans-serif;text-shadow:0 2px 14px rgba(0,0,0,.5);
  transition:opacity .4s,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s;
  animation:news-in .45s cubic-bezier(.2,.7,.2,1) .3s backwards}
.news__head{position:relative;flex:none;padding-right:48px}
.news__rule{width:90px;height:5px;background:#f0b43c}
.news__kick{margin:20px 0 6px;font:600 22px/1 'Saira Condensed',sans-serif;letter-spacing:.3em;
  text-transform:uppercase;color:#f0b43c}
.news__close{position:absolute;right:0;top:-8px;display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;background:none;color:rgba(217,226,234,.7);cursor:var(--cursor-pointer);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.news__close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.news__close:hover{color:#fff}
.news__close:focus{outline:none}
.news__close:focus-visible{color:#fff;outline:2px solid #f0b43c;outline-offset:2px}

.news__list{margin:0;padding:0 8px 0 0;list-style:none;overflow-y:auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(240,180,60,.5) transparent}
.news-post{padding:18px 0 20px;border-bottom:1px solid rgba(217,226,234,.16)}
.news-post:last-child{border-bottom:0}
.news-post__date{display:block;font:600 17px/1 'Saira Condensed',sans-serif;letter-spacing:.2em;color:#f0b43c}
.news-post__title{margin:8px 0 6px;font:700 34px/1.02 'Saira Condensed',sans-serif;text-transform:uppercase;
  letter-spacing:.01em;color:#fff}
.news-post__body{margin:0;font:500 21px/1.32 'Saira Condensed',sans-serif;color:#d9e2ea}

.news-tab{position:absolute;right:80px;top:300px;z-index:0;padding:4px 16px;border:0;background:none;
  font:700 30px/1 'Saira Condensed',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#05080c;
  cursor:var(--cursor-pointer);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s,visibility 0s .3s;-webkit-tap-highlight-color:transparent}
.news-tab::before{content:'';position:absolute;z-index:-1;inset:0;background:#f0b43c;
  transform:skewX(-8deg);transition:background-color .12s}
.news-tab:hover::before{background:#ffc95e}
.news-tab:active{transform:translateY(3px)}
.news-tab:active::before{background:#b87a12}
.news-tab__i{display:none}
.news-tab:focus{outline:none}
.news-tab:focus-visible{outline:3px solid #fff;outline-offset:4px}

.news-wrap[data-state=closed] .news{opacity:0;visibility:hidden;transform:translateX(60px);pointer-events:none;
  transition:opacity .4s,transform .4s cubic-bezier(.2,.7,.2,1),visibility 0s .4s}
.news-wrap[data-state=closed] .news-shade{opacity:0}
.news-wrap[data-state=closed] .news-tab{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s,visibility 0s}

@keyframes news-in{from{opacity:0;transform:translateX(30px)}}

html[data-nl-closed] .reel.play-page .news-wrap{opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.reel.play-page .news-wrap{transition:opacity .4s,visibility 0s}

@media (max-width:700px){
  .news-shade{display:none}
  .news{left:16px;right:16px;top:140px;width:auto;max-height:calc(100% - 220px);padding:16px 16px 4px;
    background:rgba(3,8,16,.9);box-shadow:0 10px 40px rgba(0,0,0,.6);transform:none}
  .news-wrap[data-state=closed] .news{transform:none}
  .news__close{top:8px;right:8px}
  .news__head{padding-right:40px}
  .news__rule{width:60px;height:4px}
  .news__kick{margin-top:14px;font-size:16px}
  .news-post{padding:12px 0 14px}
  .news-post__date{font-size:13px}
  .news-post__title{font-size:24px}
  .news-post__body{font-size:16px}
  .news-tab{right:16px;top:16px;font-size:20px;padding:4px 12px}
}
html.is-phone .news-shade{display:none}
html.is-phone .news{left:16px;right:16px;top:140px;width:auto;max-height:calc(100% - 220px);padding:16px 16px 4px;
  background:rgba(3,8,16,.9);box-shadow:0 10px 40px rgba(0,0,0,.6)}
html.is-phone .news-tab{right:16px;top:16px;font-size:20px;padding:4px 12px}

@media (prefers-reduced-motion:reduce){
  .news,.news-tab,.news-shade,.news-wrap{animation:none!important;transition:none!important}
}