@font-face{font-family:NB;src:url('assets/reference-fonts/NBInternational-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:NB;src:url('assets/identity/NBInternational-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:TimesNow;src:url('assets/reference-fonts/TimesNow-SemiLightItalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}

:root{--row:var(--row-desktop,104px)}
.film-list{
  max-width:var(--list-width,900px);
  padding-top:max(0px,calc(50svh - var(--first-row-height,var(--row))/2));
  padding-bottom:max(0px,calc(50svh - var(--last-row-height,var(--row))/2));
  text-align:var(--list-alignment,center);
}
.film-row{height:auto;min-height:var(--row)}
.film-type{display:flex;flex-direction:column;align-items:center;gap:var(--text-gap,6px);width:fit-content;max-width:100%;min-width:0;font-family:var(--title-font,NB,Arial,sans-serif);font-size:var(--title-size,48px);font-weight:var(--title-weight,400);font-style:var(--title-style,normal)}
.film-title{
  font-family:var(--title-font,TimesNow,Georgia,serif);
  font-size:var(--title-size,48px);
  font-weight:var(--title-weight,400);
  font-style:var(--title-style,normal);
  line-height:var(--title-line,1.02);
  letter-spacing:var(--title-tracking,-.025em);
  text-transform:var(--title-case,none);
  color:var(--title-color,#f3f1eb);
  overflow-wrap:anywhere;
  max-width:100%;
  white-space:pre-line;
}
.film-client{
  font-family:var(--subtitle-font,NB,Arial,sans-serif);
  font-size:var(--subtitle-size,13px);
  font-weight:var(--subtitle-weight,400);
  font-style:var(--subtitle-style,normal);
  letter-spacing:var(--subtitle-tracking,0em);
  text-transform:var(--subtitle-case,none);
  color:var(--subtitle-color,#f3f1eb);
  overflow-wrap:anywhere;
}
.film-client[hidden]{display:none}
.film-row[data-wrap-title=true] .film-title{max-width:min(100%,var(--film-title-width-desktop,100%))}
.film-row[data-wrap-subtitle=true] .film-client{max-width:min(100%,var(--film-title-width-desktop,100%));white-space:pre-line}
body[data-subtitle-position=below] .film-client{order:2}
body[data-list-alignment=left] :is(.film-link,.film-type){align-items:flex-start;text-align:left}
body[data-list-alignment=right] :is(.film-link,.film-type){align-items:flex-end;text-align:right}
body:is([data-subtitle-position=inline],[data-subtitle-position=inline-right]) .film-type{flex-direction:row;flex-wrap:nowrap;align-items:baseline}
body:is([data-subtitle-position=inline],[data-subtitle-position=inline-right]) .film-title{min-width:0}
body:is([data-subtitle-position=inline],[data-subtitle-position=inline-right]) .film-client{flex-shrink:0;max-width:40%}
body[data-subtitle-position=inline] .film-client{order:0}
body[data-subtitle-position=inline] .film-title{order:1}
body[data-subtitle-position=inline-right] .film-title{order:0}
body[data-subtitle-position=inline-right] .film-client{order:1}
body:is([data-subtitle-position=inline],[data-subtitle-position=inline-right])[data-list-alignment=left] .film-type{justify-content:flex-start}
body:is([data-subtitle-position=inline],[data-subtitle-position=inline-right])[data-list-alignment=right] .film-type{justify-content:flex-end}
/* The label anchors to the title's own width, rather than the full list column. */
body[data-subtitle-position^=corner-] .film-type{position:relative;display:block;padding-top:calc(var(--corner-label-height,16.8px) + var(--corner-gap,6px))}
body[data-subtitle-position^=corner-] .film-row[data-wrap-title=true] .film-type{max-width:min(100%,var(--film-title-width-desktop,100%))}
body[data-subtitle-position^=corner-] .film-client{position:absolute;top:0;max-width:100%;line-height:1.2;order:0}
body[data-subtitle-position=corner-left] .film-client{left:0;text-align:left}
body[data-subtitle-position=corner-right] .film-client{right:0;text-align:right}

/* Blend the complete text layer with the video backdrop. Blending a child
   inside main's stacking context would only blend it with transparency. */
main{mix-blend-mode:var(--list-blend,normal)}
body:not([data-list-blend=normal]) .film-link,
body:not([data-list-blend=normal]) .film-row.is-selected .film-title{text-shadow:none}
body[data-blend-header=true] :is(.films-header,.films-footer){mix-blend-mode:var(--list-blend,normal);color:var(--title-color,#f3f1eb);background:none;text-shadow:none}
.screen-layer img,.screen-layer video{filter:saturate(var(--video-saturation,1))}
.screen-shade{
  background-color:rgb(0 0 0 / var(--video-dim,.26));
  background-image:linear-gradient(180deg,rgb(0 0 0 / var(--edge-shade,.22)),transparent 28%,transparent 72%,rgb(0 0 0 / var(--edge-shade,.22)));
}
.films-footer #appearance-open{
  position:absolute;left:50%;transform:translateX(-50%);pointer-events:auto;
  min-height:44px;min-width:44px;font-size:12px;
}
.films-footer #appearance-open:hover,
.films-footer #appearance-open[aria-expanded=true]{text-decoration:underline;text-underline-offset:5px}

.appearance-panel{
  position:fixed;top:96px;right:20px;bottom:82px;z-index:30;width:350px;
  display:flex;flex-direction:column;isolation:isolate;
  background:#171717;color:#eeeae3;border:1px solid #ffffff30;
  box-shadow:0 14px 60px #0005;font:400 13px/1.4 NB,Arial,sans-serif;
  text-align:left;overscroll-behavior:contain;
}
.appearance-panel[hidden]{display:none}
.appearance-panel button:focus-visible,
.appearance-panel :is(input,select):focus-visible{outline:2px solid #eeeae3;outline-offset:3px}
.tune-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 16px 0}
.tune-heading h2{font:400 16px/1.2 NB,Arial,sans-serif;margin:0}
.tune-heading h2:focus{outline:none}
.tune-heading button{min-height:44px;font-size:12px}
.tune-field{display:grid;gap:7px;min-width:0;margin:0 0 16px;font-size:12px;color:#bdbbb5}
.tune-field :is(select,input[type=number],input[type=text]){
  width:100%;min-width:0;min-height:40px;border:1px solid #ffffff30;border-radius:0;
  background:#222;color:#eeeae3;padding:8px 10px;font:400 14px NB,Arial,sans-serif;
}
.tune-field textarea{
  width:100%;min-width:0;min-height:96px;resize:vertical;
  padding:10px;border:1px solid #ffffff30;border-radius:0;background:#222;color:#eeeae3;
  font:400 14px/1.5 NB,Arial,sans-serif;
}
.film-edit-actions{display:flex;justify-content:space-between;gap:12px;margin:0 0 12px}
.film-edit-actions button{font-size:12px;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.tune-preset{margin:8px 16px 16px}
.tune-tabs{display:flex;flex-shrink:0;gap:20px;padding:0 16px;border-bottom:1px solid #ffffff25}
.tune-tabs button{min-height:44px;font-size:12px;color:#a5a39d;position:relative}
.tune-tabs button[aria-selected=true]{color:#fff}
.tune-tabs button[aria-selected=true]:after{content:'';height:1px;background:currentColor;position:absolute;bottom:-1px;left:0;right:0}
.tune-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:20px 16px 0;scrollbar-width:thin}
.tune-scroll [hidden]{display:none}
.tune-scroll fieldset{border:0;margin:0 0 22px;padding:0;min-width:0}
.tune-scroll legend{font-size:14px;color:#eeeae3;margin-bottom:14px;padding:0}
.tune-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
.tune-number{position:relative;min-width:0}
.tune-number input{padding-right:38px!important}
.tune-number>span{position:absolute;right:22px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:11px}
.tune-range>span{display:flex;justify-content:space-between;gap:8px}
.tune-range output{font-variant-numeric:tabular-nums;color:#eeeae3;white-space:nowrap}
.tune-range input{width:100%;min-width:0;min-height:30px;margin:0;accent-color:#eeeae3}
.tune-check{display:flex;align-items:center;gap:9px;min-height:44px;margin:-6px 0 18px;font-size:12px}
.tune-check input{accent-color:#eeeae3;width:16px;height:16px;flex-shrink:0}
.tune-colors input{width:100%;height:38px;padding:0;border:1px solid #ffffff30;background:none;cursor:pointer}
.tune-colors output{font:11px NB,Arial,sans-serif;color:#eeeae3}
.tune-note{font-size:11px;line-height:1.5;color:#aaa89f;margin:0 0 18px}
.tune-bottom{padding:12px 16px;border-top:1px solid #ffffff25;flex-shrink:0}
.tune-bottom p{font-size:11px;color:#aaa89f;margin:0 0 8px;min-height:16px}
.tune-bottom>div{display:flex;justify-content:space-between;gap:16px}
.tune-bottom button{font-size:12px;min-height:32px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){
  :root{--row:var(--row-mobile,92px)}
  .film-title{font-size:var(--title-mobile-size,32px)}
  .film-row[data-wrap-title=true] .film-title{max-width:min(100%,var(--film-title-width-mobile,100%))}
  .film-row[data-wrap-subtitle=true] .film-client{max-width:min(100%,var(--film-title-width-mobile,100%))}
  .film-type{font-size:var(--title-mobile-size,32px)}
  .film-client{font-size:var(--subtitle-mobile-size,12px)}
  body[data-subtitle-position^=corner-] .film-row[data-wrap-title=true] .film-type{max-width:min(100%,var(--film-title-width-mobile,100%))}
  .appearance-panel{top:auto;bottom:0;left:0;right:0;width:auto;height:44dvh;border:0;border-top:1px solid #ffffff35;padding-bottom:env(safe-area-inset-bottom)}
  .tune-heading{padding-top:0}
  .tune-preset{margin-top:0;margin-bottom:8px;grid-template-columns:90px 1fr;align-items:center;gap:10px}
  .tune-tabs button{min-height:38px}
  .tune-scroll{padding-top:16px}
  .tune-bottom{padding-top:8px;padding-bottom:8px}
  .tune-field :is(select,input[type=number],input[type=text],textarea){font-size:16px}
  .tune-bottom button{min-height:34px}
}
@media(min-width:761px) and (max-width:1100px){
  .appearance-panel{top:auto;bottom:0;left:0;right:0;width:auto;height:44dvh;border:0;border-top:1px solid #ffffff35;padding-bottom:env(safe-area-inset-bottom)}
  .tune-heading{padding-top:0}
  .tune-preset{margin-top:0;margin-bottom:8px;grid-template-columns:90px 1fr;align-items:center;gap:10px}
  .tune-tabs button{min-height:38px}
  .tune-scroll{padding-top:16px}
  .tune-bottom{padding-top:8px;padding-bottom:8px}
}
@media(max-height:550px) and (orientation:landscape){
  .appearance-panel{top:64px;right:12px;left:auto;bottom:54px;width:330px;height:auto}
  .tune-preset{display:none}
  .tune-heading{padding-top:0}
}