@charset "UTF-8";
/*! HTML5 Boilerplate v9.0.0-RC1 | MIT License | https://html5boilerplate.com/ */
/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team. */
/* ========================================================================== */
/* Base styles: opinionated defaults */
/* ========================================================================== */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/* * Remove text-shadow in selection highlight:
 * * https://twitter.com/miketaylr/status/12228805301
 * *
 * * Customize the background color to match your design. */
::-moz-selection, ::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/* A better looking default horizontal rule */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/* Remove the gap between audio, canvas, iframes,
 * * images, videos and the bottom of their containers:
 * * https://github.com/h5bp/html5-boilerplate/issues/440 */
audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}

/* * Remove default fieldset styles. */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* * Allow only vertical resizing of textareas. */
textarea {
  resize: vertical;
}

:root {
  --black: #000000;
  --white: #ffffff;
  --highlight-100: rgb(0, 0, 255);
  --highlight-40: #9999FF;
  --bg-100: #E4E7EC;
  --text-100: #1E1E1E;
  --fontPrimary: "PP Editorial New";
  --fontPrimaryItalic: "PP Editorial New Italic";
  --fontMono: "PP Fraktion Sans Bold", monospace;
  --img-radius-large: 12px;
  --img-radius-medium: 10px;
  --img-radius-small: 6px;
  --column-gap-desktop: 0.75rem;
  --new-radius: 20px;
}

/* ==========================================================================
 * RESET
 * ========================================================================== */
html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

/* ==========================================================================
 * TYPOGRAPHY
 * ========================================================================== */
