:root{
  --bg: #07080b;
  --panel: rgba(255,255,255,.05);
  --panel2: rgba(255,255,255,.07);
  --stroke: rgba(255,255,255,.08);
  --stroke2: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --faint: rgba(255,255,255,.44);
  --red: #d1262a;
  --red2:#ff3b3f;
  --shadow: 0 12px 30px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 24px;
  /* Rockfeed feels a little wider on desktop */
  --container: 1320px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: 
              radial-gradient(900px 600px at 15% 10%, rgba(255,255,255,.06), transparent 55%),
              var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

.container{
  width:min(var(--container), calc(100% - 48px));
  margin:0 auto;
}

/* Top strip */
.top-strip{
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.top-strip__inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 0;
  font-size:13px;
  letter-spacing:.02em;
  color: var(--muted);
}
.brand-mark{
  font-weight:800;
  letter-spacing:.14em;
  color: rgba(255,255,255,.85);
}
.top-strip__msg{
  opacity:.85;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.top-strip__spacer{ flex:1; }

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(5,6,8,.68);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header__inner{
  display:flex;
  align-items:center;
  gap:26px;
  padding:12px 0;
}
.logo__mark{
  font-weight:900;
  letter-spacing:.08em;
  font-size:20px;
}
.nav{
  display:flex;
  gap:22px;
  align-items:center;
  flex:1;
}
.nav__link{
  color: rgba(255,255,255,.68);
  font-weight:600;
  font-size:13px;
}
.nav__link:hover{ color: rgba(255,255,255,.92); }

.nav__link.is-active{ color: rgba(191, 4, 4); }

.header__right{
  display:flex;
  align-items:center;
  gap:10px;
}

.social{ display:flex; gap:6px; }

/* Header social icons – plain (like Rockfeed) */
.icon-btn{
  width:auto;
  height:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:none;
  background:transparent;
  border-radius:0;

  padding:0 6px;
  opacity:.75;
}

.icon-btn svg{
  width:16px;
  height:16px;
  fill: rgba(255,255,255,.70);
}

.icon-btn:hover{
  opacity:1;
}

.icon-btn:hover svg{
  fill: rgba(255,255,255,.92);
}

.pill-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;

  background: transparent;
  border:1px solid rgba(191,0,0);
  box-shadow:none;
}

.pill-badge{
  padding:0;
  background:transparent;
  border:none;
  font-weight:800;
  font-size:12px;
  color: rgba(255,255,255,.78);
}

.pill-divider{
  width:1px;
  height:16px;
  background: rgba(255,255,255,.18);
}

.pill-text{
  font-weight:800;
  letter-spacing:.10em;
  font-size:12px;
  color: rgba(255,255,255,.92);
}

.hamburger{
  display:none;
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.hamburger span{
  display:block;
  width:18px; height:2px;
  background: rgba(255,255,255,.82);
  margin:4px auto;
  border-radius:4px;
}

/* Ticker row */
/* Ticker row – cleaner, dot separators, red underline */
.ticker{
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,59,63,.45); /* thin red line like screenshot */
  background: rgba(0,0,0,.18);
}

.ticker__inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 0;
}

.ticker__left{
  padding: 0 10px 0 0;
  border-right: 1px solid rgba(255,255,255,.08);
}

.ticker__label{
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  color: rgba(255,255,255,.65);
}

.ticker__brand{
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  color: #ff3b3f;
}

.ticker__scroll{
  flex:1;
  overflow:hidden;
}

.ticker__track{
  display:flex;
  width:max-content;
  gap:40px;                 /* space between the two groups */
  align-items:center;
  white-space:nowrap;
  animation: tickerMove 28s linear infinite;
}

.ticker__group{
  display:flex;
  align-items:center;
  gap:14px;
}

@keyframes tickerMove{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); } /* because we duplicated the group */
}

.chip{
  font-size:12.5px;         /* slightly smaller */
  font-weight:700;
  color: rgba(255,255,255,.75);
}

.chip.muted{
  color: rgba(255,255,255,.45);
  font-weight:700;
}

.sep-dot{
  width:4px;
  height:4px;
  border-radius:999px;
  background: rgba(255,59,63,.75); /* the red dot separators */
  display:inline-block;
  transform: translateY(1px);
}

/* Optional: pause on hover like nicer sites */
.ticker__scroll:hover .ticker__track{
  animation-play-state: paused;
}

/* Hero */
.hero{
  position:relative;
  min-height: 760px;
  display:grid;
  align-items:end;
  padding-bottom: 60px;
}
.hero__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.05);
  transform: scale(1.00);
  padding-bottom: 40px;
}
.hero__shade{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 70% 40%, rgba(0,0,0,.15), rgba(0,0,0,.75) 55%, rgba(0,0,0,.88)),
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.70) 35%, rgba(0,0,0,.25) 65%, rgba(0,0,0,.10) 100%);
}
.hero__inner{
  position:relative;
  padding: 110px 0 70px;
}
.hero__content{
  max-width: 680px;
}
.tag{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.tag--red{
  background: rgba(191,0,0,.95);
  border-color: rgba(209,38,42,.95);
  color: white;
}
.tag--small{ padding:5px 10px; font-size:11px; border-radius:999px; }

.hero__title{
  margin:18px 0 10px;
  font-size: 64px;
  line-height: .95;
  letter-spacing: -0.02em;
  font-weight: 900;
}
.hero__title--strong{ color: rgba(255,255,255,.98); text-shadow: 0 12px 40px rgba(0,0,0,.55); }

.meta{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.70);
  font-size:14px;
  margin: 14px 0 16px;
}
.meta__link{ color: #51ff7a; font-weight:700; }
.dot{ opacity:.65; }
.yt-dot{
  display:inline-block;
  width:8px; height:8px;
  border-radius:999px;
  background: var(--red2);
  margin-right:6px;
  vertical-align:middle;
}
.hero__excerpt{
  color: rgba(255,255,255,.62);
  max-width: 560px;
  line-height:1.55;
  font-size:14px;
}

.hero__actions{ margin-top: 26px; }
.play-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.92);
  color:#111;
  font-weight:800;
  box-shadow: var(--shadow);
}
.play-icon{
  width:28px; height:28px;
  border-radius:10px;
  background: rgba(0,0,0,.10);
  display:grid; place-items:center;
  font-size:12px;
}

/* Charts strip */
.charts-strip{
  padding: 22px 0 20px;
  margin-top: 0;           /* remove overlap */
}

.charts-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 18px 18px;
  border-radius: 200px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 35px rgba(0,0,0,.35);
  overflow:hidden;
  transform: translateY(-18px); 
}
.charts-left{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}
.charts-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}
.charts-pill__logo{
  font-weight:900;
  font-size:12px;
  letter-spacing:.12em;
  opacity:.9;
}
.charts-pill__text{
  font-weight:900;
  letter-spacing:.12em;
  color: var(--red2);
  font-size:12px;
}
.top3{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.top3__label{
  font-weight:800;
  color: rgba(255,255,255,.55);
  font-size:12px;
}
.top3__items{
  display:flex;
  gap:18px;
  align-items:center;
  min-width:0;
}
.movie{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 180px;
}
.movie__rank{
  font-weight:900;
  color: rgba(255,255,255,.55);
}
/* Charts strip thumbnails */
.movie__art{
  width: 42px;          /* tweak size if you want */
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);

  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.movie__title{ font-weight:800; font-size:13px; }
.song__sub{ font-size:12px; color: rgba(255,255,255,.55); margin-top:2px; }

.charts-right{
  display:flex;
  align-items:center;
  gap:14px;
}
.closes{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.60);
  font-size:12px;
}
.timer{ display:flex; gap:8px; }
.timebox{
  display:flex;
  align-items:baseline;
  gap:6px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}
.timebox__num{
  font-weight:900;
  font-size:14px;
  color: rgba(255,255,255,.82);
}
.timebox__lab{ font-size:11px; color: rgba(255,255,255,.55); }

.vote-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(191,0,0,.92);
  color:white;
  font-weight:900;
  box-shadow: 0 14px 30px rgba(209,38,42,.22);
}
.thumb{ filter: grayscale(1) brightness(2); }

/* Sections */
/* Give a bit more breathing room so headings sit lower than the red divider line (like screenshot). */
.section{ padding: 56px 0 44px; }
.section__title{
  margin: 0 0 16px;
  font-size: 34px;
  font-weight:900;
  letter-spacing:-.02em;
}
.section__subtitle{
  margin: 8px 0 0;
  color: rgba(255,255,255,.55);
  font-size:14px;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom: 10px;
}
.pill-muted{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  margin-left:10px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.62);
  letter-spacing:.08em;
  font-weight:800;
}
.view-all{ color: rgba(255,255,255,.62); font-weight:700; }
.view-all:hover{ color: rgba(255,255,255,.90); }
.view-all--red{ color: rgba(255,59,63,.88); }

.grid-2{
  display:grid;
  grid-template-columns: 1.6fr .9fr;
  gap: 18px;
  align-items:start;
}

/* Feature card (big left) */
.feature-card{
  position:relative;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  min-height: 420px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.feature-card--wide{ min-height: 360px; }
.feature-card__media{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter: contrast(1.05) saturate(1.05);
}
.feature-card__shade{
  position:absolute; inset:0;
  background: radial-gradient(800px 500px at 35% 30%, rgba(0,0,0,.10), rgba(0,0,0,.72) 60%, rgba(0,0,0,.90));
}
.rank-badge{
  position:absolute;
  top:18px; left:18px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:2;
}
.rank-num{
  font-weight:900;
  font-size:44px;
  line-height:1;
  color: rgba(191,0,0,.95);
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.rank-tag{
  padding:8px 12px;
  border-radius:10px;
  background: rgba(191,0,0,.95);
  border:1px solid rgba(255,59,63,.95);
  font-weight:900;
  font-size:12px;
  letter-spacing:.10em;
  color:white;
}
.rank-tag--top{ background: rgba(255,59,63,.90); }

.feature-card__headline{
  position:absolute;
  left:18px; right:18px;
  bottom:18px;
  z-index:2;
}
.feature-card__headline--bottom .sub-title{ margin-top: 0; }
.big-title{
  font-size: 76px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.sub-title{
  margin-top: 8px;
  font-size: 18px;
  color: rgba(255,255,255,.88);
}

/* Right side list */
.side-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.side-item{
  display:grid;
  grid-template-columns: 34px 64px 1fr;
  gap:12px;
  align-items:center;
  padding: 14px 14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.side-item:hover{ border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
.side-rank{
  color: rgba(255,255,255,.28);
  font-weight:900;
  font-size:22px;
  text-align:center;
}
.side-thumb{
  width:64px; height:44px;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.10);
}
.side-text{
  color: rgba(255,255,255,.88);
  font-weight:700;
  line-height:1.25;
}
.more-btn{
  margin-top: 4px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding: 14px 16px;
  border-radius: 16px;
  border:1px solid rgba(255,59,63,.28);
  background: rgba(255,59,63,.10);
  color: rgba(255,255,255,.86);
  font-weight:900;
}
.more-btn:hover{ background: rgba(255,59,63,.16); }
.arrow{ opacity:.85; }

/* Rows of cards */
.cards-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.thumb-card{
  position:relative;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: 0 16px 36px rgba(0,0,0,.40);
  min-height: 160px;
}
.thumb-card__img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.thumb-card__shade{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.78));
}
.thumb-card__time{
  position:absolute;
  bottom:12px; right:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  font-weight:800;
  z-index:2;
}
.thumb-card__title{
  position:absolute;
  left:14px; right:14px;
  bottom:14px;
  z-index:2;
  font-size:14px;
  font-weight:800;
  color: rgba(255,255,255,.90);
  line-height:1.25;
  padding-right: 72px;
}

/* Festivals */
.festival-row{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.festival-card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 18px 18px 14px;
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
}
.festival-logo{
  height: 58px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:left center;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}
.festival-loc{
  margin-top: 12px;
  font-weight:800;
  color: rgba(255,255,255,.70);
  font-size:12px;
  letter-spacing:.08em;
}

/* Homes */
.homes-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.home-card{
  position:relative;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  min-height: 126px;
  box-shadow: 0 16px 34px rgba(0,0,0,.40);
}
.home-card__img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.home-card__shade{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.82));
}
.home-card__title{
  position:absolute;
  left:14px; right:14px; bottom:12px;
  z-index:2;
  font-size:13px;
  font-weight:900;
  line-height:1.22;
  color: rgba(255,255,255,.92);
}

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding: 44px 0;
  background: rgba(0,0,0,.22);
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.2fr 1.3fr .7fr;
  gap: 34px;
}
.footer__logo{
  font-weight:900;
  letter-spacing:.10em;
  font-size:16px;
}
.footer__desc{
  margin: 10px 0 20px;
  color: rgba(255,255,255,.55);
  font-size:13px;
}
.footer__copy{
  margin: 0;
  color: rgba(255,255,255,.40);
  font-size:12px;
}
.footer__cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.footer__col a{
  display:block;
  margin: 10px 0;
  color: rgba(255,255,255,.64);
  font-weight:600;
  font-size:13px;
}
.footer__col a:hover{ color: rgba(255,255,255,.90); }
.footer__head{
  color: rgba(255,255,255,.40);
  font-weight:900;
  letter-spacing:.12em;
  font-size:12px;
  margin-bottom: 10px;
}
.social--footer .icon-btn{ border-color: rgba(255,255,255,.12); }

