/* ================= FILMOGRAPHY — your whole career as one wall ============ */
/*
   Design grammar:
   • Hero: full-viewport 2:3 poster lattice, darkened, graded scrim, slow drift
   • Name enormous (Archivo Black), tagline mono, stats as a Cormorant sentence
   • Marquee billing (Bebas) → two-column ledger → prose → cue sheet → triptych
   All selectors scoped to .pg-filmography. Tokens only, container queries only.
*/

.pg-filmography {
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

.pg-filmography ::selection { background: var(--accent); color: var(--bg); }

/* ── HERO — the wall ───────────────────────────────────────────────────── */

.pg-filmography .fg-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 100cqh, 1600px);
  display: flex;
  background: var(--bg);
}

/* The lattice: oversized so the drift never reveals an edge. One container,
   one long transform — nothing per-tile. */
.pg-filmography .fg-wall {
  position: absolute;
  left: -4%;
  top: -6%;
  width: 108%;
  height: 114%;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(76px, 7.4cqw, 128px), 1fr));
  gap: 3px;
  align-content: start;
  will-change: transform;
}

.pg-filmography .fg-wall img {
  width: 100%;
  aspect-ratio: 2 / 3;      /* slot is reserved before load — no jump */
  object-fit: cover;
  display: block;
  filter: saturate(.6) brightness(.52) contrast(1.06);
}

@keyframes fg-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-2.2%, -2.8%, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .pg-filmography .fg-wall { animation: fg-drift 88s ease-in-out infinite alternate; }
}

/* Graded scrim: darkest at the corners and along the base where the name
   sits; the bottom resolves fully to --bg so the wall dissolves into the page. */
.pg-filmography .fg-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 28%,
      transparent 38%,
      color-mix(in srgb, var(--bg) 46%, transparent) 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 58%, transparent) 0%,
      color-mix(in srgb, var(--bg) 16%, transparent) 26%,
      color-mix(in srgb, var(--bg) 28%, transparent) 52%,
      color-mix(in srgb, var(--bg) 84%, transparent) 84%,
      var(--bg) 100%);
}

/* Film grain — tangible only over the photographs */
.pg-filmography .fg-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pg-filmography .fg-hero--type::after { display: none; }

/* Thin-data fallback: a ghost lattice — the wall's silhouette in hairlines */
.pg-filmography .fg-ghost {
  position: absolute;
  inset: -2%;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 11cqw, 160px), 1fr));
  gap: 3px;
  align-content: start;
  opacity: .55;
}
.pg-filmography .fg-ghost span {
  aspect-ratio: 2 / 3;
  border: 1px solid var(--line);
}
.pg-filmography .fg-hero--type .fg-scrim {
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg) 40%, transparent) 60%,
    var(--bg) 100%);
}

/* ── Hero content ──────────────────────────────────────────────────────── */

.pg-filmography .fg-hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.6rem, 4.5cqw, 3.2rem);
  box-sizing: border-box;
}

.pg-filmography .fg-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.pg-filmography .fg-logo {
  max-height: 40px;
  max-width: 160px;
  object-fit: contain;
}
.pg-filmography .fg-spacer { display: block; }

.pg-filmography .fg-eye {
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.pg-filmography .fg-hero-bot::before {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 1.1rem;
}

.pg-filmography .fg-name {
  font: 400 clamp(2.9rem, 10.5cqw, 9.5rem)/.92 var(--font-black);
  text-transform: uppercase;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
  overflow-wrap: anywhere;
}

.pg-filmography .fg-tag {
  font: 500 clamp(.6rem, 1.2cqw, .8rem)/1.6 var(--font-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  margin: 1rem 0 0;
}

/* Stats woven as one sentence — Cormorant, values pop in accent */
.pg-filmography .fg-statline {
  font: 400 clamp(1.3rem, 2.7cqw, 2.2rem)/1.3 'Cormorant Garamond', serif;
  font-style: italic;
  color: color-mix(in srgb, var(--ink) 90%, transparent);
  max-width: 36ch;
  margin: 1.2rem 0 0;
  text-wrap: balance;
}
.pg-filmography .fg-sv {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
  padding-right: .28em;
}
.pg-filmography .fg-sl { text-transform: lowercase; }

/* ── Section chrome shared below the hero ──────────────────────────────── */

.pg-filmography .fg-credits,
.pg-filmography .fg-prose,
.pg-filmography .fg-cues,
.pg-filmography .fg-reel,
.pg-filmography .fg-archive {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.6rem, 7cqw, 5.5rem) clamp(1.3rem, 5cqw, 4.2rem);
  box-sizing: border-box;
}

.pg-filmography .fg-sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .8rem;
  margin-bottom: clamp(1.4rem, 3.5cqw, 2.4rem);
}

