@import url('https://use.typekit.net/fgh2jsp.css');

:root {
  --black: #0C0D0D;
  --white: #FFF;
  --lightgrey: #F2F2F2;
  --lightgrey1: #B3B3B3;
  --lightgrey2: #8C8C8C;
  --lightgrey3: #595959;
  --darkgrey: #1C1C1C;
  --slate: #8A9899;
  --easing: .3, .9, .1, 1;
  --easing2: .87, 0, .1, 1;
  --easing3: .75, 0, .24, 1;
  --timing: .5s;
  --timing2: .75s;
  --columns: 12;
  --grid_gap: 1.25em;

}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  margin: 0 auto;
  padding: 0;
  background: var(--black);
  color: var(--white);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* scrollbar-color: var(--lightgrey2) var(--darkgrey); */
  scroll-behavior: smooth;
  transition: all var(--timing) cubic-bezier(var(--easing));
}



.mobile {
  display: none;
}
.desktop {
  display: block;
}

*::selection {
  background-color: transparent;
  color: var(--slate);
}
.bm1k *::selection {
  background-color: transparent;
  color: var(--white);
}
img::selection {
  background-color: transparent;
  color: none;
}


.clipped {
  position: relative;
  width: fit-content;
  height: fit-content;
  clip-path: polygon(0 -10%, 100% -10%, 100% 100%, 0% 100%);
  overflow: none;
}
.clipped2 {
  width: fit-content;
  height: fit-content;
  clip-path: polygon(0 0, 125% 0, 125% 100%, 0% 100%);
  overflow: none;
}
.clipped3 {
  width: fit-content;
  height: fit-content;
  clip-path: polygon(0 -50%, 125% -50%, 125% 125%, 0% 125%);
  overflow: none;
}



p,
h5,
.block {
  position: relative;
  width: fit-content;
  height: fit-content;
  display: block;
}

p,
ul,
li,
.bm1k,
.link_roll {
  margin: 0;
  padding: 0;
  color: var(--white);
  /* font: 500 .98em / 1.3 neue-haas-grotesk-display, sans-serif; */
  font: 500 16px / 1.3 neue-haas-grotesk-display, sans-serif;
  -webkit-font-feature-settings: "salt", "liga", "calt";
  font-feature-settings: "salt", "liga", "calt";
  /* letter-spacing: 3%; */
  letter-spacing: 2%;
  word-spacing: .35px;
  list-style: none;
  font-kerning: none;
}

.list_large li {
  margin: 0;
  font: 500 1.5em / 1.1 neue-haas-grotesk-display, sans-serif;
  -webkit-font-feature-settings: "salt", "liga", "calt";
  font-feature-settings: "salt", "liga", "calt";
  letter-spacing: -1%;
  word-spacing: .075em;
  text-decoration: none;
  font-kerning: none;
}

h5 {
  position: relative;
  margin: 0;
  /* font: 600 .8em / 1.4 neue-haas-grotesk-display, sans-serif; */
  font: 500 12px / 1.2 neue-haas-grotesk-display, sans-serif;
  -webkit-font-feature-settings: "salt", "liga", "calt";
  font-feature-settings: "salt", "liga", "calt";
  /* letter-spacing: 3%; */
  letter-spacing: 2%;
  word-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  /* color: var(--lightgrey2); */
  font-kerning: none;
}




.bm1k * {
  font-weight: 700;
  letter-spacing: -.025em;
  overflow: visible;
}
.bm1k span:nth-of-type(2) {
  font-weight: 500;
}

.block,
.block span,
.project::after {
  font: 600 .98em / 1.1 neue-haas-grotesk-display, sans-serif;
  -webkit-font-feature-settings: "salt", "liga", "calt";
  font-feature-settings: "salt", "liga", "calt";
  letter-spacing: 1%;
  word-spacing: .25px;
  list-style: none;
  word-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
}
.bigger {
  font-size: 1.04em;
}

.lighter {
  font-weight: 500;
}
.heavier {
  font-weight: 600;
}

.anchor {
  color: var(--lightgrey2);
  pointer-events: none;
}


.list {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  will-change: transform;
}
.list li {
  line-height: 1.3;
}
.list li:first-of-type {
  margin-bottom: 2px;
  word-spacing: .05em;
  letter-spacing: .02em;
  color: var(--lightgrey2);
  text-transform: uppercase;
}

.list_med {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  counter-reset: figure;
}
.list_med li {
  padding: 0;
  margin-bottom: 2px;
  overflow-y: hidden;
}

.list_med li:first-of-type {
  color: var(--lightgrey2);
  text-transform: uppercase;
}
/* .list_med li:after { */
.list_med li:not(:first-child)::after {
  position: absolute;
  right: 0;
  content: counter(figure, decimal-leading-zero) ". ";
  content: '(' counter(figure, decimal-leading-zero) ')';
  counter-increment: figure;
  color: var(--lightgrey2);
}


hr {
  margin: 0;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--darkgrey);
  transform-origin: left;
  transform: scaleX(1);
  opacity: 1;
}


a {
  display: inline-block;
  text-decoration: none;
  width: fit-content;
  height: fit-content;
}


.link_roll {
	overflow: hidden;
  margin-bottom: -2px;
  clip-path: polygon(0 -10%, 115% -10%, 115% 115%, 0% 115%);
}