/* Responsive */
@media (max-width: 1100px){
  .cards-row{ grid-template-columns: repeat(2, 1fr); }
  .festival-row{ grid-template-columns: repeat(3, 1fr); }
  .homes-row{ grid-template-columns: repeat(2, 1fr); }
  .grid-2{ grid-template-columns: 1fr; }
  .charts-card{ border-radius: 15px; flex-direction:column; align-items:flex-start; gap:14px; }
  .charts-right{ width:100%; justify-content:space-between; }
  .hero__title{ font-size: 52px; }
}
@media (max-width: 820px){
  .nav{ display:none; }
  .hamburger{ display:block; }
  .header__right .social{ display:none; }
  .ticker__left{ display:none; }
  .hero{ min-height: 560px; }
  .hero__title{ font-size: 44px; }
  .footer__inner{ grid-template-columns: 1fr; }
  .footer__cols{ grid-template-columns: 1fr; }
}

.logo__img{
  height: 60px;        /* tweak this */
  width: auto;
  display:block;
}

.top-strip__brand{
  display:flex;
  align-items:center;
}

.top-strip__logo{
  height: 16px;     /* tweak until it matches */
  width: auto;
  display:block;
  opacity: .95;
}

/* optional: if you want it to look more like “wordmark” spacing */
.top-strip__inner{ gap: 14px; }

.top-strip__inner{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px 0;
}

.top-strip__center{
  display:flex;
  align-items:center;
  gap:16px;
}

.top-strip__logo{
  height:18px;
  width:auto;
  display:block;
}

.top-strip__msg{
  font-size:13px;
  opacity:.8;
  white-space:nowrap;
}

/* ===== Horror Glitch Bar ===== */
.horror-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  padding:10px 14px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);

  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,59,63,.55);

  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.80);
}

.horror-bar__label{
  color: rgba(191,0,0);
  font-weight: 900;
}

.horror-bar__divider{
  width:1px;
  height:14px;
  background: rgba(255,255,255,.18);
}

.horror-bar__text{
  position:relative;
  color: rgba(255,255,255,.86);
  white-space: nowrap;
}

/* Glitch effect (quick burst) */
.horror-glitch{
  animation: glitchJitter .18s steps(2,end) infinite;
  text-shadow:
    -1px 0 rgba(255,59,63,.55),
     1px 0 rgba(0,180,255,.35);
}

@keyframes glitchJitter{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(-1px, 1px); }
  50%{ transform: translate(1px, -1px); }
  75%{ transform: translate(-1px, -1px); }
  100%{ transform: translate(0,0); }
}

/* Optional: a subtle scanline sweep */
.horror-bar::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:1px;
  background: rgba(255,255,255,.10);
  transform: translateY(18px);
  opacity:.25;
}
.horror-bar__text{ color: rgba(255,59,63,.88); }

/* ===== Horror Glitch Bar (Enhanced) ===== */
.horror-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  padding:10px 14px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);

  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,59,63,.55);

  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,.80);

  /* subtle red bleed */
  box-shadow: inset 0 -1px 0 rgba(255,59,63,.25);
}

.horror-bar__label{
  color: rgba(255,59,63,.90);
  font-weight: 900;
}

.horror-bar__divider{
  width:1px;
  height:14px;
  background: rgba(255,255,255,.18);
}

.horror-bar__text{
  position:relative;
  color: rgba(255,255,255,.86);
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(255,59,63,.15);
}

/* VHS scanlines */
.horror-bar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    );
  opacity:.20;
  mix-blend-mode: overlay;
}

/* Film grain (cheap but effective) */
.horror-bar::after{
  content:"";
  position:absolute;
  inset:-20px;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity:.05;
  filter: blur(.2px);
  animation: grainMove 6s steps(10,end) infinite;
}

@keyframes grainMove{
  0%{ transform: translate(0,0); }
  10%{ transform: translate(-2%, -1%); }
  20%{ transform: translate(-1%, 2%); }
  30%{ transform: translate(2%, -1%); }
  40%{ transform: translate(-2%, 2%); }
  50%{ transform: translate(1%, -2%); }
  60%{ transform: translate(2%, 1%); }
  70%{ transform: translate(-1%, 1%); }
  80%{ transform: translate(1%, 2%); }
  90%{ transform: translate(-2%, -2%); }
  100%{ transform: translate(0,0); }
}

/* Glitch layers */
.glitch{
  display:inline-block;
}

.glitch__layer{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  white-space: nowrap;
  opacity:0;
  pointer-events:none;
}

.glitch__layer--red{
  color: rgba(255,59,63,.90);
  transform: translateX(-1px);
}

.glitch__layer--cyan{
  color: rgba(0,200,255,.70);
  transform: translateX(1px);
}

/* When glitching, show layers and jitter text */
.horror-glitch{
  animation: glitchJitter .16s steps(2,end) infinite;
}

.horror-glitch .glitch__layer{
  opacity:.9;
  animation: layerJitter .14s steps(2,end) infinite;
}

@keyframes glitchJitter{
  0%{ transform: translate(0,0); filter: none; }
  25%{ transform: translate(-1px, 1px); }
  50%{ transform: translate(1px, -1px); filter: contrast(1.15); }
  75%{ transform: translate(-1px, -1px); }
  100%{ transform: translate(0,0); filter:none; }
}

@keyframes layerJitter{
  0%{ clip-path: inset(0 0 0 0); }
  33%{ clip-path: inset(12% 0 60% 0); }
  66%{ clip-path: inset(55% 0 18% 0); }
  100%{ clip-path: inset(0 0 0 0); }
}

/* Rare signal pulse */
.horror-bar__pulse{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background: radial-gradient(600px 60px at 50% 50%, rgba(255,59,63,.18), transparent 60%);
}

.horror-bar__pulse.is-on{
  animation: pulse 650ms ease-out 1;
}

@keyframes pulse{
  0%{ opacity:0; }
  20%{ opacity:1; }
  100%{ opacity:0; }
}

@media (max-width: 820px){
  .hero{ min-height: 620px; padding-bottom: 40px; }
  .hero__inner{ padding: 90px 0 50px; }
  .charts-card{ transform: translateY(-10px); }
}

/* =========================================================
   RockFeed-style layout tweaks (match screenshot spacing)
   ========================================================= */

/* Darker vignette like screenshots */
body{
  background:
    radial-gradient(1200px 700px at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(1200px 800px at 50% 120%, rgba(0,0,0,.92), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #06070a 0%, #07080b 55%, #05060a 100%);
}

/* Full-bleed red section separators (closer to RockFeed)
   - crisp 1px line with edge fade
   - soft glow band underneath
*/
.main > section{
  position: relative;
}

/* crisp line */
.main > section:not(.hero)::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(255,59,63,.25) 8%,
    rgba(255,59,63,.70) 40%,
    rgba(255,59,63,.70) 60%,
    rgba(255,59,63,.25) 92%,
    rgba(0,0,0,0) 100%
  );
  box-shadow:
    0 0 10px rgba(255,59,63,.22),
    0 0 24px rgba(255,59,63,.12);
  opacity: .98;
}

/* glow band */
.main > section:not(.hero)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:46px;
  pointer-events:none;
  background:
    radial-gradient(900px 32px at 50% 0%, rgba(255,59,63,.20), rgba(255,59,63,0) 70%),
    linear-gradient(180deg, rgba(255,59,63,.06), rgba(255,59,63,0));
  opacity:.85;
  filter: blur(.2px);
}

/* HERO + CHARTS overlap (the 'floating pill' look) */
.hero{
  padding-bottom: 86px;
}
.charts-strip{
  margin-top: -56px;       /* pulls the charts pill up into the hero like the screenshots */
  padding: 30px 0 26px;
}

/* Make the charts pill feel more 'glass' */
.charts-card{
  transform: none;         /* overlap is handled by charts-strip margin-top */
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.085);
  box-shadow:
    0 18px 42px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* The big feature card in screenshots has a bottom 'caption bar' */
.feature-card__headline{
  left:0;
  right:0;
  bottom:0;
  padding: 18px 18px 16px;
  background: rgba(0,0,0,.58);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.big-title{
  font-size: 70px;         /* closer to screenshot weight/scale */
  line-height: .95;
}
.sub-title{
  margin-top: 10px;
  font-size: 16px;
  color: rgba(255,255,255,.86);
}

/* Right column list sizing/spacing (closer to screenshot) */
.side-item{
  grid-template-columns: 44px 72px 1fr;
  padding: 16px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.085);
}
.side-thumb{
  width:72px;
  height:48px;
  border-radius: 12px;
}
.side-text{
  font-size: 15px;
}

/* 'More Episodes' button: darker red fill, red text like screenshot */
.more-btn{
  background: rgba(209,38,42,.14);
  border-color: rgba(209,38,42,.28);
  color: rgba(255,59,63,.88);
}
.more-btn:hover{
  background: rgba(209,38,42,.20);
}

/* Small polish: headings sit a bit higher above the grids */
.section{
  padding: 40px 0 38px;
}
.section__title{
  margin-bottom: 20px;
}


/* =========================================================
   COOL EFFECTS PACK (added)
   - Ambient background motion + animated gradients
   - Scrollytelling-lite (reveal on scroll + parallax)
   - Self-drawing SVG underline for section titles
   - Faux 3D hover tilt + microinteraction ripple
   - Loading skeleton shimmer
   ========================================================= */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Scroll progress bar */
.scroll-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  background: rgba(255,255,255,.06);
}
.scroll-progress__bar{
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(255,70,70,.0), rgba(255,70,70,.95), rgba(140,240,255,.9));
  filter: drop-shadow(0 0 10px rgba(255,70,70,.32));
}

/* Ambient background motion (subtle) */
:root{
  --ambient-x: 0px;
  --ambient-y: 0px;
}
body::before,
body::after{
  content:"";
  position: fixed;
  inset: -20vh -20vw;
  z-index: -2;
  pointer-events:none;
  opacity: .65;
  transform: translate3d(var(--ambient-x), var(--ambient-y), 0);
  transition: opacity .5s ease;
}
body::before{
  background:
    radial-gradient(closest-side at 20% 15%, rgba(255,70,70,.22), rgba(0,0,0,0) 55%),
    radial-gradient(closest-side at 80% 30%, rgba(140,240,255,.14), rgba(0,0,0,0) 58%),
    radial-gradient(closest-side at 55% 85%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%);
  filter: blur(36px);
  mix-blend-mode: screen;
  animation: ambientFloat 18s ease-in-out infinite alternate;
}
body::after{
  z-index: -3;
  background: linear-gradient(120deg, rgba(255,70,70,.08), rgba(10,12,16,.0), rgba(140,240,255,.06));
  filter: blur(24px);
  opacity: .55;
  animation: ambientHue 14s linear infinite;
}

