@import url("swiper-bundle.min.css");

*,*::before,*::after {  box-sizing: border-box;}
html {  -moz-text-size-adjust: none;  -webkit-text-size-adjust: none;  text-size-adjust: none;}
body, h1, h2, h3, h4, p,figure, blockquote, dl, dd {  margin-block-end: 0;}
ul[role='list'],ol[role='list'] {  list-style: none;}
body {  min-height: 100vh;  line-height: 1.5;}
button, input, label { line-height: 1.1; }
h1, h2, h3, h4 {  text-wrap: balance;}
a:not([class]) {  text-decoration-skip-ink: auto; }
img,picture {  max-width: 100%;  display: block;}
input, button,textarea, select {  font: inherit;}
textarea:not([rows]) {  min-height: 10em;}
:target {  scroll-margin-block: 5ex;}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { column-span: all; }
input:-internal-autofill-selected {appearance: menulist-button;background-image: none !important;background-color: none !important;color: fieldtext !important;}
figure { margin: 0; padding: 0; }

:root {
  /* font-size 640 - 1280 */
  /* @link https://utopia.fyi/clamp/calculator?a=640,1920,36—48|21—28|18—24|16—18 */

  --fluid-36-48: clamp(2.25rem, 1.875rem + 0.9375vw, 3rem);
  --fluid-21-28: clamp(1.3125rem, 1.0938rem + 0.5469vw, 1.75rem);
  --fluid-18-24: clamp(1.125rem, 0.9375rem + 0.4688vw, 1.5rem);
  --fluid-16-18: clamp(1rem, 0.9375rem + 0.1563vw, 1.125rem);

  /* padding, margin, gap 640 - 1280 */
  /* @link https://utopia.fyi/clamp/calculator?a=640,1920,40—80|20—40|10—20|40—95|80—160 */

  --fluid-40-80: clamp(2.5rem, 1.25rem + 3.125vw, 5rem);
  --fluid-20-40: clamp(1.25rem, 0.625rem + 1.5625vw, 2.5rem);
  --fluid-10-20: clamp(0.625rem, 0.3125rem + 0.7813vw, 1.25rem);
  --fluid-40-95: clamp(2.5rem, 0.7813rem + 4.2969vw, 5.9375rem);
  --fluid-80-160: clamp(5rem, 2.5rem + 6.25vw, 10rem);


  /* colors */
  --white: #FFFFFF;
  --black: #000000;
  --blue:	 #1471B9;
  --light-blue:  #54A1F9;

  /* font */
  --sans: "Rubik", sans-serif;

}

html.lenis,html.lenis body { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto!important }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain }
.lenis.lenis-stopped { overflow: hidden }
.lenis.lenis-smooth iframe { pointer-events: none }

html { overflow-x: clip; scrollbar-color: #333 #000; scrollbar-width: thin; scrollbar-gutter: stable; }
html, body { min-height: 100vh; }
body { 
  position: relative; margin: 0; padding: 0; width: 86%; max-width: 120rem; margin-inline: auto; 
  background-color: var(--black); background-image: url(../img/bg.png); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed;
  font-family: var(--sans); font-style: normal; font-weight: 300; font-size: var(--fluid-18-24); line-height: 1.5; font-optical-sizing: auto; color: var(--white); 
}
h1, .h1 { font-size: var(--fluid-36-48); font-weight: 500; line-height: 1.2; }
h2, .h2 { font-size: var(--fluid-21-28); font-weight: 400; line-height: 1.333; }
.small { font-size: var(--fluid-16-18); font-weight: 300; }
.more { 
  display: block; margin-inline: auto; width: max-content; color: var(--blue); 
  text-underline-offset: 0.625rem; transition: all 0.25s ease-in-out;
  &:hover { text-underline-offset: 0.313rem; transition: all 0.25s ease-in-out; }
}
strong { font-weight: 500; }
a.active { text-decoration: underline !important; text-underline-offset: 0.4rem; }

header { 
  position: fixed; left: 0; top: 0; z-index: 999; width: 100%; display: flex; justify-content: center; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); 
}
header .wrapper { width: 90%; max-width: 120rem; padding-block: var(--fluid-40-80); margin-inline: auto; display: flex; justify-content: space-between; }
header .wrapper div { width: 12.5%; display: flex; }
.menu { justify-content: flex-end; align-items: flex-end; }
.menu-open { 
  display: block; cursor: pointer; width: 3.75rem; user-select: none;
  font-size: 2rem; line-height: 0.8; font-weight: 500; color: var(--white); text-decoration: none; word-break: break-all; 
}

@media (max-width: 94rem) {

  header { position: sticky; }
  header .wrapper { width: 100%; }
  header .wrapper div { width: auto; }

}
@media (max-width: 30rem) {

  header .logo img { max-width: 120px; }
  .menu-open { width: 2.4rem; font-size: 1.5rem; }

}

