/* Variables */
:root {
  --bg: #fff;
  --fg: #0b0c0f;
  --fg-rgb: 11 12 15;
  --divider: #e0e2e7;

  --divider-shadow-strength: .05;

  --split-default: 33.333vw;
  --split-home: 50vw;
  --split: var(--split-default);

  --frame-size: 23px;
  --frame-bright: .5;
  --frame-saturate: .8;

  --pad: 6rem;
  --pad-sm: 2.5rem;

  --left-nudge: -4vh;
  --left-nudge-sm: -2vh;

  --underline: linear-gradient(90deg, rgb(var(--fg-rgb) / .9), rgb(var(--fg-rgb) / .45));

  --page-bg:
    radial-gradient(1600px 800px at 75% -10%, rgba(52,81,255,.16), transparent 70%),
    radial-gradient(1100px 550px at 15% 100%, rgba(255,107,107,.20), transparent 70%),
    var(--bg);
}

/* Base */
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  text-transform: uppercase;
}
body.is-home { --split: var(--split-home); }

.wrap {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

/* Global frame */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  padding: var(--frame-size);
  background: conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: saturate(var(--frame-saturate)) brightness(var(--frame-bright));
  opacity: .85;
  pointer-events: none;
  z-index: 9999;
}
body::after {
  content: "";
  position: fixed;
  top: var(--frame-size);
  left: var(--frame-size);
  right: var(--frame-size);
  bottom: var(--frame-size);
  box-shadow: 0 0 0 9999px var(--bg);
  pointer-events: none;
  z-index: 9998;
}

/* Divider */
.divider {
  position: fixed;
  top: 0;
  left: var(--split);
  width: 1px;
  height: 100dvh;
  background: linear-gradient(180deg, transparent 0%, rgb(var(--fg-rgb) / .12) 12%, rgb(var(--fg-rgb) / .12) 95%, transparent 100%);
  transition: left 280ms ease;
}
.divider::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 24px;
  height: 100%;
  background: linear-gradient(90deg, rgb(var(--fg-rgb) / var(--divider-shadow-strength)), rgb(var(--fg-rgb) / 0));
  pointer-events: none;
}

/* Left column */
.left {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--split);
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: var(--pad);
  box-sizing: border-box;
  padding-right: clamp(1rem, 6vw, var(--pad));
  background: linear-gradient(180deg, rgba(52,81,255,.04), rgba(255,255,255,0) 40%);
  gap: 1rem;
  transform: translateY(var(--left-nudge));
  text-align: right;
  transition: width 280ms ease, padding-right 280ms ease;
}

/* Main */
.main {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: calc(var(--split) + clamp(1rem, 6vw, var(--pad)));
  padding-right: var(--pad);
  padding-top: clamp(1rem, 8vh, var(--pad));
  padding-bottom: clamp(1rem, 8vh, var(--pad));
  transition: padding-left 280ms ease;
}

/* Brand */
.brand { margin: 0; flex: 0 1 auto; min-width: 0; }
.brand .home-link { display: inline-block; position: relative; }
.brand-img { display: block; width: clamp(180px, 20vw, 220px); height: auto; max-width: 100%; }
.brand .home-link::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,.48) 0%,
      rgba(255,255,255,.12) 22%,
      rgba(255,255,255,.56) 40%,
      rgba(255,255,255,.16) 58%,
      rgba(255,255,255,.36) 78%,
      rgba(255,255,255,.10) 100%
    ),
    repeating-linear-gradient(100deg,
      rgba(255,255,255,.02) 0px,
      rgba(255,255,255,.02) 22px,
      rgba(0,0,0,.02) 22px,
      rgba(0,0,0,.02) 44px
    ),
    radial-gradient(60% 100% at 50% -20%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(45% 60% at 80% 120%, rgba(0,0,0,.18), transparent 70%);
  mix-blend-mode: overlay;
  opacity: .68;
  background-size: 220% 100%, auto, auto, auto;
  background-position: -40% 0, 0 0, 0 0, 0 0;
  transition: opacity 200ms ease, background-position 800ms ease;
}
.brand .home-link:hover::after,
.brand .home-link:focus::after { opacity: .9; }
.brand .home-link.is-shimmering::after { opacity: .9; animation: sheen-sweep 1400ms ease-out 1; }

