/* The Films page. Type and colour are the site's (brand.css, version 0); this is only the layout.
   One screen that plays the chosen film, and the programme beside it in the order he made them:
   the cinema room in two dimensions, so the same list becomes its programme later. */
.films-page{--top:clamp(58px,3.6vw,92px);--gap:clamp(28px,3.2vw,84px);--stick:clamp(14px,1.3vw,34px)}
.skip{position:absolute;left:var(--pad);top:10px;z-index:40;padding:10px 14px;background:var(--card);border:1px solid var(--gold);transform:translateY(-300%)}
.skip:focus{transform:none}

/* the bar */
.top{display:flex;align-items:center;justify-content:space-between;height:var(--top);padding:0 var(--pad)}
/* the site's top bar, as on the case pages (site/design/model-look/cases/case.css): the cases and Films, this page current; below 1700 px the mark takes visitors home */
.top nav{display:flex;gap:2.4vw}
.top nav a{color:var(--soft);transition:color .3s}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top .menu,.top nav a.home{display:none}
/* hyphenated names and kinds stay whole on a line (on a phone "Nutra-Life" broke after its hyphen, 14 Oct) */
.nw,.cap-kind,.cap-run{white-space:nowrap}

/* Below 1700 the top stays within reach, as on the case pages (case.css, the 14 Oct phone pass): it slips
   away while the page is read downwards and comes back as soon as it is scrolled up, and its Menu opens
   home, the cases and the films. Here the top is fixed rather than laid over an opening, so the page keeps
   its 58 px. Its state class is menu-on, as there. */
@media(max-width:1699px){   /* below 1700 since six cases joined the menu (24 Oct): it ran into the name at 1440 */
  html{scroll-padding-top:72px}
  .films-page{padding-top:58px}
  .top{position:fixed;left:0;right:0;top:0;z-index:30;height:58px;border-bottom:1px solid transparent;transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .3s,border-color .3s}
  .top.bar{background:rgba(3,3,4,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
  .top.away{transform:translateY(-101%)}
  .top:focus-within{transform:none}
  .top nav{display:none}
  .top .menu{display:block;margin-right:-12px;padding:14px 12px;background:none;border:0;color:var(--ink);cursor:pointer}
  .top.menu-on{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line)}
  .top.menu-on nav{display:grid;position:fixed;left:0;right:0;top:58px;padding:4px var(--pad) 20px;gap:0;background:var(--bg);border-bottom:1px solid var(--line)}
  .top.menu-on nav a{display:block;padding:16px 0;border-top:1px solid var(--line);color:var(--soft)}
  .top.menu-on nav a:first-child{border-top:0}
  .top.menu-on nav a[aria-current]{color:var(--ink)}
  .top.menu-on nav a em{color:var(--gold);margin-right:.5em}
  .top.menu-on::after{content:"";position:fixed;inset:58px 0 0;z-index:-1;background:rgba(3,3,4,.62)}
}

/* the hall: the screen on the left, the programme on the right */
.hall{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);grid-template-areas:"screen intro" "screen prog";column-gap:var(--gap);align-items:start;padding:0 var(--pad)}
.screen{grid-area:screen;position:sticky;top:var(--stick)}
.intro{grid-area:intro;padding:clamp(6px,.6vw,16px) 0 clamp(22px,2.2vw,58px)}
/* The space before the footer sits inside the programme, not under the grid, so the sticky screen keeps its place longer at the end of the page */
.prog{grid-area:prog;min-width:0;padding-bottom:clamp(64px,6vw,170px)}

/* the screen */
.frame{position:relative;aspect-ratio:16/9;background:#000;border:1px solid rgba(179,146,88,.42);box-shadow:0 0 0 1px rgba(0,0,0,.7),0 48px 160px -70px rgba(255,220,171,.2)}
.frame .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(3,3,4,.42));transition:opacity .45s}
.frame iframe,.frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.frame.playing .poster,.frame.playing::after,.frame.playing .play{opacity:0;visibility:hidden;pointer-events:none}
.play{position:absolute;left:50%;top:50%;z-index:2;width:clamp(64px,5.4vw,138px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--gold);background:rgba(3,3,4,.6);color:var(--gold);display:grid;place-items:center;transition:background .3s,transform .4s}
.play:hover,.play:focus-visible{background:rgba(3,3,4,.84);transform:translate(-50%,-50%) scale(1.04)}
.play svg{width:30%;height:30%;fill:currentColor;margin-left:6%}

/* what is showing */
.cap{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);grid-template-areas:"main facts" "step facts";grid-template-rows:auto 1fr;column-gap:clamp(20px,2.4vw,64px);row-gap:clamp(12px,1vw,26px);padding-top:clamp(16px,1.5vw,38px)}
.cap-main{grid-area:main}.cap-facts{grid-area:facts}.step{grid-area:step;align-self:start}
.cap-main{display:grid;align-content:start;gap:clamp(8px,.6vw,16px)}
.cap-meta em{color:var(--gold);font-style:normal}
.cap-title{font-size:clamp(30px,2.6vw,68px);line-height:.94}
.cap-line{font-size:clamp(17px,1.08vw,28px);line-height:1.42;font-weight:300;color:var(--ink);max-width:34em}
.cap-facts{display:grid;align-content:start;gap:clamp(8px,.7vw,18px);margin:0}
.cap-facts div{border-top:1px solid var(--line);padding-top:clamp(6px,.45vw,12px);display:grid;gap:.2em}
.cap-facts dt{font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:var(--small);color:var(--gold)}
.cap-facts dd{margin:0;color:var(--soft);font-size:clamp(14px,.84vw,21px);line-height:1.4;font-variant-numeric:tabular-nums}
.step{display:flex;gap:clamp(8px,.7vw,18px)}
.step .go:disabled{opacity:.35;cursor:default;border-color:var(--line)}