@keyframes ambientFloat{
  0%{ transform: translate3d(calc(var(--ambient-x) * .7), calc(var(--ambient-y) * .7), 0) scale(1); }
  100%{ transform: translate3d(calc(var(--ambient-x) * -1), calc(var(--ambient-y) * -1), 0) scale(1.05); }
}
@keyframes ambientHue{
  0%{ transform: translate3d(0,0,0) rotate(0deg); }
  100%{ transform: translate3d(0,0,0) rotate(360deg); }
}

/* Scrollytelling-lite reveal */
.reveal{
  opacity: 1;
  transform: translate3d(0,0,0);
}

.js .reveal{
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.9,.2,1);
}

.js .reveal.in-view{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Hero expressive typography reveal */
.hero__title{
  position: relative;
}
.js .hero__title{
  animation: titleReveal 900ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes titleReveal{
  0%{ filter: blur(8px); opacity: 0; transform: translate3d(0, 10px, 0); }
  100%{ filter: blur(0px); opacity: 1; transform: translate3d(0,0,0); }
}

/* Self-drawing underline (Line animation / self-draw) */
.drawline{
  display: inline-block;
  width: 160px;
  margin-left: 10px;
  vertical-align: middle;
  opacity: .8;
}
.drawline__svg{ width: 100%; height: 18px; }
.drawline__path{
  fill: none;
  stroke: rgba(255,255,255,.55);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  filter: drop-shadow(0 0 10px rgba(255,70,70,.18));
}
.in-view .drawline__path,
.drawline__path.is-drawing{
  animation: drawline 1.2s ease forwards;
}
@keyframes drawline{
  to{ stroke-dashoffset: 0; }
}

/* Tilt (faux 3D) */
.tilt{
  transform-style: preserve-3d;
  transition: transform 220ms ease, box-shadow 220ms ease;
  will-change: transform;
}
.tilt.tilt--on{
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

/* Add a little glass sheen on hover for cards */
.tilt::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  background: radial-gradient(600px 140px at 30% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);
  transition: opacity 220ms ease;
}
.tilt.tilt--on::after{ opacity: 1; }

/* Loading skeleton shimmer */
body.is-loading .feature-card__media,
body.is-loading .movie__art,
body.is-loading .film-card__media,
body.is-loading .event-card__media,
body.is-loading .hero__bg{
  position: relative;
  overflow: hidden;
}
body.is-loading .feature-card__media::before,
body.is-loading .movie__art::before,
body.is-loading .film-card__media::before,
body.is-loading .event-card__media::before,
body.is-loading .hero__bg::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04));
  transform: translateX(-120%);
  animation: shimmer 1.05s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}

/* Microinteraction: ripple */
.ripple{
  position: relative;
  overflow: hidden;
}
.ripple::after{
  content:"";
  position:absolute;
  left: var(--rip-x, 50%);
  top: var(--rip-y, 50%);
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  opacity: 0;
  pointer-events:none;
}
.ripple.rip-anim::after{
  animation: rippleBurst 650ms ease forwards;
}
@keyframes rippleBurst{
  0%{ transform: translate(-50%, -50%) scale(0); opacity: .65; }
  100%{ transform: translate(-50%, -50%) scale(22); opacity: 0; }
}

/* Animated hamburger icon (icons) */
.hamburger span{
  transition: transform 240ms ease, opacity 240ms ease;
}
.hamburger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity: 0; }
.hamburger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Subtle hover lift everywhere */
.feature-card:hover,
.film-card:hover,
.event-card:hover,
.movie:hover{
  transform: translate3d(0,-4px,0);
}


/* =========================================================
   MOVEMENT PACK v2 (More motion, still lightweight)
   - Particle canvas background
   - Cursor glow spotlight
   - Kinetic marquee strip
   - Film grain overlay
   - Magnetic hover + deeper hover depth
   ========================================================= */

.particles{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}


body::after{
  /* film grain (subtle) */
  content:"";
  position: fixed;
  inset: -20%;
  z-index: 2;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 3px);
  opacity: .18;
  transform: translate3d(calc(var(--ambient-x,0px) * .2), calc(var(--ambient-y,0px) * .2), 0);
  animation: grainMove 6s steps(6) infinite;
}

@keyframes grainMove{
  0%{ transform: translate3d(-2%, -2%, 0) }
  20%{ transform: translate3d(1%, -3%, 0) }
  40%{ transform: translate3d(3%, 1%, 0) }
  60%{ transform: translate3d(-1%, 3%, 0) }
  80%{ transform: translate3d(-3%, 1%, 0) }
  100%{ transform: translate3d(-2%, -2%, 0) }
}

header, main, footer{ position: relative; z-index: 3; }

/* Kinetic marquee */
.marquee{
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-left: 0;
  border-right: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.marquee__track{
  display: flex;
  gap: 40px;
  padding: 10px 0;
  will-change: transform;
  animation: marqueeMove 14s linear infinite;
}
.marquee__track span{
  white-space: nowrap;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: 12px;
  opacity: .85;
  text-transform: uppercase;
}

@keyframes marqueeMove{
  from{ transform: translate3d(0,0,0) }
  to{ transform: translate3d(-33.333%,0,0) }
}

/* Deeper hover depth (pairs nicely with tilt) */
.video-item, .event-card, .card{
  transform-style: preserve-3d;
}
.video-item::after, .event-card::after, .card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%),
    rgba(255,255,255,.18), rgba(0,0,0,0) 55%);
  opacity: 0;
  transition: opacity .22s ease;
}
.video-item:hover::after, .event-card:hover::after, .card:hover::after{
  opacity: .9;
}

/* Magnetic hover targets */
.magnetic{
  will-change: transform;
}

@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none !important; transform: none !important; }
  body::after{ animation: none !important; }
}


/* ============================================================
   CINEMATIC + GLITCH HORROR PACK (no glassmorphism)
   ============================================================ */

:root{
  /* Hard pivot away from "generic glass" */
  --bg: #050507;
  --panel: #0b0b10;
  --panel2: #10101a;
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.16);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --faint: rgba(255,255,255,.46);

  /* Horror accent */
  --red: #d1262a;
  --red2:#ff3b3f;
  --acid:#b7ff2a;
}

/* Subtle letterbox framing */
body{
  background: radial-gradient(1200px 700px at 30% 20%, rgba(255,59,63,.06), transparent 55%),
              radial-gradient(1000px 700px at 70% 80%, rgba(183,255,42,.04), transparent 55%),
              linear-gradient(180deg, #030305, #07070c 55%, #040406);
}
body::before,
body::after{
  content:"";
  position:fixed;
  left:0; right:0;
  height:6.5vh;
  z-index:90;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,0));
}
body::after{
  top:auto;
  bottom:0;
  background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0));
}

/* Kill blur-glass header; keep it crisp + gritty */
.header{
  background: rgba(5,6,8,.92);
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,59,63,.35), transparent);
  opacity:.7;
}

/* Panels become solid, gritty */
.card,
.panel,
.section__box,
.video-card,
.event-card,
.teaser-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  background-color: var(--panel);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 10px 30px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.05) inset;
}
.card::before,
.video-card::before,
.event-card::before,
.teaser-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 35%),
    radial-gradient(120px 90px at 20% 0%, rgba(255,59,63,.08), transparent 60%),
    radial-gradient(120px 90px at 100% 80%, rgba(183,255,42,.06), transparent 60%);
  mix-blend-mode: screen;
}

/* Fixed cinematic overlays */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:80; }

.scanlines{
  position:fixed; inset:0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.035) 0px,
    rgba(255,255,255,.035) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  opacity:.18;
  mix-blend-mode: overlay;
}
.grain{
  position:fixed; inset:-20%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.10;
  transform: translate3d(0,0,0);
  animation: grainShift 7s steps(10) infinite;
  mix-blend-mode: overlay;
}
@keyframes grainShift{
  0%{ transform: translate3d(-2%, -2%, 0); }
  20%{ transform: translate3d(1%, -3%, 0); }
  40%{ transform: translate3d(3%, 2%, 0); }
  60%{ transform: translate3d(-3%, 1%, 0); }
  80%{ transform: translate3d(2%, 3%, 0); }
  100%{ transform: translate3d(-2%, -2%, 0); }
}
.vignette{
  position:fixed; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%);
  opacity:.75;
}



/* Glitch-wipe page/section transitions */
.transition{
  position:fixed; inset:0;
  opacity:0;
}
body.is-transitioning .transition{ opacity:1; }

.transition::before{
  content:"";
  position:absolute; inset:-10%;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 20%,
      rgba(255,59,63,.18) 30%,
      rgba(0,0,0,1) 45%,
      rgba(183,255,42,.10) 55%,
      rgba(0,0,0,1) 70%,
      rgba(0,0,0,1) 100%);
  filter: contrast(1.2);
  transform: translateX(-120%);
  animation: none;
}
body.is-transitioning .transition::before{
  animation: glitchWipe 680ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes glitchWipe{
  0%{ transform: translateX(-120%) skewX(-8deg); filter: contrast(1.1) saturate(1.1); }
  35%{ transform: translateX(-10%) skewX(10deg); filter: contrast(1.4) saturate(1.4); }
  50%{ transform: translateX(5%) skewX(-10deg); }
  70%{ transform: translateX(60%) skewX(8deg); }
  100%{ transform: translateX(140%) skewX(0deg); }
}
.transition::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 220px at 20% 35%, rgba(255,59,63,.20), transparent 60%),
    radial-gradient(520px 220px at 80% 60%, rgba(183,255,42,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  opacity:.0;
  mix-blend-mode: screen;
}
body.is-transitioning .transition::after{
  opacity:1;
  animation: flashFlicker 680ms steps(8) both;
}
@keyframes flashFlicker{
  0%{ opacity:0; }
  10%{ opacity:.9; }
  20%{ opacity:.25; }
  35%{ opacity:1; }
  55%{ opacity:.18; }
  75%{ opacity:.85; }
  100%{ opacity:0; }
}

/* Scene cut when entering a section */
.section.scene-cut{
  position:relative;
}
.section.scene-cut::before{
  content:"";
  position:absolute;
  inset:-12px;
  background: radial-gradient(400px 160px at 30% 30%, rgba(255,59,63,.18), transparent 60%),
              radial-gradient(420px 160px at 75% 70%, rgba(183,255,42,.10), transparent 65%),
              linear-gradient(180deg, rgba(255,255,255,.06), transparent 55%, rgba(0,0,0,.18));
  opacity:0;
  pointer-events:none;
}
.section.scene-cut.is-cutting::before{
  animation: cutPop 520ms steps(6) both;
}
@keyframes cutPop{
  0%{ opacity:0; transform: translate3d(0,0,0); }
  10%{ opacity:1; transform: translate3d(-2px,1px,0); }
  25%{ opacity:.25; transform: translate3d(2px,-1px,0); }
  40%{ opacity:1; transform: translate3d(-3px,2px,0); }
  70%{ opacity:.2; transform: translate3d(2px,0,0); }
  100%{ opacity:0; transform: translate3d(0,0,0); }
}

/* Cinematic parallax layers (driven by JS vars) */
.hero{
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(900px 540px at 30% 25%, rgba(255,59,63,.09), transparent 60%),
    radial-gradient(900px 540px at 70% 70%, rgba(183,255,42,.06), transparent 60%);
  transform: translate3d(0, calc(var(--parallax, 0px) * 1.0), 0) rotate(-0.001deg);
  will-change: transform;
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    conic-gradient(from 180deg at 50% 50%, rgba(255,59,63,.06), rgba(0,0,0,0), rgba(183,255,42,.05), rgba(0,0,0,0));
  opacity:.35;
  transform: translate3d(0, calc(var(--parallax, 0px) * 1.8), 0);
  will-change: transform;
  pointer-events:none;
  mix-blend-mode: screen;
}

/* Glitch accents on key headings (not constant, only on hover/enter) */
.hero__title,
.section__title{
  text-shadow:
    0 0 22px rgba(255,59,63,.10);
}
.section.is-revealed .section__title{
  animation: titleFlicker 900ms steps(8) 1;
}
@keyframes titleFlicker{
  0%{ transform: translate3d(0,0,0); filter:none; }
  18%{ transform: translate3d(-1px,0,0); filter: contrast(1.2) saturate(1.2); }
  32%{ transform: translate3d(1px,-1px,0); }
  48%{ transform: translate3d(-2px,1px,0); }
  65%{ transform: translate3d(2px,0,0); }
  100%{ transform: translate3d(0,0,0); filter:none; }
}

/* Tone down any "glassy" hover shadows from earlier packs */
.card:hover,
.video-card:hover,
.event-card:hover,
.teaser-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 22px 48px rgba(0,0,0,.66),
    0 1px 0 rgba(255,255,255,.06) inset;
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .scanlines,.grain,.transition{ display:none !important; }
  body{ cursor:auto; }
  .cursor{ display:none !important; }
  .hero::before,.hero::after{ transform:none !important; }
}

