@charset "UTF-8";
/* FONTS */
@font-face {
  font-family: "JazzSN-Black";
  src: url("/assets/fonts/store-norske-jazz-black/jazzsn-black.woff2") format("woff2");
}
@font-face {
  font-family: "JazzSN-Italic";
  src: url("/assets/fonts/store-norske-jazz-italic/jazzsn-bookitalic.woff2") format("woff2");
}
@font-face {
  font-family: "JazzSN-Book";
  src: url("/assets/fonts/store-norske-jazz-book/jazzsn-book.woff2") format("woff2");
}
/* GENERAL */
:root {
  /* FONT */
  --font-size: 20px;
  --line-height: 1.25rem;
  --small-font-size: 0.75rem;
  --small-line-height: 1rem;
  /* LAYOUT */
  --small-image-height: 5rem;
  --preview-image-height: 7.5rem;
  --nav-width: calc(var(--preview-image-height) * 1.51);
  --padding-updown: calc(var(--font-size) / 2);
  --padding-leftright: var(--font-size);
  --text-max-width: 45rem;
  --languages-width: 3.2rem;
  /* COLORS */
  --darkgrey: #2a2a2a;
  --white: whitesmoke;
  --lightgrey: gainsboro;
  --orange: #ff7022;
  --blue: #0205c2;
  --lightblue: #8989fa;
  /* ANIMATION */
  --transition-time: 0s;
}

html {
  font-size: var(--font-size);
}

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

strong {
  color: var(--orange);
}

em {
  font-family: "JazzSN-Italic";
}

tr td:nth-child(1) {
  padding-right: 1rem;
}

.title {
  display: flex;
  flex-wrap: wrap;
}
.title > * {
  padding: var(--padding-updown) var(--padding-leftright);
  display: inline-block;
  background: whitesmoke;
}

.text ul:not(:last-child),
.text p:not(:last-child) {
  margin-bottom: var(--line-height);
}

.text ul {
  margin-left: 1rem;
}

.text li {
  margin-left: -1rem;
  padding-left: 1rem;
}

.text ul li::before {
  content: "• ";
  display: inline-block;
  width: 1rem;
  margin-left: -1rem;
}

.text a {
  color: var(--blue);
}

.icon {
  display: inline-block;
  width: 1.5rem;
}
.icon svg,
.icon img {
  width: 1rem;
  padding: 0.35rem 0.1rem 0 0.1rem;
  position: absolute;
  margin-top: -1rem;
  mix-blend-mode: multiply;
}

.slider.single .image.past {
  display: none;
}

.slider.left h4,
.slider.left .image.active {
  margin-left: -1px;
}

.slider .info {
  padding: calc(var(--padding-updown) * 0.75);
  background: var(--white);
}
.slider .highlight {
  display: inline-block;
}
.slider .highlight .placeholder {
  display: none;
}
.slider .highlight .fullsize {
  opacity: 1;
}
.slider .wrap:nth-child(1) {
  width: 100%;
}
.slider .image.past:not(.active) {
  background: var(--orange);
}
.slider .image.past:not(.active) img {
  transform: scale(0.9);
}
.slider > .image.active:not(.visible),
.slider > .image.active.visible {
  background: var(--orange);
}
.slider > .image.active:not(.visible) img,
.slider > .image.active.visible img {
  opacity: 0;
}
.slider > .image .fullsize {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.slider > .image .info {
  display: none;
}
.slider > .image img {
  height: var(--small-image-height);
}
.slider .wrap .text {
  background: blue;
  color: white;
}

body.loading {
  opacity: 0.5;
  cursor: wait;
}

body {
  font-family: "JazzSN-Book", Arial, sans-serif;
  line-height: var(--line-height);
  background: gainsboro;
  color: var(--darkgrey);
}
body footer {
  display: inline-flex;
  padding: 1rem;
  background: var(--white);
}
body footer a {
  color: var(--blue);
}
body footer > *:not(.contact) {
  display: flex;
}
body footer > * > * {
  margin-right: 2rem;
}
body main {
  margin-right: var(--nav-width);
  transition: margin var(--transition-time);
  transition-timing-function: linear;
}
body > header {
  display: inline-flex;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 999;
  max-width: calc(100% - 3rem);
}
body > header a {
  display: block;
}
body > header span.icon {
  display: block;
  padding: 0.4rem 0.4rem;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--darkgrey);
  display: none;
}
body > header span.icon img {
  display: block;
  position: static;
  border: 2rem;
  padding: 0;
  width: 100%;
  margin: 0;
}
body > header #site-title {
  background: var(--darkgrey);
  display: inline-block;
  padding: var(--padding-updown) var(--padding-leftright);
  padding-bottom: 0.25rem;
  line-height: 1.35rem;
}
body > header #site-title > span,
body > header #site-title > a {
  display: inline-block;
  font-family: "JazzSN-Black", "Arial", sans-serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  text-align: center;
  color: white;
}
body nav {
  display: flex;
  flex-wrap: wrap;
  transition: width var(--transition-time);
  transition-timing-function: linear;
}
body .subnav::-webkit-scrollbar {
  display: none;
}
body .subnav {
  width: var(--nav-width);
  position: fixed;
  top: 0;
  right: 0;
  background: whitesmoke;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}
