:root {
  --white: rgb(255, 255, 255);
  --black: rgb(0, 0, 0);
  --gray: rgb(56, 56, 56);
  --gray-light: rgb(107, 107, 107);
  --gray-lighter: rgb(156, 156, 156);
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-serif: ;
  --font-code: ;
  --y-space: 1.25rem; }

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */ }

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
  tab-size: 4;
  /* 3 */
  font-family: Inter, ui-sans-serif, system-ui;
  /* 4 */ }

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */ }

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */ }

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted; }

/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit; }

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit; }

/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder; }

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: Inter, ui-monospace, SFMono-Regular;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%; }

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */ }

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */ }

/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none; }

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */ }

/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto; }

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none; }

/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline; }

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto; }

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none; }

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item; }

/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0; }

fieldset {
  margin: 0;
  padding: 0; }

legend {
  padding: 0; }

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0; }

/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical; }

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */ }

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */ }

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */ }

/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer; }

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default; }

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */ }

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto; }

/*
Ensure the default browser behavior of the `hidden` attribute.
*/
[hidden] {
  display: none; }

body {
  background-color: var(--white); }

.layout {
  margin: 0 auto;
  max-width: calc(100vw - 1.25rem);
  line-height: var(--y-space);
  overflow-x: hidden;
  padding: 0 .25rem 0.0625rem;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always; }
  @media (max-width: 999px) {
    .layout.nav-open {
      overflow: hidden; } }
  @media (min-width: 1000px) {
    .layout {
      display: grid;
      grid-template-columns: 200px 55ch;
      grid-template-rows: min-content 1fr min-content;
      gap: 4.0625rem;
      max-width: calc(220px + 55ch + 4.0625rem); } }
.pageHeader {
  align-items: center;
  display: flex;
  height: calc(var(--y-space) * 4);
  margin-bottom: calc(var(--y-space) * 4);
  margin-top: var(--y-space); }
  @media (max-width: 999px) {
    .pageHeader {
      max-width: 65ch;
      margin-left: auto;
      margin-right: auto; } }
  @media (min-width: 1000px) {
    .pageHeader {
      grid-column: 1 / 3;
      margin-bottom: 0;
      margin-top: 5rem; } }
  .pageHeader h1 {
    align-items: center;
    display: flex;
    font-size: 1.875rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase; }
    @media (max-width: 999px) {
      .pageHeader h1 {
        max-width: min-content; } }
  .pageHeader .logo {
    display: inline-block; }

.nav-toggleButton {
  position: absolute;
  top: 0;
  right: 10px;
  height: calc(var(--y-space) * 4);
  padding: 0 10px; }
  @media (min-width: 1000px) {
    .nav-toggleButton {
      display: none; } }
.pageSidebar {
  background-color: var(--white);
  height: calc(100vh - calc(var(--y-space) * 6));
  left: 100vw;
  top: calc(var(--y-space) * 5);
  transition: transform 0.2s ease-in-out;
  z-index: 1; }
  .nav-open .pageSidebar {
    transform: translateX(-100vw); }
  @media (max-width: 999px) {
    .pageSidebar {
      padding: 10px;
      position: absolute;
      width: 100vw; } }
  @media (min-width: 1000px) {
    .pageSidebar {
      grid-column: 1 / 2; } }
.navList--main {
  font-weight: 400;
  letter-spacing: 0.4;
  line-height: var(--y-space); }
  @media (min-width: 1000px) {
    .navList--main {
      display: block; } }
.navItem--main {
  margin-bottom: var(--y-space); }

.navLink--main {
  text-decoration: underline; }

.content {
  max-width: 65ch;
  margin: 0 auto; }
  @media (min-width: 1000px) {
    .content {
      grid-column: 2 / 3;
      margin: 0; } }
.project-list__item {
  margin-bottom: var(--y-space); }

.blog__item {
  margin-bottom: 5rem; }

.blog__title {
  font-weight: 600;
  text-transform: uppercase;
  text-wrap: balance; }

.blog__permalink {
  margin-left: .25rem; }

.blog__permalink img {
  display: inline-block;
  transform: translateY(-1px); }

.blog__item h1,
.blog__item h2,
.blog__item h3,
.blog__item h4,
.blog__item h5,
.blog__item h6,
.blog__item p,
.blog__item ul,
.blog__item ol {
  margin-bottom: var(--y-space); }

.blog__item h1,
.blog__item h2,
.blog__item h3,
.blog__item h4,
.blog__item h5,
.blog__item h6 {
  font-weight: 700;
  text-transform: uppercase; }

.blog__item ul {
  list-style: none; }

.blog__item ul > li:before {
  content: "-";
  margin-right: 10px; }

.blog__item ol {
  list-style: decimal;
  padding-left: 1.25rem; }

.blog__item blockquote {
  color: var(--gray-light);
  padding-left: 1.25rem;
  border-left: 2px solid var(--gray-lighter); }

.blog__item a {
  color: var(--black);
  text-decoration: underline; }

.blog__item .video {
  margin-bottom: var(--y-space); }

.blog__item figure {
  margin-bottom: var(--y-space); }

.block__column--two {
  display: flex;
  gap: 20px;
  justify-content: space-between; }

video {
  width: 100% !important;
  height: auto !important; }

.video {
  position: relative;
  width: 100%;
  height: 0;
  margin-bottom: 1rem;
  padding-bottom: 56.25%; }

.video iframe {
  border: 0px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.block--text + .block--text {
  margin-top: calc(var(--y-space) * 4); }

.gallery--2column {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr); }

.gallery--3column {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr); }

.gallery--4column {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr); }

.pageFooter {
  display: flex;
  justify-content: center;
  padding-bottom: var(--y-space);
  width: 100%; }
  @media (min-width: 1000px) {
    .pageFooter {
      grid-column: 1 / 3; } }
/* Preload images */
body:after {
  content: url(/assets/img/lightbox/close.png) url(/assets/img/lightbox/loading.gif) url(/assets/img/lightbox/prev.png) url(/assets/img/lightbox/next.png);
  display: none; }

body.lb-disable-scrolling {
  overflow: hidden; }

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none; }

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal; }

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;
  /* Image border */
  border: 4px solid white; }

.lightbox a img {
  border: none; }

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;
  /* Background color behind image.
     This is visible during transitions. */
  background-color: white; }

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both; }

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0; }

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(/assets/img/lightbox/loading.gif) no-repeat; }

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10; }

.lb-container > .nav {
  left: 0; }

.lb-nav a {
  outline: none;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); }

.lb-prev,
.lb-next {
  height: 100%;
  cursor: pointer;
  display: block; }

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(/assets/img/lightbox/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s; }

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1; }

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(/assets/img/lightbox/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s; }

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1; }

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 15px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px; }

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both; }

.lb-data {
  padding: 0 4px;
  color: #ccc; }

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em; }

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em; }

.lb-data .lb-caption a {
  color: #4ae; }

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999; }

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(/assets/img/lightbox/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s; }

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1; }