/* Fringe Next — performance/polish layer that preserves original Fringe colours */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none}
a:hover{text-decoration:none}
img,iframe,video{max-width:100%}
.site-top-shell{
  position:sticky!important;top:0!important;z-index:80!important;
  width:min(100%,1180px)!important;margin:0 auto!important;
  padding:12px clamp(10px,2vw,18px)!important;
}
#top-banner.brand-banner,#top-banner.banner{
  height:clamp(82px,10vw,118px)!important;min-height:82px!important;max-height:118px!important;
}
#top-banner .banner-logo-fill,#top-banner.brand-banner .banner-logo-fill{
  object-fit:contain!important;object-position:center!important;transform:none!important;
}
.wrap,main{width:min(100% - 24px,1180px)!important;margin-inline:auto!important}
h1,h2,h3{letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(2rem,5vw,4.4rem)!important;line-height:.96!important}
h2{font-size:clamp(1.45rem,2.7vw,2.25rem)!important;line-height:1.05!important}
h3{line-height:1.1!important}
.grid{gap:clamp(14px,2vw,22px)!important}
.top-videos,#top-videos,#top-viewed{
  border-radius:22px!important;
}
article.card{
  position:relative;overflow:hidden;border-radius:18px!important;
  transform:translateZ(0);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
article.card:hover{transform:translateY(-2px)}
.preview-holder,.thumb,.player-wrap{border-radius:14px!important;overflow:hidden}
.preview-holder{position:relative!important;isolation:isolate;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;background:#070b14!important}
.preview-holder:before{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.34));z-index:1;pointer-events:none;
}
.preview-holder>span{
  z-index:2!important;font-weight:800!important;
}
.thumb{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
article.card:hover .thumb-static{transform:scale(1.025)}
.video-card-tags,.meta.video-tags{display:flex;gap:7px;flex-wrap:wrap}
.video-card-tags .chip,.meta.video-tags .pill,.tag,.nav .chip,.chip,.pill{
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.video-card-tags .chip:hover,.meta.video-tags .pill:hover,.tag:hover,.nav .chip:hover,.chip:hover,.pill:hover{
  transform:translateY(-1px)
}
.read,.actions a,.card a[href*="/video/"]:not(.chip):not(.tag){font-weight:800}
.thumb-live{position:absolute;inset:0;width:100%;height:100%;min-height:190px!important;aspect-ratio:16/9!important;display:block!important;z-index:3;background:#000!important;border:0!important}
.fn-video-placeholder{
  position:relative!important;
  display:grid!important;place-items:center!important;min-height:190px!important;
  background:
    radial-gradient(circle at 28% 18%,rgba(142,208,255,.24),transparent 30%),
    radial-gradient(circle at 76% 82%,rgba(124,92,255,.28),transparent 34%),
    linear-gradient(145deg,#0b1530,#101a38 48%,#07101f)!important;
  color:transparent!important;
  font-size:0!important;
  box-shadow:inset 0 0 0 1px rgba(142,208,255,.18)!important;
}
.video-preview[data-live-mounted-at] .preview-holder{min-height:190px!important;aspect-ratio:16/9!important}
.video-preview[data-live-mounted-at] .fn-video-placeholder{display:none!important}
.fn-video-placeholder:before{
  content:"▶";
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:999px;
  display:grid;place-items:center;
  padding-left:4px;
  color:#fff;
  font-size:28px;font-weight:900;
  background:linear-gradient(135deg,rgba(124,92,255,.96),rgba(142,208,255,.78));
  border:1px solid rgba(255,255,255,.32);
  box-shadow:0 0 34px rgba(124,92,255,.45),0 12px 28px rgba(0,0,0,.36);
  z-index:2;
}
.fn-video-placeholder:after{
  content:"Play in thumbnail";
  position:absolute;
  left:12px;bottom:12px;
  padding:7px 10px;border-radius:999px;
  color:#eef2ff;
  font-size:12px;font-weight:900;letter-spacing:.04em;
  background:rgba(5,9,20,.72);
  border:1px solid rgba(142,208,255,.28);
  z-index:2;
}
.video-preview:hover .fn-video-placeholder:before{transform:translate(-50%,-50%) scale(1.06)}
@media (max-width:760px){
  .wrap,main{width:min(100% - 18px,1180px)!important}
  .site-top-shell{position:relative!important;padding-inline:8px!important}
  #top-banner.brand-banner,#top-banner.banner{height:76px!important;min-height:76px!important}
  article.card{border-radius:16px!important}
  .preview-holder,.thumb,.player-wrap{border-radius:12px!important}
}