@font-face {
  font-family: "Armand";
  src: url("/assets/fonts/ArmandGrotesk-Regular.woff") format("woff"); }

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  scroll-behavior: smooth; }

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  margin: 0;
  padding: 0; }

body {
  font-family: "Armand", sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: black; }

h1,
h2,
h3,
h4,
h5,
h6,
p,
button {
  font-family: "Armand", sans-serif;
  font-size: 12px;
  line-height: 1.35;
  margin: 0; }

a {
  color: black;
  text-decoration: none; }

img {
  width: 100%;
  margin: 0 auto;
  display: block; }

figure {
  margin: 0;
  padding: 0; }

ul,
ol {
  list-style-type: none; }

button {
  background-color: rgba(255, 255, 255, 0);
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0; }
  button:hover {
    cursor: pointer; }
  button:focus {
    outline: none; }

.menu {
  font-family: "Armand", sans-serif;
  font-size: 12px;
  line-height: 1.35;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 18px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px); }
  .menu h1:hover {
    cursor: pointer; }
  .menu__button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .menu__button .button {
      margin-top: 2px; }
  .menu__1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    .menu__1 button {
      opacity: 1;
      visibility: visible;
      -webkit-transition: all 300ms ease, visibility 300ms ease 0ms;
      -o-transition: all 300ms ease, visibility 300ms ease 0ms;
      transition: all 300ms ease, visibility 300ms ease 0ms; }
      .menu__1 button.--hidden {
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 300ms ease, visibility 300ms ease 300ms;
        -o-transition: all 300ms ease, visibility 300ms ease 300ms;
        transition: all 300ms ease, visibility 300ms ease 300ms; }
    .menu__1 li {
      position: relative; }
      .menu__1 li:nth-last-child(1) .menu__2, .menu__1 li:nth-last-child(2) .menu__2, .menu__1 li:nth-last-child(3) .menu__2, .menu__1 li:nth-last-child(4) .menu__2 {
        right: 0;
        text-align: right; }
  .menu__2, .menu__3 {
    position: absolute;
    top: 12px;
    z-index: 10;
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 300ms ease, visibility 300ms ease 300ms;
    -o-transition: all 300ms ease, visibility 300ms ease 300ms;
    transition: all 300ms ease, visibility 300ms ease 300ms;
    pointer-events: none; }
    .menu__2.--visible, .menu__3.--visible {
      -webkit-transition: all 300ms ease, visibility 300ms ease 0ms;
      -o-transition: all 300ms ease, visibility 300ms ease 0ms;
      transition: all 300ms ease, visibility 300ms ease 0ms;
      opacity: 1;
      visibility: visible;
      pointer-events: all; }
    .menu__2 li button, .menu__3 li button {
      white-space: nowrap;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 0;
      border-radius: 3px;
      margin: 1px 0;
      -webkit-backdrop-filter: blur(5px);
              backdrop-filter: blur(5px);
      text-align: inherit; }
      .menu__2 li button:hover, .menu__3 li button:hover {
        -webkit-box-shadow: 0px 5px 20px rgba(var(--r), var(--g), var(--b), 0.2);
                box-shadow: 0px 5px 20px rgba(var(--r), var(--g), var(--b), 0.2); }
  .menu__4 {
    top: 0;
    position: absolute;
    padding: 0 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 300ms ease, visibility 300ms ease 300ms;
    -o-transition: all 300ms ease, visibility 300ms ease 300ms;
    transition: all 300ms ease, visibility 300ms ease 300ms;
    pointer-events: none; }
    .menu__4.--visible {
      -webkit-transition: all 300ms ease, visibility 300ms ease 0ms;
      -o-transition: all 300ms ease, visibility 300ms ease 0ms;
      transition: all 300ms ease, visibility 300ms ease 0ms;
      opacity: 1;
      visibility: visible;
      pointer-events: all; }
  .menu [data-menu-more="medium"] .menu__4 {
    left: 120px; }
  .menu [data-menu-more="author"] .menu__4 {
    left: 300px; }
  .menu [data-menu-more="publication_year"] .menu__4 {
    left: 60px; }
  .menu__background {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 300ms ease, visibility 300ms ease 300ms;
    -o-transition: all 300ms ease, visibility 300ms ease 300ms;
    transition: all 300ms ease, visibility 300ms ease 300ms;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 95;
    background-color: transparent; }
    .menu__background.--visible {
      -webkit-transition: all 300ms ease, visibility 300ms ease 0ms;
      -o-transition: all 300ms ease, visibility 300ms ease 0ms;
      transition: all 300ms ease, visibility 300ms ease 0ms;
      opacity: 1;
      visibility: visible;
      pointer-events: all; }

.overlay {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 300ms ease, visibility 300ms ease 300ms;
  -o-transition: all 300ms ease, visibility 300ms ease 300ms;
  transition: all 300ms ease, visibility 300ms ease 300ms;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  background-color: rgba(255, 255, 255, 0); }
  .overlay.--visible {
    -webkit-transition: all 300ms ease, visibility 300ms ease 0ms;
    -o-transition: all 300ms ease, visibility 300ms ease 0ms;
    transition: all 300ms ease, visibility 300ms ease 0ms;
    opacity: 1;
    visibility: visible;
    pointer-events: all; }

