.film-library {
  padding-top: 64px;
  padding-bottom: 88px;
  scroll-margin-top: 108px;
}
.film-library.shell {
  width: 100%;
  max-width: 2400px;
  padding-left: clamp(24px, 3.125vw, 80px);
  padding-right: clamp(24px, 3.125vw, 80px);
}

.film-library ::selection { background: #dedee3; color: var(--ink); }
.film-library :is(a, button, select, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.film-library :is(a, button, select, summary) { -webkit-tap-highlight-color: transparent; }

.film-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 36px; }
.film-heading-copy { min-width: 0; }
.film-kicker { display: none; }
.film-heading :is(h1, h2) { margin: 0; color: var(--ink); font-size: 44px; font-weight: 600; line-height: 1.14; letter-spacing: -.035em; text-wrap: balance; }
.film-heading :is(h1, h2) span { display: block; margin-top: 10px; color: var(--muted); font-size: 32px; font-weight: 500; letter-spacing: -.025em; }
.film-intro { max-width: 65ch; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.film-stats { display: flex; gap: 32px; flex-shrink: 0; padding-bottom: 4px; }
.film-stats > div { display: flex; flex-direction: column; gap: 8px; }
.film-stats strong { color: var(--ink); font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.film-stats span { color: var(--muted); font-size: 11px; line-height: 1.5; }

.film-period-note { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 18px; padding: 20px 0; margin-bottom: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.film-period-label { color: var(--ink); font-size: 12px; font-weight: 500; }
.film-period-note strong { color: var(--ink); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.film-period-note p { max-width: 72ch; margin: 0 0 0 auto; color: var(--muted); font-size: 12px; line-height: 1.8; }

.film-event-context { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 28px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.film-event-context[hidden] { display: none; }
.film-event-context p { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.film-event-context p > span { color: var(--muted); font-size: 12px; line-height: 1.7; }
.film-event-context strong { color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; overflow-wrap: anywhere; }
.film-event-clear { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 13px; line-height: 1.7; text-decoration: underline; text-underline-offset: 4px; }

.film-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px) minmax(160px, 205px) minmax(140px, 170px); align-items: end; gap: 16px; }
.film-search { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 50px; padding: 0 16px; border: 1px solid #d2d2d7; border-radius: 10px; background: var(--surface); color: var(--muted); }
.film-search:focus-within { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 3px; }
.film-search svg { flex-shrink: 0; }
.film-search input { width: 100%; min-width: 0; height: 48px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 14px; caret-color: var(--ink); outline: none; }
.film-search input:focus-visible { outline: none; }
.film-search input::placeholder { color: var(--muted); opacity: 1; }
.film-select-label { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.film-select-label > span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.film-select-label select { width: 100%; min-width: 0; height: 50px; padding: 0 34px 0 14px; border: 1px solid #d2d2d7; border-radius: 10px; background-color: var(--surface); color: var(--ink); font-size: 13px; text-overflow: ellipsis; cursor: pointer; }
.film-result-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; min-height: 24px; margin: 24px 0 24px; scroll-margin-top: 108px; }
.film-result-count { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.film-result-meta > span { color: var(--muted); font-size: 11px; line-height: 1.7; }

/* Natural card heights are measured by the masonry controller. */
.film-grid { --film-card-gap: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--film-card-gap); align-items: start; }
.film-grid[data-masonry="true"] { grid-auto-rows: 1px; row-gap: 0; }
.film-grid > .film-card { width: 100%; margin: 0; }
.film-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; transition: border-color .2s ease; }

.film-cover { position: relative; isolation: isolate; width: 100%; aspect-ratio: var(--film-cover-ratio, 8/5); background: var(--film-cover-bg, #e9e6df); color: var(--film-cover-ink, #403d37); overflow: hidden; }
.film-cover:not(.film-cover-has-image) { display: flex; min-height: 250px; aspect-ratio: auto; }
.film-cover:not(.film-cover-has-image) .film-cover-fallback { position: relative; flex: 1; min-width: 0; }
.film-cover-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px; }
.film-cover-number { position: relative; z-index: 1; color: inherit; font-size: 10px; letter-spacing: .08em; }
.film-cover-title { position: relative; z-index: 1; max-width: 100%; color: inherit; font-size: 34px; font-weight: 600; line-height: 1.2; letter-spacing: -.03em; overflow-wrap: anywhere; }
.film-cover-caption { position: relative; z-index: 1; color: inherit; font-size: 10px; line-height: 1.6; }
.film-cover-loaded .film-cover-fallback { visibility: hidden; }
.film-poster-image { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: 0; }
.film-cover-loaded .film-poster-image { opacity: 1; }

.film-image-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 44px; padding: 4px 20px; border-bottom: 1px solid var(--line); background: #fafafa; }
.film-image-source, .film-image-source-missing { color: var(--muted); font-size: 12px; line-height: 1.8; }
.film-image-source { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 0; }
.film-image-source:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.film-image-notes { min-width: 0; max-width: 70%; color: var(--muted); font-size: 11px; text-align: right; }
.film-image-notes summary { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; padding: 7px 0; color: var(--muted); font-size: 12px; line-height: 1.8; list-style: none; cursor: pointer; }
.film-image-notes summary::-webkit-details-marker { display: none; }
.film-image-notes summary::after { content: " +"; }
.film-image-notes[open] summary::after { content: " −"; }
.film-image-notes p { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; text-align: left; overflow-wrap: anywhere; }

.film-card-body { flex: 1; min-width: 0; padding: 24px 24px 18px; }
.film-card-topline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 16px; }
.film-card-topline time { margin-left: auto; color: var(--muted); font-size: 11px; line-height: 1.8; text-align: right; font-variant-numeric: tabular-nums; }
.film-watch-badge { display: inline-block; padding: 4px 8px; border-radius: 5px; background: var(--mist); color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.film-watch-badge-full { background: var(--ink); color: var(--surface); }
.film-watch-badge-trailer, .film-watch-badge-unavailable { background: var(--mist); color: var(--muted); }
.film-card-title { min-width: 0; margin: 0; color: var(--ink); font-size: 21px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em; overflow-wrap: anywhere; }
.film-award-festival { margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.film-award-name { margin: 0 0 12px; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }
.film-credits { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.film-summary { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
.film-ai-details { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.film-ai-details summary { min-height: 30px; padding: 4px 0; color: var(--ink); font-size: 12px; line-height: 1.8; cursor: pointer; }
.film-ai-details p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.85; }

.film-event-details { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.film-event-details summary { min-height: 30px; padding: 4px 0; color: var(--ink); font-size: 12px; line-height: 1.8; cursor: pointer; }
.film-event-details ul { display: flex; flex-direction: column; gap: 9px; padding: 0; margin: 10px 0 0; list-style: none; }
.film-event-details li { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.film-event-relationship { flex-shrink: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.film-event-link { min-width: 0; min-height: 32px; padding: 4px 0; border: 0; border-radius: 2px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; line-height: 1.8; text-align: left; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; cursor: pointer; }

.film-card-footer { padding: 0 24px 24px; }
.film-watch-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding: 12px 15px; border: 1px solid var(--ink); border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 500; line-height: 1.6; }
.film-watch-link > span { flex-shrink: 0; font-size: 18px; line-height: 1; }
.film-watch-link-trailer { border-color: var(--line); background: var(--mist); color: var(--ink); }
.film-watch-notes { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.film-watch-alternates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.film-watch-alternate { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; max-width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid #d2d2d7; border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.film-watch-alternate > span { flex-shrink: 0; }
.film-watch-unavailable { display: block; min-height: 46px; padding: 12px 15px; border-radius: 10px; background: var(--mist); color: var(--muted); font-size: 12px; line-height: 1.8; }
.film-source-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 5px 10px; margin-top: 16px; line-height: 1.8; }
.film-award-source { min-height: 26px; color: var(--muted); font-size: 11px; }
.film-award-source:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.film-source-row > span, .film-source-missing { color: var(--muted); font-size: 11px; }
.film-rights { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }

.film-feed { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 28px 0 0; padding: 28px 20px 0; border-top: 1px solid var(--line); text-align: center; }
.film-feed-status { min-height: 21px; max-width: 65ch; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; font-variant-numeric: tabular-nums; }
.film-load-more { min-width: 144px; min-height: 44px; padding: 11px 22px; border: 1px solid #d2d2d7; border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.6; }
.film-load-more:disabled { border-color: var(--line); background: var(--mist); color: var(--muted); opacity: 1; cursor: wait; }
.film-feed-sentinel { width: 100%; height: 1px; flex-shrink: 0; pointer-events: none; }
.film-copyright { margin-top: 40px; border-top: 1px solid var(--line); color: var(--muted); }
.film-copyright summary { padding: 21px 0; color: var(--ink); font-size: 13px; line-height: 1.7; cursor: pointer; }
.film-copyright > div { padding: 0 0 14px; }
.film-copyright p { max-width: 75ch; margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.film-copyright a { display: inline-block; margin-right: 20px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.film-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 350px; padding: 100px 24px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.film-loading-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--ink); }
.film-empty { grid-column: 1/-1; padding: 72px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; }
.film-empty-mark { color: #a1a1a6; font-size: 44px; line-height: 1; }
.film-empty h2, .film-empty h3 { margin: 22px 0 12px; color: var(--ink); font-size: 22px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
.film-empty p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.film-retry, .film-reset { min-height: 44px; margin-top: 24px; padding: 11px 19px; border: 1px solid var(--ink); border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 500; line-height: 1.6; }

@media (hover: hover) {
  .film-card:hover { border-color: #b8b8bd; }
  .film-watch-link:hover, .film-retry:hover, .film-reset:hover { border-color: #3a3a3c; background: #3a3a3c; color: var(--surface); }
  .film-watch-link-trailer:hover { border-color: #c7c7cc; background: #e4e4e7; color: var(--ink); }
  .film-watch-alternate:hover { border-color: #b8b8bd; background: var(--mist); }
  .film-load-more:hover:not(:disabled) { border-color: #b8b8bd; background: #eeeef0; }
}

@media (min-width: 1450px) {
  .film-heading :is(h1, h2) { font-size: 48px; }
  .film-heading :is(h1, h2) span { font-size: 36px; }
  .film-cover-title { font-size: 38px; }
}

@media (max-width: 1024px) {
  .film-grid { --film-card-gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .film-heading :is(h1, h2) { font-size: 38px; }
  .film-heading :is(h1, h2) span { font-size: 28px; }
  .film-stats { gap: 24px; }
  .film-stats strong { font-size: 26px; }
  .film-period-note p { flex-basis: 100%; max-width: 75ch; margin-left: 0; }
  .film-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 900px) {
  .film-library, .film-result-meta { scroll-margin-top: 128px; }
}

@media (max-width: 760px) {
  .film-library { padding-top: 44px; padding-bottom: 64px; }
  .film-library.shell { padding-left: 20px; padding-right: 20px; }
  .film-heading { align-items: flex-start; flex-direction: column; gap: 26px; margin-bottom: 28px; }
  .film-heading :is(h1, h2) { font-size: 36px; }
  .film-heading :is(h1, h2) span { margin-top: 9px; font-size: 27px; }
  .film-intro { margin-top: 17px; font-size: 14px; }
  .film-stats { gap: 32px; }
  .film-stats > div { flex-direction: row; align-items: baseline; gap: 9px; }
  .film-stats strong { font-size: 23px; }
  .film-period-note { gap: 9px 16px; padding: 18px 0; margin-bottom: 26px; }
  .film-period-note p { font-size: 11px; }
  .film-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .film-select-label { gap: 8px; }
  .film-select-label > span { font-size: 11px; }
  .film-select-label select { font-size: 12px; }
  .film-result-meta { align-items: flex-start; flex-direction: column; gap: 5px; margin: 22px 0; }
  .film-grid { --film-card-gap: 20px; }
  .film-cover-fallback { padding: 24px; }
  .film-cover-title { font-size: 30px; }
  .film-image-meta { gap: 10px; padding: 4px 17px; }
  .film-card-body { padding: 22px 20px 16px; }
  .film-card-title { font-size: 20px; }
  .film-card-footer { padding: 0 20px 22px; }
  .film-watch-link { gap: 10px; padding: 12px; font-size: 12px; }
  .film-feed { gap: 12px; margin-top: 24px; padding: 24px 12px 0; }
  .film-copyright { margin-top: 32px; }
  .film-copyright a { display: block; margin: 7px 0 0; }
}

@media (max-width: 600px) {
  .film-search, .film-toolbar > .film-select-label:nth-child(2) { grid-column: 1/-1; }
  .film-search input { font-size: 16px; }
  .film-select-label select { font-size: 14px; }
  .film-grid { --film-card-gap: 24px; grid-template-columns: minmax(0, 1fr); }
  .film-heading :is(h1, h2) { font-size: 34px; }
  .film-heading :is(h1, h2) span { font-size: 25px; }
  .film-cover:not(.film-cover-has-image) { min-height: 260px; }
  .film-cover-fallback { padding: 28px; }
  .film-cover-title { font-size: 36px; }
  .film-card-body { padding: 24px 24px 18px; }
  .film-card-title { font-size: 22px; }
  .film-card-footer { padding: 0 24px 24px; }
  .film-image-meta { padding: 4px 20px; }
  .film-watch-link { padding: 12px 15px; font-size: 13px; }
  .film-loading { min-height: 280px; padding: 80px 20px; }
  .film-empty { padding: 56px 20px; }
  .film-empty h2, .film-empty h3 { font-size: 20px; }
  .film-empty p { font-size: 13px; }
}

@media (max-width: 360px) {
  .film-library.shell { padding-left: 16px; padding-right: 16px; }
  .film-stats { gap: 22px; }
  .film-stats > div { gap: 7px; }
  .film-stats span { font-size: 10px; }
  .film-select-label select { padding-left: 11px; padding-right: 25px; }
  .film-card-body { padding: 22px 20px 16px; }
  .film-card-footer { padding: 0 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .film-card { transition: none; }
}

/* Card actions and progressive disclosure keep the work itself prominent. */
.film-card { scroll-margin-top: 130px; }
.film-card-current { border-color: var(--ink); }
.film-card:focus { outline: 2px solid var(--ink); outline-offset: 4px; }
.film-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.film-card-title a { display: inline-block; padding: 5px 0; color: inherit; text-decoration: none; }
.film-card-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.film-card-actions { display: flex; flex-shrink: 0; gap: 0; margin: 0 -10px 0 0; }
.film-card-actions button { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.film-card-actions .film-save[aria-pressed="true"] { color: var(--ink); }
.film-action-status { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.film-action-status:empty { display: none; }
.film-playback-caution { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.film-additional-details { margin-top: 12px; border-top: 1px solid var(--line); color: var(--muted); }
.film-additional-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; color: var(--muted); font-size: 12px; line-height: 1.8; list-style: none; cursor: pointer; }
.film-additional-details > summary::-webkit-details-marker { display: none; }
.film-additional-details > summary::after { content: "+"; font-size: 16px; }
.film-additional-details[open] > summary::after { content: "−"; }
.film-additional-details > div { padding-bottom: 1px; }
.film-additional-details .film-source-row { align-items: center; margin-top: 6px; }
.film-evidence-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.film-evidence-note > span { margin-right: 8px; color: var(--ink); }
.film-empty .film-reset { display: inline-flex; align-items: center; justify-content: center; }
@media (hover: hover) {
  .film-card-actions button:hover { background: var(--mist); color: var(--ink); }
}
@media (max-width: 760px) {
  .film-watch-alternate { min-height: 44px; padding: 9px 10px; font-size: 12px; }
  .film-award-source { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
  .film-source-row > span, .film-source-missing { font-size: 12px; }
  .film-ai-details summary, .film-event-details summary { min-height: 44px; padding: 10px 0; }
  .film-event-link { min-height: 44px; padding: 10px 0; }
  .film-additional-details { margin-top: 12px; }
}