/* Film archive: hub, ranked lists, catalog browse — magazine-A system */
.film-archive, .film-list, .film-browse { width: min(calc(100% - 32px), 1080px); margin: 0 auto; padding: 56px 0 88px; }
.film-archive-page, .film-list-page, .film-browse-page { color-scheme: light; }
.fa-head { border-bottom: 2px solid var(--ink); padding-bottom: 22px; margin-bottom: 30px; }
.fa-head h1 { font: 800 clamp(34px, 5vw, 54px)/1.02 "Arial Narrow", sans-serif; margin: 6px 0 12px; letter-spacing: .01em; }
.fa-intro { max-width: 720px; color: var(--ink); font-size: 15.5px; line-height: 1.7; margin: 0 0 10px; }
.fa-stats { color: var(--muted); font-size: 12.5px; letter-spacing: .04em; margin: 0; }
.fa-breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.fa-breadcrumb a { color: var(--site-accent); text-decoration: none; font-weight: 700; }
.fa-breadcrumb a:hover { text-decoration: underline; }

/* hub feature card (mirrors .wo-feature) */
.fa-feature { display: flex; align-items: center; gap: 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--surface); padding: 18px 22px; text-decoration: none; margin-bottom: 40px; }
.fa-feature:hover { background: var(--site-accent); border-color: var(--site-accent); color: #fff; }
.fa-feature-tag { font-size: 10px; font-weight: 800; letter-spacing: .14em; padding: 4px 10px; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; }
.fa-feature-title { display: block; font: 800 20px/1.2 "Arial Narrow", sans-serif; }
.fa-feature-desc { display: block; font-size: 13px; opacity: .85; margin-top: 3px; }
.fa-feature-cta { margin-left: auto; font-weight: 800; font-size: 14px; white-space: nowrap; }

/* section headings */
.fa-section { margin-bottom: 46px; }
.fa-section > h2 { font: 800 24px/1.1 "Arial Narrow", sans-serif; margin: 0 0 4px; }
.fa-section > .fa-section-sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }

/* generic card grid */
.fa-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.fa-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); background: var(--surface); padding: 16px 18px; text-decoration: none; color: var(--ink); min-height: 108px; }
.fa-card:hover { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.fa-card-kicker { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--site-accent); text-transform: uppercase; }
.fa-card-name { font: 800 19px/1.15 "Arial Narrow", sans-serif; }
.fa-card-name small { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 3px; letter-spacing: 0; }
.fa-card-meta { color: var(--muted); font-size: 12.5px; margin-top: auto; }
.fa-card-cta { font-size: 12px; font-weight: 800; color: var(--site-accent); }
.fa-card .fa-chipline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.fa-chip { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-strong); }

/* chip rows for browse */
.fa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.fa-chip-link { font-size: 12.5px; font-weight: 650; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; background: var(--surface); }
.fa-chip-link small { color: var(--muted); font-weight: 500; }
.fa-chip-link:hover { border-color: var(--site-accent); color: var(--site-accent); }
.fa-chip-link.is-active { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.fa-chip-link.is-active small { color: var(--surface); opacity: .7; }

/* ranked list rows */
.fl-list { list-style: none; margin: 0; padding: 0; }
.fl-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.fl-item:first-child { border-top: 0; padding-top: 6px; }
.fl-rank { font: 800 44px/1 "Arial Narrow", sans-serif; color: var(--site-accent); text-align: center; }
.fl-item.is-honorable .fl-rank { font-size: 26px; color: var(--muted); }
.fl-title { font: 800 20px/1.15 "Arial Narrow", sans-serif; margin: 0; }
.fl-title small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 8px; }
.fl-title a { color: var(--ink); text-decoration-color: var(--site-accent); text-underline-offset: 3px; }
.fl-title a:hover { color: var(--site-accent); }
.fl-meta { color: var(--muted); font-size: 12.5px; margin: 4px 0 0; }
.fl-oneliner { margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink); }
.fl-note { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); }
.fl-note::before { content: "※ "; color: var(--site-accent); }

/* criteria / as-of box */
.fa-asof { border: 1px solid var(--line); background: var(--surface-strong); padding: 14px 18px; font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 30px; }
.fa-asof strong { color: var(--ink); }

/* browse table */
.fb-list { list-style: none; margin: 0; padding: 0; }
.fb-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); }
.fb-item:first-child { border-top: 0; }
.fb-year { font: 800 15px/1 "Arial Narrow", sans-serif; color: var(--muted); }
.fb-title a { color: var(--ink); font-weight: 650; font-size: 15px; text-decoration: none; }
.fb-title a:hover { color: var(--site-accent); text-decoration: underline; }
.fb-title small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.fb-type { font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.fb-more { text-align: center; margin-top: 20px; color: var(--muted); font-size: 13px; }

@media (max-width: 760px) {
  .film-archive, .film-list, .film-browse { padding-top: 34px; }
  .fa-head h1 { font-size: 34px; }
  .fa-feature { flex-wrap: wrap; }
  .fa-feature-cta { margin-left: 0; }
  .fl-item { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; }
  .fl-rank { font-size: 32px; }
  .fb-item { grid-template-columns: 44px minmax(0, 1fr); }
  .fb-type { grid-column: 2; justify-self: start; }
}