/* A video journal: one large screening preview and three compact archive entries.
   Thumbnail artwork stays intact; all viewing controls live outside the images. */
.video-journal { padding-top: 64px; padding-bottom: 96px; border-top: 1px solid var(--line); }
.video-journal-heading { margin-bottom: 48px; }
.video-journal-label { color: var(--accent); font-size: 15px; margin-bottom: 24px; }
.video-journal-heading h2 { font-size: clamp(52px, 6.8vw, 104px); font-weight: 500; line-height: 1.03; letter-spacing: -.065em; }
.video-journal-heading h2 > span { color: var(--muted); }
.video-journal-intro { max-width: 41ch; margin-top: 24px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.video-journal-grid { display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.video-entry { display: block; min-width: 0; border-radius: 8px; }
.video-thumbnail { overflow: hidden; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); border-radius: 8px; transition: border-color .25s; }
.video-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.video-featured-caption { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 24px; }
.video-entry time { display: block; color: var(--muted); font-family: var(--display); font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.video-entry h3 { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.2; letter-spacing: -.04em; font-weight: 500; transition: color .25s; }
.video-featured-caption p { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.video-play { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 50%; padding-left: 3px; color: var(--accent); font-size: 18px; transition: color .25s, background .25s, border-color .25s; }
.video-watch { display: flex; align-items: center; gap: 16px; width: fit-content; color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 20px; transition: color .25s; }
.video-watch > span { font-size: 20px; color: var(--accent); }
.video-journal-list { display: grid; gap: 24px; }
.video-entry--compact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: center; border-radius: 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.video-entry--compact:last-child { padding-bottom: 0; border-bottom: 0; }
.video-entry--compact h3 { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.3; }
.video-entry--compact .video-watch { margin-top: 12px; gap: 10px; }
.video-entry:is(:hover, :focus-visible) .video-thumbnail { border-color: var(--accent); }
.video-entry:is(:hover, :focus-visible) h3, .video-entry:is(:hover, :focus-visible) .video-watch { color: var(--accent); }
.video-entry:is(:hover, :focus-visible) .video-play { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.video-entry:active .video-thumbnail { border-color: var(--text); }
@media (max-width: 1100px) and (min-width: 768px) {
  .video-journal-grid { gap: 28px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .video-entry--compact { gap: 14px; }
  .video-entry--compact .video-watch { font-size: 12px; gap: 4px; }
  .video-play { width: 44px; height: 44px; }
}
@media (max-width: 767px) {
  .video-journal { padding-top: 36px; padding-bottom: 52px; }
  .video-journal-heading { margin-bottom: 30px; }
  .video-journal-label { margin-bottom: 20px; font-size: 13px; }
  .video-journal-heading h2 { font-size: clamp(48px, 13vw, 76px); }
  .video-journal-intro { font-size: 16px; margin-top: 20px; }
  .video-journal-grid { grid-template-columns: 1fr; gap: 36px; }
  .video-featured-caption { margin-top: 20px; gap: 16px; }
  .video-entry h3 { font-size: 24px; }
  .video-play { width: 44px; height: 44px; font-size: 15px; }
  .video-journal-list { gap: 24px; }
  .video-entry--compact { grid-template-columns: 1fr; gap: 16px; }
  .video-entry--compact h3 { font-size: 22px; }
  .video-entry--compact .video-watch { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-thumbnail, .video-entry h3, .video-play, .video-watch { transition: none; }
}