@font-face {
  font-family: "Timeless Sans";
  src: url("assets/fonts/TimelessSansVF.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/*
  Set data-theme="dark" on <html> to swap the two colors.
  Tints are opacities of the ink color.
*/
:root {
  color-scheme: light;
  --ink: oklch(0.2 0.003 240);
  --canvas: oklch(0.993 0 0);
  --underline: 0.2;
  --secondary: 0.65;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: oklch(0.993 0 0);
  --canvas: oklch(0.2 0.003 240);
  --underline: 0.3;
  --secondary: 0.6;
}

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

html {
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Timeless Sans", sans-serif;
  font-size: 1rem;
  font-weight: 450;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.15px;
  font-feature-settings: "ss01" 1;
  font-variation-settings: "ital" 0, "STYL" 0;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

h1,
h2,
h3,
.links a {
  font-weight: 500;
  font-feature-settings: "ss01" 1, "ss02" 1;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

a:not(.frame) {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: oklch(from var(--ink) l c h / var(--underline));
  text-underline-offset: 30%;
  text-decoration-skip-ink: auto;
  transition: text-decoration-color 100ms ease-out;
}

a:not(.frame):hover {
  text-decoration-color: var(--ink);
}

a:focus-visible,
.theme:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  inset-inline-start: 16px;
  top: 16px;
  padding: 8px 12px;
  background: var(--canvas);
  transform: translateY(-150%);
}

.skip:focus {
  transform: none;
}

.theme {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 100ms ease-out;
}

.theme:hover {
  background: oklch(from var(--ink) l c h / 0.05);
}

:root[data-theme="dark"] .theme:hover {
  background: oklch(from var(--ink) l c h / 0.1);
}

.theme-moon,
.theme-sun {
  grid-area: 1 / 1;
  transition:
    opacity 250ms ease-in-out,
    filter 250ms ease-in-out,
    transform 250ms ease-in-out;
}

.theme-moon,
:root[data-theme="dark"] .theme-sun {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.theme-sun,
:root[data-theme="dark"] .theme-moon {
  opacity: 0;
  filter: blur(2px);
  transform: scale(0.25);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page {
  padding: 120px 24px 64px;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 96px;
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
}

.contents {
  display: contents;
}

.column {
  width: 100%;
  max-width: 600px;
}

.muted,
.when,
.about p,
.role p {
  color: oklch(from var(--ink) l c h / var(--secondary));
}

.legal {
  color: oklch(from var(--ink) l c h / 0.6);
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.intro-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  background: oklch(from var(--ink) l c h / 0.1);
  box-shadow: inset 0 0 0 1px oklch(from var(--ink) l c h / 0.05);
}

.intro-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
  row-gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about p + p {
  margin-top: 8px;
}

.experience {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.roles {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 32px;
  align-items: start;
}

.role {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.work {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.work-more {
  width: 100%;
  max-width: none;
  text-align: center;
}

.frame {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  overflow: clip;
  isolation: isolate;
  border-radius: 16px;
  background: var(--canvas);
  color: var(--ink);
  text-decoration: none;
  user-select: none;
}

.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px oklch(from var(--ink) l c h / 0.1);
  pointer-events: none;
}

.frame img,
.frame mux-video {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
}

.frame.is-loading {
  background: oklch(from var(--ink) l c h / 0.02);
  animation: pulse 2s ease-in-out infinite alternate;
}

.frame.is-playing > .frame-poster {
  animation: none;
  opacity: 0;
}

.frame.has-ratio {
  aspect-ratio: var(--ratio);
}

.frame.has-ratio::before {
  content: "";
  display: block;
  padding-bottom: var(--ratio-pad);
}

.frame.has-ratio > img,
.frame.has-ratio > mux-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.frame.is-empty {
  background: oklch(from var(--ink) l c h / 0.02);
  aspect-ratio: 4 / 3;
}

.frame.is-loading img:not(.frame-poster),
.frame.is-loading .frame-overlay {
  opacity: 0;
}

.frame-poster {
  background: var(--canvas);
}

@keyframes pulse {
  from {
    background-color: oklch(from var(--ink) l c h / 0.02);
  }

  to {
    background-color: oklch(from var(--ink) l c h / 0.05);
  }
}

.frame mux-video {
  pointer-events: none;
}

.frame-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  background: oklch(0.2 0.003 240 / 0.6);
  color: oklch(0.993 0 0);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.frame-copy {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  font-weight: 500;
  font-feature-settings: "ss01" 1;
}

.frame-title {
  flex: 1 1 auto;
  min-width: 0;
}

.frame:hover .frame-overlay,
.frame:focus-visible .frame-overlay {
  opacity: 1;
}

.frame.is-loading:hover .frame-overlay,
.frame.is-loading:focus-visible .frame-overlay {
  opacity: 0;
}

.frame-action {
  flex: 0 0 auto;
  margin-left: auto;
  font-feature-settings: "ss01" 1, "ss02" 1;
  text-align: right;
  white-space: nowrap;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: oklch(0.993 0 0 / 0.2);
  text-underline-offset: 30%;
  text-decoration-skip-ink: auto;
  transition: text-decoration-color 100ms ease-out;
}

.frame:hover .frame-action,
.frame:focus-visible .frame-action {
  text-decoration-color: oklch(0.993 0 0);
}

.connect {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

::selection {
  background: oklch(from var(--ink) l c h / 0.15);
  color: var(--ink);
}

@media (forced-colors: active) {
  a:focus-visible,
  .theme:focus-visible {
    outline: 2px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  a:not(.frame),
  .theme,
  .theme-moon,
  .theme-sun,
  .frame-action,
  .frame-overlay {
    transition: none;
  }

  .frame.is-loading {
    animation: none;
  }
}

@media (min-width: 641px) {
  .stack > footer {
    margin-top: 24px;
  }
}

@media (max-width: 640px) {
  .page {
    padding-top: 80px;
  }

  .work > .frame + .frame {
    margin-top: -24px;
  }

  .roles {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  .role {
    margin-bottom: 28px;
  }

  .roles > .role:last-child {
    margin-bottom: 0;
  }
}