/* /films/: every title, made and sold kept honest. An archive you can riffle through. */

.fx { min-height: 100vh; padding-bottom: clamp(80px, 12vw, 180px); }

/* ——— Head ——— */
/* The title keeps its full width and the intro takes what is left, so the two never overlap; below 1000px they stack. */
.fx-head {
  display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, 30em); align-items: end;
  gap: 24px var(--i-g);
  padding: calc(var(--i-top) + clamp(24px, 6vw, 96px)) var(--i-g) clamp(28px, 4vw, 56px);
}
.fx-title {
  font-size: clamp(60px, 11vw, 200px); font-weight: 620; letter-spacing: -.055em; line-height: .84;
  margin-left: -.04em;
}
.fx-title__n {
  font-size: .16em; font-weight: 520; letter-spacing: -.01em; vertical-align: top;
  position: relative; top: .5em; margin-left: .35em; color: var(--i-fg-2);
  font-variant-numeric: normal;
}
.fx-lede { color: var(--i-fg-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; text-wrap: pretty; padding-bottom: .4em; }

/* ——— The bar: relationship first, then search, refine and view ——— */
.fx-bar {
  position: sticky; top: 0; z-index: 20;
  transition: top .7s var(--i-cut), background-color var(--hp-ground, 1.6s ease);
  padding: 14px var(--i-g) 0;
  background-color: color-mix(in oklab, var(--ground-now, var(--tint, #070707)) 100%, transparent);
}
.fx-bar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none;
  background-color: color-mix(in oklab, var(--ground-now, var(--tint, #070707)) 100%, transparent);
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
  transition: background-color var(--hp-ground, 1.6s ease);
}
/* The header comes back on any scroll up; the bar steps down under it instead of hiding behind it. */
body:has(.top:not(.is-hidden)) .fx-bar { top: calc(var(--i-top) - 4px); }
/* Stuck under a showing header, the bar's own ground reaches up behind the logo and nav, and the header's
   scrim steps aside: it would otherwise dim the filters, which sit under its tail. */
.fx-bar::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--i-top) + 24px); pointer-events: none;
  background-color: color-mix(in oklab, var(--ground-now, var(--tint, #070707)) 100%, transparent); opacity: 0; transition: opacity .4s var(--i-ease), background-color var(--hp-ground, 1.6s ease);
}
body:has(.top:not(.is-hidden)) .fx-bar.is-stuck::before { opacity: 1; }
body:has(.fx-bar.is-stuck) .top::before, body:has(.fx-bar.is-stuck) .top::after { opacity: 0; }
.fx-filters {
  display: flex; gap: 2px clamp(18px, 2.4vw, 40px); flex-wrap: wrap; align-items: baseline;
  border-bottom: 1px solid var(--i-line);
}
.fx-filter, .fx-views button, .fx-facet button, .fx-refine, .fx-suggest button, .fx-token, .fx-col {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit;
}
.fx-filter {
  position: relative; min-height: 48px; padding: 6px 0 12px;
  font-size: clamp(17px, 1.55vw, 24px); font-weight: 520; letter-spacing: -.02em;
  color: var(--i-fg-3); transition: color .35s;
}
.fx-filter::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--i-fg);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--i-cut);
}
.fx-filter:hover { color: var(--i-fg-2); }
.fx-filter[aria-pressed="true"] { color: var(--i-fg); }
.fx-filter[aria-pressed="true"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.fx-filter__n { margin-left: .2em; vertical-align: .55em; font-size: 12px; color: var(--i-fg-3); transition: opacity .3s; }
.fx-filter.is-empty { color: rgb(239 237 232 / .2); }

.fx-tools { display: flex; align-items: center; gap: 12px clamp(16px, 2vw, 32px); flex-wrap: wrap; padding: 12px 0 4px; }
.fx-search { position: relative; flex: 0 1 340px; min-width: 220px; }
.fx-search__icon { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--i-fg-3); pointer-events: none; }
.fx-search input {
  width: 100%; min-height: 44px; padding: 8px 0 8px 26px;
  background: none; border: 0; border-bottom: 1px solid var(--i-line); border-radius: 0;
  font-size: 15px; color: var(--i-fg); outline: none; transition: border-color .3s;
  -webkit-appearance: none; appearance: none;
}
.fx-search input::placeholder { color: var(--i-fg-3); }
.fx-search input:focus { border-color: var(--i-fg); }
.fx-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.fx-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
  min-width: 300px; max-height: min(60vh, 420px); overflow: auto;
  background: rgb(14 14 14 / .96); border: 1px solid var(--i-line);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: 6px;
}
.fx-suggest li button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  width: 100%; min-height: 44px; padding: 10px 12px; text-align: left;
}
.fx-suggest li button[aria-selected="true"], .fx-suggest li button:hover { background: rgb(239 237 232 / .08); }
.fx-suggest b { font-weight: 560; }
.fx-suggest mark { background: none; color: var(--i-fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fx-suggest span { font-size: 12px; color: var(--i-fg-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-suggest__head { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--i-fg-3); }

.fx-refine { min-height: 44px; font-size: 15px; display: inline-flex; align-items: center; gap: .5em; }
.fx-refine::before {
  content: ""; width: 14px; height: 9px;
  background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat,
              linear-gradient(currentColor, currentColor) 3px 4px / 8px 1px no-repeat,
              linear-gradient(currentColor, currentColor) 5px 8px / 4px 1px no-repeat;
}
.fx-refine__n:not(:empty) { font-size: 11px; font-weight: 600; color: var(--i-fg-2); font-variant-numeric: tabular-nums; }
.fx-refine[aria-expanded="true"]::before { transform: scaleY(-1); }

.fx-active { display: flex; flex-wrap: wrap; gap: 6px 16px; flex: 1 1 auto; align-items: center; min-height: 0; }
.fx-token {
  display: inline-flex; align-items: center; gap: .45em; min-height: 32px;
  font-size: 14px; color: var(--i-fg);
}
.fx-token::after { content: "×"; color: var(--i-fg-3); font-size: 15px; line-height: 1; transition: color .3s, transform .4s var(--i-ease); }
.fx-token:hover::after { color: var(--i-fg); transform: rotate(90deg); }
.fx-person { display: inline-flex; align-items: center; gap: 8px; }
.fx-person__name { display: inline-flex; align-items: baseline; gap: .7em; min-height: 32px; align-items: center; font-size: 15px; font-weight: 560; }
.fx-person__go { font-size: 12px; font-weight: 500; color: var(--i-fg-3); transition: color .3s; }
.fx-person__go i { display: inline-block; transition: transform .5s var(--i-ease); }
.fx-person__name:hover .fx-person__go { color: var(--i-fg); }
.fx-person__name:hover .fx-person__go i { transform: translateX(4px); }
.fx-person .fx-token { min-width: 32px; justify-content: center; }

/* The view switch: two words at the size of the filters, each with a small drawing of what it shows. */
.fx-views { display: flex; gap: clamp(20px, 2.4vw, 36px); margin-left: auto; }
.fx-views button {
  position: relative; display: inline-flex; align-items: center; gap: .55em; min-height: 48px;
  font-size: clamp(17px, 1.45vw, 22px); font-weight: 520; letter-spacing: -.02em; color: var(--i-fg-3); transition: color .3s;
}
.fx-views button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--i-fg);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--i-cut);
}
.fx-views button:hover { color: var(--i-fg-2); }
.fx-views button[aria-pressed="true"] { color: var(--i-fg); }
.fx-views button[aria-pressed="true"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.fx-glyph { display: inline-grid; flex: none; gap: 2px; width: 16px; height: 16px; }
.fx-glyph i { display: block; border: 1px solid currentColor; opacity: .9; transition: transform .5s var(--i-cut); }
.fx-glyph--posters { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.fx-glyph--list { grid-template-rows: repeat(3, 1fr); align-content: center; gap: 4px; height: 14px; }
.fx-glyph--list i { border-width: 1px 0 0; }
.fx-views button:hover .fx-glyph--posters i:nth-child(2n) { transform: translateY(-2px); }
.fx-views button:hover .fx-glyph--list i:nth-child(2) { transform: scaleX(.6); transform-origin: 0 50%; }

.fx-panel { overflow: hidden; }
.fx-panel__in {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr) minmax(0, .6fr) minmax(0, .7fr);
  gap: 24px var(--i-g); padding: 22px 0 18px; border-top: 1px solid var(--i-line);
}
.fx-facet { border: 0; margin: 0; padding: 0; min-width: 0; }
.fx-facet legend { padding: 0; margin-bottom: 10px; color: var(--i-fg-3); }
.fx-facet__opts { display: flex; flex-wrap: wrap; gap: 0 22px; }
.fx-facet--genre .fx-facet__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.fx-facet button {
  display: inline-flex; align-items: baseline; gap: .35em; min-height: 36px; padding: 4px 0;
  font-size: 16px; color: var(--i-fg-2); text-align: left; transition: color .3s, opacity .3s;
}
.fx-facet button > span:first-child {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--i-cut);
}
.fx-facet button:hover { color: var(--i-fg); }
.fx-facet button[aria-pressed="true"] { color: var(--i-fg); }
.fx-facet button[aria-pressed="true"] > span:first-child { background-size: 100% 1px; }
.fx-facet button.is-empty { opacity: .3; }
.fx-facet__n { font-size: 11px; color: var(--i-fg-3); font-variant-numeric: tabular-nums; }
.fx-panel__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px; font-size: 15px; color: var(--i-fg-2); }
.fx-panel__foot button { background-color: transparent; border: 0; padding: 0; cursor: pointer; }