body .subnav .info {
  background: none;
  display: block;
  justify-content: flex-start;
  text-align: left;
}
body .subnav .info span {
  display: block;
}
body .subnav .subpage.current img {
  opacity: 0;
}
body .subnav .subpage {
  width: calc(var(--preview-image-height) * 1.51);
}
body .subnav .subpage > * {
  padding: var(--padding-leftright);
}
body .subnav .subpage .img img {
  width: 100%;
}
body #languages {
  display: flex;
}
body #languages a {
  display: block;
}

/* GENERAL: PAGE TITLES */
#insta a,
.page a {
  display: inline-block;
}
#insta > a,
#insta > div,
#insta > span,
.page > a,
.page > div,
.page > span {
  padding: var(--padding-updown) var(--padding-leftright);
  display: inline-block;
}

.page > a,
.page > div,
.page > span {
  background: var(--white);
}

.page.current > *,
.page.current span {
  background: var(--orange);
}

/* GENERAL: TEXTS */
.text {
  background: var(--white);
  padding: var(--padding-leftright);
  max-width: var(--text-max-width);
  display: inline-block;
}
.text .publications .features {
  display: flex;
  flex-wrap: wrap;
}
.text .publications .features a {
  color: var(--darkgrey);
}
.text .publications .features .feature {
  display: flex;
  flex-wrap: wrap;
  width: 10rem;
  height: 100%;
  padding-bottom: var(--line-height);
}
.text .publications .features .feature .feature-img {
  align-self: center;
}
.text .publications .features .feature .feature-img img {
  display: block;
  margin: 0 auto;
}
.text .publications .features .mini-title {
  font-size: 0.75rem;
  line-height: 1rem;
  margin-top: 1rem;
  display: block;
  width: 100%;
  text-align: center;
  align-self: flex-end;
}
.text .publications .title {
  margin-bottom: var(--line-height);
}
.text .publications .feature {
  margin-right: var(--line-height);
}
.text a {
  color: var(--blue);
}

.info {
  display: flex;
  flex-wrap: wrap;
  padding-top: calc(var(--padding-updown) * 0.75);
  padding-left: var(--padding-leftright);
  padding-right: var(--padding-leftright);
  width: 100%;
  font-size: 0.75rem;
  line-height: 1rem;
  justify-content: center;
  text-align: center;
}

.info:not(.credit) span:not(:first-of-type, .photographer)::before {
  content: ", ";
}
.info:not(.credit) span.photographer::before {
  content: " ";
  width: 0.2rem;
  display: inline-block;
}

.subnav .info {
  padding-left: 0;
  padding-right: 0;
}

/* GENERAL: IMAGES */
.image {
  display: inline-block;
}
.image video,
.image img {
  max-height: 85dvh;
  max-height: 85vh;
  max-width: 100%;
  display: block;
}
.image .info.placeholder {
  height: 1.9rem;
  display: block;
}

/* PAGE: HOME */
body[data-page=home],
body[data-page=about] {
  --nav-width: 0;
}

