@charset "utf-8";

:root {

  --wrap-width: 1280px;

  --font-body: "Roboto Condensed", sans-serif;
  --font-head: "Roboto Condensed", sans-serif;
  --font-mono: monospace;

  --color-back: #181818;
  --color-mute: #444;
  --color-text: #999;
  --color-link: #eee;
  --color-head: #dcfe27;
  --color-high: #dcfe27;

  --nav-logo-width: 200px;
  --nav-color-back: rgba(8, 8, 8, .55);
  --nav-color-back-phone: rgba(8, 8, 8, .85);

}

/* --- */

html,
body {
  margin: 0;
  font-family: var(--font-body);
  font-optical-sizing: auto;
  background: var(--color-back);
  color: var(--color-text);
}

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

.container,
.wrapper {
  max-width: var(--wrap-width);
  margin-left: auto;
  margin-right: auto;
}

:is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-head);
  font-family: var(--font-head);
}

h1 {
  font-size: 3.5em;
  text-align: center;
  text-transform: uppercase;
}

h1 span {
  display: inline-block;
  position: relative;
}

h1 span:before,
h1 span:after {
  content: "";
  position: absolute;
  height: 4px;
  border-bottom: 1px solid var(--color-head);
  border-top: 1px solid var(--color-head);
  top: calc(.5em - 4px);
  width: calc( 20vw - 1em );
}

h1 span:before {
  right: 100%;
  margin-right: .5em;
}

h1 span:after {
  left: 100%;
  margin-left: .5em;
}

a {
  color: var(--color-link);
  transition: .5s;
  text-decoration: none;
}

a:hover {
  color: var(--color-high);
}

p,
address {
  font-style: normal;
  line-height: 1.5em;
  margin-bottom: .5rem;
}

code {
  margin: 0 .25em;
  padding: .125em .25em;
  background: var(--color-mute);
  border-radius: .25em;
  font-size: .9em;
}

code[title] {
  cursor: help;
}

.smooth-blink {
  animation: smooth-blink 2s linear infinite;
}

@keyframes smooth-blink {
  30% { opacity:   1; }
  50% { opacity: .25; }
  70% { opacity:   1; }
}

/* --- */

body {
  min-height: 100vh;
}

header {
  position: fixed;
  z-index: 2;
  top: 0;
  width: 100%;
  height: 5rem;
  background: var(--nav-color-back);
  box-shadow: 0 1rem 5rem rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(.25rem);
}

header section {
  max-width: var(--wrap-width);
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  padding: 1rem;
}

header a.logo {
  width: var(--nav-logo-width);
  min-height: 3rem;
}

header a.logo img {
  display: block;
  width: 100%;
  height: 100%;
}

header input {
  display: none;
}

header nav {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: var(--nav-color-back-phone);
  top: 0;
  left: 0;
  width: 100%;
  transition: height .0s ease-out .5s, opacity .25s ease-out .25s, padding-left .25s ease-in 0s;
  height: 0;
  opacity: 0;
  padding-left: 100%;
  z-index: 4;
}

header input:checked ~ nav {
  transition: height .0s ease-in 0s, opacity .2s ease-in 0s, padding-left .25s ease-out .25s;
  height: 100vh;
  opacity: 1;
  padding-left: 0;
}

/* nav overlay (close) */
header nav label {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
}

/* list - phone */
header nav ul {
  margin: 20vh 0 0 0;
  width: 100%;
  z-index: 3;
}

header nav li {
  list-style: none;
  margin: 1em auto;
  width: 100%;
}

header nav li a {
  text-align: center;
  color: var(--color-link);
  font-size: 1em;
  padding: .5em;
  width: 100%;
  display: block;
  text-decoration: none;
  text-transform: uppercase;
}

header nav li a.neon {
  color: #ccf;
  text-shadow: 2px 2px 1px rgba(0,0,0,0.5), 0 0 10px #fff, 0 0 5px #7d26cd, 0 0 25px #7d26cd;
  animation: neon 0.01s infinite alternate;
}

@keyframes neon {
  70% { opacity: 0.7; }
}

/* hamburger & phone close button (x) */
header input ~ label {
  position: relative;
  background: transparent;
  height: 35px;
  width: 50px;
  cursor: pointer;
  z-index: 5;
}

header label span {
  position: absolute;
  display: block;
  left: 50%;
  width: 60%;
  height: 2px;
  transition: all .4s ease-in 0s;
  background: var(--color-high);
  margin: 0 auto;
}

