/* ============================================================
   Film & Video archive — layers on top of styles.css
   Accent: cinematic red-orange.
   ============================================================ */
:root { --film: #ff5a5f; --film-2: #ff8a3d; }
:root[data-theme="light"] { --film: #e23b41; --film-2: #d9631a; }

.film-hero {
  position: relative;
  padding: clamp(3.5rem, 10vh, 6rem) 0 clamp(2rem, 5vh, 3rem);
}
.film-hero .eyebrow {
  color: var(--film);
  background: color-mix(in srgb, var(--film) 12%, transparent);
  border-color: color-mix(in srgb, var(--film) 28%, transparent);
}
.film-hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; }
.film-hero .lede { max-width: 660px; }
.film-note { color: var(--text-mut); font-size: .92rem; margin: 1rem 0 0; }
.film-note a { color: var(--film); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--film) 40%, transparent); }
.film-note a:hover { border-bottom-color: var(--film); }

/* ---- Video grid ---- */
.vgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}
.vcard {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.vcard:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--film) 55%, var(--border));
  box-shadow: var(--shadow);
}

.vthumb {
  display: block; position: relative; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
.vthumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .35s ease, opacity .2s ease;
}
.vcard:hover .vthumb img { transform: scale(1.05); }
.vthumb .play {
  position: absolute; inset: 0; margin: auto;
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 999px; background: color-mix(in srgb, var(--film) 88%, #000);
  color: #fff; box-shadow: 0 8px 24px -6px rgba(0,0,0,.6);
  transition: transform .2s ease, background .2s ease;
}
.vthumb .play svg { fill: currentColor; margin-left: 3px; }
.vcard:hover .vthumb .play { transform: scale(1.08); }

.vbody { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.vbody h3 { font-size: 1.08rem; line-height: 1.25; margin-bottom: .5rem; }
.vbody p { color: var(--text-dim); font-size: .9rem; margin: 0 0 1rem; }

.vlinks { margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.vlinks a {
  font-weight: 650; font-size: .88rem; color: var(--film); text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--film) 40%, transparent);
  padding-bottom: 1px; transition: border-color .2s;
}
.vlinks a:hover { border-bottom-color: var(--film); }
.vlinks .vlink-2 { color: var(--text-dim); border-bottom-color: var(--border-hi); }
.vlinks .vlink-2:hover { color: var(--text); border-bottom-color: var(--text-mut); }

/* ---- More from the archive ---- */
.film-more {
  padding: clamp(2.5rem, 7vh, 4rem) 0;
  border-top: 1px solid var(--border); background: var(--bg-soft);
}
.film-more h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
.film-more > .wrap > p { color: var(--text-dim); margin: .6rem 0 1.4rem; }
.archive-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem 1rem; }
.archive-links a {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .6rem 1rem; border-radius: 11px; text-decoration: none;
  font-weight: 600; font-size: .95rem; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border-hi);
  transition: border-color .2s, color .2s;
}
.archive-links a:hover { border-color: var(--film); color: var(--film); }

/* ---- Responsive ---- */
@media (max-width: 900px) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vgrid { grid-template-columns: 1fr; } }