nav { 
  position: fixed; z-index: 9999; top: 0; right: 0; width: 100%; height: 100vh;
  display: flex; justify-content: flex-end; align-items: flex-start;
  background-color: rgba(0,0,0,0.5); backdrop-filter: blur(0.25rem); overflow: clip;
  opacity: 0; pointer-events: none; transition: all 0.3s ease-in-out;
}
.nav-menu { 
  min-width: 30rem; height: 100vh;padding: var(--fluid-40-80); overflow-y: auto;
  background-color: var(--black); transform: translateX(100%); transition: all 0.3s ease-in-out; 
}
.nav-menu > * + * { margin-top: var(--fluid-20-40); }
.nav-menu a { text-decoration: none; }
.nav-menu div a { display: block; width: fit-content; color: var(--white); }
.menu-close { 
  display: block; cursor: pointer; width: 3.75rem; user-select: none;
  font-size: 2rem; line-height: 0.8; font-weight: 500; color: var(--white); word-break: break-all; 
}
.main-nav { font-size: var(--fluid-36-48); font-weight: 500; }
.main-nav div a + a { font-size: var(--fluid-21-28); font-weight: 400; }
.menu-contact a { font-size: var(--fluid-18-24); }
.menu-social a { font-size: var(--fluid-18-24); }

nav.is-open { opacity: 1; pointer-events: all; transition: all 0.3s ease-in-out; }
nav.is-open .nav-menu { transform: translateX(0); transition: all 0.3s ease-in-out; }

@media (max-width: 30rem) {

  .nav-menu { width: 100%; min-width:auto; padding-block: var(--fluid-40-80); padding-inline: 7%; }
  .menu-close { width: 2.4rem; font-size: 1.5rem; }

}


main { padding-top: var(--fluid-40-95); margin-inline: auto; }
main > * + * { margin-top: var(--fluid-40-80); }

.home { width: 75%; }
.home h2 { font-size: var(--fluid-36-48); padding-inline: var(--fluid-40-80); font-weight: 500; }
.home .grid { margin-top: 0; }

.films, .film, .news, .news-item, .about { width: calc(1280/1920 * 100%); }

.film-text, .news-text { max-width: 62.5%; margin-inline: auto; }
.film-nav { display: flex; gap: var(--fluid-20-40); }
.film-text a { color: var(--light-blue); text-decoration: none; }
.film-nav a { color: var(--blue); text-decoration: none; }

blockquote { font-style: italic; position: relative; margin:40px; opacity:.50 }
blockquote::before { content: "ˮ"; font-size:4em; position: absolute; top: -90px; left: -30px; rotate:180deg; }
blockquote::after { content: "ˮ"; font-size:4em; position: absolute; bottom: -90px; right: -50px; }

.swiper-hero { position: relative; }
.swiper-gallery { width: 100%; }
.swiper-slide { aspect-ratio: 2 / 1; }
.swiper-slide iframe, .swiper-slide img { object-fit: cover; width: 100%; height: 100%; }
.swiper-nav { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.swiper-button-next, .swiper-button-prev { color: var(--white); } 
.swiper-button-prev { left: calc(-1 * var(--fluid-40-80)); }
.swiper-button-next { right: calc(-1 * var(--fluid-40-80)); }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-item { display: grid; aspect-ratio: 11/16; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); }
.grid-item-1 > * { grid-area: 2 / 2 / 7 / 9; }
.grid-item-2 > * { grid-area: 4 / 2 / 10 / 8; }
.grid-item-3 > * { grid-area: 2 / 1 / 9 / 9; }
.grid-item-4 > * { grid-area: 5 / 2 / 10 / 10; }
.grid-item-5 > * { grid-area: 2 / 3 / 10 / 8; }
.grid-item-6 > * { grid-area: 3 / 3 / 9 / 9; }
.grid-item > * { display: grid; text-decoration: none; }
.grid-item a > * { grid-row: 1; grid-column: 1; }
.grid-item a img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 11 / 16; }
.grid-item a figcaption { 
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--fluid-10-20); padding: var(--fluid-20-40); 
  color: var(--white); text-align: center; background-color: rgba(0,0,0,0.6); opacity: 0; transition: all 0.5s ease;
  & p { font-size: var(--fluid-21-28); font-weight: 400; text-wrap: balance; }
  & span { font-size: var(--fluid-16-18); font-weight: 300; color: rgba(255,255,255,0.5); }
}
.grid-item a:hover figcaption { opacity: 1; transition: all 0.5s ease; }

.films .grid, .news .grid { gap: var(--fluid-80-160); }
.films .grid-item { display: flex; aspect-ratio: 11/16; }

.news .grid-item { aspect-ratio: auto; display: block; }
.news .grid-item > * { display: flex; flex-direction: column; }
.news .grid-item a figure { aspect-ratio: 4 / 3; }
.news .grid-item a figcaption { opacity: 1; transition: none; justify-content: flex-start; align-items: flex-start; text-align: left; padding: 0; padding-top: var(--fluid-20-40); }

.news-item figure { display: block; aspect-ratio: 2 / 1; }
.news-item .date { font-size: var(--fluid-16-18); font-weight: 300; color: rgba(255,255,255,0.5); }
.news-item figure img { object-fit: cover; width: 100%; height: 100%; }