/* =========================
   MANIFESTO SECTION
   Cinematic horror style
   ========================= */

.manifesto{
  position:relative;
  padding:140px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(120,0,0,.15), transparent 60%),
    radial-gradient(circle at 20% 70%, rgba(0,0,0,.8), transparent 70%),
    #060606;
}

.manifesto__card{
  background:none;
  border:none;
  box-shadow:none;
  padding:0;
}

/* Dark fog atmosphere */
.manifesto::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,0,0,.15), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.05), transparent 70%);
  filter:blur(120px);
  opacity:.4;
  animation:fogMove 25s ease-in-out infinite;
}

/* Film grain */
.manifesto::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
  url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='.3'/%3E%3C/svg%3E");
  opacity:.06;
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* small top label */
.manifesto__kicker{
  color:#9c9c9c;
  letter-spacing:.25em;
  font-size:12px;
  text-transform:uppercase;
  margin-bottom:18px;
}

/* main headline */
.manifesto__title{
  font-size:clamp(46px,5vw,90px);
  font-weight:900;
  letter-spacing:.02em;
  margin-bottom:24px;

  color:#e8e8e8;

  text-shadow:
    0 0 20px rgba(255,0,0,.12),
    0 0 60px rgba(255,0,0,.06);

  animation:titlePulse 6s ease-in-out infinite;
}

/* manifesto text */
.manifesto__copy{
  font-size:20px;
  line-height:1.6;
  max-width:720px;
  color:#c7c7c7;
}

/* lines */
.manifesto__line{
  display:block;
  margin-bottom:12px;
}

/* signature line */
.manifesto__sig{
  margin-top:32px;
  font-weight:700;
  color:#8f8f8f;
  letter-spacing:.03em;
}

.manifesto__sigMark{
  color:#ff2a2a;
  margin-right:8px;
}

/* animations */

@keyframes fogMove{
  0%{transform:translate(-2%,0)}
  50%{transform:translate(2%,2%)}
  100%{transform:translate(-2%,0)}
}

@keyframes titlePulse{
  0%{text-shadow:0 0 20px rgba(255,0,0,.12)}
  50%{text-shadow:0 0 40px rgba(255,0,0,.18)}
  100%{text-shadow:0 0 20px rgba(255,0,0,.12)}
}

/* Glitch title: use injected layers, hide the base text */
#manifestoGlitch{
  position: relative;
}

/* once JS adds spans, hide the original text node visually */
#manifestoGlitch.has-glitch{
  color: rgba(232,232,232,.22);
  text-shadow: none;
}

/* style the injected glitch layers to look like your big headline */
#manifestoGlitch .glitch__main{
  color: #e8e8e8;
  text-shadow:
    0 0 20px rgba(255,0,0,.12),
    0 0 60px rgba(255,0,0,.06);
}

/* the offset layers that create the “horror glitch” */
#manifestoGlitch .glitch__a{
  color: rgba(255, 40, 40, .55);
  mix-blend-mode: screen;
}
#manifestoGlitch .glitch__b{
  color: rgba(0, 200, 255, .35);
  mix-blend-mode: screen;
}

/* Keep the glitch title visible after the burst */
#manifestoGlitch.has-glitch .glitch__main{
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}

/* If burst temporarily hides ALL spans, this prevents total disappearance */
#manifestoGlitch.has-glitch .glitch__a,
#manifestoGlitch.has-glitch .glitch__b{
  display: block !important;
  visibility: visible !important;
}

.manifesto__actions{
  margin-top: 34px;
}

.manifesto__btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 999px;
  text-decoration: none;

  background: rgba(10,10,10,.55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 10px 28px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,0,0,.05) inset;

  backdrop-filter: blur(8px);

  overflow: hidden;
  transform: translateZ(0);
}

.manifesto__btnText{
  position: relative;
  z-index: 2;
  color: rgba(232,232,232,.9);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
}

/* creepy “ember” sweep layer */
.manifesto__btnFx{
  position:absolute;
  inset:-40%;
  z-index:1;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,0,0,.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(255,120,0,.10), transparent 60%),
    linear-gradient(90deg, transparent, rgba(255,0,0,.10), transparent);
  filter: blur(18px);
  opacity: .25;
  transform: translateX(-12%) rotate(-10deg);
  transition: opacity .35s ease, transform .45s ease;
}

/* subtle “blood pulse” */
@keyframes cultPulse{
  0%,100%{ box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(255,0,0,.04) inset, 0 0 0 rgba(255,0,0,0); }
  50%{ box-shadow: 0 10px 28px rgba(0,0,0,.60), 0 0 0 1px rgba(255,0,0,.10) inset, 0 0 22px rgba(255,0,0,.12); }
}

.manifesto__btn{
  animation: cultPulse 3.6s ease-in-out infinite;
}

/* hover = more horror */
.manifesto__btn:hover{
  border-color: rgba(255,0,0,.22);
  transform: translateY(-1px);
}

.manifesto__btn:hover .manifesto__btnFx{
  opacity: .6;
  transform: translateX(10%) rotate(-10deg);
}

/* active click = snap */
.manifesto__btn:active{
  transform: translateY(0px) scale(.99);
}

/* focus accessibility */
.manifesto__btn:focus-visible{
  outline: none;
  box-shadow:
    0 10px 28px rgba(0,0,0,.55),
    0 0 0 2px rgba(255,0,0,.35),
    0 0 0 6px rgba(255,0,0,.12);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .manifesto__btn{ animation: none !important; }
  .manifesto__btnFx{ transition: none !important; }
}

@keyframes cultShake{
  0%{ transform: translateY(-1px) translateX(0); }
  25%{ transform: translateY(-1px) translateX(-1px); }
  50%{ transform: translateY(-1px) translateX(1px); }
  75%{ transform: translateY(-1px) translateX(-1px); }
  100%{ transform: translateY(-1px) translateX(0); }
}
.cultBtn--shake{
  animation: cultShake .22s linear 1;
}

/* =========================
   BLEEDING UNDERLINE
   ========================= */

.manifesto__underline{
  position:absolute;
  left:18px;
  right:18px;
  bottom:8px;
  height:2px;

  background:linear-gradient(
    90deg,
    rgba(255,0,0,.9),
    rgba(160,0,0,.9)
  );

  border-radius:2px;
  overflow:visible;
}

/* blood drops */

.drip{
  position:absolute;
  width:4px;
  height:4px;
  background:#ff0000;
  border-radius:50%;
  opacity:0;
}

/* drip positions */

.drip1{ left:20%; }
.drip2{ left:50%; }
.drip3{ left:75%; }

/* hover triggers bleed */

.manifesto__btn:hover .drip{
  animation: bloodDrip 1.6s ease-in infinite;
}

/* stagger drips */

.drip2{ animation-delay:.2s; }
.drip3{ animation-delay:.45s; }

@keyframes bloodDrip{

  0%{
    opacity:0;
    transform:translateY(0) scale(0.5);
  }

  10%{
    opacity:1;
    transform:translateY(0) scale(1);
  }

  60%{
    transform:translateY(10px) scale(1.1);
  }

  100%{
    transform:translateY(22px) scale(0.8);
    opacity:0;
  }
}

.manifesto__btn:hover .manifesto__underline{
  height:3px;
  box-shadow:0 0 10px rgba(255,0,0,.6);
}

/* blood pool that forms under the underline */
.pool{
  position:absolute;
  left:0;
  bottom:-24px;         /* where the puddle appears */
  width:100%;
  height:22px;
  opacity:0;
  pointer-events:none;
  transform: scaleX(.2) scaleY(.25);
  transform-origin: 50% 0%;

  background:
    radial-gradient(closest-side at 18% 35%, rgba(255,0,0,.55), transparent 60%),
    radial-gradient(closest-side at 46% 55%, rgba(170,0,0,.55), transparent 62%),
    radial-gradient(closest-side at 78% 40%, rgba(255,0,0,.50), transparent 65%);
  filter: blur(3px);
  mix-blend-mode: screen;
}

/* trigger the puddle on hover */
.manifesto__btn:hover .pool{
  animation: bloodPool 1.8s ease-out infinite;
}

/* puddle anim: appear -> spread -> fade */
@keyframes bloodPool{
  0%{
    opacity:0;
    transform: scaleX(.2) scaleY(.25);
    filter: blur(3px);
  }
  18%{
    opacity:.55;
    transform: scaleX(.55) scaleY(.6);
  }
  55%{
    opacity:.45;
    transform: scaleX(1.05) scaleY(.9);
    filter: blur(4px);
  }
  100%{
    opacity:0;
    transform: scaleX(1.25) scaleY(1.05);
    filter: blur(6px);
  }
}

/* =========================
   THE FIRST FILM (layout-focused)
   ========================= */

.firstfilm{
  padding: 110px 0;
}

.firstfilm__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
}

.firstfilm__kicker{
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(232,232,232,.75);
  font-size: 12px;
  margin-bottom: 16px;
}

.firstfilm__title{
  margin: 0 0 14px;
  font-size: clamp(44px, 4.5vw, 72px);
  line-height: 1.05;
  font-weight: 900;
  color: rgba(232,232,232,.92);
}

.firstfilm__sub{
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(232,232,232,.68);
  max-width: 52ch;
}

.firstfilm__ctaRow{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.firstfilm__soon{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(232,232,232,.85);
  border: 1px solid rgba(255,0,0,.22);
  background: rgba(0,0,0,.25);
}

/* poster */
.firstfilm__poster{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}

.firstfilm__posterInner{
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 18px;
}

.firstfilm__posterText{
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(232,232,232,.65);
}

/* responsive */
@media (max-width: 900px){
  .firstfilm__grid{
    grid-template-columns: 1fr;
  }
  .firstfilm__right{
    order: -1; /* poster first on mobile */
  }
}

.firstfilm__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
   INNER CIRCLE EMAIL SIGNUP
   ========================= */

.innercircle{
  padding:110px 0;
}

.innercircle__content{
  max-width:520px;
  margin:0 auto;
  text-align:center;
}

.innercircle__title{
  font-size: clamp(36px,4vw,56px);
  font-weight:900;
  margin-bottom:12px;
  letter-spacing:.03em;
}

.innercircle__subtitle{
  color:rgba(232,232,232,.65);
  margin-bottom:40px;
  font-size:18px;
}

/* form */

.innercircle__form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.innercircle__field{
  display:flex;
  flex-direction:column;
  text-align:left;
}

.innercircle__field label{
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(232,232,232,.6);
  margin-bottom:6px;
}

.innercircle__field input{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  padding:14px 16px;
  border-radius:8px;
  color:white;
  font-size:16px;
}

.innercircle__field input:focus{
  outline:none;
  border-color:rgba(255,0,0,.5);
}

/* button */

.innercircle__btn{
  margin:20px auto 0;
  padding:16px 36px;
  border-radius:999px;

  width:auto;          /* removes full width */
  display:inline-block;

  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:13px;

  background:#0d0d0d;
  color:white;

  border:1px solid rgba(255,0,0,.35);
  cursor:pointer;
  max-width:260px;
}

.innercircle__btn:hover{
  border-color:rgba(255,0,0,.7);
  transform:translateY(-1px);
}

.innercircle__note{
  margin-top:16px;
  font-size:13px;
  color:rgba(232,232,232,.45);
}

.innercircle .container{
  max-width: 1200px; /* expands the section width */
}

.innercircle__content{
  max-width: 900px; /* wider form area */
  margin: 0 auto;
}

/* =========================
   COMMUNITY + SOCIALS
   ========================= */

.community{
  padding: 110px 0;
}

.community__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom: 26px;
}

