/* ===== BODY FIX SCROLL ===== */

body{
  background:#111;
  color:#ccc;
  font-family:'Cormorant Garamond', serif;

  min-height:100vh;

  position:relative;

  overflow-x:hidden;

  animation:
    vhsMove 6s infinite,
    screenWarp 8s infinite ease-in-out,
    flickerScreen 4s infinite;
}

/* ===== CONTENEDOR ===== */

.archive-container{
  width:95%;
  max-width:1400px;

  margin:auto;

  padding:50px 30px;
}

/* ===== HEADER ===== */

.archive-header{
  margin-bottom:50px;

  border-bottom:1px solid rgba(255,255,255,0.08);

  padding-bottom:25px;
}

.archive-subtitle{
  margin-top:10px;

  color:#666;

  font-family:'Inconsolata', monospace;

  letter-spacing:2px;
}

/* ===== GRID ===== */

.archive-grid{
  display:grid;

  grid-template-columns:
    2fr 1fr;

  gap:30px;
}

/* ===== ARTÍCULO PRINCIPAL ===== */

.featured-article{

  background:
    rgba(10,10,10,0.75);

  border:
    1px solid rgba(255,255,255,0.08);

  overflow:hidden;
}

/* ===== VIDEO PRINCIPAL ===== */

.featured-video{

  width:100%;

  border-bottom:1px solid rgba(255,255,255,0.08);

  overflow:hidden;

  background:#000;
}

.featured-video iframe{

  width:100%;

  height:420px;

  border:none;

  display:block;

  filter:
    grayscale(100%)
    contrast(120%)
    brightness(0.8);
}

/* ===== IMAGEN PRINCIPAL ===== */

.featured-article img{
  width:100%;

  height:420px;

  object-fit:cover;

  filter:
    grayscale(100%)
    contrast(120%)
    brightness(0.7);
}

/* ===== CONTENIDO ===== */

.article-content{
  padding:25px;
}

.article-date,
.post-date{
  color:#5a0000;

  font-family:'Inconsolata', monospace;

  font-size:0.8rem;

  letter-spacing:2px;
}

.featured-article h2{
  margin:15px 0;

  font-size:2rem;

  font-weight:400;

  color:#ccc;
}

.featured-article p{
  color:#888;

  line-height:1.8;
}

/* ===== SIDEBAR ===== */

.sidebar{
  display:flex;

  flex-direction:column;

  gap:25px;
}

.sidebar-box{

  background:
    rgba(10,10,10,0.75);

  border:
    1px solid rgba(255,255,255,0.08);

  padding:20px;
}

.sidebar-box h3{
  margin-bottom:15px;

  font-family:'Inconsolata', monospace;

  color:#999;

  letter-spacing:2px;
}

.sidebar-box ul{
  list-style:none;
}

.sidebar-box li{
  margin-bottom:10px;

  color:#666;

  font-family:'Inconsolata', monospace;
}

/* ===== POSTS ===== */

.post-grid{

  grid-column:1 / span 2;

  display:grid;

  grid-template-columns:
    repeat(auto-fit, minmax(300px, 1fr));

  gap:25px;

  margin-top:10px;
}

/* ===== POST ===== */

.post{

  background:
    rgba(10,10,10,0.75);

  border:
    1px solid rgba(255,255,255,0.08);

  overflow:hidden;

  transition:0.3s;
}

.post:hover{
  transform:translateY(-4px);

  border-color:#5a0000;
}

/* ===== IMÁGENES Y VIDEOS ===== */

.post img,
.post iframe{

  width:100%;

  height:220px;

  object-fit:cover;

  border:none;

  display:block;

  filter:
    grayscale(100%)
    contrast(120%)
    brightness(0.75);
}

/* ===== CONTENIDO POSTS ===== */

.post h3{

  margin:
    15px 20px 10px;

  color:#bbb;

  font-weight:400;
}

.post p{

  margin:
    0 20px 20px;

  color:#777;

  line-height:1.6;
}

.post-date{
  display:block;

  margin:
    20px 20px 0;
}

/* ===== RESPONSIVE ===== */

@media(max-width:900px){

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

  .post-grid{
    grid-column:auto;
  }

  .featured-video iframe{
    height:260px;
  }

}
/* ===== VOLVER ===== */

.back-link{

  display:inline-block;

  margin-bottom:30px;

  color:#666 !important;

  text-decoration:none;

  font-family:'Inconsolata', monospace;

  letter-spacing:2px;

  transition:0.3s;
}

.back-link:hover{

  color:#aaa !important;

  transform:translateX(-3px);
}

.back-link:visited{
  color:#666 !important;
}
/* ===== FIX SCROLL ===== */

html,
body{
  overflow-y:auto !important;
  overflow-x:hidden !important;

  height:auto !important;
  min-height:100vh !important;
}

/* CONTENEDOR */

.archive-container{
  position:relative;

  height:auto !important;
  overflow:visible !important;
}

/* FIX GENERAL */

.archive-grid,
.post-grid,
.featured-article,
.sidebar{
  overflow:visible !important;
}