.pg-filmography .fg-kick {
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.pg-filmography .fg-count {
  font: 400 10px/1.4 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ── CREDITS — marquee billing + ledger ────────────────────────────────── */

.pg-filmography .fg-bill {
  display: flex;
  align-items: baseline;
  gap: clamp(.8rem, 2cqw, 1.6rem);
  border-bottom: 1px solid var(--line);
  padding: clamp(.8rem, 2.2cqw, 1.5rem) 0;
}
.pg-filmography .fg-bill:first-child { padding-top: 0; }

.pg-filmography .fg-bn {
  font: 400 10px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--accent);
  flex-shrink: 0;
}

.pg-filmography .fg-bt {
  font: 400 clamp(1.9rem, 5.2cqw, 4.4rem)/.98 'Bebas Neue', var(--font-black), sans-serif;
  letter-spacing: .015em;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.pg-filmography .fg-ledger {
  list-style: none;
  margin: clamp(1.4rem, 3cqw, 2.2rem) 0 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(1.8rem, 4.5cqw, 3.6rem);
}

.pg-filmography .fg-ledger li {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}

.pg-filmography .fg-ln {
  font: 400 9px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--muted);
  flex-shrink: 0;
}

.pg-filmography .fg-lt {
  font: 400 clamp(.88rem, 1.5cqw, 1.05rem)/1.35 'Spectral', serif;
  color: color-mix(in srgb, var(--ink) 92%, var(--bg));
  overflow-wrap: anywhere;
}

.pg-filmography .fg-morep {
  font: 400 clamp(.95rem, 1.8cqw, 1.15rem)/1.5 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--muted);
  margin: 1.4rem 0 0;
}

/* ── PROSE — the composer ──────────────────────────────────────────────── */

.pg-filmography .fg-prose {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: clamp(1.4rem, 4cqw, 3.2rem);
  align-items: start;
}
.pg-filmography .fg-prose .fg-kick {
  border-top: 1px solid var(--line);
  padding-top: .8rem;
}

.pg-filmography .fg-prose-body { min-width: 0; }

.pg-filmography .fg-bio {
  font: 400 clamp(1.2rem, 2.2cqw, 1.6rem)/1.55 'Cormorant Garamond', serif;
  color: var(--ink);
  margin: 0 0 1.2em;
  max-width: 62ch;
}
.pg-filmography .fg-bio::first-letter {
  color: var(--accent);
  font-weight: 600;
}

.pg-filmography .fg-woven {
  font: 400 clamp(1.05rem, 1.9cqw, 1.35rem)/1.6 'Cormorant Garamond', serif;
  font-style: italic;
  color: color-mix(in srgb, var(--ink) 74%, var(--bg));
  margin: 0;
  max-width: 62ch;
}
.pg-filmography .fg-w {
  font-style: normal;
  font-weight: 600;
  color: color-mix(in srgb, var(--ink) 94%, var(--bg));
}

/* ── CUE SHEET ─────────────────────────────────────────────────────────── */

.pg-filmography .fg-cuelist .track-row {
  transition: background-color .15s ease;
}
.pg-filmography .fg-cuelist .track-row:hover {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.pg-filmography .fg-cuelist .tr-num { color: var(--accent); }

/* ── ARCHIVE — hi-res triptych, staggered like a gallery wall ──────────── */

.pg-filmography .fg-tryp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 2.4cqw, 2rem);
  align-items: start;
  padding-bottom: clamp(1.4rem, 4cqw, 3.2rem); /* room for the raised middle */
}