@font-face {
  font-family: "PP Fraktion Sans Bold";
  src: url(../css/fonts/PPFraktionSans-Bold.eot);
  src: url(../css/fonts/PPFraktionSans-Bold.eot) format("embedded-opentype"), url(../css/fonts/PPFraktionSans-Bold.woff2) format("woff2"), url(../css/fonts/PPFraktionSans-Bold.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "PP Fraktion Sans Thin";
  src: url(fonts/PPFraktionSans-Thin.eot);
  src: url(fonts/PPFraktionSans-Thin.eot?#iefix) format("embedded-opentype"), url(fonts/PPFraktionSans-Thin.woff2) format("woff2"), url(fonts/PPFraktionSans-Thin.woff) format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "PP Editorial New";
  src: url(../css/fonts/PPEditorialNew-Regular.eot);
  src: url(../css/fonts/PPEditorialNew-Regular.eot?#iefix) format("embedded-opentype"), url(../css/fonts/PPEditorialNew-Regular.woff2) format("woff2"), url(../css/fonts/PPEditorialNew-Regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "PP Editorial New Italic";
  src: url(fonts/PPEditorialNew-Italic.eot);
  src: url(fonts/PPEditorialNew-Italic.eot?#iefix) format("embedded-opentype"), url(fonts/PPEditorialNew-Italic.woff2) format("woff2"), url(fonts/PPEditorialNew-Italic.woff) format("woff");
  font-weight: 400;
  font-style: italic;
}
body {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 743px) {
  body {
    font-size: 0.875rem;
  }
}

h1 {
  font-size: 4rem;
  font-size: calc(4vw + 4vh + 2vmin);
  line-height: 120%;
  margin: 0;
  letter-spacing: 0.25rem;
  letter-spacing: -0.025rem;
}
@media (max-width: 1440px) {
  h1 {
    font-size: calc(2.5vw + 2.5vh + 2vmin);
  }
}
@media (max-width: 640px) {
  h1 {
    font-size: calc(2vw + 2.5vh + 2vmin);
  }
}
@media (max-width: 320px) {
  h1 {
    font-size: calc(1.5vw + 2.5vh + 2vmin);
  }
}

h2 {
  font-size: 6rem;
}
@media (max-width: 1024px) {
  h2 {
    font-size: 3.5rem;
  }
}

h3 {
  font-family: var(--fontMono);
  font-size: 1.125rem;
  font-style: normal;
  line-height: 120%;
  letter-spacing: 0.00825rem;
  text-transform: uppercase;
  padding-bottom: 1rem;
  margin: 0;
}
@media (max-width: 1024px) {
  h3 {
    font-size: 0.75rem;
    padding-bottom: 0.5rem;
  }
}

p {
  letter-spacing: 0.02rem;
  line-height: 1.5;
}
@media (max-width: 1024px) {
  p {
    font-size: 0.75rem;
  }
}

p.introduction {
  font-size: 1.5rem;
}
@media (max-width: 1024px) {
  p.introduction {
    font-size: 1.125rem;
  }
}

.intro {
  font-size: 2.25rem;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
@media (max-width: 1440px) {
  .intro {
    font-size: 1.125rem;
  }
}

.annotation {
  font-family: var(--fontMono);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
}

.caption {
  font-family: var(--fontMono);
  font-size: 0.75rem;
  font-weight: 400;
}

.pill {
  font-family: var(--fontMono);
  font-weight: 500;
  font-size: 12px;
}

.blue-txt {
  color: var(--highlight-100);
}

/* REM Scale: */
/*	4px  | 0.25rem */
/*	8px  | 0.5rem */
/*	12px | 0.75rem */
/*	16px | 1.0rem */
/*	20px | 1.25rem */
/*	24px | 1.5rem */
/*	28px | 1.75rem */
/*	32px | 2.0rem */
/*	36px | 2.25rem */
/*	64px | 4.0rem */
.spec {
  display: none;
}

@media (max-width: 640px) {
  .spec.x-sml {
    display: block;
  }
}

@media (min-width: 640px) and (max-width: 1024px) {
  .spec.sml {
    display: block;
  }
}

@media (min-width: 1024px) and (max-width: 1440px) {
  .spec.med {
    display: block;
  }
}

@media (min-width: 1440px) and (max-width: 1920px) {
  .spec.lrg {
    display: block;
  }
}

@media (min-width: 1920px) {
  .spec.x-lrg {
    display: block;
  }
}

a {
  color: var(--white);
  transition: all 100ms ease-out;
}

a:hover {
  color: var(--highlight-100);
  transition: all 150ms ease-out;
}

/* UTILITY */
.italic {
  font-family: var(--fontPrimaryItalic);
  font-style: italic;
}

.centered {
  text-align: center;
}

body {
  font-family: var(--fontPrimary);
  background-color: var(--text-100);
  color: var(--white);
}

body, #container {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

#landing {
  margin: 0 1rem;
  display: grid;
  grid-template-columns: auto repeat(3, 1fr) auto;
  column-gap: var(--column-gap-desktop);
  grid-template-rows: auto 1fr auto;
  row-gap: var(--column-gap-desktop);
  height: 90vh;
}

#container,
section,
index {
  margin: 0 1rem;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--column-gap-desktop);
  row-gap: var(--column-gap-desktop);
}
@media (max-width: 1024px) {
  #container,
  section,
  index {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  #container,
  section,
  index {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.header {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 2px var(--white);
  margin: 0 2rem;
}
@media (max-width: 1024px) {
  .header {
    margin: 0 1rem;
  }
}
.header span {
  margin: 0 0.5rem;
}

.inner {
  border-top: solid 2px var(--white);
}

.underline {
  border-bottom: solid 2px var(--highlight-40);
}

.bullet {
  color: var(--highlight-40);
}

#marquee {
  margin: 2rem;
  padding: 0rem;
  min-height: calc(100vh - 66px - 4rem);
  display: flex;
  flex-direction: column;
  background-color: var(--text-100);
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: -webkit-fill-available, 100vh;
  height: -webkit-fill-available, 100%;
  height: -moz-available, 100%;
  height: fill-available, 100%;
}

.button {
  display: inline-block;
  text-transform: uppercase;
  background-color: var(--text-100);
  font-family: var(--fontMono);
  font-size: 0.75rem;
  font-style: normal;
  padding: 1rem 2rem;
  border-radius: 0.4rem;
  letter-spacing: 0.1rem;
}
@media (max-width: 640px) {
  .button {
    font-size: 0.65rem;
    padding: 0.75rem 1.5rem;
  }
}
.button:hover {
  color: var(--white);
  background-color: var(--black);
}

#overlay {
  position: absolute;
  z-index: 600;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  opacity: 0;
  transition: opacity 0.3s ease-in;
  pointer-events: none;
}

body.menu-open #overlay {
  opacity: 0.8;
  transition: opacity 0.5s ease-out;
}

#menu {
  width: 45%;
  max-width: 1024px;
  z-index: 900;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  transition: transform 0.4s ease-out;
  transform: translateX(-100%);
  background-color: var(--bg-100);
  border-radius: var(--img-radius-large);
}
#menu ul {
  margin: 2rem;
  padding: 0;
}
#menu ul li {
  border-bottom: var(--highlight-40) 2px solid;
}
#menu ul li a {
  display: flex;
  padding: 2rem 2rem;
  opacity: 0.6;
  transition: opacity 0.2s ease-in-out;
  color: var(--text-100);
  align-items: baseline;
  --gf-tile-header-gap: 12px;
  justify-content: space-between;
  gap: 0 var(--gf-tile-header-gap);
}
#menu ul li a:hover {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

