* {
  box-sizing: border-box;
  border-radius: 0 !important;
}

:root {
  --void: #02050d;
  --canvas: #050b18;
  --raised: #091326;
  --ink: #dcecff;
  --muted: #8295b1;
  --blue: #4d8dff;
  --electricBlue: #69d8ff;
  --deepBlue: #163c89;
  --violet: #6d5dff;
  --line: rgba(106, 151, 218, 0.19);
  --silver: #b8d8ff;
  --white: #f5f8ff;
  --black: #02050d;
  color-scheme: dark;
}

html {
  min-height: 100%;
  background: var(--void);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background-color: var(--void);
  background-image: url("assets/archive-bg.svg");
  background-size: cover;
  background-attachment: fixed;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

body.home-bg {
  background-image: url("assets/images/page-home-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

body.home-bg .site {
  background: rgba(2, 5, 13, 0.48);
}

body.about-bg {
  background-image: url("assets/images/page-about-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

body.about-bg .site {
  background: rgba(2, 5, 13, 0.68);
}

body.work-bg {
  background-image: url("assets/images/page-work-bg.jpg");
  background-size: cover;
  background-position: center 78%;
  background-repeat: no-repeat;
}

body.work-bg .site {
  background: rgba(2, 5, 13, 0.7);
}

body.now-bg {
  background-image: url("assets/images/page-now-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

body.now-bg .site {
  background: rgba(2, 5, 13, 0.72);
}

@media (min-width: 900px) {
  body.about-bg {
    background-position: center center;
  }

  body.work-bg {
    background-position: center 78%;
  }
}

body::before {
  content: none;
}

body::after {
  content: none;
}

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

button,
input,
textarea {
  font: inherit;
}

::selection {
  background: var(--white);
  color: var(--black);
}

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shell {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}

.topbar {
  padding: 1.25rem 0 0;
}

.nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(0.6rem, 2vw, 1.2rem);
  font-family: "IBM Plex Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
  text-transform: lowercase;
}

.interactive {
  color: var(--blue);
  background: transparent;
  padding: 0.14rem 0.32rem;
  transition: background-color 140ms ease, color 140ms ease;
}

.interactive:hover,
.interactive:focus-visible,
.interactive[aria-current="page"] {
  color: var(--black);
  background: var(--white);
  outline: none;
}

main {
  flex: 1;
}

.index-main {
  min-height: calc(100vh - 9rem);
  display: flex;
  align-items: center;
}

.landing-copy {
  max-width: 760px;
  padding: 10vh 0 8vh;
}

.kicker,
.meta,
.tech,
.date,
.page-label,
.external-links,
.article-link {
  font-family: "IBM Plex Mono", "JetBrains Mono", Consolas, monospace;
}

.kicker,
.page-label {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: clamp(0.72rem, 1.2vw, 0.88rem);
  text-transform: lowercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 1.5rem;
  color: var(--white);
  font-size: clamp(3.4rem, 9vw, 8.6rem);
  line-height: 0.9;
  font-weight: 650;
  text-transform: lowercase;
}

.title-art {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.8rem) clamp(1rem, 3vw, 2rem) 0;
  isolation: isolate;
}

.title-art::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-image: linear-gradient(rgba(2, 5, 13, 0.5), rgba(2, 5, 13, 0.78)), var(--heading-image);
  background-size: cover;
  background-position: center;
  opacity: 0.62;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#home-title.title-art::before {
  background-position: center 32%;
}

.about-title::before {
  background-position: center 26%;
}

.work-title::before {
  background-position: center;
}

.blog-title::before {
  background-position: center 38%;
}

.now-title::before {
  background-position: center 22%;
}

.page-title {
  margin-bottom: clamp(2rem, 5vw, 4rem);
  font-size: clamp(3rem, 9vw, 8rem);
}

.lead {
  max-width: 760px;
  color: var(--ink);
  font-size: clamp(1.35rem, 3.4vw, 3.2rem);
  line-height: 1.08;
}

.landing-copy .lead {
  max-width: 840px;
}

p {
  color: var(--silver);
  font-size: clamp(1rem, 1.55vw, 1.2rem);
  line-height: 1.62;
}

.quiet {
  color: var(--muted);
}

.external-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
  font-size: 0.86rem;
}

.identity-small {
  justify-self: end;
  align-self: end;
  width: min(23vw, 280px);
  min-width: 170px;
  opacity: 0.92;
}

.identity-tall {
  width: min(31vw, 360px);
  min-width: 220px;
  opacity: 0.9;
}

.art-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  object-fit: cover;
}

.identity-small .art-image,
.identity-tall .art-image {
  aspect-ratio: 4 / 5;
}

.page {
  padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6rem);
}

.about-grid {
  display: block;
}

.text-stack {
  max-width: 760px;
}

.text-stack p + p {
  margin-top: 1.35rem;
}

.short-blocks {
  margin-top: 3.5rem;
}

.short-blocks p {
  max-width: 680px;
}

.archive {
  max-width: 900px;
}

.archive-intro {
  margin-bottom: 3rem;
}

.project {
  padding: 2.1rem 0;
  border-top: 1px solid var(--line);
}

.project:last-child {
  border-bottom: 1px solid var(--line);
}

.project h2,
.now-section h2 {
  margin-bottom: 1rem;
  color: var(--white);
  font-size: clamp(1.45rem, 2.8vw, 2.4rem);
  font-weight: 560;
  text-transform: lowercase;
}

.project p {
  max-width: 760px;
}

.tech {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.8;
}

.identity-small img,
.identity-tall img {
  display: block;
  width: 100%;
  height: auto;
}

.blog-list {
  max-width: 920px;
  border-top: 1px solid var(--line);
}

.blog-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 2rem;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}

