/* ─────────────────────────────────────────────────────────────
   Field Frames — video dispatches section + YouTube lightbox.
   Self-contained: every color falls back to the original palette
   (var(--x, fallback)) so this renders correctly even if the
   site's own custom properties have since changed or been renamed.

   The card is built from Figma — "Field Frames" file, page FF.cc UI,
   frame "Video Module" (node 46:99). That frame is 300 x 300, so every
   dimension below is written as `<design px> / 3` in `cqw` units, i.e.
   as a percentage of the CARD's own width (the .reel is a container).
   One design that scales, rather than a desktop design that breaks on
   a phone: at a 300px-wide card this renders the Figma frame 1:1, and
   at a 139px phone card it renders the same design at 46%.

   Two deliberate departures from a pure scale, both to keep the module
   usable at phone widths, neither visible at design size:
     · type floors at the design's own 6px instead of scaling below it
       (`max(6px, 2cqw)`) — a proportional 2.8px would be unreadable.
     · the thumbnail may shrink (`flex-shrink: 1`), so when those floors
       start to bite it gives up height instead of pushing the title out
       of the square. This is what was clipping text on mobile before.

   Colors map the design's variables onto the site's own palette:
   --ff-text-dim #9c988b = --paper-dim, --ff-light #e9e5d9 = --paper,
   --ff-dark #151410 = --ink. Every one keeps a literal fallback so this
   still renders if the site's custom properties are renamed. The
   fallbacks are the DARK palette; with the tokens present the file
   follows the theme (see the palette note at the top of styles.css).
   ───────────────────────────────────────────────────────────── */

/* #videos-section is a `.run` now — a display:contents wrapper whose
   panels are real children of the strip. It has no box of its own; the
   panels it builds carry the padding, via .panel-inner. videos.js still
   owns the [hidden] attribute: the run exists on every view but only
   un-hides on the index (see `syncVisibility`). */

/* .videos-meta — the section header line — is styled with the other
   header lines in styles.css (one shared rule), not here. */

/* Identical to .gallery--folders in styles.css — same columns, same
   gap, same breakpoints. The two grids sit in the same --edge gutter,
   so their columns line up down the page. Keep these in sync. */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: var(--gap, 10px);
  align-content: start;
}