body[data-page=home] {
  background: var(--orange);
}
body[data-page=home] main {
  display: flex;
  flex-wrap: wrap;
  margin-right: 0;
  padding: 0;
  height: unset;
  min-height: unset;
}
body[data-page=home] main .intro {
  position: absolute;
  padding: var(--line-height) var(--padding-leftright);
}
body[data-page=home] main .intro > div,
body[data-page=home] main .intro > .places > div {
  margin-bottom: var(--line-height);
}
body[data-page=home] main .work {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - var(--line-height) * 2.5);
  height: calc(100dvh - var(--line-height) * 2.5);
}
body[data-page=home] main .work a, body[data-page=home] main .work picture, body[data-page=home] main .work img, body[data-page=home] main .work video {
  display: block;
}
body[data-page=home] main .work video,
body[data-page=home] main .work img {
  max-height: 65vh;
  max-height: 65dvh;
  max-width: 100%;
}
body[data-page=home] main .work .info {
  background: var(--white);
  padding-bottom: 0.4rem;
}
body[data-page=home] footer {
  position: absolute;
  display: block;
  top: calc(50vh + 2.5rem);
  top: calc(50dvh + 2.5rem);
  height: 45.5vh;
  height: 45.5dvh;
  width: 33.3333333333%;
  background: var(--orange);
}
body[data-page=home] footer > * {
  display: block;
  margin-bottom: var(--line-height);
}
body[data-page=home] footer .places div {
  margin-bottom: var(--line-height);
}

body:not([data-page=projects]) .subnav .info:not(.credit) span:not(:first-of-type, .photographer)::before {
  content: "";
}

body[data-page=publications],
body[data-page=projects] {
  --nav-width: 100%;
}
body[data-page=publications] main,
body[data-page=projects] main {
  display: none;
}
body[data-page=publications] .subnav,
body[data-page=projects] .subnav {
  position: static;
  height: unset;
  max-height: unset;
  overflow: visible;
  background: none;
  min-height: calc(100vh - 8rem);
  min-height: calc(100dvh - 8rem);
}
body[data-page=publications] .subnav .gate,
body[data-page=projects] .subnav .gate {
  display: block;
  background: none;
  padding-bottom: 0;
}

body[data-page=projects] .subnav .imgs {
  display: flex;
  flex-wrap: wrap;
}
body[data-page=projects] .subnav .img {
  width: 50%;
  height: var(--preview-image-height);
}
body[data-page=projects] .subnav .img img {
  object-fit: cover;
  object-position: center center;
  display: block;
  width: 100%;
  height: 100%;
}
body[data-page=projects] .subnav .subpage {
  padding-bottom: var(--padding-updown);
  width: 33.3333333333%;
}
body[data-page=projects] .subnav .subpage .imgs {
  display: flex;
}
body[data-page=projects] .subnav .subpage .imgs .img {
  height: 22vw;
}
body[data-page=projects] .subnav .subpage .gate {
  padding-top: 1rem;
}
body[data-page=projects] .subnav .subpage .info {
  padding-top: var(--padding-updown);
  font-size: 1rem;
  line-height: var(--line-height);
}
body[data-page=projects] .subnav .subpage .info span::before {
  content: "";
}

body[data-page=publications] .subnav {
  align-items: unset;
  color: var(--lightgrey);
}
body[data-page=publications] .subnav .subpage {
  width: 20%;
}
body[data-page=publications] .subnav .subpage .gate {
  padding: calc(var(--line-height) * 3);
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
body[data-page=publications] .subnav .subpage .gate .info {
  text-align: center;
  align-self: flex-end;
  padding-top: var(--line-height);
}
body[data-page=publications] .subnav .subpage .gate .imgs {
  width: 100%;
  align-self: center;
}
body[data-page=publications] .subnav .subpage .img {
  margin: 0 auto;
}

/* PAGE: PROJECT */
body[data-page=project] .subnav .subpage .gate {
  display: block;
  padding: var(--padding-updown) var(--padding-leftright);
}
body[data-page=project] .subnav .subpage .gate .info {
  padding: 0;
}
body[data-page=project] .subnav .subpage .type,
body[data-page=project] .subnav .subpage .date,
body[data-page=project] .subnav .subpage .imgs {
  display: none;
}

body[data-page=publication],
body[data-page=publications] {
  background: var(--darkgrey);
}

body[data-page=publication] main::-webkit-scrollbar,
body[data-page=project] main::-webkit-scrollbar {
  display: none;
}
body[data-page=publication] main,
body[data-page=project] main {
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: 0;
  height: calc(100vh - var(--line-height) * 1.8);
  height: calc(100dvh - var(--line-height) * 1.8);
  overflow: scroll;
}
body[data-page=publication] #close,
body[data-page=project] #close {
  display: inline-block;
  position: fixed;
  right: var(--nav-width);
  top: 0;
}
body[data-page=publication] #close span::before,
body[data-page=publication] #close span::after,
body[data-page=project] #close span::before,
body[data-page=project] #close span::after {
  font-size: 2rem;
  content: "+";
}
body[data-page=publication] #close span::before,
body[data-page=project] #close span::before {
  color: transparent;
}
body[data-page=publication] #close span::after,
body[data-page=project] #close span::after {
  transform: rotate(-45deg) translate(-1rem, -0.7rem);
  position: absolute;
}
body[data-page=publication] #close span,
body[data-page=project] #close span {
  padding-top: calc(var(--padding-leftright) * 0.35);
  padding-bottom: calc(var(--padding-leftright) * 0.35);
}

