* {
  box-sizing: border-box;
}

:root {
  --background: #ffffff;
  --text: #111111;
  --inactive: #a4a4a4;

  --film-width: min(80vw, 1200px);
}

html {
  min-height: 100%;
  background: var(--background);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;

  background: var(--background);
  color: var(--text);

  font-family:
    "Neue Haas Grotesk Text Pro",
    "Neue Haas Grotesk",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  font-weight: 300;
}


/* ------------------------------
   DESKTOP NAVIGATION
-------------------------------- */

.site-navigation {
  position: fixed;
  top: 23px;
  left: 27px;
  z-index: 30;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-name {
  margin-bottom: 16px;

  color: #666666;

  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.3;

  text-decoration: none;
}

.site-name:hover,
.site-name:focus-visible {
  color: #111111;
  outline: none;
}

.project-links {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.project-link {
  color: #777777;

  text-decoration: none;

  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.25;

  transition: color .18s ease;
}

.project-link:hover,
.project-link:focus-visible {
  color: #111111;
  outline: none;
}

.project-link.unavailable {
  color: #b8b8b8;

  pointer-events: none;
  cursor: default;
}


/* ------------------------------
   MOBILE MENU
-------------------------------- */

.mobile-site-navigation {
  display: none;
}


/* ------------------------------
   SCREENING ROOM
-------------------------------- */

.screening-room {

  min-height: 100vh;

  display: flex;
  flex-direction: column;

  padding:

    clamp(80px,10vh,120px)

    24px

    26px;
}

.film-stage {

  flex: 1;

  display: flex;

  align-items: center;
  justify-content: center;
}

.film-frame {

  position: relative;

  width: var(--film-width);

  aspect-ratio: 16 / 9;

  background: #fff;

  overflow: hidden;
}

.film-frame iframe {

  position: absolute;

  top: -2px;
  left: -2px;

  width: calc(100% + 4px);
  height: calc(100% + 4px);

  border: none;
}


/* ------------------------------
   CONTACT
-------------------------------- */

.project-signature {

  margin:

    clamp(70px,12vh,150px)

    auto

    0;

  text-align: center;
}

.project-contact-label {

  margin-bottom: 4px;

  color: #999999;

  font-size: 12px;

  letter-spacing: .12em;
}

.project-contact {

  color: #9a9a9a;

  text-decoration: none;

  font-size: 12px;

  letter-spacing: .04em;
}

.project-contact:hover {

  color: #111111;
}


/* ------------------------------
   MEDIUM SCREENS
-------------------------------- */

@media (max-width:1180px){

:root{

--film-width:min(90vw,1060px);

}

.screening-room{

padding-top:94px;

}

}


@media (max-height:760px) and (min-width:701px){

:root{

--film-width:min(68vw,960px);

}

.screening-room{

padding-top:72px;

}

.project-signature{

margin-top:54px;

}

}


/* ------------------------------
   MOBILE
-------------------------------- */

@media (max-width:700px){

:root{

--film-width:calc(100vw - 20px);

}

.site-navigation{

display:none;

}

.mobile-site-navigation{

position:absolute;

top:12px;
left:14px;

z-index:30;

display:flex;

flex-direction:column;

align-items:flex-start;

}

.mobile-project-menu-toggle{

appearance:none;

display:flex;

align-items:center;

gap:8px;

padding:0;

border:0;

background:none;

color:#666666;

font-family:inherit;

font-size:11px;

font-weight:300;

letter-spacing:.10em;

cursor:pointer;

}

.mobile-project-menu-arrow{

transition:.18s;

}

.mobile-site-navigation.open
.mobile-project-menu-arrow{

transform:rotate(180deg);

}

.mobile-project-links{

display:none;

flex-direction:column;

gap:8px;

margin-top:5px;

}

.mobile-site-navigation.open
.mobile-project-links{

display:flex;

}

.mobile-project-link{

text-decoration:none;

color:#777777;

font-size:11px;

letter-spacing:.10em;

}

.mobile-project-link.unavailable{

color:#b8b8b8;

pointer-events:none;

}

.screening-room{

padding:

76px

10px

24px;

}

.film-stage{

min-height:

calc(100svh - 180px);

}

.project-contact-label{

font-size:11px;

}

.project-contact{

font-size:11px;

}

}