.reel {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1; /* same square as .folder-card */
  cursor: pointer;
  /* Figma 46:99 fill — paper at 5%. There's no site token at this
     opacity (--hair is the same paper at 12%), so it's built from the
     theme's paper triplet. */
  background: rgb(from var(--paper, #e9e5d9) r g b / 0.05);
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  color: inherit;
  /* Makes every cqw unit below resolve against THIS card's width, which
     is what lets one set of numbers serve 4-up desktop and 2-up mobile. */
  container-type: inline-size;
  /* Skip layout and paint for reels below the fold — this section sits
     under the whole folder index, so on a first load none of them are on
     screen and every one was being laid out anyway. Safe for the same
     reason it is on .folder-card: `aspect-ratio` fixes the box from the
     grid column, so nothing here takes its height from its contents. */
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}
.reel:focus-visible {
  outline: 2px solid var(--lichen, #93a382);
  outline-offset: 2px;
}

/* Absolutely positioned so the column of content can never feed its own
   height back into the square — the card's size comes from aspect-ratio
   alone, exactly like a folder card.

   Three blocks in a space-between column, per the design: Top (kicker +
   strip), Thumb (play / viewport / play), Bottom (strip + title). */
.reel-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2cqw; /* 6px @300 */
  min-height: 0;
}

.reel-top,
.reel-bottom {
  display: flex;
  flex-direction: column;
  gap: 2.6667cqw; /* 8px @300 */
  width: 100%;
  flex: none;
}
.reel-thumb {
  display: flex;
  flex-direction: column;
  gap: 1.3333cqw; /* 4px @300 */
  width: 100%;
  min-height: 0;
  flex: 0 1 auto;
}

/* Shared micro-type: 6px SF Mono in the design, no tracking. It floors
   at that 6px rather than scaling below it — see the file header. */
.reel-kicker,
.reel-play,
.reel-title {
  font-size: max(6px, 2cqw);
  line-height: 1.2;
  color: var(--paper-dim, #9c988b);
}

/* Per-card kicker: "MOTION PICTURE" ⟷ index number. */
.reel-kicker {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8em;
  flex: none;
  padding: 0 4.6667cqw; /* 14px @300 */
  text-transform: uppercase;
}
/* The label is the only part that can outgrow a narrow card, so it
   truncates rather than wrapping to a second line. */
.reel-kicker > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reel-kicker > span:last-child { flex: none; }

/* Sprocket strip — the exported design asset (assets/Strip-1.svg), which
   is the Figma strip verbatim: a 288x10 artboard holding 16 rounded
   holes at an 18.8px pitch, first flush left, last flush right.

   `background-size: 100% 100%` stretches it to the strip box. That is
   the correct fit here rather than a distortion, because the box is
   itself a uniform scale of the artboard — 288x10 at design size, and
   both axes are driven by the same cqw basis — so the SVG scales evenly
   and the holes stay exactly the shape they were drawn. Being one
   vector also means there are always exactly 16 whole holes, never a
   sliced-off partial one at the edge. */
.sprockets {
  display: block;
  width: 100%;
  height: 3.3333cqw; /* 10px @300, matching the artboard */
  flex: none;
  background-image: url("/assets/Strip-1.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* The thumbnail — full card width in the design, with a deep 40px
   radius and the same hairline outline as the sprocket holes.

   This is the one element allowed to shrink: `flex-shrink: 1` +
   `min-height: 0` means when the card gets small enough that the
   6px type floor starts to bite, the image gives up height instead
   of the title being pushed out of the square. */
.reel-frame {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  height: 57.3333cqw; /* 172px @300 */
  overflow: hidden;
  border-radius: 13.3333cqw; /* 40px @300 */
  border: 0.25px solid var(--paper, #e9e5d9);
  background: var(--ink, #15140f);
}
.reel-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.reel-frame img.loaded { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reel-frame img { transition: opacity 0.5s ease, transform 0.4s ease; }
  .reel:is(:hover, .ff-hover) .reel-frame img { transform: scale(1.03); }
}

/* "▷ Play" — a plain text row above and below the image (Figma 46:200 /
   46:201). The design uses the SF Symbol `play`, which has no web font
   equivalent; U+25B7 WHITE RIGHT-POINTING TRIANGLE is the same outlined
   glyph and is already what the rest of the site uses. */
.reel-play {
  display: flex;
  align-items: center;
  gap: 1.3333cqw; /* 4px @300 */
  flex: none;
  padding: 0 6.6667cqw; /* 20px @300 */
  text-transform: uppercase;
}
.reel-play .tri { line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reel-play { transition: color 0.2s ease; }
}
.reel:is(:hover, .ff-hover) .reel-play,
.reel:focus-visible .reel-play { color: var(--lichen, #93a382); }

/* Optional per-video "duration" from _videos.json. Not part of the Figma
   module — no video currently sets one, so this is dormant — but kept so
   adding a duration doesn't render unstyled. Sits inside the thumbnail's
   rounded corner, hence the inset from the edge. */
.reel-duration {
  position: absolute;
  right: 6.6667cqw;
  bottom: 4cqw;
  z-index: 2;
  background: rgb(from var(--ink, #15140f) r g b / 0.68);
  color: var(--paper, #e9e5d9);
  font-size: max(6px, 2cqw);
  line-height: 1.2;
  padding: 0.25em 0.6em;
  border-radius: 1cqw;
}

/* Title — renders exactly as authored (no forced casing), single line. */
.reel-title {
  display: block;
  flex: none;
  padding: 0 4.6667cqw; /* 14px @300 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (prefers-reduced-motion: no-preference) {
  .reel-title { transition: color 0.2s ease; }
}
.reel:is(:hover, .ff-hover) .reel-title,
.reel:focus-visible .reel-title { color: var(--paper, #e9e5d9); }

/* ── Video lightbox ─────────────────────────────────────────── */
.video-lightbox {
  position: fixed;
  inset: 0;
  background: var(--backdrop, rgba(12, 11, 8, 0.96));
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: clamp(16px, 4vw, 56px);
}
.video-lightbox.open { display: flex; }

.video-lightbox .vlb-stage {
  width: min(1100px, 92vw);
}

.video-lightbox .vlb-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* The letterbox behind the player takes the ground, not black, so the
     light theme has no dark slab around the film before it loads. */
  background: var(--ink, #000);
}
.video-lightbox .vlb-frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-lightbox .vlb-meta {
  margin-top: 12px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-dim, #9c988b);
  text-align: center;
}

.video-lightbox .vlb-close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  font-family: var(--mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;   /* the key itself is styled by .ff-key in styles.css */
}
html.ff-motion .video-lightbox.open .vlb-close { --fb: 3px; animation: ff-print 0.55s cubic-bezier(0.5, 0, 0.1, 1) 0.1s both; }
.video-lightbox .vlb-close:focus-visible { outline: 2px solid var(--lichen, #93a382); outline-offset: 2px; }

.videos-empty {
  font-family: var(--mono, monospace);
  font-size: 0.72rem;
  color: var(--paper-dim, #9c988b);
  letter-spacing: 0.06em;
}