/* Lumafield — Story 3-up module */

@font-face {
  font-family: "Monument Grotesk";
  src: url("fonts/MonumentGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Monument Grotesk";
  src: url("fonts/MonumentGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Monument Grotesk Semi-Mono";
  src: url("fonts/MonumentGroteskSemiMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

#lf-story-3up {
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  background: #000;
  color: #fff;
  font-family: "Monument Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
#lf-story-3up *,
#lf-story-3up *::before,
#lf-story-3up *::after { box-sizing: border-box; }

.lf-s3-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.lf-s3-card {
  display: block;
  padding: 0;
  margin: 0;
}

.lf-s3-media {
  position: relative;
  margin: 0 0 18px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid #1f1f1f;
  background: #0d0d0d;
}
.lf-s3-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92);
  transition: filter 0.35s ease;
}
.lf-s3-card:hover .lf-s3-media img { filter: brightness(1.05); }
/* Vimeo background video: fill the 3:2 box; a 16:9 video letterboxes on
   black, which disappears against the module's black background. */
.lf-s3-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lf-s3-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.lf-s3-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4a4a4a;
  font-family: "Monument Grotesk Semi-Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lf-s3-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lf-s3-blurb {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #b9b9b9;
}

@media (max-width: 760px) {
  .lf-s3-cards { grid-template-columns: 1fr; gap: 36px; }
  .lf-s3-media { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-s3-media img { transition: none; }
}