.article {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 300ms ease, visibility 300ms ease 300ms;
  -o-transition: all 300ms ease, visibility 300ms ease 300ms;
  transition: all 300ms ease, visibility 300ms ease 300ms;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  width: 100%;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  background-color: rgba(255, 255, 255, 0); }
  .article.--visible {
    -webkit-transition: all 300ms ease, visibility 300ms ease 0ms;
    -o-transition: all 300ms ease, visibility 300ms ease 0ms;
    transition: all 300ms ease, visibility 300ms ease 0ms;
    opacity: 1;
    visibility: visible;
    pointer-events: all; }
  .article.--above {
    z-index: 90; }
  .article__content {
    padding: 36px 0; }
  .article__quote,
  .article .text.--big {
    font-family: "Armand", sans-serif;
    font-size: 40px;
    line-height: 1;
    height: calc(90vh - 72px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    text-align: center;
    width: 100%;
    padding: 0 72px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    .article__quote p,
    .article .text.--big p {
      font-family: "Armand", sans-serif;
      font-size: 40px;
      line-height: 1; }
  .article .text.--big {
    height: 33vh; }
  .article__menu, .article__text,
  .article .text.--medium {
    max-width: 900px;
    margin: 0 auto; }
    .article__menu span + p, .article__text span + p,
    .article .text.--medium span + p {
      display: inline; }
    .article__menu p:not(:first-child), .article__text p:not(:first-child),
    .article .text.--medium p:not(:first-child) {
      margin-top: 1em; }
    .article__menu a, .article__menu button, .article__text a, .article__text button,
    .article .text.--medium a,
    .article .text.--medium button {
      text-decoration: underline; }
      .article__menu a:hover, .article__menu button:hover, .article__text a:hover, .article__text button:hover,
      .article .text.--medium a:hover,
      .article .text.--medium button:hover {
        text-decoration: none; }
  .article__menu, .article__text {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 300ms ease, visibility 300ms ease 300ms;
    -o-transition: all 300ms ease, visibility 300ms ease 300ms;
    transition: all 300ms ease, visibility 300ms ease 300ms;
    pointer-events: none; }
    .article__menu.--visible, .article__text.--visible {
      -webkit-transition: all 300ms ease, visibility 300ms ease 0ms;
      -o-transition: all 300ms ease, visibility 300ms ease 0ms;
      transition: all 300ms ease, visibility 300ms ease 0ms;
      opacity: 1;
      visibility: visible;
      pointer-events: all; }
  .article__text,
  .article .text.--medium {
    width: 65%;
    font-family: "Armand", sans-serif;
    font-size: 12px;
    line-height: 1.35; }
    .article__text p,
    .article .text.--medium p {
      font-size: inherit;
      font-family: inherit;
      line-height: inherit; }
  .article__menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 36px; }
    .article__menu li {
      margin: 0 12px; }
  .article .text.--left {
    text-align: left; }
  .article .text.--center {
    text-align: center; }
  .article .vimeo .vimeo__wrapper {
    position: relative;
    margin: 36px auto;
    width: 65%;
    padding-top: 37.5%;
    height: 0; }
    .article .vimeo .vimeo__wrapper .vimeo__iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

.heart {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 300ms ease, visibility 300ms ease 300ms;
  -o-transition: all 300ms ease, visibility 300ms ease 300ms;
  transition: all 300ms ease, visibility 300ms ease 300ms;
  pointer-events: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 17;
  width: 12px;
  height: 12px;
  -webkit-transform: translate3d(-75%, -75%, 0);
          transform: translate3d(-75%, -75%, 0);
  pointer-events: none; }
  .heart.--visible {
    -webkit-transition: all 300ms ease, visibility 300ms ease 0ms;
    -o-transition: all 300ms ease, visibility 300ms ease 0ms;
    transition: all 300ms ease, visibility 300ms ease 0ms;
    opacity: 1;
    visibility: visible;
    pointer-events: all; }
  .heart.--above {
    z-index: 95; }

.button__plus {
  position: relative;
  width: 13px;
  height: 13px; }
  .button__plus::after, .button__plus::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%;
    height: 1px;
    background-color: black; }
  .button__plus::after {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
        -ms-transform: translate(-50%, -50%) rotate(90deg);
            transform: translate(-50%, -50%) rotate(90deg); }

#sigma-container,
.p5-container {
  width: 90%;
  height: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: transparent;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  -webkit-transition: -webkit-filter 300ms ease;
  transition: -webkit-filter 300ms ease;
  -o-transition: filter 300ms ease;
  transition: filter 300ms ease;
  transition: filter 300ms ease, -webkit-filter 300ms ease;
  will-change: blur;
  -webkit-filter: blur(0px);
          filter: blur(0px); }
  #sigma-container.--blur,
  .p5-container.--blur {
    -webkit-filter: blur(5px);
            filter: blur(5px); }

#sigma-container {
  z-index: 20;
  position: fixed; }

.p5-container {
  z-index: 10; }
/*# sourceMappingURL=main.css.map */