@font-face {
  font-family: "AkkuratPro";
  src: url("../fonts/AkkuratPro-Regular.woff2") format("woff2"), url("../fonts/AkkuratPro-Regular.woff") format("woff"); }
html {
  --header-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --body-font: "AkkuratPro", sans-serif; }

body {
  display: flex;
  flex-direction: column; }

@media screen and (max-width: 700px) {
  .container {
    padding: 32px 10% 32px 10%;
    box-sizing: border-box;
    width: 100%; } }
@media screen and (max-width: 500px) {
  .post-date {
    display: none; } }
ul, ol {
  padding-left: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 1em; }
  ul li, ol li {
    padding-left: 4px;
    line-height: 1.75em; }
    ul li p, ol li p {
      margin-top: 0;
      margin-bottom: 0; }
  ul.condensed, ol.condensed {
    gap: 0; }

hr {
  height: 1px;
  background-color: var(--grey-700);
  border: none; }

a {
  text-decoration: none;
  color: white; }

@media (prefers-color-scheme: dark) {
  html,
  :root {
    --white: white;
    --body: #e5e5e5;
    --subtext: #a0a0a0;
    --grey-600: #707070;
    --grey-700: #4d4d4d;
    --highlight: #252525;
    --bg-alt: #1c1c1c;
    --bg: #0c0c0c;
    --black: black; } }
@media (prefers-color-scheme: light) {
  html,
  :root {
    --white: white;
    --body: #e5e5e5;
    --subtext: #a0a0a0;
    --grey-600: #707070;
    --grey-700: #4d4d4d;
    --highlight: #252525;
    --bg-alt: #1c1c1c;
    --bg: #0c0c0c;
    --black: black; } }
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  color: var(--body);
  background: var(--bg); }

body {
  font-family: var(--body-font);
  text-size-adjust: none;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased; }

p {
  line-height: 1.75em; }

h1 {
  font-family: var(--header-font);
  font-size: 24px;
  margin-bottom: 28px; }

.about {
  font-size: 16px;
  color: var(--body); }

.container {
  flex: 1;
  display: flex;
  flex-flow: column;
  margin: 0 auto;
  max-width: 650px;
  width: 100%; }

.space-between {
  display: flex;
  align-items: center;
  justify-content: space-between; }

#nav {
  text-align: center;
  position: relative;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 80px 0; }

.footer {
  border-top: 1px solid #252525;
  padding: 16px 0; }

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center; }

@media screen and (max-width: 450px) {
  .footer-content {
    flex-direction: column;
    gap: 32px;
    align-items: center;
    justify-content: center; }

  .hide-mobile {
    display: none !important; }

  .status-line span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis; } }
.socials {
  display: flex;
  gap: 24px; }
  .socials a {
    text-decoration: none;
    transition: opacity 0.2s ease-in-out;
    opacity: 1; }
    .socials a:hover {
      opacity: 0.7; }

.nav-item {
  font-family: var(--header-font);
  font-size: 14px;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--subtext);
  transition: color 0.2s ease-in-out;
  z-index: 10; }
  .nav-item:hover {
    color: var(--white); }

#tab-highlight {
  background: var(--highlight);
  position: absolute;
  border-radius: 4px;
  top: 0;
  height: 32px;
  transition: 0.2s ease;
  transition-property: width, opacity, left; }

a.link,
.post a {
  text-decoration: none;
  color: white;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--grey-700);
  transition: border-bottom-color 0.2s ease-in-out; }
  a.link:hover,
  .post a:hover {
    border-bottom-color: var(--grey-600); }

.text-right {
  text-align: right; }

.text-center {
  text-align: center; }

.mt-1 {
  margin-top: 1em; }

.section {
  margin-top: 50px; }

.subheading {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: var(--subtext);
  margin-bottom: 24px; }

/* Projects Section */
.projects {
  display: flex;
  flex-direction: column;
  gap: 24px; }

.project {
  --x-px: calc(var(--x) * 1px);
  --y-px: calc(var(--y) * 1px);
  background: var(--bg-alt);
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none; }
  .project:before, .project:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    inset: 0px;
    border-radius: inherit;
    background: radial-gradient(800px circle at var(--x-px) var(--y-px), rgba(255, 255, 255, 0.05), transparent 40%); }
  .project:before {
    z-index: 1; }
  .project:after {
    opacity: 0;
    z-index: 2;
    transition: opacity 0.4s ease; }
  .project:hover:after {
    opacity: 1; }
  .project .project-info {
    padding: 24px; }
    .project .project-info .name {
      font-weight: bold; }
    .project .project-info .description {
      margin-top: 8px;
      color: var(--subtext); }
  .project .project-cover {
    width: 100%;
    display: flex;
    justify-content: flex-end; }
    .project .project-cover img {
      margin-right: -10%;
      margin-bottom: -10%;
      width: 100%;
      height: 100%;
      border-top-left-radius: 8px;
      filter: drop-shadow(0px 4px 11px rgba(0, 0, 0, 0.35)); }

#projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 48px;
  margin-top: 24px; }
  #projects-grid .project-griditem a.title {
    font-weight: bold;
    padding: 4px 8px;
    padding-top: 6px;
    margin-left: -8px;
    border-radius: 4px;
    color: var(--white);
    background: transparent;
    transition: background 0.1s ease-in-out; }
    #projects-grid .project-griditem a.title:hover {
      background: var(--grey-700); }
  #projects-grid .project-griditem .description {
    margin-top: 8px;
    color: var(--subtext); }