body[data-page=publication] {
  background: var(--darkgrey);
  overflow: hidden;
}
body[data-page=publication] h1 {
  display: none;
  margin-bottom: var(--line-height);
}
body[data-page=publication] section.publication .slider:nth-child(1) {
  margin-top: calc(var(--line-height) * 2);
}
body[data-page=publication] .slider.center.vertical {
  display: none;
}
body[data-page=publication] .slider.center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
body[data-page=publication] .slider.center .highlight {
  width: 100%;
  text-align: center;
}
body[data-page=publication] .slider.center .highlight .image {
  display: block;
}
body[data-page=publication] .slider.center .highlight .image img {
  margin: 0 auto;
}

body[data-page=project] body {
  min-height: 100vh;
  min-height: 100dvh;
}
body[data-page=project] .text {
  padding-right: 2.5rem;
}
body[data-page=project] main {
  padding-bottom: calc(var(--line-height) * 2);
}
body[data-page=project] h5 span,
body[data-page=project] h4 span {
  padding: calc(var(--font-size) / 2) var(--font-size);
  display: inline-block;
  background: var(--white);
}
body[data-page=project] .next h5 span::after {
  display: inline-block;
}
body[data-page=project] .next h5 span::after {
  content: "▶";
  padding-left: 0.5rem;
}
body[data-page=project] .text h1 {
  margin-bottom: var(--line-height);
}
body[data-page=project] .text .extraButton {
  color: var(--orange);
}
body[data-page=project] .text .extraButton::before {
  display: inline-block;
  font-size: 2rem;
  line-height: 1rem;
  margin-top: -1rem;
  margin-right: -1.75rem;
  float: right;
  content: "+";
}
body[data-page=project] .text.visible .extraButton::before {
  transform: rotate(0);
  content: "–";
}
body[data-page=project] .text:not(.visible) .extra > * {
  display: none;
}
body[data-page=project] .text.visible .extra {
  margin-top: var(--line-height);
}
body[data-page=project] .sliders {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
}
body[data-page=project] .highlight {
  position: relative;
}
body[data-page=project] .highlight h4 {
  position: absolute;
}
body[data-page=project] .slider {
  width: 50%;
}
body[data-page=project] .slider .highlight,
body[data-page=project] .slider .image, body[data-page=project] .slider .wrap {
  float: left;
}
body[data-page=project] .slider .image.active {
  float: left;
}
body[data-page=project] .slider:nth-child(1) {
  justify-content: flex-end;
}
body[data-page=project] .slider:nth-child(1) .highlight {
  float: right;
}
body[data-page=project] .slider:nth-child(1) .wrap,
body[data-page=project] .slider:nth-child(1) .image {
  float: right;
}
body[data-page=project] .slider:nth-child(1) .image.active {
  float: right;
}

/* PAGE: ABOUT */
body[data-page=about] main .first {
  display: flex;
}
body[data-page=about] main a {
  color: var(--blue);
}
body[data-page=about] h2, body[data-page=about] h3 {
  margin: calc(var(--padding-updown) * -2) 0 var(--line-height) calc(var(--padding-leftright) * -1);
}
body[data-page=about] h3 span,
body[data-page=about] h2 span {
  background: var(--darkgrey);
  color: var(--white);
}
body[data-page=about] .links {
  margin-top: 0.75rem;
}
body[data-page=about] .places {
  display: flex;
  flex-wrap: wrap;
}
body[data-page=about] .places > div:first-of-type {
  margin-right: 2rem;
}

#error {
  margin: 0;
}
#error a, #error img {
  display: block;
}
#error .back {
  width: 100%;
  text-align: center;
  z-index: 0;
}
#error .back a,
#error .back .image {
  margin: 0 auto;
}

/*# sourceMappingURL=main.css.map */