.community__title{
  margin:0;
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 900;
  letter-spacing: .03em;
}

.community__sub{
  margin:0;
  color: rgba(232,232,232,.65);
  max-width: 52ch;
}

.community__grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
}

.community__panel{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px;
}

.community__panelHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 14px;
}

.community__panelHead h3{
  margin:0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.community__link{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(232,232,232,.75);
}

.community__link:hover{
  color: rgba(232,232,232,.95);
}

/* Instagram grid */
.iggrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.iggrid__item{
  border-radius: 12px;
  overflow:hidden;
  display:block;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
}

.iggrid__item img{
  width:100%;
  height:100%;
  display:block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* YouTube stack */
.ytstack{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.yt{
  width:100%;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}

.yt iframe{
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;
  display:block;
}

/* Cult card */
.cultcard__lead{
  margin: 4px 0 14px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(232,232,232,.85);
  font-weight: 700;
}

.cultcard__list{
  margin: 0 0 16px;
  padding-left: 18px;
  color: rgba(232,232,232,.72);
  line-height: 1.7;
}

.cultcard__quotes{
  display:grid;
  gap: 10px;
  margin-bottom: 18px;
}

.quote{
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(232,232,232,.70);
  font-style: italic;
}

.cultcard__btn{
  display:inline-block;
  text-decoration:none;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(232,232,232,.92);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,0,0,.25);
}

.cultcard__btn:hover{
  border-color: rgba(255,0,0,.6);
}

.community__footerNote{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(232,232,232,.45);
}

/* Responsive */
@media (max-width: 980px){
  .community__grid{
    grid-template-columns: 1fr;
  }
  .community__header{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   PRESS & MEDIA
   ========================= */

.press{
  padding: 110px 0;
}

.press__wrap{
  max-width: 1200px;
  margin: 0 auto;
}

.press__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.press__title{
  margin:0;
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 900;
  letter-spacing: .03em;
}

.press__sub{
  margin:0;
  color: rgba(232,232,232,.65);
  max-width: 56ch;
}

.press__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

.press__card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px;
}

.press__cardTitle{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.press__cardText{
  margin: 0 0 14px;
  color: rgba(232,232,232,.70);
  line-height: 1.6;
}

.press__btn{
  display:inline-block;
  text-decoration:none;
  padding: 12px 16px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;

  background: rgba(0,0,0,.35);
  color: rgba(232,232,232,.92);
  border: 1px solid rgba(255,0,0,.25);
}

.press__btn:hover{
  border-color: rgba(255,0,0,.60);
}

.press__link{
  text-decoration:none;
  color: rgba(232,232,232,.86);
  font-weight: 800;
  letter-spacing: .04em;
}

.press__link:hover{
  color: rgba(232,232,232,1);
}

.press__meta{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(232,232,232,.45);
}

/* contact rows */
.press__contact{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 10px;
}

.press__contactRow{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
}

.press__label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(232,232,232,.55);
}

.press__value{
  color: rgba(232,232,232,.88);
  text-decoration:none;
  font-weight: 800;
}

.press__value:hover{
  color: rgba(232,232,232,1);
}

/* responsive */
@media (max-width: 980px){
  .press__header{
    flex-direction: column;
    align-items: flex-start;
  }
  .press__grid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Mobile Responsiveness Fixes
   ========================= */

/* Prevent horizontal clipping caused by nowrap + long strings */
.top-strip__center{ min-width:0; }
.top-strip__msg{ min-width:0; }

@media (max-width: 520px){
  /* Top strip: allow wrapping instead of clipping */
  .top-strip__center{
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
    text-align: center;
  }
  .top-strip__msg{
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    line-height: 1.25;
  }
}

/* Hero: keep title/excerpt inside viewport on small screens */
.hero__title{
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 520px){
  .hero__inner{ padding: 84px 0 44px; }
  .hero__title{ font-size: 36px; line-height: 1.0; letter-spacing: -0.01em; }
  .hero__excerpt{ font-size: 13px; }
}

/* Charts strip: avoid hard clipping on mobile */
@media (max-width: 820px){
  .charts-card{ overflow: visible; }
  .top3__items{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none; /* Firefox */
  }
  .top3__items::-webkit-scrollbar{ display:none; }
  .movie{ min-width: 150px; }
}
@media (max-width: 520px){
  .charts-card{ padding: 14px 14px; }
  .movie{ min-width: 140px; }
  .top3__label{ display:none; }
}

/* Manifesto glitch headline: allow wrap on small screens */
#manifestoGlitch{
  display:block;
  max-width:100%;
}
@media (max-width: 520px){
  .manifesto__title{
    font-size: clamp(34px, 8.5vw, 56px);
    line-height: 1.05;
  }
  .glitch__layer{ white-space: normal; width: auto; right: 0; }
}

/* Latest feature card title size on mobile */
@media (max-width: 520px){
  .big-title{ font-size: 54px; line-height: .95; }
}

/* =========================
   Mobile Fixes v2 (screenshots)
   Paste at END of styles.css
   ========================= */

/* Make container behave more predictably on tiny Android widths */
@media (max-width: 520px){
  .container{
    width: 100%;
    padding: 10px 5px;  /* gives breathing room so text isn’t kissing edges */
  }
}

/* HERO: clamp title so "BLACKCRAFT STUDIOS" never clips */
@media (max-width: 520px){
  .hero__title{
    font-size: clamp(28px, 10vw, 42px);
    line-height: .98;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .hero__content{
    max-width: 100%;
  }
}

/* CHARTS/VOTE: remove pill/translate tricks on mobile + allow layout to wrap */
@media (max-width: 820px){
  .charts-card{
    transform: none !important;     /* kills the negative translate that breaks mobile */
    border-radius: 18px !important; /* stops the “giant pill” */
    overflow: visible !important;
  }

  .charts-left,
  .charts-right{
    width: 100%;
  }

  .charts-right{
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Make VOTE button not shove layout sideways */
  .vote-btn{
    width: 100%;
    justify-content: center;
  }

  /* Top 3 row: scroll instead of exploding the layout */
  .top3__items{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .top3__items::-webkit-scrollbar{ display:none; }

  .movie{
    min-width: 155px;
  }
}

/* Extra small: reduce movie min width a bit more */
@media (max-width: 520px){
  .movie{
    min-width: 140px;
  }
}

/* Center Manifesto on mobile only */
@media (max-width: 520px){

  .manifesto{
    text-align: center;
  }

  .manifesto__inner{
    align-items: center;
  }

  .manifesto__title{
    margin-left: auto;
    margin-right: auto;
  }
	
  .glitch__layer{ left:0; right:0; margin:auto; }

  #manifestoGlitch{
    text-align: center;
  }

}
/* Center First Film section on mobile only */
@media (max-width: 520px){

  .firstfilm{
    text-align: center;
  }

  .firstfilm .container{
    align-items: center;
  }
	
  .firstfilm__content{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
.firstfilm__actions{
  justify-content: center;
}
}
/* Center FIRST FILM CTA on mobile */
@media (max-width: 520px){

  .firstfilm__ctaRow{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .firstfilm__soon{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
.firstfilm__content{
  text-align: center;
  margin: 0 auto;
}
}

/* =========================================================
   INNER PAGES
   ========================================================= */

.page-main{
  position: relative;
  z-index: 2;
}

.page-hero{
  position: relative;
  min-height: 72vh;
  display: grid;
  align-items: end;
  padding: 2rem 0 4rem;
  overflow: clip;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 20% 20%, rgba(180,0,0,.20), transparent 32%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.06), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.92) 100%);
}

.page-hero__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: grayscale(.15) contrast(1.05) brightness(.45);
  opacity: .55;
}

.page-hero__shade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.72) 100%);
}

.page-hero__content{
  position: relative;
  max-width: 880px;
  z-index: 2;
}

.page-kicker{
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .9rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,10,10,.72);
  backdrop-filter: blur(16px);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  margin-bottom: 1.2rem;
}

.page-title{
  margin: 0;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: .88;
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
}

.page-title em{
  font-style: normal;
  color: #ff3131;
}

.page-lead{
  max-width: 760px;
  margin-top: 1.25rem;
  color: rgba(255,255,255,.78);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.7;
}

.page-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

.page-section{
  position: relative;
  padding: 5rem 0;
}

.page-section--tight{
  padding-top: 2.5rem;
}

.page-shell{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 1.4rem;
}

.page-shell--reverse{
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
}

.page-card,
.info-card,
.media-card,
.press-card,
.contact-card,
.timeline-card{
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 28px;
  padding: 1.5rem;
  box-shadow:
    0 10px 40px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.page-card::before,
.info-card::before,
.media-card::before,
.press-card::before,
.contact-card::before,
.timeline-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,0,0,.10), transparent 28%, transparent 70%, rgba(255,255,255,.03));
  pointer-events: none;
}

.page-card h2,
.page-card h3,
.info-card h3,
.media-card h3,
.press-card h3,
.contact-card h3,
.timeline-card h3{
  margin-top: 0;
}

.eyebrow{
  display: inline-block;
  margin-bottom: .8rem;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.page-copy,
.page-list,
.page-stat__label,
.page-stat__value{
  color: rgba(255,255,255,.78);
}

.page-copy{
  line-height: 1.8;
  font-size: 1rem;
}

.page-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.span-12{ grid-column: span 12; }
.span-8{ grid-column: span 8; }
.span-7{ grid-column: span 7; }
.span-6{ grid-column: span 6; }
.span-5{ grid-column: span 5; }
.span-4{ grid-column: span 4; }
.span-3{ grid-column: span 3; }

.stat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.page-stat{
  padding: 1rem 1.1rem;
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.page-stat__value{
  display: block;
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  line-height: 1;
  font-weight: 900;
  color: #fff;
  margin-bottom: .45rem;
}

.page-stat__label{
  font-size: .85rem;
  line-height: 1.45;
}

.quote-block{
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.55;
  color: #fff;
  font-weight: 700;
}

.quote-block small{
  display: block;
  margin-top: .8rem;
  color: rgba(255,255,255,.55);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.page-list{
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  line-height: 1.8;
}

.page-list li + li{
  margin-top: .35rem;
}

.media-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.media-card{
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 0;
}

.media-card__image{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.52) saturate(.9);
}

.media-card__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.08) 35%, rgba(0,0,0,.88) 100%);
}

.media-card__body{
  position: relative;
  z-index: 2;
  padding: 1.25rem;
}

.media-card__meta{
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: .5rem;
}

.media-card__title{
  margin: 0;
  font-size: 1.3rem;
  text-transform: uppercase;
}

.timeline{
  display: grid;
  gap: 1rem;
}

.timeline-card{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1rem;
  align-items: start;
}

.timeline-card__date{
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ff4747;
  padding-top: .35rem;
}

.timeline-card__copy{
  color: rgba(255,255,255,.78);
  line-height: 1.75;
}

.press-list{
  display: grid;
  gap: 1rem;
}

.press-card{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}

.press-card__meta{
  color: rgba(255,255,255,.58);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}

.press-card__title{
  margin: 0;
  font-size: 1.15rem;
  text-transform: uppercase;
}

.press-card__cta{
  white-space: nowrap;
}

.contact-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.contact-card a{
  color: #fff;
  text-decoration: none;
}

.page-divider{
  height: 1px;
  margin: 1rem 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,0,0,.55), transparent);
}

.page-cta{
  text-align: center;
  padding: 4rem 1.5rem;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at top, rgba(255,0,0,.12), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}

.page-cta h2{
  margin-top: 0;
  margin-bottom: .8rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
  text-transform: uppercase;
}

