/* Wolf Road, the work index as a filmography (2026-10-01). One row per project: number, name, format, client, year,
   running time, like a credits sheet; the name in Inter, the particulars in the mono. Hovering a row lights its name
   red and opens a small still in the last column, never larger than a postcard. Loaded after door.css and fx.css. */

.fg { --cols: 3.2rem minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1.1fr) 4rem 4.2rem 9rem; border-top: 1px solid var(--hairline-strong); }
.fg__head { display: grid; grid-template-columns: var(--cols); column-gap: clamp(1rem, 2vw, 2rem); padding: 0.9rem 0; border-bottom: 1px solid var(--hairline); color: var(--grey); font-size: 0.7rem; letter-spacing: 0.16em; }
.fg__list { list-style: none; margin: 0; padding: 0; }
.fg__row { display: grid; grid-template-columns: var(--cols); column-gap: clamp(1rem, 2vw, 2rem); align-items: center; padding: clamp(1rem, 2.4vh, 1.5rem) 0; border-bottom: 1px solid var(--hairline); color: var(--white); }
.fg__no { color: var(--grey); font-size: 0.72rem; letter-spacing: 0.14em; }
.fg__name { font-family: var(--body); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2.9rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--white); transition: color 0.35s var(--ease); }
.fg__cell { font-size: 0.72rem; letter-spacing: 0.1em; line-height: 1.5; color: var(--text-soft); transition: color 0.35s var(--ease); }
.fg__k { display: none; }
.fg__yr, .fg__rt { font-variant-numeric: tabular-nums; }
.fg__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--frame); clip-path: inset(50% 0 50% 0); transition: clip-path 0.5s var(--ease); }
.fg__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* the row in hand: its name red, its number and particulars white, its still opening from a line */
.fg__row:hover .fg__name, .fg__row:focus-visible .fg__name { color: var(--red-text); }
.fg__row:hover .fg__no, .fg__row:focus-visible .fg__no, .fg__row:hover .fg__cell, .fg__row:focus-visible .fg__cell { color: var(--white); }
.fg__row:hover .fg__thumb, .fg__row:focus-visible .fg__thumb { clip-path: inset(0 0 0 0); }
/* the rest of the sheet steps back while one row is in hand */
@media (hover: hover) { .fg__list:hover .fg__row:not(:hover) .fg__name { color: var(--dim); } }

/* phones and narrow screens: the name across the top, its particulars under it in two keyed columns, no still */
@media (max-width: 1023px) {
  .fg__head, .fg__thumb { display: none; }
  .fg__row { grid-template-columns: 2.4rem repeat(2, minmax(0, 1fr)); row-gap: 0.7rem; align-items: start; }
  .fg__no { grid-column: 1; grid-row: 1; padding-top: 0.5em; }
  .fg__name { grid-column: 2 / -1; grid-row: 1; }
  .fg__fmt { grid-column: 2; grid-row: 2; } .fg__client { grid-column: 3; grid-row: 2; }
  .fg__yr { grid-column: 2; grid-row: 3; } .fg__rt { grid-column: 3; grid-row: 3; }
  .fg__k { display: block; color: var(--red-text); font-size: 0.7rem; letter-spacing: 0.16em; }
}
@media (prefers-reduced-motion: reduce) { .fg__thumb, .fg__name, .fg__cell { transition: none; } }

/* The two shelves (2026-10-02): bracketed mono tabs over the sheet; the open one white with a red bracket. */
.cat { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 0 0 1.2rem; }
.cat__tab { padding: calc(0.6rem + 3px) 0; margin: -3px 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); transition: color 0.35s var(--ease); }
.cat__tab span { color: var(--dim); }
.cat__tab:hover { color: var(--white); }
.cat__tab.is-on { color: var(--white); }
.cat__tab.is-on span { color: var(--red-text); }
.fg__list.is-in .fg__row { animation: shelfIn 0.55s var(--ease) both; }
.fg__list.is-in li:nth-child(2) .fg__row { animation-delay: 0.04s; } .fg__list.is-in li:nth-child(3) .fg__row { animation-delay: 0.08s; }
.fg__list.is-in li:nth-child(4) .fg__row { animation-delay: 0.12s; } .fg__list.is-in li:nth-child(5) .fg__row { animation-delay: 0.16s; }
.fg__list.is-in li:nth-child(6) .fg__row { animation-delay: 0.2s; }
@keyframes shelfIn { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }
/* rows with no case page yet: a logo or nothing in the still's place, and a mailto for the reel */
.fg__thumb--logo { display: grid; place-items: center; background: transparent; }
.fg__thumb--logo img { width: 70%; height: 70%; object-fit: contain; filter: brightness(0) invert(1); }
.fg__thumb--none { background: transparent; }
.fg__row--ask .fg__rt { color: var(--red-text); }
@media (prefers-reduced-motion: reduce) { .fg__list.is-in .fg__row { animation: none; } }