.menu-lower {
  display: flex;
  justify-content: flex-end;
  margin: 2rem;
  color: var(--text-100);
}
.menu-lower span {
  margin: 0 0.5rem;
}
.menu-lower a {
  color: var(--text-100);
}

.aside-section {
  top: 20px;
  bottom: 20px;
  position: absolute;
}

.aside-right {
  transform: translateX(0%);
}

#menu.active {
  transition: transform 0.5s ease-in-out;
  transform: translateX(20px);
}

.menu-left {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.menu-btn.closed {
  z-index: 999;
  width: 15px;
  height: 15px;
  background-image: url("../img/icons/nf_menu-closed.svg");
}

/* Theming */
.type-a {
  background-color: var(--bg-100);
}
.type-a p {
  color: var(--highlight-100);
}
.type-a p:last-child {
  margin-bottom: 0;
}
.type-a h3 {
  color: var(--text-100);
  padding-bottom: 4rem;
}
@media (max-width: 640px) {
  .type-a h3 {
    padding-bottom: 1rem;
  }
}

footer {
  background-color: var(--black);
  padding: 2rem;
}
@media (max-width: 640px) {
  footer {
    padding: 1rem;
  }
}
footer .inner {
  border-top: none;
  --gf-tile-header-gap: 12px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.75rem 2rem;
  justify-content: space-between;
  background-color: var(--text-100);
  border-radius: var(--img-radius-large);
}
@media (max-width: 640px) {
  footer .inner {
    border-radius: var(--img-radius-small);
  }
}

.style-container {
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  align-content: start;
  column-gap: 24px;
  grid-template-columns: 1fr;
  justify-content: space-around;
  row-gap: 24px;
}

.style-item {
  border-top: var(--highlight-40) 2px solid;
  padding: 24px 24px 32px;
}
.style-item:first-child {
  border-top: none;
}

#logo-scroll {
  background-color: var(--black);
  display: flex;
  overflow: hidden;
  width: 100%;
  align-items: center;
}
#logo-scroll .filler2 {
  white-space: nowrap;
  width: 25%;
}
#logo-scroll .logo-set {
  display: flex;
  --gf-tile-header-gap: 32px;
  gap: 0 var(--gf-tile-header-gap);
}
#logo-scroll .logo-set .logo-item {
  width: 25%;
}
@media (max-width: 640px) {
  #logo-scroll .logo-set .logo-item {
    width: 32%;
  }
}