/* Experience Section */
.experience {
  display: flex;
  flex-direction: column;
  line-height: 1em;
  row-gap: 2em; }
  .experience .icon {
    align-self: flex-start; }
    .experience .icon .icon-img {
      height: 24px;
      width: 24px;
      border-radius: 8px;
      margin-right: 16px;
      padding: 10px;
      transition: background-color 0.15s ease-in-out; }
      .experience .icon .icon-img.endex {
        background-color: rgba(255, 255, 255, 0.1); }
        .experience .icon .icon-img.endex:hover {
          background-color: rgba(255, 255, 255, 0.15); }
      .experience .icon .icon-img.notion {
        background-color: rgba(255, 255, 255, 0.1); }
        .experience .icon .icon-img.notion:hover {
          background-color: rgba(255, 255, 255, 0.15); }
      .experience .icon .icon-img.browserco {
        background-color: rgba(47, 54, 255, 0.6); }
        .experience .icon .icon-img.browserco:hover {
          background-color: rgba(47, 54, 255, 0.75); }
      .experience .icon .icon-img.instagram {
        background-color: rgba(133, 61, 130, 0.22); }
        .experience .icon .icon-img.instagram:hover {
          background-color: rgba(133, 61, 130, 0.43); }
      .experience .icon .icon-img.compound {
        background-color: rgba(255, 255, 255, 0.1); }
        .experience .icon .icon-img.compound:hover {
          background-color: rgba(255, 255, 255, 0.15); }
      .experience .icon .icon-img.meta {
        background-color: rgba(38, 150, 253, 0.38); }
        .experience .icon .icon-img.meta:hover {
          background-color: rgba(38, 150, 253, 0.5); }
      .experience .icon .icon-img.apple {
        background-color: rgba(218, 218, 218, 0.15); }
        .experience .icon .icon-img.apple:hover {
          background-color: rgba(218, 218, 218, 0.23); }
      .experience .icon .icon-img.shopify {
        background-color: rgba(164, 255, 149, 0.2); }
        .experience .icon .icon-img.shopify:hover {
          background-color: rgba(164, 255, 149, 0.3); }
      .experience .icon .icon-img.dropbase {
        background-color: rgba(147, 147, 147, 0.2); }
        .experience .icon .icon-img.dropbase:hover {
          background-color: rgba(147, 147, 147, 0.33); }
      .experience .icon .icon-img.hootsuite {
        background-color: rgba(78, 170, 255, 0.51); }
        .experience .icon .icon-img.hootsuite:hover {
          background-color: rgba(78, 170, 255, 0.68); }
      .experience .icon .icon-img.waterloo {
        background-color: rgba(192, 193, 126, 0.4); }
        .experience .icon .icon-img.waterloo:hover {
          background-color: rgba(192, 193, 126, 0.5); }
      .experience .icon .icon-img.gleam {
        background-color: rgba(249, 112, 21, 0.15); }
        .experience .icon .icon-img.gleam:hover {
          background-color: rgba(249, 112, 21, 0.25); }
  .experience .row,
  .experience .line {
    display: flex;
    flex-direction: row;
    align-items: center; }
  .experience .line {
    margin-bottom: 4px; }
  .experience .title {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700; }
  .experience .tag {
    display: inline-block;
    background: #252525;
    font-weight: 700;
    font-size: 12px;
    color: #a0a0a0;
    border-radius: 4px;
    margin: 0 4px;
    padding: 6px;
    padding-bottom: 4px;
    line-height: 0.9em; }
  .experience .description {
    color: #a0a0a0;
    line-height: 1.5em; }

#map {
  height: 300px;
  border-radius: 8px;
  margin: 32px 0; }

.status-line {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-bottom: 16px; }
  .status-line .border-dashed {
    width: 100%;
    border-top: 1px dashed #707070;
    margin: 0px 16px; }
  .status-line span {
    white-space: nowrap; }

/* Blog page */
.post {
  padding-bottom: 64px; }

.post-content img {
  width: 100%;
  border-radius: 8px; }
.post-content figcaption {
  color: var(--subtext);
  line-height: 1.5em; }
.post-content a.footnote {
  font-size: 12px;
  color: var(--subtext);
  text-decoration: none;
  border-bottom: 0; }
.post-content sup, .post-content sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em; }
.post-content sub {
  top: 0.4em; }

.post-list {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--highlight); }

.post-item {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  padding: 16px 0;
  color: var(--white);
  border-top: 1px solid var(--highlight); }

.post-date {
  color: var(--subtext); }

.post-list .post-title,
.post-list .post-date {
  transition: color 100ms ease-in-out; }
.post-list.active .post-item .post-title {
  color: var(--grey-600); }
.post-list.active .post-item .post-date {
  color: var(--grey-700); }
.post-list.active .post-item:hover .post-title {
  color: var(--white); }
.post-list.active .post-item:hover .post-date {
  color: var(--subtext); }

.post-header-img {
  border-radius: 8px; }

.case-study-metadata {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 32px;
  margin-top: 24px;
  margin-bottom: 64px; }
  .case-study-metadata .metadata-item {
    display: flex;
    flex-direction: column;
    gap: 4px; }
    .case-study-metadata .metadata-item .header {
      font-size: 16px;
      font-weight: 700; }
    .case-study-metadata .metadata-item .description {
      font-size: 14px;
      color: var(--subtext); }
      .case-study-metadata .metadata-item .description ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 4px; }
        .case-study-metadata .metadata-item .description ul li {
          padding-left: 0; }

.transition-rotate {
  transition: transform 1s ease-in-out; }

@keyframes enter {
  0% {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: none; } }
[data-animate] {
  --stagger: 0;
  --delay: 120ms;
  --start: 0ms; }

[data-animate] {
  animation: enter 0.6s both;
  animation-delay: calc(var(--stagger) * var(--delay) + var(--start)); }

@media (max-width: 450px) {
  .dynamic-breakpoint {
    display: none; } }
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none; }
  .no-scrollbar::-webkit-scrollbar {
    display: none; }