/* still productions — the director's site.
   Black, Still Grotesk set small, a lot of dark, and the films as frames in it. */


html { background: #000; }
/* everything lowercase, except on about and studio, as on the sound side */
h1, h2, h3, h4, h5, h6, p, span, a, li, div, dt, dd, button, label { text-transform: lowercase !important; }
body.page-about h1, body.page-about h2, body.page-about h3, body.page-about h4, body.page-about h5, body.page-about h6,
body.page-about p, body.page-about span, body.page-about a, body.page-about li, body.page-about div,
body.page-studio h1, body.page-studio h2, body.page-studio h3, body.page-studio h4, body.page-studio h5, body.page-studio h6,
body.page-studio p, body.page-studio span, body.page-studio a, body.page-studio li, body.page-studio div, body.page-studio button { text-transform: none !important; }
body.theme-dark {
  --bg: #000;
  --ink: #ecebe6;
  --ink-2: rgba(236,235,230,.58);
  --ink-3: rgba(236,235,230,.32);
  --line: rgba(236,235,230,.16);
  background: transparent;
  font-family: var(--font);
  font-weight: 450;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .012em;      /* a display face set small wants a little air */
  word-spacing: .06em;
}
.paren { white-space: nowrap; }
h1, h2, h3 { font-weight: 400; font-size: inherit; margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button { transition: color .25s ease, opacity .25s ease; }

/* the text and the pictures start under "still"; only the endless home page keeps the whole width */
.page { padding: 0 max(75px, calc(50% - 600px)); }
.page:has(.frames[data-loop]) { padding: 0 clamp(16px, 2.2vw, 32px); }
@media (max-width: 750px) { .page, .page:has(.frames[data-loop]) { padding: 0 20px; } }
/* every page starts where it does on the sound site: the title, 40 and 50 below it */
main { padding: 225.41px 0 clamp(100px, 18vh, 200px); }
@media (max-width: 750px) { main { padding-top: calc(20px + 36px + 80px); } }

/* ===== header: the logo left, the menu right (set like the sound site's menu).
   Exactly where the sound site has them: its page is 1200 wide in the middle
   of the screen, with 75 around it and 10 above that, so "still" stands on the
   same spot on every page of both sites. ===== */
.site-header {
  position: fixed;
  top: 85px; left: max(75px, calc(50% - 600px)); right: max(75px, calc(50% - 600px));
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
.site-header { transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
.site-header.is-tucked { transform: translateY(calc(-100% - 90px)); opacity: 0; }
.site-header.is-tucked:focus-within { transform: none; opacity: 1; }
/* the logo, set like "still sound design" on the sound site */
.brand {
  display: block;
  position: relative;
  font-weight: 900;
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: 1px;
  word-spacing: 0;
  white-space: nowrap;
}
.brand em { font-style: italic; }
.brand:hover { color: var(--ink-2); }
.hdr-nav { display: flex; gap: 30px; align-items: center; }
.hdr-nav a { font-weight: 700; font-size: 13px; letter-spacing: 1.25px; line-height: 26px; color: var(--ink-2); }
.hdr-nav a:hover, .hdr-nav [aria-current="page"] { color: var(--ink); }
.hdr-menu-link { display: none; font-weight: 700; font-size: 16px; letter-spacing: 1.25px; line-height: 50.4px; color: var(--ink-2); }
/* from 900 down the menu lies behind one word, as on the sound side */
@media (max-width: 900px) {
  .hdr-menu-link { display: block; }
  .hdr-nav { display: none; position: absolute; top: 100%; right: 0; flex-direction: column; align-items: flex-end; gap: 0; padding: 4px 0 8px; }
  .site-header.is-menu .hdr-nav { display: flex; }
  .hdr-nav a { font-size: 22px; line-height: 2; animation: still-menu-in .35s ease both; }
  .hdr-nav a:nth-child(2) { animation-delay: .04s; }
  .hdr-nav a:nth-child(3) { animation-delay: .08s; }
  .hdr-nav a:nth-child(4) { animation-delay: .12s; }
}
@media (max-width: 750px) {
  .site-header { top: 20px; left: 20px; right: 20px; flex-direction: row; gap: 12px; }
  .site-header.is-tucked { transform: translateY(calc(-100% - 25px)); }
  .brand { font-size: 30px; }
  .hdr-menu-link { line-height: 36px; }
}

/* ===== filmography: the films in the big type, on the clouds ===== */
.film-list { list-style: none; margin: 0; padding: 0; }
.film-list a { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45em; padding-bottom: .12em; font-size: clamp(38px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; }
.film-list__meta { font-size: 14px; letter-spacing: .012em; font-weight: 450; color: var(--ink-2); }
.film-list a { transition: opacity .35s ease; }
@media (hover: hover) { .film-list:hover a:not(:hover) { opacity: .3; } }

/* ===== a film ===== */
.film__head h1 {
  font-size: clamp(36px, 6.4vw, 104px);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 500;
}
.film__head .alt-title { color: var(--ink-3); }
.film__kind, .film__status { margin: 1em 0 0; color: var(--ink-2); }
.film__status { margin-top: .1em; color: var(--ink); }
.frames--hero { margin: clamp(60px, 12vh, 140px) 0; }
.frames--hero .frame { grid-column: 1 / -1; }
.frames--hero .frame__media { aspect-ratio: 21/9; }

.film__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.6vw, 24px);
  margin-bottom: clamp(100px, 20vh, 220px);
}
.film__text { grid-column: 7 / span 5; }
.film__text p { margin: 0 0 1em; }
.film__text .logline { font-size: clamp(19px, 1.7vw, 26px); line-height: 1.25; letter-spacing: -.015em; margin-bottom: 1.2em; }
.film__text .press { color: var(--ink-2); margin-top: 2.4em; }
.film__text .press .paren { color: var(--ink); }
.film__facts { grid-column: 1 / span 4; grid-row: 1; font-size: 13px; }
.film__facts h2 { margin: 0 0 .7em; color: var(--ink-2); }
.film__facts h2 + * + h2 { margin-top: 2em; }
.credits { display: grid; grid-template-columns: auto 1fr; gap: .25em 1.2em; margin: 0; }
.credits dt { color: var(--ink-2); }
.credits dd { margin: 0; }
.festivals { list-style: none; margin: 0; padding: 0; }
.festivals li { margin-bottom: .3em; }
.festivals .where { color: var(--ink-2); margin-left: .5em; }
@media (max-width: 800px) {
  .film__text, .film__facts { grid-column: 1 / -1; grid-row: auto; }
  .film__facts { margin-top: 3em; }
}

.film__trailer { margin: 0 0 clamp(100px, 20vh, 220px); }
.player { position: relative; aspect-ratio: 16/9; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* a screener: the right word opens its player, where a trailer would be (MODULES['screener'] in site.js) */
.film__screener { margin: 0 0 clamp(100px, 20vh, 220px); }
.screener { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7em 1.4em; }
.screener label { flex-basis: 100%; font-size: 13px; color: var(--ink-2); }
.screener__word {
  -webkit-appearance: none; appearance: none;
  width: min(11em, 100%); margin: 0; padding: .1em 0;
  border: 0; border-bottom: 1px solid var(--ink-3); border-radius: 0; outline: none;    /* as under a link: --line is the choice's line */
  background: transparent; color: var(--ink); caret-color: var(--ink);
  font: inherit; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.25; letter-spacing: -.015em;
  transition: border-color .3s ease;
}
.screener__word::placeholder { color: var(--ink-3); opacity: 1; }
.screener__word:focus { border-bottom-color: var(--ink-2); }
.screener button { font-weight: 700; font-size: 13px; letter-spacing: 1.25px; color: var(--ink-2); }
.screener button:hover, .screener button:focus-visible { color: var(--ink); }
/* not this word: the field shakes its head, or with Reduce Motion only dims */
.screener.is-wrong .screener__word { animation: still-not-it .45s ease; }
@keyframes still-not-it { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-2px); } }
@keyframes still-not-it-still { 35% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .screener.is-wrong .screener__word { animation-name: still-not-it-still; } }
.film__screener.is-open .screener { display: none; }
.film__screener .player { opacity: 0; transition: opacity .8s ease; }
.film__screener .player.is-in { opacity: 1; }

.next-film {
  display: block;
  margin-top: clamp(140px, 26vh, 300px);
  font-size: clamp(36px, 6.4vw, 104px);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 500;
}
.next-film .paren { font-size: 14px; font-weight: 450; letter-spacing: 0; color: var(--ink-2); vertical-align: middle; margin-right: .6em; }
@media (hover: hover) { .next-film:hover .next-film__title { opacity: .55; } }

/* the logline in parts, as lines of verse among the stills */
.verse {
  grid-column: var(--col) / span var(--span);
  margin: 0; align-self: center;
  font-size: clamp(20px, 2.2vw, 34px); font-weight: 500; line-height: 1.2; letter-spacing: -.015em;
}
@media (max-width: 640px) { .verse { grid-column: 1 / -1; } }
.verse__from { display: block; margin-top: .9em; font-size: 13px; font-weight: 450; line-height: 1.4; letter-spacing: .012em; color: var(--ink-2); }

/* ===== contact ===== */
.contact { min-height: 50vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.contact > .paren { color: var(--ink-2); margin-bottom: 1.6em; }
.contact .lines { color: var(--ink-2); margin: 0; }
.contact .big {
  display: inline-block;
  margin: .3em 0;
  font-size: clamp(30px, 5.4vw, 86px);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 500;
  border: 0;
}
.contact .big:hover { opacity: .55; }
.contact .page-title { font-size: clamp(36px, 6.4vw, 104px); font-weight: 400; }

/* ===== page change: the content and the stills go softly; within the site the
   title and the menu stay. Between the sites and the choice those go and come
   too, the title first; with the title handed over from the other site it is
   simply there. ===== */
main { transition: opacity .42s ease; }
.hdr-nav, .brand-wrap { transition: opacity .42s ease; }
html.is-leaving:not(.is-mirroring) main { opacity: 0; }
html.is-crossing.is-leaving .hdr-nav, html.is-crossing.is-leaving .hdr-menu-link, html.is-crossing.is-leaving .brand-wrap { opacity: 0; }
html.is-entering:not(.is-mirroring) main { opacity: 0; transition: none; }
html.is-crossing.is-entering:not(.keep-title) .hdr-nav, html.is-crossing.is-entering:not(.keep-title) .hdr-menu-link, html.is-crossing.is-entering:not(.keep-title) .brand-wrap { opacity: 0; transition: none; }
html.is-crossing:not(.is-leaving) .brand-wrap { transition-duration: .9s; }
html.is-crossing:not(.is-leaving) .hdr-nav { transition-duration: 1s; transition-delay: .12s; }
html.is-crossing:not(.is-leaving) main { transition-duration: 1.1s; transition-delay: .25s; }
html.title-lifted .brand-wrap, html.title-lifted .still-menu { visibility: hidden; }

/* ===== the choice (/): still, film on the black, sound on the light.
   The line and the ground are in still-ground.css ===== */
html:has(.entrance) .site-header { display: none; }
html:has(.entrance) main { padding: 0; }
.entrance {
  position: fixed; inset: 0; z-index: 3;
  font-family: var(--font);
  touch-action: pinch-zoom;      /* a finger takes hold of the line */
}
.entrance__word {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  font-weight: 900;
  font-size: clamp(40px, 6.5vw, 116px);
  letter-spacing: .01em;
  line-height: 1;
  padding-bottom: .55em;
  transition: opacity .6s ease, transform .95s cubic-bezier(.65, 0, .25, 1);
}
.entrance__word--film { color: #ecebe6; clip-path: inset(0 calc(100% - var(--line)) 0 0); }
.entrance__word--sound { color: #151515; clip-path: inset(0 0 0 var(--line)); }
.entrance__half {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding-top: 1.5em;
  font-size: clamp(26px, 3.6vw, 56px);
  font-weight: 900;                  /* the weight of the logo, as "still" above */
  letter-spacing: .01em;
  transition: opacity .5s ease;
}
.entrance__half--film { left: 0; right: calc(100% - var(--line)); justify-content: flex-end; padding-right: 13vw; color: #ecebe6; }
.entrance__half--sound { left: var(--line); right: 0; justify-content: flex-start; padding-left: 13vw; color: #151515; }
.entrance__half em { font-style: italic; }
/* a few words about each side, when you point at it */
.entrance__label { position: relative; }
.entrance__about {
  position: absolute; top: 100%; width: min(30vw, 340px); margin-top: 1.1em;
  font-size: 14px; font-weight: 450; line-height: 1.45; letter-spacing: .01em; font-style: normal;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.entrance__half--film .entrance__about { right: 0; text-align: right; color: var(--ink-2); }
.entrance__half--sound .entrance__about { left: 0; color: #555; }
@media (hover: none) { .entrance__about { opacity: .8; transform: none; width: 38vw; font-size: 12px; } }
.entrance__label { display: inline-block; padding: .2em .1em; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
/* the side pointed at rises a little. A phone keeps :hover on whatever was touched last, so there
   it is only while a finger is on it (is-held, site.js), and it slides back when the finger goes */
@media (hover: hover) {
  .entrance__half:hover .entrance__about { opacity: 1; transform: none; }
  .entrance__half:hover .entrance__label { transform: translateY(-.08em); }
}
.entrance__half:focus-visible .entrance__about, .entrance__half.is-held .entrance__about { opacity: 1; transform: none; }
.entrance__half:focus-visible .entrance__label, .entrance__half.is-held .entrance__label { transform: translateY(-.08em); }
/* over each half its words, above where the names and the few words about each side stand */
.word-cloud { position: absolute; top: 9vh; height: 40vh; width: 36vw; pointer-events: none; transition: opacity .6s ease; }
.word-cloud--film { left: 4vw; color: #ecebe6; }
.word-cloud--sound { right: 4vw; color: #151515; }
.word-cloud .sound-word { font-size: clamp(14px, 1.6vw, 22px); font-weight: 600; opacity: 0; animation: none; transition: none; }   /* how they move: home-cloud in site.js */
.entrance[data-go] .word-cloud { opacity: 0; }
html.is-entering .word-cloud { opacity: 0; transition: none; }
html.is-crossing:not(.is-entering) .word-cloud { transition: opacity 1s ease .25s; }
@media (max-width: 640px) { .word-cloud { width: 44vw; height: 34vh; } .word-cloud--film { left: 3vw; } .word-cloud--sound { right: 3vw; } }
/* coming back to the choice the words appear as the line returns */
html.is-entering .entrance__half { opacity: 0; transition: none; }
html.is-crossing:not(.is-entering) .entrance__half { transition: opacity 1s ease .25s; }
.entrance[data-go] .entrance__half { opacity: 0; }
.entrance[data-go] .entrance__word { opacity: 0; transform: scale(.96); }
@media (max-width: 640px) {
  .entrance__half--film { padding-right: 6vw; }
  .entrance__half--sound { padding-left: 6vw; }
}

/* the home page never ends, so it has no footer to reach */
html.is-looping main { padding-bottom: 0; }

/* the halo on the titles is drawn by still-lines.js, as text-shadow */



/* near the logo the other side of still appears under it */
.brand-wrap { position: relative; }
.brand-wrap::before { content: ""; position: absolute; inset: -16px -40px -56px -40px; }
.still-switch { color: var(--ink-2); }
.brand-wrap:hover .still-switch, .still-switch:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.still-switch:hover { color: var(--ink); }