@charset "utf-8";

/* -----------------------
   GLOBAL LAYOUT
----------------------- */

body {
  margin: 0 auto;
  width: 92%;
  max-width: 960px;
  padding: 0 2.275%;
  padding-top: 10px;
}

.sitewrapper {
  font-family: "nimbus-sans-1","nimbus-sans-2",sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11.5pt;
  line-height: 10.5pt;
  color: #000;
}

/* -----------------------
   GLOBAL LINKS
----------------------- */

a {
  text-decoration: none;
  outline: none;

  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}

a:hover {
  color: #666;
}

a:focus,
a:active {
  outline: none !important;
}

/* -----------------------
   CONTENT WRAPPERS
----------------------- */

.thework,
.aboutwrapper,
.contactwrapper,
.playwrapper,
.work,
.text {
  color: #999;
}

.thework a,
.aboutwrapper a,
.contactwrapper a,
.playwrapper a,
.work a,
.text a,
.credits a {
  color: inherit;
}

.thework a:hover,
.aboutwrapper a:hover,
.contactwrapper a:hover,
.playwrapper a:hover,
.work a:hover,
.text a:hover,
.credits a:hover {
  color: #666;
}

/* -----------------------
   MENU
----------------------- */

.menu a {
  color: #000;
}

/* -----------------------
   PROJECT ITEMS
----------------------- */

.project-item {
  display: inline;

  transition:
    opacity 0s ease,
    visibility 0s ease;
}

.project-item a {
  color: #999;
}

.project-item a:hover {
  color: #666;
}

.project-item.is-current a {
  color: inherit;
}

/* MOBILE ONLY HIDING */

@media (max-width: 480px) {

  .project-item.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    position: absolute;
  }

}

/* -----------------------
   BACK BUTTON
----------------------- */

.back-button {
  display: none;
  opacity: 0;

  transition: opacity 0.35s ease;
}

.back-button.is-visible {
  display: inline;
  opacity: 1;
}

.back-link {
  color: #999;
}

.back-link:hover {
  color: #666;
}

/* DESKTOP: NEVER SHOW BACK */

@media (min-width: 481px) {

  .back-button {
    display: none !important;
  }

}

/* -----------------------
   PROJECT NAV LINKS
----------------------- */

.links,
.boldlinks {
  font-size: 8pt;
  line-height: 1;
  padding-top: 10px;
}

.links {
  font-weight: 300;
  color: #999;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.boldlinks {
  font-weight: 700;
  color: #000;
  letter-spacing: 2pt;
}

.links a {
  display: inline-block;
  line-height: 1;
}

/* -----------------------
   TEXT BLOCKS
----------------------- */

.text {
  padding-top: 10px;
}

.blurb,
.blurbbold,
.blurbitalic {
  font-size: 8pt;
  line-height: 9pt;
  padding-top: 3px;
  padding-bottom: 5px;
  max-width: 100%;
}

.blurb {
  font-weight: 300;
  color: #999;
}

.blurbbold {
  font-weight: 400;
  color: #333;
}

.blurbitalic {
  font-style: italic;
  font-weight: 300;
  color: #999;
}

.credits {
  font-size: 6pt;
  line-height: normal;
  color: #999;
  padding-top: 5pt;
}

/* -----------------------
   IMAGE LAYOUT
----------------------- */

.pictures {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 15px;
  padding-top: 20px;
}

.pictures img {
  display: block;
  width: auto;
  height: 400px;
  max-width: 100%;
  object-fit: contain;
}

/* -----------------------
   VISIBILITY SYSTEM
----------------------- */

.work,
.aboutwrapper,
.contactwrapper,
.thework {
  display: none;
}

.work.is-visible,
.aboutwrapper.is-visible,
.contactwrapper.is-visible,
.thework.is-visible {
  display: block;
}

/* -----------------------
   MOBILE
----------------------- */

@media (max-width: 480px) {

  .sitewrapper {
    font-size: 11.5pt;
    line-height: 10.5pt;
  }

  .links,
  .boldlinks {
    padding-top: 8px;
  }

  .blurb,
  .blurbbold,
  .blurbitalic {
    font-size: 10pt;
    line-height: 1.2;
  }

  .pictures {
    display: block;
  }

  .pictures img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
  }

}