/* =========================================
   CINEMA OF TRANSGRESSION — CLEAN ARCHIVE
   Title + Description Under Thumbnail
   ========================================= */

:root {
  --bg: #000000;
  --surface: #050505;
  --text: #f1f1f1;
  --muted: #666666;
  --border: #111111;
}

/* =========================
   GLOBAL
   ========================= */

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  background: var(--bg);
  color: var(--text);

  font-family: Courier, sans-serif;

  line-height: 1.6;
  letter-spacing: 0.015em;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  position: relative;
}

/* =========================
   SOFT VHS TEXTURE
   ========================= */

body::before {

  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  z-index: 9999;

  opacity: 0.03;

  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 4px
    );
}

/* =========================
   TYPOGRAPHY
   ========================= */

h1,
h2,
h3,
h4 {

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  line-height: 1;

  margin-top: 0;
}

h1 {

  font-size: clamp(3rem, 8vw, 6rem);

  margin-bottom: 2rem;

  color: #b30000;

  text-shadow:
    0 0 6px rgba(179,0,0,0.35),
    0 0 18px rgba(179,0,0,0.15);

  font-family:
    "Courier New",
    Courier,
    monospace;

  letter-spacing: 0.12em;
}

h2 {

  font-size: 0.72rem;

  margin-top: 4rem;
  margin-bottom: 1.5rem;

  color: #bfbfbf;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

/* =========================
   LINKS
   ========================= */

a {

  color: white;

  text-decoration: none;

  transition: opacity 0.2s ease;
}

a:hover {

  opacity: 0.65;
}

/* =========================
   SEARCH BAR
   ========================= */

input[type="search"],
input[type="text"],
.search-query,
.search-input {

  background: #120000;

  border: 1px solid #3a0000;

  color: #f1f1f1;

  padding: 0.8rem 1rem;

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: 0.82rem;

  letter-spacing: 0.05em;

  outline: none;

  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

/* placeholder */

input[type="search"]::placeholder,
input[type="text"]::placeholder {

  color: #7a4a4a;

  opacity: 1;
}

/* focus */

input[type="search"]:focus,
input[type="text"]:focus,
.search-query:focus,
.search-input:focus {

  border-color: #7a0000;

  background: #1a0000;
}

/* search button */

.search-submit,
button.search,
.search button {

  background: #2a0000;

  border: 1px solid #4a0000;

  color: #f1f1f1;

  padding: 0.8rem 1rem;

  font-family:
    "Courier New",
    Courier,
    monospace;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}

.search-submit:hover,
button.search:hover,
.search button:hover {

  background: #420000;
}

/* =========================
   SCROLLBAR
   ========================= */

* {
  scrollbar-width: thin;
  scrollbar-color: #2b2b2b #000000;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background: #1d1d1d;
}

::-webkit-scrollbar-thumb:hover {
  background: #343434;
}

/* =========================
   GRINDHOUSE MARQUEE NAV
   ========================= */

nav {

  position: sticky;
  top: 0;

  z-index: 1000;

  background:
    linear-gradient(
      to bottom,
      #2b0000 0%,
      #120000 40%,
      #050505 100%
    );

  border-bottom:
    2px solid #5c0000;

  box-shadow:
    0 0 12px rgba(120,0,0,0.25),
    0 2px 0 rgba(255,255,255,0.03);

  padding: 1rem 2rem;

  overflow: hidden;
}

/* subtle lightbulb flicker */

nav::before {

  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.08;

  background-image:
    radial-gradient(
      rgba(255,180,120,0.7) 1px,
      transparent 1px
    );

  background-size: 14px 14px;

  animation: marqueeFlicker 6s infinite;
}

@keyframes marqueeFlicker {

  0%   { opacity: 0.08; }

  48%  { opacity: 0.08; }

  49%  { opacity: 0.03; }

  50%  { opacity: 0.1; }

  100% { opacity: 0.08; }
}

/* navigation links */

nav a {

  position: relative;

  margin-right: 2rem;

  color: #f3d7b3;

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: 0.82rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  text-shadow:
    0 0 4px rgba(255,180,120,0.25);

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

/* hover */

nav a:hover {

  color: #fff1d8;

  opacity: 1;
}

/* subtle divider */

nav a::after {

  content: "•";

  position: absolute;

  right: -1.3rem;

  color: rgba(255,180,120,0.35);
}

/* remove divider on last item */

nav a:last-child::after {

  display: none;
}

/* =========================
   LAYOUT
   ========================= */

.container,
#content,
.site-page,
.page-content {

  width: min(1100px, 92%);

  margin: auto;

  padding-top: 4rem;
  padding-bottom: 5rem;
}

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

.resource-list {

  display: grid;

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

  gap: 2rem;
}

/* =========================
   CARDS
   ========================= */

.resource,
.item,
.card {

  background: var(--surface);

  border: 1px solid var(--border);

  overflow: hidden;

  padding-bottom: 1rem;
}

/* subtle grain */

.resource::before,
.item::before,
.card::before {

  content: "";

  position: absolute;
  inset: 0;

  opacity: 0.04;

  pointer-events: none;

  background-image:
    radial-gradient(
      rgba(255,255,255,0.12) 0.5px,
      transparent 0.5px
    );

  background-size: 4px 4px;

  z-index: 2;
}

/* =========================
   IMAGES — FULL COLOR
   ========================= */

img {

  width: 100%;

  display: block;

  /* restored color */

  filter:
    contrast(112%)
    brightness(0.92)
    saturate(105%);

  transition:
    filter 0.3s ease,
    transform 0.3s ease;
}

/* subtle cinematic hover */

img:hover {

  filter:
    contrast(118%)
    brightness(0.96)
    saturate(110%);

  transform: scale(1.01);
}

/* =========================
   FILM TITLES
   BELOW IMAGE
   ========================= */

.resource-name,
.item-title,
.media-title,
.browse .item-title,
.resource h3,
.resource h4,
.item h3,
.item h4 {

  position: relative;

  margin: 1rem 1rem 0.5rem 1rem;

  padding: 0;

  background: none;

  color: #f5f5f5;

  font-family:
    "Courier New",
    Courier,
    monospace !important;

  font-size: 0.82rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  line-height: 1.4;

  opacity: 1 !important;

  transform: none !important;

  transition: none !important;
}

/* title links */

.resource-name a,
.item-title a,
.resource h3 a,
.resource h4 a {

  color: white;

  font-family:
    "Courier New",
    Courier,
    monospace !important;

  opacity: 1 !important;

  transition: none !important;
}

.resource-name a:hover,
.item-title a:hover,
.resource h3 a:hover,
.resource h4 a:hover {

  opacity: 1 !important;
}

/* =========================
   DESCRIPTION
   UNDER TITLE
   ========================= */

.description,
.resource .description,
.item .description,
.resource-text,
.caption,
.summary {

  margin: 0 1rem 1rem 1rem;

  color: white-yellow;

  font-size: 1.0rem;

  line-height: 1.5;

  font-family: Courier;

  text-transform: none;

  letter-spacing: 0.02em;
}

/* =========================
   METADATA
   ========================= */

.metadata {

  margin: 0 1rem;

  color: var(--muted);

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}

/* =========================
   BUTTONS
   ========================= */

button,
.button {

  background: transparent;

  color: red;

  border: 1px solid #202020;

  padding: 0.8rem 1rem;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}

button:hover,
.button:hover {

  background: #0f0f0f;
}

/* =========================
   FOOTER
   ========================= */

footer {

  padding: 2rem;

  border-top: 1px solid var(--border);

  color: var(--muted);

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px) {

  h1 {
    font-size: 3rem;
  }

  nav {
    padding: 1rem;
  }

  nav a {
    display: inline-block;
    margin-bottom: 0.5rem;
  }

  .container,
  #content {
    padding-top: 3rem;
  }

}