:root {
  --paper: #f4f4f0;
  --white: #ffffff;
  --ink: #10100f;
  --muted: #676762;
  --blue: #164bd9;
  --red: #ee3c2d;
  --lime: #c9ef3e;
  --line: rgba(16,16,15,.2);
  --pad: 4.5vw;
  --sans: Arial, "Helvetica Neue", "PingFang SC", sans-serif;
  --serif: Georgia, "Times New Roman", "Songti SC", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.45; letter-spacing: 0; overflow-x: hidden; }
body.dialog-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { color: inherit; font: inherit; letter-spacing: 0; }
button { padding: 0; background: transparent; border: 0; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; width: 100%; }
svg { width: 20px; height: 20px; stroke-width: 1.7; }
::selection { color: #fff; background: var(--blue); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: -60px; left: 20px; padding: 10px 14px; color: #fff; background: var(--blue); }
.skip-link:focus { top: 20px; }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 82px; padding: 0 var(--pad); color: #fff; border-bottom: 1px solid rgba(255,255,255,.3); transition: height .25s ease, color .25s ease, background .25s ease; }
.site-header.scrolled { height: 66px; color: var(--ink); background: rgba(244,244,240,.92); border-color: var(--line); backdrop-filter: blur(14px); }
.wordmark { display: flex; gap: 7px; align-items: center; justify-self: start; font-size: 15px; }
.wordmark span { color: var(--lime); }
.site-header.scrolled .wordmark span { color: var(--blue); }
.site-header > p { margin: 0; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.site-header > p span { margin-left: 8px; opacity: .6; }
.site-header nav { display: flex; align-items: center; gap: 22px; justify-self: end; font-size: 11px; font-weight: 700; }
.header-random { display: flex; align-items: center; gap: 7px; color: inherit; }
.header-random svg { width: 15px; }

.hero { position: relative; min-height: 94svh; color: #fff; background: #171819; overflow: hidden; }
.hero-image { position: absolute; inset: 0; height: 110%; object-fit: cover; object-position: center; transform: translate3d(0, var(--hero-shift, 0), 0) scale(1.02); will-change: transform; }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.02) 55%), linear-gradient(0deg, rgba(0,0,0,.68), transparent 48%); }
.hero-brand { position: absolute; z-index: 2; right: var(--pad); bottom: 8%; left: var(--pad); }
.hero-edition, .overline { margin: 0 0 16px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.hero-brand h1 { display: flex; justify-content: space-between; margin: 0; font-size: 7.4rem; font-weight: 900; line-height: .8; }
.hero-feature { position: absolute; z-index: 3; top: 24%; right: var(--pad); width: 260px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.55); border-bottom: 1px solid rgba(255,255,255,.55); }
.hero-feature p { margin: 0 0 16px; color: var(--lime); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.hero-feature h2 { margin: 0; font-size: 2.1rem; line-height: 1; }
.hero-feature > span { display: block; margin-top: 9px; color: rgba(255,255,255,.72); font-family: var(--serif); font-size: 13px; }
.hero-feature button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; margin-top: 22px; padding: 0 14px; color: var(--ink); background: var(--lime); font-size: 10px; font-weight: 800; }
.hero-feature button:hover { background: #fff; }
.hero-feature button svg { width: 14px; fill: currentColor; }
.hero-scroll { position: absolute; z-index: 3; right: var(--pad); bottom: 25px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); background: var(--lime); border-radius: 50%; }
.hero-scroll svg { width: 17px; }
.hero-in { opacity: 0; transform: translateY(22px); animation: hero-in .75s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-brand h1.hero-in { animation-delay: .12s; }
.hero-feature.hero-in { animation-delay: .24s; }
.hero-scroll.hero-in { animation-delay: .4s; }
@keyframes hero-in { to { opacity: 1; transform: none; } }

.program { max-width: 1540px; margin: 0 auto; padding: 140px var(--pad) 155px; }
.program-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: 80px; align-items: end; margin-bottom: 90px; }
.program-heading .overline, .awards .overline { color: var(--blue); }
.program-heading h2, .awards-heading h2 { margin: 0; font-family: var(--serif); font-size: 4.8rem; font-weight: 400; line-height: .98; }
.program-heading > p { max-width: 420px; margin: 0 0 9px; color: var(--muted); font-family: var(--serif); font-size: 18px; }
.program-tools { display: grid; grid-template-columns: 1fr auto auto; align-items: center; min-height: 68px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.search-control { display: flex; align-items: center; gap: 11px; align-self: stretch; max-width: 430px; }
.search-control svg { width: 17px; color: var(--blue); }
.search-control input { width: 100%; height: 100%; padding: 0; background: transparent; border: 0; outline: 0; font-size: 12px; }
.search-control input::placeholder { color: #767671; }
.result-count { margin-right: 35px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.view-control { display: grid; grid-template-columns: repeat(2, 45px); height: 44px; border: 1px solid var(--ink); }
.view-control button { display: grid; place-items: center; }
.view-control button + button { border-left: 1px solid var(--ink); }
.view-control button.active { color: #fff; background: var(--blue); }
.view-control svg { width: 16px; }

.program-index { border-bottom: 1px solid var(--ink); }
.film-row { display: grid; grid-template-columns: 64px minmax(220px, 28%) minmax(260px, 1fr) 160px 48px; gap: 24px; align-items: center; min-height: 178px; padding: 18px 0; border-top: 1px solid var(--line); opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease, background .25s ease; }
.film-row:first-child { border-top: 0; }
.film-row.visible { opacity: 1; transform: none; }
.film-row:hover { background: var(--white); }
.row-number { align-self: start; padding-top: 5px; color: var(--blue); font-size: 10px; font-weight: 800; }
.row-poster { width: 100%; padding: 0; aspect-ratio: 16 / 9; background: #ddd; overflow: hidden; }
.row-poster img { height: 100%; object-fit: cover; transition: transform .5s ease; }
.film-row:hover .row-poster img { transform: scale(1.035); }
.row-copy { min-width: 0; }
.row-copy h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 2.5rem; font-weight: 400; line-height: 1; }
.row-copy p { max-width: 540px; margin: 0; color: var(--muted); font-size: 12px; }
.row-kind { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.row-open { display: grid; place-items: center; width: 46px; aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 50%; transition: color .2s ease, background .2s ease, transform .2s ease; }
.row-open:hover { color: #fff; background: var(--red); border-color: var(--red); transform: rotate(45deg); }
.row-open svg { width: 17px; }
.viewed .row-kind::after { content: " · Viewed"; color: var(--blue); }
.empty-state { margin: 70px 0 0; font-family: var(--serif); font-size: 27px; text-align: center; }

.program-index.grid-view { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 54px 18px; padding-top: 34px; border-bottom: 0; }
.grid-view .film-row { display: grid; grid-template-columns: 34px 1fr 48px; gap: 10px; min-height: 0; padding: 0; border: 0; background: transparent; }
.grid-view .row-number { grid-row: 2; padding-top: 9px; }
.grid-view .row-poster { grid-column: 1 / -1; grid-row: 1; }
.grid-view .row-copy { grid-column: 2; grid-row: 2; padding-top: 7px; }
.grid-view .row-copy h3 { margin-bottom: 5px; font-size: 1.55rem; }
.grid-view .row-copy p { display: none; }
.grid-view .row-kind { grid-column: 2; grid-row: 3; }
.grid-view .row-open { grid-column: 3; grid-row: 2 / 4; }

.awards { padding: 130px var(--pad) 150px; color: #fff; background: var(--blue); }
.awards-heading { display: grid; grid-template-columns: .45fr 1fr; gap: 50px; align-items: start; margin-bottom: 80px; }
.awards .overline { color: var(--lime); }
.award-films { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); }
.award-film { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: end; padding: 20px; color: #fff; text-align: left; overflow: hidden; }
.award-film + .award-film { border-left: 1px solid rgba(255,255,255,.5); }
.award-film img { grid-column: 1 / -1; margin-bottom: 8px; aspect-ratio: 16 / 11; object-fit: cover; filter: saturate(.9); transition: transform .5s ease, filter .3s ease; }
.award-film span { display: flex; flex-direction: column; gap: 3px; }
.award-film strong { font-family: var(--serif); font-size: 25px; font-weight: 400; }
.award-film small { color: rgba(255,255,255,.65); font-size: 9px; text-transform: uppercase; }
.award-film:hover img { transform: scale(1.025); filter: saturate(1.1); }

.site-footer { display: grid; grid-template-columns: .5fr 1fr .65fr auto; gap: 40px; align-items: end; min-height: 330px; padding: 80px var(--pad) 55px; color: #fff; background: var(--red); }
.footer-mark { align-self: start; display: grid; place-items: center; width: 64px; aspect-ratio: 1; color: var(--red); background: #fff; font-weight: 900; }
.site-footer h2 { margin: 0; font-size: 5.2rem; line-height: .82; }
.site-footer p { margin: 0; color: rgba(255,255,255,.72); font-family: var(--serif); font-size: 14px; }
.site-footer a { display: inline-flex; gap: 8px; align-items: center; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.site-footer svg { width: 15px; }

.source-dialog { width: min(1040px, calc(100% - 36px)); max-height: calc(100svh - 36px); padding: 0; color: var(--ink); background: var(--paper); border: 0; border-radius: 0; overflow: auto; }
.source-dialog::backdrop { background: rgba(10,10,9,.72); backdrop-filter: blur(8px); }
.source-dialog[open] { animation: dialog-in .28s ease both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px); } }
.dialog-close { position: absolute; z-index: 2; top: 15px; right: 15px; display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: var(--ink); }
.dialog-close:hover { background: var(--red); }
.source-dialog { grid-template-columns: 1.15fr .85fr; }
.source-dialog[open] { display: grid; }
.dialog-image { min-height: 590px; background: #ddd; }
.dialog-image img { height: 100%; object-fit: cover; }
.dialog-copy { display: flex; flex-direction: column; padding: 58px 44px 38px; }
.dialog-number { margin: 0 0 20px; color: var(--blue); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.dialog-copy h2 { margin: 0; font-family: var(--serif); font-size: 3.6rem; font-weight: 400; line-height: .95; }
.dialog-copy > p:not(.dialog-number) { margin: 22px 0 40px; color: var(--muted); font-size: 13px; }
.source-label { display: flex; justify-content: space-between; margin-top: auto; padding-bottom: 11px; border-bottom: 2px solid var(--ink); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.source-label small { color: var(--muted); font-weight: 400; }
.source-list { display: grid; }
.source-link { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; min-height: 55px; border-bottom: 1px solid var(--line); }
.source-link span { color: var(--blue); font-size: 9px; }
.source-link strong { font-size: 11px; }
.source-link svg { width: 15px; }
.source-link:hover { color: var(--blue); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .hero-brand h1 { display: block; font-size: 5.5rem; }
  .hero-brand h1 span { display: block; }
  .program-heading h2, .awards-heading h2 { font-size: 4rem; }
  .film-row { grid-template-columns: 48px minmax(180px, 31%) 1fr 48px; }
  .row-kind { display: none; }
  .program-index.grid-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .awards-heading { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: .4fr 1fr auto; }
  .site-footer p { display: none; }
}

@media (max-width: 700px) {
  :root { --pad: 19px; }
  .site-header { grid-template-columns: 1fr auto; height: 68px; }
  .site-header > p, .site-header nav > a { display: none; }
  .hero { min-height: 86svh; }
  .hero-image { height: 100%; object-position: 42% center; }
  .hero-brand { bottom: 9%; }
  .hero-brand h1 { font-size: 3.8rem; }
  .hero-feature { top: 18%; right: 19px; left: 19px; width: auto; }
  .hero-feature h2 { font-size: 1.7rem; }
  .hero-scroll { right: 19px; bottom: 22px; }
  .program { padding-top: 90px; padding-bottom: 100px; }
  .program-heading { display: block; margin-bottom: 55px; }
  .program-heading h2, .awards-heading h2 { font-size: 3rem; }
  .program-heading > p { margin-top: 26px; font-size: 16px; }
  .program-tools { grid-template-columns: 1fr auto; gap: 10px; }
  .result-count { display: none; }
  .film-row { grid-template-columns: 34px 1fr 44px; gap: 10px; min-height: 0; padding: 22px 0; }
  .row-number { grid-column: 1; grid-row: 2; }
  .row-poster { grid-column: 1 / -1; grid-row: 1; }
  .row-copy { grid-column: 2; grid-row: 2; }
  .row-copy h3 { font-size: 1.75rem; }
  .row-copy p { display: none; }
  .row-open { grid-column: 3; grid-row: 2; width: 42px; }
  .program-index.grid-view { grid-template-columns: 1fr; }
  .awards { padding-top: 90px; padding-bottom: 95px; }
  .awards-heading { margin-bottom: 50px; }
  .award-films { grid-template-columns: 1fr; }
  .award-film + .award-film { border-top: 1px solid rgba(255,255,255,.5); border-left: 0; }
  .site-footer { grid-template-columns: 1fr auto; min-height: 250px; }
  .site-footer h2 { grid-column: 1 / -1; grid-row: 1; font-size: 3.7rem; }
  .footer-mark { grid-row: 2; width: 52px; }
  .source-dialog[open] { display: block; }
  .dialog-image { height: 220px; min-height: 0; }
  .dialog-copy { padding: 32px 23px 26px; }
  .dialog-copy h2 { padding-right: 35px; font-size: 2.6rem; }
  .dialog-copy > p:not(.dialog-number) { margin: 17px 0 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}