.page-cta p{
  max-width: 760px;
  margin: 0 auto 1.4rem;
  color: rgba(255,255,255,.74);
  line-height: 1.75;
}

.footer-mini{
  padding: 2rem 0 4rem;
  color: rgba(255,255,255,.5);
  text-align: center;
  font-size: .9rem;
}

.link-btn{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.link-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,70,70,.45);
  background: rgba(255,0,0,.08);
}

@media (max-width: 980px){
  .page-shell,
  .page-shell--reverse,
  .contact-grid,
  .stat-grid{
    grid-template-columns: 1fr;
  }

  .span-8,
  .span-7,
  .span-6,
  .span-5,
  .span-4,
  .span-3{
    grid-column: span 12;
  }

  .timeline-card,
  .press-card{
    grid-template-columns: 1fr;
  }
}

.page-hero__content--center{
  margin: 0 auto;
  text-align: center;
}

.page-hero__content--center .page-kicker,
.page-hero__content--center .page-lead{
  margin-left: auto;
  margin-right: auto;
}

.page-hero__content--center .page-actions{
  justify-content: center;
}


/* HERO GLITCH */

/* ABOUT HERO GLITCH WORD */

.hero-glitch{
  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
}

.hero-glitch__base{
  position: relative;
  z-index: 1;
  display: inline-block;
  color: #ff2f2f;
}

.hero-glitch__layer{
  position: absolute;
  inset: 0;
  display: inline-block;
  opacity: 0;
  pointer-events: none;
  will-change: transform, clip-path, opacity, filter;
}

.hero-glitch__layer--red{
  z-index: 2;
  color: #ff1a1a;
  text-shadow: -2px 0 rgba(255,0,0,.55);
  mix-blend-mode: screen;
}

.hero-glitch__layer--cyan{
  z-index: 3;
  color: #7df9ff;
  text-shadow: 2px 0 rgba(0,255,255,.5);
  mix-blend-mode: screen;
}

/* active pulse */
.hero-glitch.is-glitching .hero-glitch__base{
  animation: horrorBaseJolt 180ms steps(2, end);
}

.hero-glitch.is-glitching .hero-glitch__layer--red{
  opacity: .95;
  animation: horrorRedSlice 180ms steps(2, end);
}

.hero-glitch.is-glitching .hero-glitch__layer--cyan{
  opacity: .9;
  animation: horrorCyanSlice 180ms steps(2, end);
}

@keyframes horrorBaseJolt{
  0%{
    transform: translate(0,0) skewX(0deg);
    filter: brightness(1);
  }
  20%{
    transform: translate(-1px, 0) skewX(2deg);
    filter: brightness(1.1);
  }
  40%{
    transform: translate(2px, 0) skewX(-3deg);
    filter: brightness(1.2);
  }
  60%{
    transform: translate(-2px, 0) skewX(1deg);
  }
  100%{
    transform: translate(0,0) skewX(0deg);
    filter: brightness(1);
  }
}

@keyframes horrorRedSlice{
  0%{
    opacity: 0;
    transform: translate(0,0);
    clip-path: inset(0 0 100% 0);
  }
  15%{
    opacity: .95;
    transform: translate(-12px, -1px);
    clip-path: inset(8% 0 68% 0);
  }
  35%{
    opacity: .8;
    transform: translate(7px, 1px);
    clip-path: inset(42% 0 28% 0);
  }
  55%{
    opacity: .9;
    transform: translate(-6px, 0);
    clip-path: inset(72% 0 8% 0);
  }
  75%{
    opacity: .45;
    transform: translate(3px, -1px);
    clip-path: inset(18% 0 52% 0);
  }
  100%{
    opacity: 0;
    transform: translate(0,0);
    clip-path: inset(0 0 100% 0);
  }
}

@keyframes horrorCyanSlice{
  0%{
    opacity: 0;
    transform: translate(0,0);
    clip-path: inset(100% 0 0 0);
  }
  10%{
    opacity: .85;
    transform: translate(13px, 1px);
    clip-path: inset(0 0 78% 0);
  }
  30%{
    opacity: .9;
    transform: translate(-7px, -1px);
    clip-path: inset(28% 0 38% 0);
  }
  50%{
    opacity: .75;
    transform: translate(6px, 0);
    clip-path: inset(58% 0 16% 0);
  }
  70%{
    opacity: .55;
    transform: translate(-4px, 1px);
    clip-path: inset(82% 0 2% 0);
  }
  100%{
    opacity: 0;
    transform: translate(0,0);
    clip-path: inset(100% 0 0 0);
  }
}
.hero-glitch.is-glitching{
  filter: drop-shadow(0 0 10px rgba(255,0,0,.18));
}

/* ==========================================
   ABOUT PAGE — CLEANER HORROR EDITORIAL STYLE
   ========================================== */

.about-wrap{
  position: relative;
  z-index: 2;
}

.about-section{
  position: relative;
  padding: 5rem 0;
}

.about-grid{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 4rem;
  align-items: start;
}

.about-block{
  position: relative;
}

.about-kicker{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.about-heading{
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.03em;
}

.about-copy{
  max-width: 780px;
  color: rgba(255,255,255,.78);
  font-size: 1.08rem;
  line-height: 1.9;
}

.about-copy p{
  margin: 0 0 1.4rem;
}

.about-rule{
  width: 100%;
  height: 1px;
  margin: 0 0 2rem;
  background: linear-gradient(90deg, rgba(255,0,0,.75), rgba(255,255,255,.08), transparent);
}

.about-side{
  padding-top: .35rem;
}

.about-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.12);
}

.about-list li{
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
  font-size: 1rem;
  line-height: 1.6;
}

.about-list li::before{
  content: "✢";
  display: inline-block;
  margin-right: .75rem;
  color: #ff2b2b;
}

.about-metrics{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 1rem;
  background: rgba(255,255,255,.08);
}

.about-metric{
  padding: 2rem 1.4rem;
  background: rgba(0,0,0,.55);
}

.about-metric__value{
  display: block;
  margin-bottom: .55rem;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: .9;
  font-weight: 900;
  color: #fff;
}

.about-metric__label{
  display: block;
  color: rgba(255,255,255,.68);
  line-height: 1.6;
  font-size: .95rem;
}

.about-quote{
  position: relative;
  padding: 3rem 0 1rem;
  text-align: center;
}

.about-quote::before{
  content: "";
  display: block;
  width: 120px;
  height: 1px;
  margin: 0 auto 2rem;
  background: linear-gradient(90deg, transparent, rgba(255,0,0,.8), transparent);
}

.about-quote__text{
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(1.5rem, 3vw, 3rem);
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.about-quote__cite{
  margin-top: 1rem;
  color: rgba(255,255,255,.48);
  font-size: .78rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.about-panel{
  padding: 2rem 0 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.about-panel--narrow{
  max-width: 900px;
}

@media (max-width: 980px){
  .about-grid{
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-metrics{
    grid-template-columns: 1fr;
  }

  .about-heading{
    font-size: clamp(1.7rem, 10vw, 3rem);
  }

  .about-copy{
    font-size: 1rem;
    line-height: 1.8;
  }
}

/* ==========================================
   CHARTS PAGE — EDITORIAL HORROR STYLE
   ========================================== */

.charts-wrap{
  position: relative;
  z-index: 2;
}

.charts-section{
  position: relative;
  padding: 4.5rem 0;
}

.charts-intro{
  max-width: 820px;
}

.charts-kicker{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.charts-rule{
  width: 100%;
  height: 1px;
  margin: 0 0 1.75rem;
  background: linear-gradient(90deg, rgba(255,0,0,.8), rgba(255,255,255,.08), transparent);
}

.charts-heading{
  margin: 0 0 1rem;
  font-size: clamp(2.1rem, 4vw, 4.2rem);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.charts-copy{
  color: rgba(255,255,255,.74);
  line-height: 1.85;
  font-size: 1.03rem;
}

/* ranking list */
.chart-list{
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
}

.chart-row{
  display: grid;
  grid-template-columns: 110px minmax(220px, 320px) minmax(0, 1fr) 160px;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
}

.chart-row::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 1px;
  background: #ff2b2b;
  transition: width .35s ease;
}

.chart-row:hover::before{
  width: 100%;
}

.chart-rank{
  font-size: clamp(2.8rem, 7vw, 5.25rem);
  line-height: .8;
  font-weight: 900;
  letter-spacing: -.06em;
  color: rgba(255,255,255,.18);
}

.chart-poster{
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 220px;
  overflow: hidden;
  background: #080808;
}

.chart-poster img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.72) contrast(1.05) saturate(.9);
  transition: transform .5s ease, filter .5s ease;
}

.chart-row:hover .chart-poster img{
  transform: scale(1.04);
  filter: brightness(.8) contrast(1.08) saturate(1);
}

.chart-poster::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.55));
  pointer-events: none;
}

.chart-main{
  min-width: 0;
}