.blog-row h2 {
  margin-bottom: 0.45rem;
  color: var(--white);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 540;
  text-transform: lowercase;
}

.blog-row p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1rem;
}

.date,
.arrow {
  color: var(--muted);
  font-family: "IBM Plex Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.78rem;
}

.arrow {
  justify-self: end;
}

.article {
  max-width: 760px;
}

.article h1 {
  font-size: clamp(2.6rem, 7vw, 5.8rem);
  line-height: 0.95;
}

.article p {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
}

.article-nav {
  margin-bottom: 3rem;
  font-family: "IBM Plex Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.8rem;
}

.now {
  max-width: 820px;
}

.now-section {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}

.now-section:last-of-type {
  border-bottom: 1px solid var(--line);
}

.footer {
  padding: 1.25rem 0 1.8rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.76rem;
}

.footer .shell {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.footer-links {
  display: flex;
  gap: 0.7rem;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.footer-link::before {
  width: 0.82rem;
  height: 0.82rem;
  content: "";
  background: currentColor;
  -webkit-mask: var(--footer-icon) center / contain no-repeat;
  mask: var(--footer-icon) center / contain no-repeat;
}

.footer-github {
  --footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.64 0 8.13c0 3.59 2.29 6.63 5.47 7.7.4.08.55-.18.55-.39v-1.38c-2.23.49-2.7-1.09-2.7-1.09-.36-.94-.89-1.19-.89-1.19-.73-.51.06-.5.06-.5.8.06 1.23.84 1.23.84.72 1.25 1.87.89 2.33.68.07-.53.28-.89.51-1.09-1.78-.21-3.64-.91-3.64-4.02 0-.89.31-1.61.82-2.18-.08-.21-.36-1.04.08-2.15 0 0 .67-.22 2.2.83A7.48 7.48 0 0 1 8 3.91c.68 0 1.36.09 1.99.28 1.53-1.05 2.2-.83 2.2-.83.44 1.11.16 1.94.08 2.15.51.57.82 1.29.82 2.18 0 3.12-1.87 3.81-3.65 4.01.29.25.54.75.54 1.51v2.23c0 .21.15.47.55.39A8.08 8.08 0 0 0 16 8.13C16 3.64 12.42 0 8 0z'/%3E%3C/svg%3E");
}

.footer-linkedin {
  --footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.36 8h4.28v14H.36V8zM8 8h4.1v1.92h.06c.57-1.08 1.96-2.22 4.04-2.22 4.32 0 5.12 2.85 5.12 6.56V22h-4.27v-6.88c0-1.64-.03-3.75-2.28-3.75-2.29 0-2.64 1.79-2.64 3.63v7H8V8z'/%3E%3C/svg%3E");
}

.footer-email {
  --footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 8.2L4.6 7H4v10h16V7h-.6L12 13.2zM6.25 7 12 11.8 17.75 7H6.25z'/%3E%3C/svg%3E");
}

@media (max-width: 760px) {
  .shell {
    width: min(100% - 1.2rem, 1120px);
  }

  .nav {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .index-main,
  .about-grid {
    display: block;
  }

  .landing-copy {
    padding-top: 14vh;
  }

  h1 {
    font-size: clamp(3rem, 18vw, 5rem);
  }

  .identity-small,
  .identity-tall {
    width: min(58vw, 280px);
    min-width: 0;
    margin: 2rem 0 0 auto;
  }

  .blog-row {
    grid-template-columns: 1fr 1.5rem;
    gap: 0.75rem;
  }

  .blog-row .date {
    grid-column: 1 / -1;
  }

  .footer .shell {
    display: block;
  }

  .footer-links {
    margin-top: 0.65rem;
  }
}