/* the opening words */
.intro-kicker em{color:var(--gold);font-style:normal}
.intro .title{font-size:clamp(44px,4.7vw,120px);margin:clamp(10px,.7vw,18px) 0 clamp(14px,1vw,26px)}
.intro-lead{font-size:clamp(17px,1.12vw,29px);line-height:1.36;color:var(--soft);max-width:30em}

/* the programme */
.prog-head{display:flex;align-items:baseline;justify-content:space-between;gap:1em;padding-bottom:clamp(4px,.4vw,10px)}
.prog-head h2{font-weight:400}
.prog-head i{font-style:normal;color:var(--brass)}
.sort{border:0;background:none;padding:.4em 0;cursor:pointer;color:var(--soft);transition:color .3s}
.sort:hover,.sort:focus-visible{color:var(--ink)}
.sort::after{content:" ↓";color:var(--gold)}
.sort[aria-pressed="true"]::after{content:" ↑"}
.prog-list{list-style:none;padding:0;margin:0}
.yr{display:flex;align-items:baseline;gap:.9em;padding:clamp(26px,2.4vw,62px) 0 clamp(8px,.7vw,18px)}
.yr-no{font-size:clamp(42px,3.3vw,86px);font-weight:300;line-height:.9;margin:0}
.yr .eng{color:var(--dim)}
.film-link{display:grid;grid-template-columns:2.3em minmax(0,clamp(128px,9.2vw,236px)) minmax(0,1fr);column-gap:clamp(12px,1.05vw,28px);align-items:start;padding:clamp(12px,.95vw,24px) clamp(6px,.5vw,12px) clamp(12px,.95vw,24px) 0;border-top:1px solid var(--line);color:var(--soft);transition:background .35s}
.film-link:hover{background:rgba(241,239,233,.025)}
.no{padding-top:.25em;color:var(--dim);transition:color .3s}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--card)}
.thumb img{width:100%;height:100%;object-fit:cover;filter:brightness(.8) saturate(.88);transition:filter .5s,transform .9s cubic-bezier(.2,.7,.2,1)}
.film-link:hover .thumb img,.film.on .thumb img{filter:none}
.film-link:hover .thumb img{transform:scale(1.035)}
.dur{position:absolute;right:.45em;bottom:.4em;font-family:Sofia,sans-serif;font-weight:400;letter-spacing:.12em;font-size:var(--small);line-height:1.35;color:var(--ink);background:rgba(3,3,4,.74);padding:.05em .45em}
.txt{display:grid;gap:clamp(4px,.32vw,9px);min-width:0}
.t-title{font-family:Sofia,sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(22px,1.5vw,39px);line-height:.95;color:var(--ink);transition:color .3s}
.t-kind{color:var(--dim)}
.t-kind i{font-style:normal;color:var(--brass)}
.t-line{font-size:clamp(14px,.84vw,21.5px);line-height:1.45;color:var(--soft)}
.t-dates{display:flex;flex-wrap:wrap;gap:.25em 1.5em;font-size:clamp(13px,.8vw,20px);color:var(--ink);font-variant-numeric:tabular-nums}
.t-dates b{margin-right:.55em;font-weight:400;color:var(--gold)}
.film.on .no,.film.on .t-title{color:var(--gold)}
.film.on .film-link{background:linear-gradient(90deg,rgba(230,207,154,.07),rgba(230,207,154,0) 70%)}

/* the foot */
.foot{display:flex;align-items:center;justify-content:space-between;gap:2em;padding:3vw var(--pad) 3.4vw;border-top:1px solid var(--line)}
.foot a.eng{transition:color .3s}
.foot a.eng:hover{color:var(--ink)}

/* From 1100 to 1700 the screen is still held beside the programme while the top is the fixed bar: the
   screen sits just under the bar while the bar shows, and moves up when it slips away (14 Oct; to 1700 on 24 Oct) */
@media(min-width:1101px) and (max-width:1699px){
  .screen{top:calc(58px + var(--stick));transition:top .45s cubic-bezier(.2,.7,.2,1)}
  .top.away~main .screen{top:var(--stick)}
}

/* narrower screens: the screen above the programme, not held in place */
@media(max-width:1100px){
  .hall{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "screen" "prog"}
  .screen{position:static;margin-bottom:clamp(24px,4vw,48px)}
  .cap{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "facts" "step";grid-template-rows:auto;row-gap:18px}
  .intro .title{font-size:clamp(44px,8vw,96px)}
}
@media(max-width:800px){
  .film-link{grid-template-columns:minmax(0,40%) minmax(0,1fr);padding-right:0}
  .no{display:none}
  .t-line{font-size:14.5px}
  .yr{padding-top:30px}
  .foot{flex-direction:column;align-items:flex-start;gap:10px;padding:34px var(--pad) 40px}
  .step .go{flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.thumb img,.frame .poster{transition:none}.film-link:hover .thumb img{transform:none}}