:root{
  --red:#ed151c;
  --red-dark:#9d080d;
  --bg:#040404;
  --panel:#0b0b0c;
  --panel-2:#111113;
  --ink:#f5f5f5;
  --muted:#aaa;
  --line:#292929;
  --shell:1480px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}
body.admin-bar .site-header{top:32px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,textarea{font:inherit}
.shell{width:min(var(--shell),calc(100% - 48px));margin-inline:auto}

/* Header */
.site-header{
  height:86px;
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(4,4,4,.97);
  border-bottom:1px solid #251012;
  backdrop-filter:blur(14px);
}
.nav-shell{height:100%;display:flex;align-items:center;gap:38px}
.brand{width:122px;height:100%;display:flex;align-items:center;flex:0 0 auto}
.brand img{max-height:78px;width:auto}
.main-nav{min-width:0}
.nav-menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap:30px;
  margin:0;
  padding:0;
}
.nav-menu li{margin:0;padding:0;list-style:none}
.nav-menu a,
.main-nav>a{
  display:block;
  text-transform:uppercase;
  font-size:14px;
  font-weight:900;
  letter-spacing:.065em;
}
.nav-menu a:hover,.nav-menu .current-menu-item>a,.main-nav>a:hover{color:var(--red)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav-toggle,.search-open{appearance:none;border:0;background:none;color:#fff;cursor:pointer}
.nav-toggle{display:none;font-size:25px}
.search-open{font-size:26px;line-height:1}
.search-bar{
  display:none;
  position:absolute;
  left:50%;
  top:86px;
  transform:translateX(-50%);
  padding:14px;
  background:#0b0b0b;
  border:1px solid #303030;
  gap:10px;
  box-shadow:0 20px 50px #000;
}
.search-bar.open{display:flex}
.search-bar input{flex:1;min-width:0;background:#141414;color:#fff;border:1px solid #3b3b3b;padding:12px 14px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#ef1d23,#b6080d);
  border:1px solid #f52c32;
  color:#fff;
  padding:13px 25px;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.025em;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.12)}
.btn-small{font-size:12px;padding:9px 15px}
.btn-large{padding:17px 30px}
.btn-outline{background:transparent;border-color:var(--red)}

/* Hero */
.hero{
  position:relative;
  min-height:700px;
  overflow:hidden;
  border-bottom:1px solid #231011;
  isolation:isolate;
}
.hero-stage{
  position:absolute;
  inset:0;
  z-index:-3;
  background:url('../images/hero-composite.png') center center/cover no-repeat;
}
.hero-stage:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.12) 38%,rgba(0,0,0,.38) 57%,rgba(0,0,0,.60) 100%),
    linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.05) 28%,rgba(0,0,0,.16) 70%,#040404 100%);
}
.hero-stage:after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:98px;
  background:linear-gradient(180deg,rgba(0,0,0,.80),rgba(0,0,0,0));
}
.hero-vignette{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  box-shadow:inset 0 0 150px rgba(0,0,0,.60);
}
.hero-copy-wrap{
  min-height:700px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.hero-copy{
  width:min(100%,610px);
  margin-left:auto;
  padding:92px 26px 40px 0;
  text-shadow:0 3px 18px #000;
}
.eyebrow,.category,.date{
  color:var(--red);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hero-copy h1,.archive-hero h1,.article-head h1{
  font-family:"Arial Narrow",Impact,Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:-.035em;
}
.hero-copy h1{
  display:flex;
  flex-direction:column;
  margin:10px 0 22px;
  line-height:.9;
  font-size:clamp(56px,5.4vw,90px);
}
.hero-copy h1 span{font-size:.49em;color:#f2f2f2;letter-spacing:-.045em;margin-top:18px}
.hero-copy h1 strong{color:var(--red);font-size:1.05em}
.mission{
  display:inline-block;
  max-width:580px;
  padding:11px 15px;
  background:rgba(0,0,0,.73);
  border-left:4px solid var(--red);
  font-family:"Arial Narrow",Impact,Arial,sans-serif;
  font-size:20px;
  font-weight:800;
  text-transform:uppercase;
}
.host-name{margin:14px 0 18px;color:#d5d5d5;text-transform:uppercase;letter-spacing:.22em}
/* Sections */
.section{padding:50px 0}
.section-tight{padding-top:18px}
.section-heading{display:flex;align-items:center;gap:18px;margin:0 0 22px;text-transform:uppercase}
.section-heading h2{
  margin:0;
  padding-left:12px;
  border-left:4px solid var(--red);
  font-family:"Arial Narrow",Impact,Arial,sans-serif;
  font-size:28px;
}
.section-heading span{flex:1;height:1px;background:#343434}
.section-heading>a{font-size:12px;font-weight:900}
.panel{background:linear-gradient(145deg,#101011,#070707);border:1px solid #282828;box-shadow:0 16px 45px rgba(0,0,0,.32)}

/* Latest episode */
.latest-grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);
  gap:34px;
  padding:24px;
  overflow:hidden;
}
.latest-media{min-width:0}
.video-wrap{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.video-wrap iframe,.video-wrap .jn-oembed,.video-wrap .jn-oembed iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}
.video-placeholder{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#090909}
.video-placeholder img{width:100%;height:100%;object-fit:cover}
.play,.card-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.76);
  color:white;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 9px 35px rgba(0,0,0,.65);
}
.play{width:70px;height:70px;font-size:28px;padding-left:5px}
.video-note{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.8);padding:7px 10px;font-size:12px}
.latest-copy{align-self:center;padding:10px 26px 10px 0}
.latest-copy h3{font-family:"Arial Narrow",Impact,Arial,sans-serif;text-transform:uppercase;font-size:38px;line-height:1.03;margin:9px 0 12px}
.latest-copy p{color:#bbb;font-size:17px}
.demo-inline{display:inline-block;margin-bottom:10px;border:1px solid #6f171a;background:#170809;color:#ff8d91;padding:5px 8px;font-size:10px;font-weight:900;letter-spacing:.08em}
.latest-empty{display:grid;grid-template-columns:320px 1fr;align-items:center;gap:30px;padding:22px}
.latest-empty img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* Story cards */
.story-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.story-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#0b0b0c;
  border:1px solid #292929;
  transition:transform .18s ease,border-color .18s ease;
}
.story-card:hover{transform:translateY(-4px);border-color:#681216}
.story-image{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  flex:0 0 auto;
  background:#090909;
}
.story-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.card-play{width:54px;height:54px;font-size:20px;padding-left:4px}
.story-card:hover .card-play{background:var(--red);border-color:var(--red)}
.demo-badge{
  position:absolute;
  left:10px;
  top:10px;
  z-index:4;
  background:rgba(0,0,0,.82);
  border:1px solid var(--red);
  color:#fff;
  padding:4px 7px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}
.story-body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  padding:16px 16px 17px;
}
.story-body h3{
  margin:7px 0 8px;
  font-family:"Arial Narrow",Impact,Arial,sans-serif;
  text-transform:uppercase;
  font-size:20px;
  line-height:1.08;
  overflow-wrap:anywhere;
}
.story-body p{
  margin:0 0 14px;
  color:#aaa;
  font-size:14px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.read-more{margin-top:auto;color:var(--red);text-transform:uppercase;font-size:12px;font-weight:900}

/* Newsletter and footer */
.newsletter-band{
  position:relative;
  clear:both;
  margin-top:22px;
  padding:34px 0;
  border-top:1px solid #2a1012;
  border-bottom:1px solid #2a1012;
  background:radial-gradient(circle at 13% 50%,#3b0508 0,transparent 28%),linear-gradient(90deg,#0d0506,#130809,#060606);
}
.newsletter-inner{
  display:grid;
  grid-template-columns:90px minmax(260px,1fr) minmax(360px,1.05fr);
  align-items:center;
  gap:28px;
}
.newsletter-icon{
  width:86px;height:86px;border-radius:50%;
  display:grid;place-items:center;
  border:2px solid var(--red);
  background:#170607;
  font-size:38px;
}
.newsletter-inner h2{margin:0;font-family:"Arial Narrow",Impact,Arial,sans-serif;font-size:30px;text-transform:uppercase}
.newsletter-inner p{margin:3px 0 0;color:#bbb}
.newsletter-form{display:flex;min-width:0}
.newsletter-form input{min-width:0;flex:1;background:#111;border:1px solid #444;color:#fff;padding:14px}
.newsletter-disabled{border:1px solid #333;background:#111;color:#999;padding:14px}

.site-footer{padding:44px 0 18px;background:#020202}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:58px}
.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:7px}
.footer-grid h4{margin:0 0 7px;color:var(--red);text-transform:uppercase}
.footer-grid a{color:#aaa}
.footer-grid a:hover{color:#fff}
.footer-logo{width:175px}
.footer-tag{font-size:23px;line-height:1.25}
.footer-tag strong{color:var(--red)}
.copyright{margin-top:30px;padding-top:18px;border-top:1px solid #171717;text-align:center;color:#777;font-size:12px}

/* Archive */
.archive-hero{
  min-height:290px;
  display:flex;
  align-items:end;
  padding:0 0 42px;
  border-bottom:1px solid #281012;
  background:
    linear-gradient(90deg,#050505 3%,rgba(0,0,0,.28) 50%,#050505 100%),
    url('../images/studio-bg.jpg') center bottom/cover no-repeat;
}
.archive-hero h1{margin:6px 0;font-size:68px;line-height:.95}
.archive-hero p{color:#ccc;font-size:18px}
.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.episode-card{min-width:0;border-bottom:2px solid #4b0a0c;padding-bottom:18px}
.episode-thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid #2b2b2b}
.episode-thumb img{width:100%;height:100%;object-fit:cover}
.episode-card h2{font-family:"Arial Narrow",Impact,Arial,sans-serif;text-transform:uppercase;font-size:28px;line-height:1.05}

.story-list-grid{display:grid;gap:24px}
.list-card{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;border-bottom:1px solid #222;padding-bottom:24px}
.list-image{display:block;position:relative;aspect-ratio:16/9;overflow:hidden}
.list-image img{width:100%;height:100%;object-fit:cover}
.list-card h2{font-family:"Arial Narrow",Impact,Arial,sans-serif;text-transform:uppercase;font-size:34px;line-height:1.05;margin:7px 0}
.list-card p{color:#aaa;max-width:900px}

/* Articles */
.article-shell{padding-top:60px;padding-bottom:72px}
.article-head{max-width:1120px}
.article-head h1{margin:10px 0 14px;font-size:clamp(48px,6vw,92px);line-height:.94}
.article-dek{max-width:950px;color:#bbb;font-size:23px}
.article-meta{color:#777;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.article-hero-video,.article-feature{margin:34px 0}
.article-hero-video .video-wrap{border:1px solid #303030;box-shadow:0 20px 70px rgba(0,0,0,.55)}
.article-feature img{width:100%;max-height:760px;object-fit:cover}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:54px;align-items:start}
.article-content{font-size:18px;line-height:1.78;min-width:0}
.article-content h2{margin-top:1.8em;font-family:"Arial Narrow",Impact,Arial,sans-serif;text-transform:uppercase;font-size:34px}
.article-content a{color:#ff4c51;text-decoration:underline}
.article-layout aside{position:sticky;top:118px}
.receipt-box,.side-card{background:#0b0b0c;border:1px solid #2d2d2d;padding:22px;margin-bottom:24px}
.receipt-box{border-top:4px solid var(--red)}
.receipt-label{color:var(--red);font-size:12px;font-weight:900;letter-spacing:.1em}
.receipt-box a{color:#ff4b50;font-weight:bold}
.side-card img{width:155px;margin:auto}
.side-card p{text-align:center;color:#aaa}
.related,.episode-stories{margin-top:60px}
.story-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Contact, pagination, utilities */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.contact-form{padding:28px}
.contact-form label{display:block;margin-bottom:18px;text-transform:uppercase;font-size:12px;font-weight:bold}
.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:6px;padding:13px;background:#090909;color:#fff;border:1px solid #363636}
.pagination{padding:20px 0 60px}
.nav-links{display:flex;gap:8px}
.page-numbers{padding:7px 12px;border:1px solid #333}
.page-numbers.current{background:var(--red)}
.empty{padding:30px}
.toast{position:fixed;right:25px;bottom:25px;z-index:150;background:#151515;border-left:4px solid var(--red);box-shadow:0 12px 45px #000;padding:16px 22px}

/* Responsive */
@media(max-width:1240px){
  .hero-grid{grid-template-columns:38% 42% 20%}
  .hero-monitor{margin-top:120px}
  .story-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1000px){
  .hero{min-height:640px}
  .hero-copy-wrap{min-height:640px}
  .hero-copy{width:min(100%,560px);padding-right:8px}
  .latest-grid{grid-template-columns:1fr}
  .latest-copy{padding:4px 4px 10px}
  .newsletter-inner{grid-template-columns:72px 1fr}
  .newsletter-form{grid-column:2}
  .newsletter-icon{width:70px;height:70px}
  .article-layout{grid-template-columns:1fr}
  .article-layout aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:782px){
  body.admin-bar .site-header{top:46px}
}
@media(max-width:760px){
  .site-header{height:74px}
  .brand{width:100px}
  .nav-shell{gap:16px}
  .nav-toggle{display:block;margin-left:auto}
  .main-nav{
    display:none;
    position:absolute;
    top:74px;
    left:0;right:0;
    background:#070707;
    border-bottom:1px solid #292929;
    padding:18px 24px 24px;
  }
  .main-nav.open{display:block}
  .nav-menu{align-items:flex-start;flex-direction:column;gap:14px}
  .nav-actions{margin-left:0}
  .search-open{display:none}
  .nav-actions .btn{font-size:10px;padding:8px 10px}
  .search-bar{top:74px}

  .hero{min-height:620px}
  .hero-copy-wrap{min-height:620px;justify-content:flex-end}
  .hero-copy{width:min(100%,420px);padding:74px 0 32px}
  .hero-copy h1{font-size:52px}
  .mission{font-size:16px}
  .story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .newsletter-inner{display:grid;grid-template-columns:1fr;gap:16px}
  .newsletter-icon{display:none}
  .newsletter-form{grid-column:auto}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .list-card{grid-template-columns:1fr}
  .archive-grid{grid-template-columns:1fr}
  .article-layout aside{display:block}
  .contact-grid{grid-template-columns:1fr}
  .latest-empty{grid-template-columns:1fr}
}
@media(max-width:520px){
  .shell{width:min(var(--shell),calc(100% - 24px))}
  .hero{min-height:580px}
  .hero-copy-wrap{min-height:580px;justify-content:flex-end}
  .hero-copy{width:min(100%,340px);padding-top:56px}
  .hero-copy h1{font-size:46px}
  .story-grid,.story-grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .newsletter-form{display:grid;grid-template-columns:1fr}
  .newsletter-form input,.newsletter-form .btn{width:100%}
  .article-head h1{font-size:44px}
  .article-dek{font-size:19px}
}