.tags a { font-size: var(--fluid-18-24); font-weight: 500; color: var(--white); text-decoration: none; margin-right: var(--fluid-10-20); }

.about p { columns: 2; column-gap: var(--fluid-80-160); }

.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fluid-80-160); }
.member figure { display: block; aspect-ratio: 4 / 3; margin-bottom: var(--fluid-20-40); }
.member figure img { width: 100%; height: 100%; object-fit: cover; }
.member p { columns: 1; }
.member a { color: var(--blue); }

.content { max-width: 800px; margin-inline: auto; }

@media (max-width: 94rem) {

  main { padding-top: 0; }
  .home, .films, .film, .news, .news-item, .about { width: 100%; }
  .content { max-width: none; }
  .home h2 { padding-inline: 0; }

}

@media (max-width: 50rem) {

  .grid { display: flex; flex-direction: column; gap: var(--fluid-40-80); margin-top: var(--fluid-40-80); }
  .grid-item { display: flex; flex-direction: column; aspect-ratio: auto; }
  .grid-item > * { display: flex; flex-direction: column; gap: var(--fluid-20-40); }
  .grid-item a figure { aspect-ratio: 4 / 3; }
  .grid-item a figcaption { opacity: 1; transition: none; padding: 0; align-items: flex-start; text-align: left; }

  .films .grid, .news .grid { display: flex; flex-direction: column; gap: var(--fluid-40-80); }
  .film-text, .news-text { max-width: none; }
  .swiper-slide { aspect-ratio: 4 / 3; }
  .swiper-button-prev { left: 0; }
  .swiper-button-next { right: 0; }

  .about p { columns: 1; }

  .team { display: flex; flex-direction: column; gap: var(--fluid-40-80); }

}


.splitscreen { display: flex; gap: var(--fluid-80-160); padding-inline: var(--fluid-40-80); }
.splitscreen > * { 
  flex-grow: 1; flex-basis: 0; min-width: 0; background-color: var(--black); 
  border: 1px solid var(--white); padding: var(--fluid-40-80);
}

@media (max-width: 94rem) {

  .splitscreen { padding-inline: 0; }

}

@media (max-width: 50rem) {

  .splitscreen { flex-direction: column; gap: var(--fluid-40-80); }

}

footer { 
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); transform: translateX(calc(50vw - 50%));
  margin-top: var(--fluid-40-80); padding-block: var(--fluid-40-80); border-top: 1px solid rgba(255,255,255,0.5); 
}
footer .wrapper { width: 86%; max-width: 120rem; margin-inline: auto; }
footer .inner { margin-inline: auto; display: flex; justify-content: space-between; }
footer * { text-decoration: none; color: var(--white); }
footer p { text-wrap: balance; width: max-content; }
footer a, footer .logo p { width: max-content; }
footer .inner div { display: flex; flex-direction: column; }

@media (max-width: 64rem) {

  footer .inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fluid-40-80); }
  .copyright { grid-column: span 2; order: 1; }

}

.cookie { 
  position: fixed; left: 0; bottom: 0; width: 100%; z-index: 999999; background-color: var(--black); padding-block: var(--fluid-40-80); border-top: 1px solid var(--white); 
}
.cookie .wrapper { width: 86%; max-width: 120rem; margin-inline: auto; display: flex; justify-content: center; align-items: center; gap: var(--fluid-40-80); }
.cookie .close-notice {   
  display: block; cursor: pointer; width: 3.75rem; user-select: none; font-size: 2rem; line-height: 0.8; font-weight: 500; color: var(--white); word-break: break-all; flex-shrink: 0;
}

@media (max-width: 30rem) {

  .cookie .close-notice { width: 2.4rem; font-size: 1.5rem; }

}

.animate-vertical { transform: translateY(3rem); opacity: 0; transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.animate-vertical.is-inview { transform: translateY(0); opacity: 1; }

.hidden,[hidden] { display: none !important;}
.visually-hidden { border: 0;  clip: rect(0, 0, 0, 0);  height: 1px;  margin: -1px;  overflow: hidden;  padding: 0;  position: absolute;  white-space: nowrap;  width: 1px;}
.visually-hidden.focusable:active,.visually-hidden.focusable:focus {  clip: auto;  height: auto;  margin: 0;  overflow: visible;  position: static;  white-space: inherit;  width: auto;}
.invisible { visibility: hidden;}
.clearfix::before,.clearfix::after { content: "";  display: table;}
.clearfix::after { clear: both;}

@media print {
  *,  *::before,  *::after { background: #fff !important;color: #000 !important;box-shadow: none !important;text-shadow: none !important;}
  a,a:visited {text-decoration: underline;}
  a[href]::after {content: " (" attr(href) ")";}
  abbr[title]::after {content: " (" attr(title) ")"; }
  a[href^="#"]::after,a[href^="javascript:"]::after {content: "";}
  pre {white-space: pre-wrap !important;}
  pre,blockquote {border: 1px solid #999;page-break-inside: avoid;}
  tr,img {page-break-inside: avoid;}
  p,h2,h3 {orphans: 3;widows: 3;}
  h2,h3 {page-break-after: avoid;}
}