:root {
  --maxw: 1200px;
  --gap: 18px;
  --pad: 18px;
  --text: #0f0f0f;
  --muted: #0008;
}

/* Base */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, Helvetica, sans-serif;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--pad); }

/* Header */
header { margin: 18px 0 8px; }
.brand { font-weight: 600; letter-spacing: .2px; }
nav { margin-top: 6px; font-size: .95rem; }
nav a { margin-right: 14px; opacity: .75; }
nav a:hover { opacity: 1; }

/* Masonry layout using CSS columns */
.grid {
  margin-top: 22px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: var(--gap);
  -moz-column-gap: var(--gap);
  column-gap: var(--gap);
}

/* Responsive columns */
@media (max-width: 980px) {
  .grid { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
}
@media (max-width: 600px) {
  .grid { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
}

/* Cards */
.card {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--gap);
  vertical-align: top;
  overflow: hidden;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Image thumbnail */
.thumb {
  display: block;
  width: 100%;
  height: auto;
  transition: filter .25s ease;
}

/* Hover overlay */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
}

/* Overlay background */
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.35);
}

/* Overlay text */
.overlay-inner { position: relative; z-index: 1; color: #111; }
.ov-title { font-weight: 700; font-size: 1.2rem; }
.ov-meta { font-size: .95rem; opacity: .85; margin-top: 4px; }

/* Hover behavior */
.card:hover .overlay,
.card:focus-visible .overlay { opacity: 1; }
.card:hover .thumb,
.card:focus-visible .thumb { filter: brightness(.9); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .overlay, .thumb, .card { transition: none; }
}

/* ------------------------------- */
/* HOVER VIDEO SUPPORT             */
/* ------------------------------- */

/* Ensure cards are positioned */
.card { position: relative; overflow: hidden; }

/* Image stays in normal flow -> card keeps its height */
.card .thumb {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  transition: opacity .18s ease, filter .25s ease;
  z-index: 1;
}

/* Video sits on top and fades in */
.card .thumbvid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1;
}

/* Video hover/active state */
.card.is-hovering .thumbvid { opacity: 1; }
.card.is-hovering .thumb { opacity: 0; }

/* Overlay stays above everything */
.overlay { z-index: 2; }
.overlay::before { z-index: 0; }
.overlay-inner { z-index: 3; }