:root {
  color-scheme: dark;
  --color-background: #000;
  --color-text: #fff;
  --color-muted: #8f8f8f;
  --color-button: #212121;
  --color-button-hover: #434343;
}

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

html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font: 14px / 21px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
p,
figure {
  margin: 0;
}

h1 {
  font: inherit;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

::selection {
  background: #bbb;
}

.portfolio {
  min-height: 100vh;
  padding: 80px 40px;
}

.intro {
  position: fixed;
  width: 342px;
}

.intro__role {
  margin-bottom: 21px;
}

.intro__bio,
.project__dates {
  color: var(--color-muted);
}

.contact {
  display: grid;
  justify-items: start;
  row-gap: 21px;
  margin-top: 38px;
  padding-bottom: 31px;
}

.contact__link {
  /* Keep the original inline button size without changing the row spacing. */
  margin-block: -6px;
  padding: 6px 16px;
  border-radius: 14px;
  background: var(--color-button);
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.contact__link:hover {
  background: var(--color-button-hover);
}

.projects {
  display: grid;
  gap: 64px;
  width: 346px;
  margin-left: auto;
  padding-bottom: 88px;
}

.project__image {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 12px;
  border-radius: 34px;
}

.project__caption {
  padding: 20px 10px;
}

.project__dates {
  display: block;
}

@media (max-width: 884px) {
  .portfolio {
    padding: 80px 30px;
  }

  .intro {
    position: static;
    width: 100%;
    margin-bottom: 90px;
    padding-block: 40px;
  }

  .projects {
    width: 100%;
    max-width: 540px;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact__link {
    transition: none;
  }
}