.skillList {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  row-gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.pill {
  background-color: var(--bg-100);
  color: var(--highlight-100);
  border-radius: 16px;
  padding: 6px 10px;
  text-transform: uppercase;
}
.pill span {
  margin-left: 4px;
}

.pill::before {
  content: "■";
}

.project-marquee {
  max-width: 100%;
  height: 100vh;
  background-image: url("../img/projects/tenant portal/tenant-portal_marquee.png");
  background-size: cover;
}

.project-marquee .pill {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
}

.project-grid {
  grid-column-start: span 12;
}
@media (min-width: 1440px) {
  .project-grid {
    grid-column: 2/span 10;
  }
}

.project-thumbnail {
  grid-column-start: span 6;
}
@media (max-width: 1024px) {
  .project-thumbnail {
    grid-column-start: span 4;
    grid-column: 2/span 6;
  }
}
@media (max-width: 640px) {
  .project-thumbnail {
    grid-column: 1/span 8;
  }
}

.goal-item {
  display: flex;
  gap: 0 0.25rem;
  border-bottom: var(--highlight-40) 2px solid;
}
@media (max-width: 1440px) {
  .goal-item {
    border-bottom: none;
  }
  .goal-item p {
    margin-bottom: 0.25rem;
  }
}
.goal-item p:first-child {
  color: var(--highlight-40);
}

img {
  width: 100%;
  border-radius: var(--img-radius-large);
}

@media (max-width: 640px) {
  .img-portrait {
    order: -1;
  }
}

.filler_mockup2 {
  grid-column: 3/span 10;
  border-radius: var(--img-radius-large);
}

.filler_mockup3 {
  width: 100%;
}

.lrg-image {
  margin: 2rem;
}
@media (max-width: 1024px) {
  .lrg-image {
    margin: 1rem;
  }
}

/* ==========================================================================
 * Layout + Structure
 * ========================================================================== */
section {
  width: auto;
  margin: 0;
  padding: 8rem 2rem;
  background-color: var(--highlight-100);
}
@media (max-width: 1024px) {
  section {
    padding: 3.5rem 1rem;
  }
}

.col_1-2 {
  grid-column: 1/span 2;
}

.col_7-5 {
  grid-column: 7/span 5;
}
@media (max-width: 1024px) {
  .col_7-5 {
    grid-column: 2/span 6;
  }
}
@media (max-width: 640px) {
  .col_7-5 {
    grid-column: 1/span 6;
  }
}

.col_2-5 {
  grid-column: 2/span 5;
  align-content: end;
}
@media (max-width: 640px) {
  .col_2-5 {
    grid-column: 1/span 6;
  }
}

/* This one looks good! */
.col_4-6 {
  grid-column: 4/span 6;
}
@media (max-width: 1024px) {
  .col_4-6 {
    grid-column: 3/span 4;
  }
}
@media (max-width: 640px) {
  .col_4-6 {
    grid-column: 1/span 6;
  }
}

.col_2-6 {
  grid-column: 2/span 6;
}
@media (max-width: 1440px) {
  .col_2-6 {
    grid-column: 2/span 8;
  }
}
@media (max-width: 1024px) {
  .col_2-6 {
    grid-column: 1/span 6;
  }
}

.col_2-10 {
  grid-column: 2/span 10;
}

.col_2-10 {
  grid-column: 2/span 10;
}
@media (max-width: 1440px) {
  .col_2-10 {
    grid-column: 2/span 8;
  }
}
@media (max-width: 1024px) {
  .col_2-10 {
    grid-column: 1/span 6;
  }
}

.col_3-12 {
  grid-column: 3/span 12;
}

.col_8-3 {
  grid-column: 9/span 3;
}
@media (max-width: 1440px) {
  .col_8-3 {
    grid-column: 2/span 8;
  }
}
@media (max-width: 1024px) {
  .col_8-3 {
    grid-column: 1/span 6;
  }
}

.col_8-5 {
  grid-column: 8/span 5;
}
@media (max-width: 1024px) {
  .col_8-5 {
    grid-column: 2/span 5;
  }
}
@media (max-width: 640px) {
  .col_8-5 {
    grid-column: 1/span 6;
  }
}

.index {
  background-color: #ffffff;
}

.gray-bg {
  background-color: #F4F8F8;
}

.row-item, .row-header {
  display: flex;
  box-sizing: border-box;
  grid-column: 3/span 7;
  grid-column: 2/span 10;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 26px;
  border: 1px solid #DDDDDD;
  border-radius: 20px;
  color: #000000;
}
@media (max-width: 1024px) {
  .row-item, .row-header {
    grid-column: 1/span 8;
    padding: 12px 18px;
  }
}
@media (max-width: 640px) {
  .row-item, .row-header {
    grid-column: 1/span 6;
  }
}
.row-item h3, .row-header h3 {
  padding-bottom: 0;
  font-size: 1rem;
}
@media (max-width: 1024px) {
  .row-item h3, .row-header h3 {
    font-size: 0.875rem;
  }
}
.row-item .date, .row-header .date {
  color: var(--highlight-100);
}
.row-item .contributions, .row-header .contributions {
  padding-top: 0.025rem;
  color: #666666;
  font-family: var(--fontPrimary);
  text-transform: none;
}

.row-header {
  border: none;
  color: #666666;
  padding: 0px 26px;
}

/* ==========================================================================
 * ARCHIVE
 * ========================================================================== */
body#archive, html#archive {
  height: 100%;
  -webkit-overflow-scrolling: touch;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  height: -webkit-fill-available;
  height: -moz-available;
  height: fill-available;
}