.fx-key {
  display: flex; gap: 14px; align-items: baseline; padding: 10px 0 14px;
  font-size: 14px; color: var(--i-fg-2); text-wrap: pretty;
}
.fx-key__n { font-size: 12px; font-weight: 600; color: var(--i-fg); font-variant-numeric: tabular-nums; min-width: 3ch; }

/* ——— The list: a catalogue, one short line a title. Cast, credits and honours live in the peek and on the film's page. ——— */
.fx-body { padding: clamp(10px, 1.6vw, 24px) var(--i-g) 0; }
.fx-decade, .fx-cols {
  display: grid; grid-template-columns: clamp(88px, 9vw, 150px) minmax(0, 1fr);
}
.fx-decade { margin-bottom: clamp(28px, 3.4vw, 56px); }
.fx-decade[hidden] { display: none; }
.fx-decade__label span { position: sticky; top: calc(var(--fx-bar-h, 160px) + 16px); display: inline-block; padding-top: 14px; }
.fx-list { min-width: 0; }

/* The column heads: year and title sort the list, as Order in the panel does. */
.fx-cols { padding-bottom: 8px; }
.fx-cols__in, .fx-link {
  display: grid; grid-template-columns: 5.5ch minmax(0, 1.6fr) minmax(0, 1fr) 15ch;
  gap: 4px clamp(14px, 2vw, 32px); align-items: baseline;
}
.fx-col {
  justify-self: start; display: inline-flex; align-items: baseline; gap: .4em; min-height: 32px; padding: 8px 0 0;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--i-fg-3);
  transition: color .3s;
}
button.fx-col:hover { color: var(--i-fg-2); }
.fx-col[aria-pressed="true"] { color: var(--i-fg); }
.fx-col i { display: inline-block; font-style: normal; font-size: 12px; letter-spacing: 0; transition: transform .5s var(--i-cut); }
.fx-col[data-dir="up"] i { transform: scaleY(-1); }
.fx-col--part { justify-self: end; }
.fx[data-view="posters"] .fx-cols { display: none; }