header label span:nth-child(1) {
  top: 20%;
  transform: translateX(-50%) translateY(-0%) rotate(-0deg);
}

header label span:nth-child(2) {
  top: 50%;
  transform: translateX(-50%)  translateY(-50%) rotate(0deg);
}

header label span:nth-child(3) {
  top: calc(80% - 3px);
  transform: translateX(-50%) translateY(-0%) rotate(-0deg);
}

header input:checked ~ label span:nth-child(1) {
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-315deg);
}

header input:checked ~ label span:nth-child(2) {
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-225deg);
}

header input:checked ~ label span:nth-child(3) {
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-225deg);
}

/* desktop */
@media screen and (min-width: 1024px) {

  header input ~ label,
  header nav label {
    display: none;
  }

  header nav {
    width: auto;
    height: auto;
    background: transparent;
    position: relative;
    padding-left: 0;
    opacity: 1;
  }

  header nav ul {
    margin: 0;
  }

  header nav ul li {
    width: auto;
    display: inline-block;
    margin: 0 0 0 1rem;
  }

  header nav ul li a {
    display: inline-block;
    width: auto;
  }

}

footer {
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
  background: var(--nav-color-back);
  box-shadow: 0 -1rem 5rem rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(.25rem);
  padding-block: .75em;
}

footer p {
  margin: 0;
  font-size: 0.9em;
  line-height: 1.75em;
  color: #444;
  padding-inline: 1em;
  text-align: center;
}

footer p strong {
  color: #eee;
  text-transform: uppercase;
  font-weight: normal;
  padding-inline: .5em;
}

/* tablet */
@media screen and (min-width: 640px) {

  footer p {
    text-align: left;
  }

  footer p:has(a.credox) {
    text-align: right;
  }
}

footer p a.credox {
  filter: grayscale( 100% );
  transition: .5s;
}

footer p a.credox:hover {
  filter: grayscale( 0% );
}

/* --- index --- */

main.index section.fullscreen-video {
  height: 100vh;
  position: relative;
}

main.index section.fullscreen-video video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- about --- */

main.about {
  margin-top: 7.5em;
  padding-bottom: 5em;
}

main.about video {
  max-width: 100%;
  margin: 2em 0;
}

main.about p {
  font-size: 1.5em;
  line-height: 2em;
  text-align: center;
  font-weight: lighter;
}

main.about strong {
  font-size: 1.75em;
  font-weight: lighter;
  color: var(--color-high);
  text-transform: uppercase;
}

/* --- work --- */

main.work {
  margin-top: 7.5em;
  padding-bottom: 5em;
}

main.work ul.masonry {
  margin: 0;
  column-count: 2;
  column-gap: 2rem;
  /*
  column-rule: 1px solid #333;
  */
}

main.work ul.masonry li {
  list-style: none;
  margin: 0 0 .625rem;
}

main.work ul.masonry li {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  /*
  border-bottom: 1px solid #333;
  */
}

main.work ul.masonry li a {
  width: 100%;
  padding: 0;
}

main.work ul.masonry li a img {
  max-width: 100%;
  transition: .25s;
  border-radius: .25rem;
  box-shadow: 0 4px 7px 2px rgba(0, 0, 0, 0.25);
}

ul.masonry li a:hover img {
  transform: scale(1.1);
}

@media only screen and ( min-width: 640px ) {
  main.work ul.masonry { column-count: 4; }
}

@media only screen and ( min-width: 1024px ) {
  main.work ul.masonry { column-count: 5; }
}

/* --- contact --- */


main.contact {
  margin-top: 7.5em;
  padding-bottom: 5em;
}

main.contact aside ul {
  margin: 1em 0 0 0;
}

main.contact aside ul li {
  list-style: none;

}

main.contact aside ul li a {
  font-size: 96pt;
  color: var(--color-mute);
  transition: 1s;
}