.link_roll span {
	position: relative;
	display: inline-block;
  transition: var(--default-transition);
}

.link_roll span::before {
	position: absolute;
	top: 100%;
	content: attr(data-title);
  transition: var(--default-transition);
	transform: translate3d(0, 0, 0);
}

.link_roll:hover span {
	transform: translateY(-100%);
}
.link_roll:hover span::before {
  /* opacity: 1; */
  transition: var(--default-transition);
}




nav {
  position: fixed;
  z-index: 10;
  top: 0;
  width: 100%;
  height: auto;
  padding-top: var(--grid_gap);
  display: grid;
  grid: auto / 0px repeat(var(--columns), 1fr) 0px;
  grid-gap: var(--grid_gap);
  background: none;
  /* mix-blend-mode: exclusion; */
  pointer-events: none;
}
nav * {
  pointer-events: auto;
}
nav .b2 {
  position: relative;
  grid-area: 1 / 2 / 1 / -2;
  width: 210px;
  transform-origin: top left;
  
}

nav .b2 svg {
  position: relative;
  fill: var(--white);
  animation: fall_down 1.5s cubic-bezier(var(--easing)) .25s both;
}
.b2 {
  scale: .5;
}
.b2 #b_mark {
  width: 100%;
}
.b2 #copyright_mark {
  position: absolute; z-index: 1000;
  right: -10%;
  height: 13%;
}

nav #page_percentage {
  grid-area: 1 / -4 / 1 / -2;
  justify-self: end;
  height: fit-content;
  transform: translateY(-3px);
}
nav #page_percentage * {
  color: var(--lightgrey2);
  animation: fall_down_small 1.25s cubic-bezier(var(--easing)) .65s both;
  pointer-events: none;
}


main {
  position: relative;
}



.top,
.top2 {
  position: relative; z-index: 2;
  height: 100vh;
  min-height: 650px;
  width: 100%;
  margin: auto;
  display: grid;
  grid: 0px repeat(7, 1fr) 0px / 0px repeat(var(--columns), 1fr) 0px;
  grid-gap: var(--grid_gap);
  background: var(--black);
  background: center / 100% no-repeat url('../img/');
  will-change: transform;
  /* animation: window 1.25s cubic-bezier(var(--easing)) both; */
}

.top2 {
  position: fixed;
}





.focus_1 {
  position: relative; z-index: 1;
  grid-area: 2 / 2 / -2 / -2;
  justify-self: start;
  align-self: end;
}
.focus_1 * {
  color: var(--lightgrey2);
  animation: slide_up_small 1.25s cubic-bezier(var(--easing)) .5s both;
}
.focus_2 {
  position: relative; z-index: 1;
  grid-area: 2 / 4 / -2 / 5;
  justify-self: end;
  align-self: end;
  overflow: hidden;
}
.focus_2 * {
  color: var(--lightgrey2);
  animation: fall_down_small 1.25s cubic-bezier(var(--easing)) .5s both;
}
.focus_1, .focus_2 {
  transform: translateY(5px);
}


#error_page .top2,
#temp .top2 {
  background: url('../img/static.gif');
  animation: window 1.25s cubic-bezier(var(--easing)) .5s both;
}


#time {
  grid-area: 6 / 2 / auto / 5;
}
#time svg {
  width: 80px;
  fill: var(--lightgrey2);
  margin-bottom: var(--grid_gap);
  animation: fall_down 1.25s cubic-bezier(var(--easing)) .25s both;
}
#tacTime * {
  white-space: nowrap;
  color: var(--lightgrey2);
  animation: slide_up 1.25s cubic-bezier(var(--easing)) .25s both;
}
#tacTime .seconds {
  display: inline-block;
  width: 2ch;
  text-align: center;
}
#tacTime .ampm {
  margin-left: 4px;
}

#copyright {
  grid-area: -3 / 12 / auto / -2;
  justify-self: end;
  align-self: end;
}
#copyright * {
  color: var(--lightgrey2);
  animation: fall_down 1.25s cubic-bezier(var(--easing)) .25s both;
}





@keyframes fade_in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes fall_down_small {
  0% {
    transform: translateY(-10em);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes fall_down {
  0% {
    transform: translateY(-100vh);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slide_up_small {
  0% {
    transform: translateY(10em);
  }

  100% {
    transform: translateY(0);
  }
}
@keyframes slide_up {
  0% {
    transform: translateY(100vh);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes window {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes window2 {
  0% {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }
  20% {
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes blur {
  0% {
    opacity: 0;
    filter: hue-rotate(20deg) saturate(5);
    scale: 1.5;
  }

  100% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    scale: 1;
  }
}

@keyframes enlarge {
  0% {
    transform-origin: 50% 50%;
    transform: scale(0);
  }

  100% {
    transform-origin: 50% 50%;
    transform: scale(1);
  }
}

@keyframes scroll {
  0% 
  {
    height: 0px;
  }
  10% {
    height: 0px;
  }
  80% {
    height: 10px;
      -webkit-transform: translatey(0px);
      transform: translatey(0px);
  }
  100% {
      height: 0px;
      -webkit-transform: translatey(10px);
      transform: translatey(10px);
  }
}