@font-face {
  font-family: 'Cooper Hewitt';
  src: local('Cooper Hewitt Book'), url('../fonts/cooper/CooperHewitt-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: local('Cooper Hewitt Book Italic'), url('../fonts/cooper/CooperHewitt-BookItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: local('Cooper Hewitt Bold'), url('../fonts/cooper/CooperHewitt-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: local('Cooper Hewitt Bold Italic'), url('../fonts/cooper/CooperHewitt-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: local('Cooper Hewitt Medium'), url('../fonts/cooper/CooperHewitt-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: local('Cooper Hewitt Semibold'), url('../fonts/cooper/CooperHewitt-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Inconsolata';
  src: local('Inconsolata Regular'), url('../fonts/Inconsolata-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

 :root {
   --blue-erase: #00aad4;
   --black-erase: #000;
   --white-erase: #fff;
   --text-font: 'Cooper Hewitt', Inter, Roboto, sans-serif;
   --mono-font: 'Inconsolata', monospace;
   --space-sm: 0.5rem;
   --space-md: 0.75rem;
   --space-lg: 1rem;
   --space-xl: 1.5rem;
}

* {
  box-sizing: border-box;
}

::-moz-selection {
  background: var(--black-erase);
  text-shadow: none;
}

::selection {
  background: var(--black-erase);
  text-shadow: none;
}

::-webkit-selection { /* trying to work around webkit */
  color: #050505;
}


hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--blue-erase);
  margin: 1em 0;
  padding: 0;
}

body {
  color: var(--black-erase);
  font-size: 1rem;
  font-family: var(--text-font);
  font-weight: 400;
  line-height: 1.5;
}

pre {
  font-size: 0.8125rem;
  font-family: var(--mono-font);
}

p, ol, ul, dl,
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
}

h1, h2, h3, h4 {
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

h5, h6 {
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

p:not(:last-child) {
  margin-bottom: var(--space-lg);
}

h1:not(:first-child), h2:not(:first-child),
h3:not(:first-child), h4:not(:first-child),
h5:not(:first-child), h6:not(:first-child) {
  margin-top: var(--space-xl);
}

h2 + h3,
h2 + h4,
h3 + h4,
h4 + h5,
h5 + h6 {
  margin-top: 0 !important;
}

ul, ol {
  margin-bottom: var(--space-lg);
}

li p:not(:last-child) {
  margin-bottom: 0;
}

li:not(:last-child) {
  margin-bottom: calc(var(--space-sm) / 2 );
}

article > * {
  -moz-hyphens: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;

}

a {
  color: var(--black-erase);
  font-weight: 600;
  text-decoration-color: var(--black-erase);
  transition: opacity 0.25s ease-in;
}

a:hover {
  opacity: 0.4;
}

/* General layout
*/

.container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

.sidebar {
  width: 36%;
  padding: 0 calc(var(--space-lg) * 2) calc(var(--space-lg) * 2);
  margin-top: 4.25rem;
}

.main {
  width: 64%;
  background: var(--white-erase);
  min-height: 100%;
  border-left: 1px solid var(--black-erase);
  padding-bottom: var(--space-lg);
}

#nav {
  position: absolute;
  top: 0;
  width: 36%;
  padding: var(--space-lg) calc(var(--space-lg) * 2);
  min-height: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
}

#nav a {
  display: block;
  text-decoration: none;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
}

#nav a span {
  display: inline-block;
  border-bottom: 1px solid var(--black-erase);
  padding-top: 2px;
}

.menu {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0;
}

.menu li {
  font-size: 0.8125rem;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0 !important;
}

.menu .active a span {
  background-color: var(--black-erase);
}

.main-header h2 {
  margin-bottom: 0;
  line-height: 1;
}

.main-header a {
  font-weight: 700;
  letter-spacing: 0.05rem;
}

.sidebar ul {
  margin: 0;
  padding: 0;
}

.sidebar li {
  list-style-type: none;
  line-height: 1.2;
}

.sidebar li:not(:last-child) {
  margin-bottom: var(--space-sm);
}

.sidebar .texts {
  display: block;
}

.sidebar .work-list ul::before,
.sidebar .work-list ul::after {
  content: ' ';
  display: block;
  width: 70%;
  max-width: 200px;
  height: 16px;
  background-color: var(--black-erase);
}

.sidebar .work-list ul::before {
  margin-bottom: var(--space-lg);
}

.sidebar .work-list ul::after {
  margin-top: var(--space-lg);
}

.block {
  padding: var(--space-lg) calc(var(--space-lg) * 2);
}

.sidebar .block {
  padding: var(--space-lg) 0 0;
}

.main article p + ul {
  margin-top: calc(-1 * var(--space-md));
}

.main article li {
  list-style-type: square;
  margin-left: var(--space-lg);
}

.main article em {
  font-style: italic;
}

.main article strong {
  font-weight: 600;
}

/* Home
*/

.home .container {
  height: 100%;
}

.home .main {
  height: 100vh;
  background: var(--white-erase) url("../img/erasure-main.png") no-repeat scroll center 0% / contain;
  image-rendering: crisp-edges;
  position: fixed;
  right: 0px;
  top: 0px;
  padding: calc(var(--space-lg) * 2);
}

/* Work page
*/

.video-container {
  position: relative;
  height: 0;
  width: 100%;
  padding-top: 56.25%; /* 16:9*/
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.video-container #video {
   border: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;

}

.work-description,
.bios {
  max-width: 52rem;
}

.work-description header h2,
.work-reactions header h4 {
  margin-bottom: 0;
}

.work-reactions {
  display: grid;
  grid-gap: calc(var(--space-lg) * 2)  calc(var(--space-lg) * 4);
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

.work-reactions pre {
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 100%;
}

.bios article::before {
  content: ' ';
  display: block;
  max-width: 220px;
  height: 16px;
  background-color: var(--black-erase);
  margin-top: calc(var(--space-sm) / 2);
  margin-bottom: var(--space-xl);
}

.work-reactions header h5::before {
  content: ' ';
  display: inline-block;
  width: 40px;
  height: 16px;
  background-color: var(--black-erase);
  margin-right: var(--space-sm);
}

/* Page
*/

article.page {
  padding: 4.25rem 0 calc(var(--space-lg) * 2) 0;
}

article.page header::after {
  content: ' ';
  display: block;
  width: 220px;
  height: 16px;
  background-color: var(--black-erase);
}

article.page .block + .block {
  padding-top: 0;
}

article.page .entry-content {
  max-width: 40rem;
}

.credits li {
  list-style-type: none !important;
  margin-left: 0 !important;
}

.credits img {
  padding: var(--space-md) 0;
}

.credits img {
  display: block;
  height: 70px;
  width: auto;
}

/* Gallery
*/
article.gallery .entry-content {
  max-width: 100%;
}

article.gallery .entry-content.block {
  padding: 0;
}

/* griddy
article.gallery ul {
  margin: 0;
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}*/
article.gallery ul {
  -webkit-columns: 275px;
  -moz-columns: 275px;
  columns: 275px;
  column-gap: 1px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 0;
}

article.gallery li {
  list-style-type: none;
  margin: 0 0 1px 0;
  padding: 0;
}

article.gallery li img {
  display: block;
}

/* Queries
*/

@media screen and (max-width: 370px) {
  .menu li {
    font-size: 0.75rem;
  }
}

@media screen and (max-width: 450px) {

  body {
    line-height: 1.4;
  }

  #nav {
    padding-top: var(--space-lg);
  }

  .menu {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .menu li {
    font-size: 0.75rem;
  }

  .page .main {
    padding-top: 0;
  }

}

@media screen and (min-width: 371px) and (max-width: 450px) {

  .menu a {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }

}

@media screen and (max-width: 1000px) {

  #nav,
  .sidebar,
  .main,
  .home .main {
    width: 100%;
  }

  .home .sidebar,
  .page .main {
    margin-top: 4.25rem;
  }

  .sidebar {
    margin-top: var(--space-lg);
  }

  .main {
    border-left: 0;
    border-bottom: 1px solid var(--black-erase);
    height: auto;
  }

  .container { flex-direction: column-reverse; }
  .home .container { flex-direction: column; }

  article.page {
    padding-top: 0;
  }

  .home .main {
    position: relative;
    top: auto;
    right: auto;
    height: auto;
    min-height: 100vw;
    border-bottom: 0;
    border-top: 1px solid var(--black-erase);
  }

}

@media screen and (min-width: 1001px) and (max-width: 1220px) {

  article.page {
    padding-top: 2.5rem;
  }

  .sidebar {
    margin-top: 6.25rem;
  }
}


@media screen and (max-width: 430px) {

  .home .sidebar,
  .page .main {
    margin-top: 6.25rem;
  }
}