@supports ((-webkit-mask-image: url('/assets/img/logo.png')) or (mask-image: url('/assets/img/logo.png'))) {
  .brand .home-link::after {
    mix-blend-mode: normal;
    -webkit-mask-image: url('/assets/img/logo.png');
    mask-image: url('/assets/img/logo.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: .78;
  }
}

@keyframes sheen-sweep {
  0% { background-position: -40% 0, 0 0, 0 0, 0 0; }
  100% { background-position: 140% 0, 0 0, 0 0, 0 0; }
}

/* Navigation */
.nav { display: flex; flex-direction: column; gap: 0; margin: 0; align-items: flex-end; }
.nav a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  padding: .6rem 0;
  background-image: var(--underline);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 180ms ease;
}
.nav a + a { border-top: 1px solid rgb(var(--fg-rgb) / .08); margin-top: .6rem; padding-top: .6rem; }
.nav a:hover,
.nav a.active { background-size: 100% 2px; }

/* Sections */
section { max-width: 70ch; margin: 0 0 4rem 0; font-size: .8rem; }
.pane { display: none; }
.pane.active { display: block; }
section h2 {
  font-weight: 600;
  letter-spacing: .08em;
  font-size: .9rem;
  margin: 1.75rem 0 .75rem 0;
  padding-top: 3rem;
  opacity: .9;
}
section ul { list-style: none; padding: 0; margin: 0; }
section h3 { font-weight: 700; margin: 0; color: rgb(var(--fg-rgb) / .6); }
section p,
section li { margin: 30px 0; line-height: 1.6; max-width: 400px; color: rgb(var(--fg-rgb) / .5); }
section a { color: inherit; text-decoration: none; }
section a:hover { text-decoration: underline; text-underline-offset: 2px; }
.pane > h2 {
  display: inline-block;
  padding-bottom: .6rem;
  background-image: var(--underline);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 180ms ease;
}
.pane.active > h2 { background-size: 100% 2px; }

/* Special panes */
#home.pane { position: relative; min-height: min(70vh, 720px); }

/* Client logos */
.client-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.5rem; margin-top: 1rem; }
.client-logos img { height: 40px; width: auto; display: block; }
.client-logos img[src$="mozilla.png"],
.client-logos img[src$="asrc.png"] { filter: invert(1) brightness(.05) contrast(115%); }

/* Media queries */
@media (max-width: 700px) {
  .client-logos img { height: 24px; }
}
@media (min-width: 701px) {
  #past-work .client-logos { max-width: 400px; }
}
@media (max-width: 700px) {
  :root { --header-h: calc(2 * var(--pad-sm) + 1rem); }
  .wrap { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; }
  body { overflow: auto; }
  .divider { display: none; }
  .left {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    transform: none;
    padding: var(--pad-sm);
    padding-top: calc(var(--pad-sm) + env(safe-area-inset-top, 0px));
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 0;
    background: transparent;
    z-index: 100;
    min-height: var(--header-h);
  }
  .left::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    background: var(--page-bg);
    background-attachment: fixed;
    pointer-events: none;
    z-index: -1;
  }
  .mobile-header-divider {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    height: 0;
    border-top: 1px solid rgb(var(--fg-rgb) / .12);
    z-index: 10001;
    pointer-events: none;
  }
  .mobile-header-divider::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 16px;
    background: linear-gradient(180deg, rgb(var(--fg-rgb) / var(--divider-shadow-strength)), rgb(var(--fg-rgb) / 0));
    pointer-events: none;
  }
  .wrap::before,
  .wrap::after {
    content: "";
    position: fixed;
    top: var(--frame-size);
    bottom: var(--frame-size);
    width: var(--frame-size);
    background: var(--page-bg);
    background-attachment: fixed;
    pointer-events: none;
    z-index: 10000;
  }
  .wrap::before { left: 0; }
  .wrap::after { right: 0; }
  .brand-img { width: clamp(96px, 26vw, 200px); }
  .nav {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    margin: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    font-size: clamp(.58rem, 1.8vw, .95rem);
    letter-spacing: clamp(.02em, .5vw, .07em);
    display: inline-flex;
    align-items: center;
    height: 1.6rem;
    line-height: 1;
    padding: 0;
    border: 0;
    vertical-align: middle;
    white-space: nowrap;
  }
  .nav a + a {
    position: relative;
    margin-left: clamp(.25rem, 1.4vw, .8rem);
    padding-left: clamp(.25rem, 1.4vw, .8rem);
    border: 0;
    margin-top: 0;
    padding-top: 0;
  }
  .nav a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 1px;
    height: 1.2em;
    background: rgb(var(--fg-rgb) / .12);
  }
  .main {
    display: block;
    padding: var(--pad-sm) calc(var(--pad-sm) + .7rem) var(--pad-sm);
    padding-bottom: calc(var(--pad-sm) + var(--frame-size) + env(safe-area-inset-bottom, 0px));
  }
  section h2 { margin: .5rem 0 .5rem 0; padding-top: .6rem; }
  .main .pane.active > h2 { margin-top: 0; }
}
@media (max-width: 420px) {
  :root { --header-h: calc(2 * var(--pad-sm)); }
  section h2 { padding: 0; }
}