.pg-filmography .fg-tf { margin: 0; }
.pg-filmography .fg-tf:nth-child(2) {
  transform: translateY(clamp(1.4rem, 4cqw, 3.2rem));
}

.pg-filmography .fg-tf img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  filter: saturate(.85);
  border: 1px solid var(--line);
}

.pg-filmography .fg-tcap {
  font: 400 9px/1.4 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .6rem;
}

/* ── Showreel ──────────────────────────────────────────────────────────── */

.pg-filmography .fg-reel .yt { border: 1px solid var(--line); }

/* ── User sections flex zone ───────────────────────────────────────────── */

.pg-filmography .xsec-zone {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1.3rem, 5cqw, 4.2rem) clamp(2rem, 5cqw, 3.6rem);
  box-sizing: border-box;
}

/* ── FOOTER ────────────────────────────────────────────────────────────── */

.pg-filmography .fg-foot {
  border-top: 1px solid var(--line);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.2rem, 6cqw, 4.2rem) clamp(1.3rem, 5cqw, 4.2rem) 1.8rem;
  box-sizing: border-box;
}

.pg-filmography .fg-foot-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.4rem, 4cqw, 3rem);
  flex-wrap: wrap;
}

.pg-filmography .fg-foot-contact { display: grid; gap: .7rem; }

.pg-filmography .fg-mail,
.pg-filmography .fg-site {
  font: 400 clamp(1.3rem, 3cqw, 2.2rem)/1.15 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--ink);
  text-decoration: none;
  width: fit-content;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: color .15s ease, background-size .32s ease;
  overflow-wrap: anywhere;
}
.pg-filmography .fg-mail:hover,
.pg-filmography .fg-site:hover {
  color: var(--accent);
  background-size: 100% 2px;
}

.pg-filmography .fg-socs {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin-top: .4rem;
}

.pg-filmography .fg-foot-name { text-align: right; }
.pg-filmography .fg-foot-mark {
  font: 400 clamp(1rem, 2cqw, 1.4rem)/1.1 var(--font-black);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.pg-filmography .fg-foot-tag {
  font: 500 9px/1.6 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: .4rem 0 0;
}

.pg-filmography .colophon {
  font: 400 9px/1.6 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: clamp(2rem, 5cqw, 3.2rem) 0 0;
}

/* ── Responsive — narrow container ─────────────────────────────────────── */

@container page (max-width: 620px) {
  /* Bigger tiles read better on a phone; cap the set so nothing downloads
     or paints beyond the crop band. */
  .pg-filmography .fg-wall {
    grid-template-columns: repeat(auto-fill, minmax(clamp(84px, 21cqw, 116px), 1fr));
  }
  .pg-filmography .fg-wall img:nth-child(n+55) { display: none; }

  .pg-filmography .fg-hero-inner { padding: 1.2rem; }
  .pg-filmography .fg-name { font-size: clamp(2.4rem, 14.5cqw, 4rem); }
  .pg-filmography .fg-statline { font-size: clamp(1.1rem, 4.6cqw, 1.5rem); max-width: none; }
  .pg-filmography .fg-tag { letter-spacing: .22em; }

  .pg-filmography .fg-bt { font-size: clamp(1.7rem, 8cqw, 2.6rem); }
  .pg-filmography .fg-ledger { columns: 1; }

  .pg-filmography .fg-prose { grid-template-columns: 1fr; gap: 1.2rem; }

  .pg-filmography .fg-tryp { gap: .6rem; }
  .pg-filmography .fg-tf:nth-child(2) { transform: translateY(1rem); }
  .pg-filmography .fg-tryp { padding-bottom: 1.2rem; }
  .pg-filmography .fg-tcap { letter-spacing: .1em; font-size: 8px; }

  .pg-filmography .fg-foot-name { text-align: left; }
}