:root {
  color-scheme: dark;
}

body {
  margin: 0;
}

a:focus-visible {
  outline: 2px solid #c6a4df;
  outline-offset: 6px;
}

::selection {
  background: #413648;
  color: #f5ecfa;
}

section {
  scroll-margin-top: 30px;
}

.work-page {
  background:#201b26;
  color:#dbd3e0;
  font:14px/1.8 ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;
  overflow-wrap:anywhere
}

.work-page * {
  box-sizing:border-box
}

.work-page .page {
  --space:40px;
  padding:64px 46px
}

.work-page .page {
  max-width:892px;
  margin:auto
}

.work-page p {
  margin:0 0 16px
}

.work-page a {
  color:inherit
}

.work-page .profile {
  display:flex;
  align-items:center;
  gap:26px;
  margin-bottom:36px
}

.work-page .profile>img {
  width:92px;
  height:100px;
  object-fit:cover;
  border-radius:5px
}

.work-page h1 {
  font:400 30px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:-1.2px;
  margin:0 0 14px;
  color:#f5ecfa
}

.work-page h1::before {
  content:'> ';
  color:#c6a4df
}

.work-page .profile p {
  font-size:12px;
  color:#b2a3bc;
  max-width:490px;
  margin-bottom:13px
}

.work-page .github-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#c6a4df;
  text-decoration:none
}

.work-page .github-link img {
  width:16px;
  height:16px;
  filter:invert(.85)
}

.work-page .intro {
  max-width:720px
}

.work-page .section-nav {
  display:flex;
  gap:28px;
  border-bottom:1px solid #413648;
  padding:22px 0;
  margin:22px 0 0
}

.work-page .section-nav a {
  font-size:12px;
  color:#c6a4df;
  text-decoration:none
}

.work-page .section-nav a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.work-page .project-card {
  display:block;
  text-decoration:none
}

.work-page .project-row {
  display:grid;
  grid-template-columns:155px minmax(0,1fr);
  gap:30px;
  padding:var(--space) 0;
  border-bottom:1px solid #413648;
  transition:transform .25s ease, box-shadow .25s ease;
}

.work-page .project-card:hover .project-row,
.work-page .project-card:focus-visible .project-row {
  transform:translateY(-4px);
  box-shadow:0 12px 24px -12px #0008;
}

.work-page .project-art {
  padding-top:3px
}

.work-page .project-art img {
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:1200/630;
  object-fit:contain;
  background:#fff;
  border-radius:3px
}

.work-page .project-art.humor img {
  background:#210804;
  padding:12px
}

.work-page h3 {
  font:400 19px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#f5ecfa;
  letter-spacing:-.5px;
  margin:0 0 16px
}

.work-page .project-card:hover h3 {
  color:#c6a4df
}

.work-page .stack {
  font-size:11px;
  line-height:1.9;
  color:#b2a3bc;
  margin:20px 0 0
}

.work-page #experience {
  padding-top:52px
}

.work-page #experience::before {
  content:'Experience';
  color:#c6a4df;
  font-size:12px
}

.work-page #experience article {
  padding:var(--space) 0;
  border-bottom:1px solid #413648
}

.work-page .entry-top {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px
}

.work-page .date {
  color:#b2a3bc;
  font-size:11px;
  white-space:nowrap
}

.work-page .role {
  color:#b2a3bc;
  font-size:12px
}

.work-page h4 {
  font:400 14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#f5ecfa;
  margin:28px 0 12px
}

.work-page ul {
  padding-left:20px
}

.work-page li {
  margin-bottom:12px
}

.work-page li::marker {
  color:#b2a3bc
}

@media(max-width:620px) {
  .work-page .page {
  padding:36px 22px
}

.work-page .profile {
  align-items:flex-start;
  flex-direction:column;
  gap:22px
}

.work-page h1 {
  font-size:26px
}

.work-page .project-row {
  grid-template-columns:1fr;
  gap:24px
}

.work-page .project-art {
  max-width:240px
}

.work-page .entry-top {
  display:block
}

.work-page .date {
  display:block;
  margin-bottom:14px
}


}


.work-page .section-nav a[aria-current] {
  text-decoration: underline;
  text-underline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .work-page .project-row {
    transition:none;
  }

  .work-page .project-card:hover .project-row,
  .work-page .project-card:focus-visible .project-row {
    transform:none;
  }
}