/* desktop */
@media screen and (min-width: 1024px) {

  main.contact aside ul li a.active {
    color: var(--color-link);
  }

  main.contact section article.active {
    animation: active-article 1s ease-in-out;
  }

  @keyframes active-article {
    from {
      opacity: 0;
      transform: translate3d(0, 20%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
}

main.contact section article {
  padding: 2em 1rem;
  width: 100%;
}

main.contact section article ul {
  margin: 0;
}

main.contact section article h2 {
  margin: 0 0 1em 0;
}

main.contact section article ul li {
  float: left;
  list-style: none;
  margin: 0 1em 0 0;
}

main.contact section article[data-name="find"] p svg {
  vertical-align: middle;
  width: 2em;
  height: 2em;
  margin: 0 0 0 .5em;
}

main.contact section article[data-name="find"] a + svg {
  width: 1.25em;
  height: 1.25em;
}

main.contact section article[data-name="follow"] ul li a svg {
  width: 3em;
  height: 3em;
}

main.contact section article[data-name="connect"] input,
main.contact section article[data-name="connect"] textarea {
  font-family: var(--font-body);
  font-size: 1em;
  width: 100%;
  padding: .75em 1em;
  margin: 0 0 .5em 0;
  color: var(--color-link);
  background: #222;
  border: none;
  border-bottom: 1px solid var(--color-text);
  transition: .25s;
}

main.contact section article[data-name="connect"] textarea {
  height: 10em;
}

main.contact section article[data-name="connect"] input:focus,
main.contact section article[data-name="connect"] textarea:focus {
  outline: none;
  border-bottom: 1px solid var(--color-high);
}

main.contact section article[data-name="connect"] input::placeholder,
main.contact section article[data-name="connect"] textarea::placeholder {
  opacity: 0.25;
  color: var(--color-link);
}

main.contact section article[data-name="connect"] input[type="submit"] {
  font-weight: 300;
  color: var(--color-back);
  background: var(--color-high);
  border: none;
  cursor: pointer;
}
main.contact section article[data-name="connect"] input[type="submit"]:hover,
main.contact section article[data-name="connect"] input[type="submit"]:focus {
  box-shadow: 0 0 1em var(--color-high);
}

main.contact p:has(input[name="title"]) {
  display: none; /* honeypot */
}

main.contact input:invalid:not(:focus):not(:placeholder-shown) {
  border-bottom: 1px solid #8a1b1b;
}

main.contact p.form-message {
  position: relative;
  color: var(--color-link);
  padding-left: 2em;
}

main.contact p.form-message:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 0;
}

main.contact p.form-message.success:after {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIEdlbmVyYXRvcjogU1ZHIFJlcG8gTWl4ZXIgVG9vbHMgLS0+CjxzdmcgZmlsbD0iI0RDRkUyNyIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDUyIDUyIiBkYXRhLW5hbWU9IkxheWVyIDEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0yNiw1MkEyNiwyNiwwLDEsMSw1MiwyNiwyNiwyNiwwLDAsMSwyNiw1MlpNMjYsNEEyMiwyMiwwLDEsMCw0OCwyNiwyMiwyMiwwLDAsMCwyNiw0WiIvPjxwYXRoIGQ9Ik0yMywzNy42QTIsMiwwLDAsMSwyMS41OSwzN2wtOS4yLTkuMTlBMiwyLDAsMCwxLDE1LjIyLDI1bDkuMTksOS4xOUEyLDIsMCwwLDEsMjMsMzcuNloiLz48cGF0aCBkPSJNMjMsMzcuNmEyLDIsMCwwLDEtMS40MS0zLjQyTDM2Ljc4LDE5YTIsMiwwLDAsMSwyLjgzLDIuODNMMjQuNDEsMzdBMiwyLDAsMCwxLDIzLDM3LjZaIi8+PC9zdmc+Cg==");
}

main.contact p.form-message.error:after {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIGZpbGw9IiM4YTFiMWIiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCA1MiA1MiIgZGF0YS1uYW1lPSJMYXllciAxIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjYsMEEyNiwyNiwwLDEsMCw1MiwyNiwyNiwyNiwwLDAsMCwyNiwwWm0wLDQ4QTIyLDIyLDAsMSwxLDQ4LDI2LDIyLDIyLDAsMCwxLDI2LDQ4WiIvPjxwYXRoIGQ9Ik0yOC44MywyNmw4LjU4LTguNTlhMiwyLDAsMCwwLTIuODItMi44MkwyNiwyMy4xN2wtOC41OC04LjU4YTIsMiwwLDAsMC0yLjgzLDIuODJMMjMuMTcsMjZsLTguNTgsOC41OGEyLDIsMCwxLDAsMi44MiwyLjgzTDI2LDI4LjgzbDguNTksOC41OEEyLDIsMCwwLDAsMzYsMzhhMiwyLDAsMCwwLDEuNDItLjU5LDIsMiwwLDAsMCwwLTIuODJaIi8+PC9zdmc+Cg==");
}

section.banner {
  width: 100%;
  margin-top: 5em;
  background: #fff;
}

section.banner div {
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
}

section.banner img {
  max-width: 100%;
}