.item-d {
  grid-column: 1/span 1;
  grid-row: 3/span 1;
  align-self: end;
}

.item-e {
  grid-column: 5/span 1;
  grid-row: 3/span 1;
}

.hyphan-link {
  grid-area: 3/2/4/5;
  justify-self: stretch;
  align-self: center;
}

/* ========================================================================== */
/* Helper classes */
/* ========================================================================== */
/* /* Hide visually and from screen readers */
.hidden, [hidden] {
  display: none !important;
}

/* /* Hide only visually, but have it available for screen readers: */
/* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
/* /* 1. For long content, line feeds are not interpreted as spaces and small width */
/*    causes content to wrap 1 word per line: */
/*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe  */
.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.visually-hidden.focusable:active, .visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/* /* Extends the .visually-hidden class to allow the element */
/* to be focusable when navigated to via the keyboard: */
/* https://www.drupal.org/node/897638 */
/* /* Hide visually and from screen readers, but maintain layout */
.invisible {
  visibility: hidden;
}

/* /* Clearfix: contain floats */
/* /* The use of `table` rather than `block` is only necessary if using */
/* `::before` to contain the top-margins of child elements. */
.clearfix::before {
  content: "";
  display: table;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* ========================================================================== */
/* EXAMPLE Media Queries for Responsive Design. */
/* These examples override the primary ('mobile first') styles. */
/* Modify as content requires. */
/* ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
/* ========================================================================== */
/* Print styles. */
/* Inlined to avoid the additional HTTP request: */
/* https://www.phpied.com/delay-loading-your-print-css/ */
/* ========================================================================== */
@media print {
  * {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  *::before, *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a {
    text-decoration: underline;
  }
  a:visited {
    text-decoration: underline;
  }
  a[href]::after {
    content: " (" attr(href) ")";
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  /* /* Don't show links that are fragment identifiers, */
  /* or use the `javascript:` pseudo protocol */
  a[href^="#"]::after, a[href^="javascript:"]::after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  tr, img {
    page-break-inside: avoid;
  }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  h2, h3 {
    page-break-after: avoid;
  }
}