:root{
    --bg:#060608;
    --panel:#0f0f12;
    --accent:#d62828; /* blood red */
    --muted:#bdbdbd;
    --card:#0b0b0d;
    --glass: rgba(255,255,255,0.02);
    --shadow: 0 6px 18px rgba(0,0,0,0.7);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background:
      radial-gradient(circle at 10% 20%, rgba(214,40,40,0.06), transparent 8%),
      radial-gradient(circle at 80% 80%, rgba(44,214,128,0.02), transparent 10%),
      var(--bg);
    color:#eee;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
  }
  
  /* Container */
  .container{
    width:min(1150px,94%);
    margin:0 auto;
  }
  
  /* Header */
  .site-header{
    border-bottom:1px solid rgba(255,255,255,0.03);
    backdrop-filter: blur(4px);
    background: linear-gradient(180deg, rgba(0,0,0,0.25), transparent);
    position:sticky;
    top:0;
    z-index:50;
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;
  }
  .logo{
    display:flex;
    flex-direction:column;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
  }
  .logo-text{
    font-family:'Creepster', cursive;
    letter-spacing:1px;
    font-size:26px;
    color:var(--accent);
    text-shadow: 0 2px 8px rgba(198, 44, 44, 0.25);
  }
  .logo-sub{
    font-size:12px;
    color:var(--muted);
  }
  
/* Nav */
.nav{
    display:flex;
    align-items:center;
    gap:18px;
}
.nav a{
    color:var(--muted);
    text-decoration:none;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.subscribe-btn{
    background:linear-gradient(90deg,var(--accent), #b71c1c);
    color:white;
    padding:8px 12px;
    border-radius:6px;
    text-decoration:none;
  }
  
  /* Hero */
  .hero{
    padding:36px 0 28px;
    text-align:center;
    position:relative;
    border-bottom: 1px solid rgba(255,255,255,0.03);
  }
  .hero-inner h1{
    font-family:'Creepster', cursive;
    font-size:44px;
    color:var(--accent);
    margin:0 0 6px;
    text-shadow: 0 10px 30px rgba(198,44,44,0.12);
  }
  .hero-inner p{
    margin:0 0 14px;
    color:var(--muted);
  }
   
  
  /* Main layout */
  .main-content{
    display:grid;
    grid-template-columns: 1fr 320px;
    gap:28px;
    padding:30px 0 60px;
  }
  @media (max-width:980px){
    .main-content{grid-template-columns: 1fr}
  }
  
  /* Grid */
  .grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:18px;
  }
  .card{
    background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent);
    border:1px solid rgba(255,255,255,0.03);
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    display:flex;
    flex-direction:column;
    height:100%;
    box-shadow: var(--shadow);
  }
  .card:focus, .card:hover{
    transform: translateY(-6px);
  }
  .thumb{
    background-size:cover;
    background-position:center;
    height:160px;
    position:relative;
  }
  .thumb::after{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55));
  }
  .info{
    padding:12px 14px 16px;
    display:flex;
    gap:8px;
    flex-direction:column;
    flex:1;
  }
  .info h4{
    margin:0;
    font-size:16px;
    color:#fff;
  }
  .info .meta{
    font-size:12px;
    color:var(--muted);
    margin-top:6px;
  }
  .info p{
    margin-top:6px;
    color:#d7d7d7;
    font-size:13px;
  }
  .read-more{
    align-self:flex-start;
    margin-top:6px;
    background:transparent;
    border:0;
    color:var(--accent);
    font-weight:600;
    cursor:pointer;
    padding:0;
  }
  
  /* Aside about */
  .about{
    padding:18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.03);
    position:sticky;
    top:84px;
    height:max-content;
  }
  .about h3{margin-top:0}
  .yt-link{
    display:inline-block;
    margin-top:12px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.06);
    color:var(--accent);
    padding:8px 10px;
    border-radius:8px;
    text-decoration:none;
  }
  
  /* Footer */
  .site-footer{
    border-top:1px solid rgba(255,255,255,0.03);
    padding:16px 0;
    margin-top:40px;
    color:var(--muted);
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .social{
    display:flex;
    align-items:center;
  }
  #ytFooter{
    font-family:'Creepster', cursive;
    font-size:20px;
    color:var(--accent);
    text-decoration:none;
    letter-spacing:2px;
    text-shadow:
      0 0 10px rgba(214, 40, 40, 0.5),
      0 0 20px rgba(214, 40, 40, 0.3),
      0 2px 4px rgba(0, 0, 0, 0.8),
      2px 2px 0 rgba(139, 0, 0, 0.4);
    cursor:pointer;
    transition:all 0.3s ease;
    position:relative;
    padding:4px 8px;
  }
  #ytFooter:hover{
    color:#ff0000;
    text-shadow:
      0 0 15px rgba(255, 0, 0, 0.8),
      0 0 30px rgba(255, 0, 0, 0.5),
      0 0 45px rgba(255, 0, 0, 0.3),
      0 2px 4px rgba(0, 0, 0, 0.8),
      2px 2px 0 rgba(139, 0, 0, 0.6);
    transform:scale(1.05);
  }
  #ytFooter:active{
    transform:scale(0.98);
  }
  
  /* Modal */
  .modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999;
  }
  .modal.open{display:flex}
  .modal-backdrop{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.85));
    backdrop-filter: blur(6px);
  }
  .modal-content{
    position:relative;
    width:min(960px,96%);
    max-height:88vh;
    background:var(--panel);
    border-radius:12px;
    padding:14px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.7);
    z-index:2;
    overflow:auto;
  }
  .modal-close{
    position:absolute;
    right:12px;
    top:10px;
    background:transparent;
    border:0;
    font-size:20px;
    color:#fff;
    cursor:pointer;
  }
  .video-wrap{
    background:#000;
    border-radius:8px;
    overflow:hidden;
    aspect-ratio:16/9;
  }
  .video-wrap iframe{width:100%;height:100%;}
  .modal-meta{color:var(--muted);margin-top:10px}
  .modal-meta h3{margin:0 0 6px 0;color:#fff}
  
  /* Load more */
  .grid-controls{display:flex;justify-content:center;margin-top:18px}
  .grid-controls button{
    background:transparent;
    border:1px solid rgba(255,255,255,0.06);
    color:var(--muted);
    padding:10px 14px;
    border-radius:8px;
    cursor:pointer;
  }
  
  /* small helper */
  .error{color:#ffa7a7;padding:12px;background:rgba(255,0,0,0.03);border-radius:8px}
@media (max-width:720px){
    .header-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
    .nav{
        width:100%;
        flex-wrap:wrap;
        gap:10px;
    }
    .nav a{
        flex:1 1 calc(50% - 10px);
        padding:10px 12px;
        border:1px solid rgba(255,255,255,0.08);
        border-radius:6px;
        background:rgba(255,255,255,0.02);
    }
    .nav a.subscribe-btn{
        flex:1 1 100%;
        min-height:44px;
        background:linear-gradient(90deg,var(--accent), #b71c1c);
        border:none;
    }
    .grid{grid-template-columns: 1fr}
}
@media (max-width:640px){
    .logo-text{font-size:22px}
    .hero-inner h1{font-size:34px}
}