.chart-meta{
  margin-bottom: .55rem;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.chart-title{
  margin: 0 0 .6rem;
  font-size: clamp(1.4rem, 2.5vw, 2.5rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.chart-note{
  max-width: 60ch;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  font-size: 1rem;
}

.chart-votes{
  text-align: right;
}

.chart-votes__value{
  display: block;
  font-size: clamp(1.3rem, 2vw, 2rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

.chart-votes__label{
  display: block;
  margin-top: .45rem;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
}

.chart-votes__delta{
  display: inline-block;
  margin-top: .75rem;
  padding: .35rem .55rem;
  border: 1px solid rgba(255,0,0,.28);
  color: #ff4a4a;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* secondary schedule / voting section */
.charts-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.charts-panel{
  padding-top: .5rem;
}

.charts-panel-title{
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 2.6vw, 2.3rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.charts-panel-copy{
  color: rgba(255,255,255,.72);
  line-height: 1.8;
  font-size: 1rem;
}

.charts-panel-meta{
  margin-bottom: .9rem;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #ff3a3a;
}

.charts-line-list{
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.charts-line-list li{
  padding: .95rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
}

.charts-cta-band{
  margin-top: 1rem;
  padding: 2rem 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
}

.charts-cta-band h2{
  margin: 0 0 .85rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.04em;
}

.charts-cta-band p{
  max-width: 720px;
  margin: 0 auto 1.2rem;
  color: rgba(255,255,255,.72);
  line-height: 1.8;
}

@media (max-width: 1100px){
  .chart-row{
    grid-template-columns: 90px 220px 1fr;
  }

  .chart-votes{
    grid-column: 2 / -1;
    text-align: left;
  }
}

@media (max-width: 820px){
  .charts-split{
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .chart-row{
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .chart-rank{
    font-size: 3rem;
  }

  .chart-poster{
    max-width: 280px;
  }

  .chart-votes{
    text-align: left;
  }
}

/* ==========================================
   MANIFESTO PAGE — EDITORIAL TRANSMISSION
   ========================================== */

.manifesto-wrap{
  position: relative;
  z-index: 2;
}

.manifesto-section{
  position: relative;
  padding: 5rem 0;
}

.manifesto-intro{
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}

.manifesto-kicker{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.manifesto-rule{
  width: 100%;
  max-width: 720px;
  height: 1px;
  margin: 0 auto 1.8rem;
  background: linear-gradient(90deg, transparent, rgba(255,0,0,.82), rgba(255,255,255,.08), transparent);
}

.manifesto-heading{
  margin: 0 0 1rem;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: .9;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.manifesto-lead{
  color: rgba(255,255,255,.72);
  line-height: 1.85;
  font-size: 1.05rem;
}

.manifesto-body{
  max-width: 760px;
  margin: 0 auto;
}

.manifesto-block + .manifesto-block{
  margin-top: 3rem;
}

.manifesto-copy{
  color: rgba(255,255,255,.82);
  font-size: clamp(1.05rem, 1.2vw, 1.14rem);
  line-height: 2;
}

.manifesto-copy p{
  margin: 0 0 1.5rem;
}

.manifesto-copy strong{
  color: #fff;
  font-weight: 800;
}

.manifesto-divider{
  width: 100%;
  height: 1px;
  margin: 2.5rem 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), rgba(255,0,0,.45), rgba(255,255,255,.1), transparent);
}

.manifesto-quote{
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem 0;
  text-align: center;
}

.manifesto-quote__text{
  font-size: clamp(1.8rem, 4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  text-transform: uppercase;
  font-weight: 900;
}

.manifesto-quote__text em{
  font-style: normal;
  color: #ff2f2f;
}

.manifesto-quote__cite{
  margin-top: 1rem;
  font-size: .76rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.manifesto-principles{
  max-width: 980px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.1);
}

.manifesto-principle{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.manifesto-principle__num{
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
  font-weight: 900;
  color: rgba(255,255,255,.22);
}

.manifesto-principle__title{
  margin: 0 0 .45rem;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.manifesto-principle__copy{
  color: rgba(255,255,255,.72);
  line-height: 1.8;
  font-size: 1rem;
}

.manifesto-ending{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding-top: 1rem;
}

.manifesto-ending p{
  color: rgba(255,255,255,.74);
  line-height: 1.9;
  font-size: 1.05rem;
}

@media (max-width: 820px){
  .manifesto-principle{
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  .manifesto-copy{
    line-height: 1.85;
    font-size: 1rem;
  }
}

/* ==========================================
   MEDIA PAGE — ARCHIVE / VAULT STYLE
   ========================================== */

.media-wrap{
  position: relative;
  z-index: 2;
}

.media-section{
  position: relative;
  padding: 4.5rem 0;
}

.media-intro{
  max-width: 860px;
}

.media-kicker{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.media-rule{
  width: 100%;
  height: 1px;
  margin: 0 0 1.7rem;
  background: linear-gradient(90deg, rgba(255,0,0,.82), rgba(255,255,255,.08), transparent);
}

.media-heading{
  margin: 0 0 1rem;
  font-size: clamp(2.2rem, 4.8vw, 4.6rem);
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.media-copy{
  color: rgba(255,255,255,.74);
  line-height: 1.85;
  font-size: 1.03rem;
}

/* featured archive pieces */
.media-feature-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1.25rem;
  align-items: stretch;
}

.media-feature{
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: #080808;
  border: 1px solid rgba(255,255,255,.06);
}

.media-feature--stack{
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1.25rem;
  border: 0;
  background: transparent;
}

.media-asset{
  position: relative;
  overflow: hidden;
  min-height: 270px;
  background: #080808;
  border: 1px solid rgba(255,255,255,.06);
}

.media-feature__image,
.media-asset__image{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
  filter: brightness(.68) contrast(1.03) saturate(.92);
  transition: transform .7s ease, filter .6s ease;
}

.media-feature:hover .media-feature__image,
.media-asset:hover .media-asset__image{
  transform: scale(1.05);
  filter: brightness(.76) contrast(1.06) saturate(1);
}

.media-feature__overlay,
.media-asset__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.18) 42%, rgba(0,0,0,.9) 100%);
}

.media-feature__body,
.media-asset__body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.5rem;
}

.media-tag{
  display: inline-block;
  margin-bottom: .7rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.64);
}

.media-title{
  margin: 0 0 .55rem;
  font-size: clamp(1.4rem, 2vw, 2.3rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.03em;
}

.media-caption{
  max-width: 60ch;
  color: rgba(255,255,255,.76);
  line-height: 1.7;
  font-size: .98rem;
}

/* archive strip */
.media-archive{
  border-top: 1px solid rgba(255,255,255,.1);
}

.media-row{
  display: grid;
  grid-template-columns: 180px minmax(0,1fr) 120px;
  gap: 1.25rem;
  align-items: center;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.media-row__type{
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ff3a3a;
}

.media-row__title{
  margin: 0;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.media-row__meta{
  margin-top: .35rem;
  color: rgba(255,255,255,.58);
  font-size: .93rem;
}

.media-row__action{
  text-align: right;
}

/* video section */
.media-video-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.media-video{
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1rem;
}

.media-video__frame{
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    #0a0a0a;
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}

.media-video__frame iframe,
.media-video__frame video{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.media-video__meta{
  margin: .9rem 0 .45rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.media-video__title{
  margin: 0 0 .45rem;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.media-video__copy{
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  font-size: .98rem;
}

/* bottom band */
.media-band{
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: center;
}

.media-band h2{
  margin: 0 0 .8rem;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.04em;
}

.media-band p{
  max-width: 760px;
  margin: 0 auto 1.3rem;
  color: rgba(255,255,255,.72);
  line-height: 1.8;
}

@media (max-width: 1024px){
  .media-feature-grid,
  .media-video-grid{
    grid-template-columns: 1fr;
  }

  .media-feature{
    min-height: 460px;
  }
}

@media (max-width: 820px){
  .media-row{
    grid-template-columns: 1fr;
    gap: .6rem;
  }

  .media-row__action{
    text-align: left;
  }

  .media-asset{
    min-height: 220px;
  }
}

/* ==========================================
   COMMUNITY PAGE — LIVE SIGNAL STYLE
   ========================================== */

.community-wrap{
  position: relative;
  z-index: 2;
}

.community-section{
  position: relative;
  padding: 4.5rem 0;
}

.community-intro{
  max-width: 860px;
}

.community-kicker{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.community-rule{
  width: 100%;
  height: 1px;
  margin: 0 0 1.7rem;
  background: linear-gradient(90deg, rgba(255,0,0,.82), rgba(255,255,255,.08), transparent);
}

.community-heading{
  margin: 0 0 1rem;
  font-size: clamp(2.2rem, 4.8vw, 4.6rem);
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.community-copy{
  color: rgba(255,255,255,.74);
  line-height: 1.85;
  font-size: 1.03rem;
}

/* feature split */
.community-feature{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2rem;
  align-items: stretch;
}

.community-visual{
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.06);
}

.community-visual__image{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.68) contrast(1.05) saturate(.92);
  transform: scale(1.01);
  transition: transform .65s ease, filter .5s ease;
}

.community-visual:hover .community-visual__image{
  transform: scale(1.05);
  filter: brightness(.76) contrast(1.08) saturate(1);
}

.community-visual__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.18) 38%, rgba(0,0,0,.92) 100%);
}

.community-visual__body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.5rem;
}

.community-tag{
  display: inline-block;
  margin-bottom: .7rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.community-title{
  margin: 0 0 .6rem;
  font-size: clamp(1.6rem, 2.5vw, 2.7rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.03em;
}

.community-caption{
  max-width: 56ch;
  color: rgba(255,255,255,.76);
  line-height: 1.75;
  font-size: .99rem;
}

.community-side{
  display: grid;
  gap: 1.5rem;
}

.community-panel{
  padding-top: .25rem;
}

.community-panel__meta{
  margin-bottom: .85rem;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #ff3a3a;
}

.community-panel__title{
  margin: 0 0 .85rem;
  font-size: clamp(1.35rem, 2.2vw, 2.2rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.community-panel__copy{
  color: rgba(255,255,255,.72);
  line-height: 1.8;
  font-size: 1rem;
}

.community-line-list{
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.community-line-list li{
  padding: .95rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
}

.community-line-list li::before{
  content: "✦";
  display: inline-block;
  margin-right: .7rem;
  color: #ff2b2b;
}

/* feed strip */
.community-feed{
  border-top: 1px solid rgba(255,255,255,.1);
}

.community-feed-row{
  display: grid;
  grid-template-columns: 180px minmax(0,1fr) 140px;
  gap: 1.25rem;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.community-feed-row__channel{
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ff3a3a;
}

.community-feed-row__title{
  margin: 0;
  font-size: 1.18rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.community-feed-row__meta{
  margin-top: .35rem;
  color: rgba(255,255,255,.58);
  font-size: .94rem;
}

.community-feed-row__action{
  text-align: right;
}

/* image tiles */
.community-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.community-tile{
  position: relative;
  min-height: 250px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.06);
}

.community-tile--lg{
  min-height: 360px;
}

.community-tile__image{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.72) contrast(1.03) saturate(.92);
  transition: transform .65s ease, filter .5s ease;
}

.community-tile:hover .community-tile__image{
  transform: scale(1.05);
  filter: brightness(.8) contrast(1.05) saturate(1);
}

.community-tile__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.12) 40%, rgba(0,0,0,.86) 100%);
}

.community-tile__body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1rem 1.1rem;
}

.community-tile__meta{
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
  margin-bottom: .35rem;
}

.community-tile__title{
  margin: 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

/* cta band */
.community-band{
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: center;
}

.community-band h2{
  margin: 0 0 .85rem;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.04em;
}

.community-band p{
  max-width: 760px;
  margin: 0 auto 1.25rem;
  color: rgba(255,255,255,.72);
  line-height: 1.8;
}

@media (max-width: 1024px){
  .community-feature{
    grid-template-columns: 1fr;
  }

  .community-visual{
    min-height: 460px;
  }
}

@media (max-width: 820px){
  .community-feed-row{
    grid-template-columns: 1fr;
    gap: .55rem;
  }

  .community-feed-row__action{
    text-align: left;
  }

  .community-grid{
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   EVENTS PAGE — SCREENING / RITUAL STYLE
   ========================================== */

.events-wrap{
  position: relative;
  z-index: 2;
}

.events-section{
  position: relative;
  padding: 4.5rem 0;
}

.events-intro{
  max-width: 860px;
}

.events-kicker{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.events-rule{
  width: 100%;
  height: 1px;
  margin: 0 0 1.7rem;
  background: linear-gradient(90deg, rgba(255,0,0,.82), rgba(255,255,255,.08), transparent);
}

.events-heading{
  margin: 0 0 1rem;
  font-size: clamp(2.2rem, 4.8vw, 4.6rem);
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.events-copy{
  color: rgba(255,255,255,.74);
  line-height: 1.85;
  font-size: 1.03rem;
}

/* featured event */
.events-feature{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem 0;
}

.events-date{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .35rem;
}

.events-date__month{
  font-size: .78rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #ff3a3a;
}

.events-date__day{
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: .82;
  letter-spacing: -.08em;
  font-weight: 900;
  color: #fff;
}

.events-date__year{
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
}

.events-feature__body{
  min-width: 0;
}

.events-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.2rem;
  margin-bottom: .9rem;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}

.events-title{
  margin: 0 0 .75rem;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.events-text{
  max-width: 62ch;
  color: rgba(255,255,255,.74);
  line-height: 1.85;
  font-size: 1rem;
}

.events-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.3rem;
}

.events-status{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(255,0,0,.3);
  color: #ff4a4a;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.events-status::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff2b2b;
  box-shadow: 0 0 12px rgba(255,0,0,.5);
}

/* event list */
.events-list{
  border-top: 1px solid rgba(255,255,255,.1);
}

.events-row{
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 160px;
  gap: 1.25rem;
  align-items: center;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.events-row__date{
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ff3a3a;
}

.events-row__title{
  margin: 0;
  font-size: 1.2rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.events-row__meta{
  margin-top: .4rem;
  color: rgba(255,255,255,.58);
  font-size: .95rem;
}

.events-row__action{
  text-align: right;
}

/* split section */
.events-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.events-panel{
  padding-top: .25rem;
}

.events-panel__meta{
  margin-bottom: .85rem;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #ff3a3a;
}

.events-panel__title{
  margin: 0 0 .85rem;
  font-size: clamp(1.35rem, 2.2vw, 2.2rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.events-panel__copy{
  color: rgba(255,255,255,.72);
  line-height: 1.8;
  font-size: 1rem;
}

.events-line-list{
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.events-line-list li{
  padding: .95rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
}

.events-line-list li::before{
  content: "✦";
  display: inline-block;
  margin-right: .7rem;
  color: #ff2b2b;
}

/* band */
.events-band{
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: center;
}

.events-band h2{
  margin: 0 0 .85rem;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.04em;
}

.events-band p{
  max-width: 760px;
  margin: 0 auto 1.25rem;
  color: rgba(255,255,255,.72);
  line-height: 1.8;
}

@media (max-width: 1024px){
  .events-feature{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .events-split{
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 820px){
  .events-row{
    grid-template-columns: 1fr;
    gap: .55rem;
  }

  .events-row__action{
    text-align: left;
  }
}

/* ==========================================
   PRESS PAGE — DOSSIER / TRANSMISSION STYLE
   ========================================== */

.press-wrap{
  position: relative;
  z-index: 2;
}

.press-section{
  position: relative;
  padding: 4.5rem 0;
}

.press-intro{
  max-width: 860px;
}

.press-kicker{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.press-rule{
  width: 100%;
  height: 1px;
  margin: 0 0 1.7rem;
  background: linear-gradient(90deg, rgba(255,0,0,.82), rgba(255,255,255,.08), transparent);
}

.press-heading{
  margin: 0 0 1rem;
  font-size: clamp(2.2rem, 4.8vw, 4.8rem);
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.press-copy{
  color: rgba(255,255,255,.74);
  line-height: 1.85;
  font-size: 1.03rem;
}

/* featured release */
.press-feature{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 1.6rem 0;
}

.press-feature__stamp{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .45rem;
}

.press-feature__label{
  font-size: .76rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #ff3a3a;
}

.press-feature__date{
  font-size: clamp(2rem, 4.5vw, 4.2rem);
  line-height: .9;
  letter-spacing: -.06em;
  font-weight: 900;
  color: rgba(255,255,255,.96);
}

.press-feature__subdate{
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.press-feature__body{
  min-width: 0;
}

.press-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.1rem;
  margin-bottom: .9rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}

.press-title{
  margin: 0 0 .75rem;
  font-size: clamp(1.8rem, 3vw, 3.3rem);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.press-text{
  max-width: 64ch;
  color: rgba(255,255,255,.74);
  line-height: 1.85;
  font-size: 1rem;
}

.press-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.35rem;
}

/* release / coverage rows */
.press-ledger{
  border-top: 1px solid rgba(255,255,255,.1);
}

.press-row{
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 150px;
  gap: 1.25rem;
  align-items: center;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.press-row__type{
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ff3a3a;
}

.press-row__title{
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.press-row__meta{
  margin-top: .4rem;
  color: rgba(255,255,255,.58);
  font-size: .94rem;
}

.press-row__action{
  text-align: right;
}

/* assets / contact split */
.press-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.press-panel{
  padding-top: .25rem;
}

.press-panel__meta{
  margin-bottom: .85rem;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #ff3a3a;
}

.press-panel__title{
  margin: 0 0 .85rem;
  font-size: clamp(1.35rem, 2.2vw, 2.3rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.press-panel__copy{
  color: rgba(255,255,255,.72);
  line-height: 1.8;
  font-size: 1rem;
}

.press-line-list{
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.press-line-list li{
  padding: .95rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
}

.press-line-list li::before{
  content: "✦";
  display: inline-block;
  margin-right: .7rem;
  color: #ff2b2b;
}

/* press kit list */
.press-kit{
  border-top: 1px solid rgba(255,255,255,.1);
}

.press-kit-row{
  display: grid;
  grid-template-columns: 170px minmax(0,1fr) 150px;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.press-kit-row__type{
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}

.press-kit-row__title{
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.press-kit-row__meta{
  margin-top: .35rem;
  color: rgba(255,255,255,.58);
  font-size: .92rem;
}

.press-kit-row__action{
  text-align: right;
}

/* big statement band */
.press-band{
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: center;
}

.press-band h2{
  margin: 0 0 .85rem;
  font-size: clamp(2rem, 4vw, 3.9rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.04em;
}

.press-band p{
  max-width: 760px;
  margin: 0 auto 1.25rem;
  color: rgba(255,255,255,.72);
  line-height: 1.8;
}

@media (max-width: 1024px){
  .press-feature,
  .press-split{
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
}

@media (max-width: 820px){
  .press-row,
  .press-kit-row{
    grid-template-columns: 1fr;
    gap: .55rem;
  }

  .press-row__action,
  .press-kit-row__action{
    text-align: left;
  }
}

/* ==========================================
   CONTACT PAGE — OPEN CHANNEL STYLE
   ========================================== */

.contact-wrap{
  position: relative;
  z-index: 2;
}

.contact-section{
  position: relative;
  padding: 4.5rem 0;
}

.contact-intro{
  max-width: 860px;
}

.contact-kicker{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.contact-rule{
  width: 100%;
  height: 1px;
  margin: 0 0 1.7rem;
  background: linear-gradient(90deg, rgba(255,0,0,.82), rgba(255,255,255,.08), transparent);
}

.contact-heading{
  margin: 0 0 1rem;
  font-size: clamp(2.2rem, 4.8vw, 4.8rem);
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.contact-copy{
  color: rgba(255,255,255,.74);
  line-height: 1.85;
  font-size: 1.03rem;
}

/* lead split */
.contact-feature{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3rem;
  align-items: start;
}

.contact-panel{
  padding-top: .25rem;
}

.contact-panel__meta{
  margin-bottom: .85rem;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #ff3a3a;
}

.contact-panel__title{
  margin: 0 0 .85rem;
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.contact-panel__copy{
  color: rgba(255,255,255,.72);
  line-height: 1.8;
  font-size: 1rem;
}

.contact-line-list{
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.contact-line-list li{
  padding: .95rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.84);
}

.contact-line-list li::before{
  content: "✦";
  display: inline-block;
  margin-right: .7rem;
  color: #ff2b2b;
}

/* contact ledger */
.contact-ledger{
  border-top: 1px solid rgba(255,255,255,.1);
}

.contact-row{
  display: grid;
  grid-template-columns: 170px minmax(0,1fr) 260px;
  gap: 1.25rem;
  align-items: center;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.contact-row__type{
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ff3a3a;
}

.contact-row__title{
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.contact-row__meta{
  margin-top: .35rem;
  color: rgba(255,255,255,.58);
  font-size: .94rem;
}

.contact-row__action{
  text-align: right;
}

.contact-row__action a{
  color: #fff;
  text-decoration: none;
}

/* inquiry channels */
.contact-grid-clean{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-channel{
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1rem;
}

.contact-channel__meta{
  margin-bottom: .8rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}

.contact-channel__title{
  margin: 0 0 .6rem;
  font-size: clamp(1.3rem, 2vw, 2rem);
  line-height: .96;
  text-transform: uppercase;
  letter-spacing: -.03em;
}

.contact-channel__copy{
  color: rgba(255,255,255,.72);
  line-height: 1.8;
  font-size: 1rem;
}

.contact-channel__actions{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.15rem;
}

/* final band */
.contact-band{
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: center;
}

.contact-band h2{
  margin: 0 0 .85rem;
  font-size: clamp(2rem, 4vw, 3.9rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.04em;
}

.contact-band p{
  max-width: 760px;
  margin: 0 auto 1.25rem;
  color: rgba(255,255,255,.72);
  line-height: 1.8;
}

@media (max-width: 1024px){
  .contact-feature,
  .contact-grid-clean{
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

@media (max-width: 820px){
  .contact-row{
    grid-template-columns: 1fr;
    gap: .55rem;
  }

  .contact-row__action{
    text-align: left;
  }
}

/* =========================
   NEW HORROR UI BLOCKS
========================= */

.radio-card,
.confession-feature,
.confession-form-card,
.haunted-map-card,
.poll-card,
.street-team-card,
.livestream-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    rgba(8, 8, 10, .82);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  overflow: hidden;
}

.radio-card {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 24px;
  padding: 28px;
}

.radio-card__kicker,
.confession-feature__meta,
.haunted-map-story__label,
.livestream-card__status {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.56);
}

.radio-card__title {
  margin: 10px 0 12px;
  font-size: clamp(1.5rem, 2.5vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
}

.radio-card__text {
  color: var(--muted);
  max-width: 55ch;
}

.confessions-layout,
.haunted-map-layout {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 24px;
  margin-top: 28px;
}

.confession-feature,
.confession-form-card,
.street-team-card,
.poll-card,
.haunted-map-card,
.community-panel {
  padding: 28px;
}

.confession-feature__title {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
  margin: 12px 0 16px;
  text-transform: uppercase;
}

.confession-feature__body,
.haunted-map-story__text {
  color: rgba(255,255,255,.82);
  line-height: 1.75;
}

.confession-feature__author {
  margin-top: 18px;
  color: var(--red2);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
}

.ritual-form {
  display: grid;
  gap: 16px;
}

.ritual-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ritual-field {
  display: grid;
  gap: 8px;
}

.ritual-field label,
.ritual-check span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.62);
  font-weight: 700;
}

.ritual-field input,
.ritual-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #fff;
  outline: none;
}

.ritual-field input:focus,
.ritual-field textarea:focus {
  border-color: rgba(209, 38, 42, .75);
  box-shadow: 0 0 0 3px rgba(209, 38, 42, .12);
}

.ritual-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ritual-note {
  margin: 0;
  color: var(--faint);
  font-size: 13px;
}

.confession-list {
  margin-top: 24px;
  display: grid;
  gap: 14px;
}

.confession-item {
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
}

.confession-item__meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,.5);
  margin-bottom: 8px;
}

.confession-item__text {
  color: rgba(255,255,255,.84);
  line-height: 1.7;
}

.haunted-map {
  position: relative;
  min-height: 540px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 30%, rgba(209,38,42,.16), transparent 18%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.08), transparent 16%),
    linear-gradient(180deg, rgba(15,15,18,.96), rgba(5,5,8,.96));
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

.haunted-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .35;
  pointer-events: none;
}

.haunted-pin {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: none;
  background: var(--red2);
  box-shadow:
    0 0 0 6px rgba(209,38,42,.12),
    0 0 24px rgba(209,38,42,.55);
  cursor: pointer;
}

.haunted-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(209,38,42,.35);
  border-radius: 999px;
  animation: hauntPulse 2.2s infinite;
}

@keyframes hauntPulse {
  0% { transform: translate(-50%, -50%) scale(.7); opacity: .7; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

.haunted-map-story {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.haunted-map-story__title {
  margin: 10px 0 10px;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.fear-poll {
  display: grid;
  gap: 14px;
}

.fear-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
}

.poll-results {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.poll-result {
  display: grid;
  gap: 6px;
}

.poll-result__top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.poll-result__bar {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.poll-result__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(209,38,42,.8), rgba(255,59,63,1));
}

.livestream-card {
  padding: 28px;
}

.livestream-card__grid {
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 24px;
  margin-top: 18px;
}

.livestream-card__frame iframe {
  width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 20px;
  background: #000;
}

.livestream-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: #ff2b2f;
  box-shadow: 0 0 18px rgba(255,43,47,.8);
  margin-right: 10px;
}

.unsigned-chart-list {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.unsigned-band-row {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}

.unsigned-band-row__rank {
  font-size: 2rem;
  font-weight: 900;
  color: rgba(255,255,255,.35);
}

.unsigned-band-row__name {
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
}

.unsigned-band-row__genre {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.vote-ghost-btn {
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(209,38,42,.45);
  background: rgba(209,38,42,.08);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 980px) {
  .radio-card,
  .confessions-layout,
  .haunted-map-layout,
  .livestream-card__grid,
  .ritual-form__grid,
  .unsigned-band-row {
    grid-template-columns: 1fr;
  }

  .haunted-map {
    min-height: 400px;
  }
}
@media (max-width: 820px){

  .hero{
    min-height: 420px;
    padding-bottom: 30px;
  }

  .hero__inner{
    padding: 40px 0 30px;
  }

}

@media (max-width: 820px){
  .page-hero{
    min-height: 52vh;
    padding: 1rem 0 2rem;
    align-items: center;
  }

  .page-title{
    font-size: clamp(2.25rem, 11vw, 3.5rem);
    line-height: 0.92;
  }

  .page-lead{
    margin-top: 0.9rem;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .page-kicker{
    margin-bottom: 0.85rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.68rem;
  }
}

.radio-card__player iframe{
  display: block;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 820px){
  .nav{
    display: none;
  }

  .nav.is-open{
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 24px;
    right: 24px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(5,6,8,.92);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(12px);
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
  }

  .nav.is-open .nav__link{
    display: block;
    width: 100%;
    padding: 10px 6px;
  }

  .hamburger{
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}