.fx-item { position: relative; border-top: 1px solid var(--i-line); }
.fx-item[hidden] { display: none; }
.fx-link { padding: 15px 0 14px; transition: opacity .45s var(--i-ease); }
.fx-year { font-size: 14px; color: var(--i-fg-2); font-variant-numeric: tabular-nums; }
.fx-name {
  font-size: clamp(20px, 1.85vw, 30px); font-weight: 580; letter-spacing: -.03em; line-height: 1.05;
  text-wrap: balance; transition: transform .7s var(--i-ease), color .4s;
}
.fx-kind { margin-left: .5em; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--i-fg-3); vertical-align: .35em; white-space: nowrap; }
.fx-dir { font-size: 14px; line-height: 1.35; color: var(--i-fg-2); text-wrap: pretty; }
/* A search or a person that found this row in the cast or the writing says so here. */
.fx-dir mark { background: none; color: var(--i-fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fx-credit { display: none; }
.fx-label { text-align: right; color: var(--i-fg-3); justify-self: end; white-space: nowrap; }
.fx-label[data-group="made"], .fx-label[data-group="next"] { color: var(--i-fg); }
.fx-thumb, .fx-sheet { display: none; }

/* Hover and the row in focus: the others step back, the name leans in. */
.fx-body.is-pointing .fx-item:not(.is-on) .fx-link { opacity: .32; }
.fx-item.is-on .fx-name { transform: translateX(.18em); }
.fx-link:focus-visible { outline-offset: -1px; }

/* The peek carries the rest of the row: director, cast, Ashok's credit, the honour. */
.fx-peek__cap {
  display: grid; gap: 3px; padding: 12px 14px 13px;
  background: rgb(10 10 10 / .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font-size: 13px; line-height: 1.38; color: var(--i-fg-2);
}
.fx-peek__cap:empty { display: none; }
.fx-peek__cap > span:first-child { color: var(--i-fg); }
.fx-peek__cap .fx-ashok { color: var(--i-fg); }
.fx-peek__cap .fx-honour { color: var(--glow-now, var(--i-fg)); filter: saturate(.45) brightness(1.3); }
.fx-peek__type {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px 18px;
  font-size: clamp(22px, 2vw, 34px); font-weight: 620; letter-spacing: -.04em; line-height: 1; text-wrap: balance;
  background: linear-gradient(160deg, rgb(255 255 255 / .06), transparent 60%), #111;
}

.fx-empty { padding: 60px 0; font-size: clamp(20px, 2vw, 28px); color: var(--i-fg-2); }
.fx-empty button { background: none; border: 0; color: var(--i-fg); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ——— Posters: the lobby wall ——— */
.fx[data-view="posters"] .fx-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 15.5vw, 250px), 1fr));
  gap: clamp(26px, 3vw, 48px) clamp(14px, 1.6vw, 26px); padding-top: 18px;
}
.fx[data-view="posters"] .fx-item { border-top: 0; }
.fx[data-view="posters"] .fx-link { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.fx[data-view="posters"] .fx-sheet { display: block; order: -1; margin-bottom: 12px; }
.fx[data-view="posters"] .fx-dir, .fx[data-view="posters"] .fx-thumb { display: none; }
.fx[data-view="posters"] .fx-name { font-size: 15px; font-weight: 560; letter-spacing: -.01em; line-height: 1.25; order: 1; }
.fx[data-view="posters"] .fx-year { order: 2; font-size: 12px; margin-top: 4px; }
.fx[data-view="posters"] .fx-label { order: 3; text-align: left; justify-self: start; margin-top: 4px; font-size: 10.5px; white-space: normal; }
.fx[data-view="posters"] .fx-item.is-on .fx-name { transform: none; }
.fx[data-view="posters"] .fx-decade__label span { padding-top: 0; }

.fx-sheet { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--bg, #111); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8); }
.fx-sheet picture, .fx-sheet img { width: 100%; height: 100%; object-fit: cover; }
.fx-sheet img { transition: transform 1.1s var(--i-ease), filter .6s; }
.fx-item.is-on .fx-sheet img { transform: scale(1.035); }
/* No official poster: one designed in the system. The title on a ground tinted from its own hue, under the house rule. */
.fx-sheet { container-type: inline-size; }
.fx-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 11cqi 10cqi 12cqi;
  background:
    radial-gradient(130% 70% at 20% 0%, hsl(var(--h, 30) 38% 30% / .5), transparent 65%),
    radial-gradient(90% 60% at 100% 100%, hsl(calc(var(--h, 30) + 40) 30% 18% / .55), transparent 70%),
    #0c0b0a;
  box-shadow: inset 0 0 0 1px rgb(239 237 232 / .07);
}
.fx-card__rule { display: block; width: 34%; height: 1px; margin-bottom: 7cqi; background: rgb(239 237 232 / .5); transform-origin: 0 50%; transition: transform .9s var(--i-cut); }
.fx-card__by { position: absolute; top: 10cqi; left: 10cqi; right: 10cqi; font-size: 4.4cqi; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; color: rgb(239 237 232 / .55); }
.fx-card__title {
  font-size: var(--fs, 13.5cqi); font-weight: 620; letter-spacing: -.04em; line-height: .96; color: var(--i-fg);
  text-wrap: balance; overflow-wrap: normal; hyphens: manual;
}
.fx-item.is-on .fx-card__rule { transform: scaleX(1.9); }
/* The poster says the title, so the caption under it doesn't repeat it. */
.fx[data-view="posters"] .fx-item[data-poster="designed"] .fx-name { display: none; }

/* ——— Phones and narrow windows ——— */
@media (max-width: 1100px) {
  .fx-cols__in, .fx-link { grid-template-columns: 5ch minmax(0, 1.5fr) minmax(0, 1fr) 15ch; }
  .fx-panel__in { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@media (max-width: 900px) {
  .fx-cols__in, .fx-link { grid-template-columns: 5ch minmax(0, 1fr) 15ch; }
  .fx-dir, .fx-col--dir { display: none; }
}
@media (max-width: 1000px) {
  .fx-head { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fx-title__n { font-size: .2em; }
  .fx-bar { padding-top: 6px; }
  .fx-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--i-g) * -1); padding: 0 var(--i-g); gap: 22px; scroll-snap-type: x proximity; scroll-padding-inline: var(--i-g); }
  .fx-filters::-webkit-scrollbar { display: none; }
  /* The row runs on past the edge: a soft fade there says it scrolls. */
  .fx-filters { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .fx-filters.is-end { -webkit-mask-image: none; mask-image: none; }
  .fx-views button { font-size: 17px; }
  .fx-filter { flex: none; font-size: 17px; scroll-snap-align: start; }
  .fx-search { flex: 1 1 100%; }
  .fx-views { margin-left: auto; }
  .fx-panel__in { grid-template-columns: 1fr; max-height: 62vh; overflow: auto; padding-bottom: 12px; }
  .fx-key { font-size: 13px; }

  .fx-decade { grid-template-columns: 1fr; }
  .fx-cols { display: none; }
  .fx-decade__label span { position: static; padding: 0 0 10px; }
  .fx-link {
    grid-template-columns: 28vw minmax(0, 1fr); grid-template-rows: auto auto auto;
    gap: 2px 14px; align-items: start; padding: 12px 0;
  }
  .fx-thumb { display: block; grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg, #111); }
  .fx-thumb img { width: 100%; height: 100%; object-fit: cover; }
  /* No picture yet: an empty frame with the house rule across it, so it reads as waiting, not broken. */
  .fx-thumb--none { position: relative; background: none; box-shadow: inset 0 0 0 1px var(--i-line); }
  .fx-thumb--none::after { content: ""; position: absolute; left: 34%; right: 34%; top: 50%; height: 1px; background: var(--i-line); }
  .fx-name { grid-column: 2; grid-row: 1; font-size: 20px; line-height: 1.08; letter-spacing: -.025em; }
  .fx-year { grid-column: 2; grid-row: 2; font-size: 12.5px; margin-top: 4px; }
  .fx-label { grid-column: 2; grid-row: 3; font-size: 10.5px; margin-top: 2px; text-align: left; justify-self: start; }
  .fx-item.is-on .fx-name { transform: none; }

  .fx[data-view="posters"] .fx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx[data-view="posters"] .fx-name { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-filter::after, .fx-name, .fx-sheet img, .fx-link { transition-duration: .01s; }
}