:root {

  /* Colors */

  --text-primary: #FFFFFF;
  --text-secondary: #FFFFFF80;
  --text-tertiary: #FFFFFF60;
  --text-dark: #1E3D48;

  --accent: #FBAB85;
  --accent-secondary: #FBAB8575;
  --accent-transparent: #FBAB8520;

  --background: #407284;
}

::selection {
  background: var(--accent-transparent);
}

*:focus-visible {
  outline-color: var(--accent);
  outline-style: solid;
  outline-offset: -1px;
  outline-width: 2px;
  border-radius: 0.5rem;
}

html {
  background: var(--background);
  overflow-x: hidden;
}

* {
  font-display: block;
  text-rendering: optimizeLegibility;
  
  scroll-behavior: smooth;

  font-family: "Source Sans", sans-serif;
  font-size: 1rem;
  font-weight: 450;
  letter-spacing: 0.15;
  line-height: 1.5;
  text-wrap: pretty;

  color: var(--text-primary);
}
@media (max-width: 25rem) {
  * {
    line-height: 1.6;
  }
}

body {
  width: 100vw;
  display: flex;
  flex-direction: column;
  
  display: flex;
  overflow-x: hidden;
}
body * {
  font-size: 1.125rem;
}

main {
  flex: 1;
  margin: 0 auto;

  width: 100%;

  display: flex;
  flex-direction: column;

  padding: 5rem 2rem 0 2rem;
}
@media (min-width: 50rem) {
  main {
    width: 48rem;
  }
}

p,
p *,
ul,
ul *,
ol,
ol * {
  font-family: "Source Serif", serif;
  hyphens: auto;
}

h1 {
  font-family: "PP Watch", sans-serif;
  font-variant: all-small-caps;
  font-size: 2rem;
  letter-spacing: 0.3rem;
  line-height: 1.2;
}
@media (max-width: 40rem) {
  h1 {
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
  }
}

h2 {
  font-family: "PP Watch", sans-serif;
  font-variant: all-small-caps;
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
  line-height: 1.3;
}

h3 {
  font-family: "Source Sans", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.3;
}

h4 {
  font-family: "Source Sans", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.025rem;
}

hgroup {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}
hgroup p {
  font-family: "Source Sans", sans-serif;
}

strong {
  font-weight: 750;
  letter-spacing: 0.02rem;
}

small {
  font-size: 0.8rem;
  font-weight: 500;
}

.smallcaps {
  font-family: "Source Sans", sans-serif;
  font-variant: all-small-caps;
  font-weight: 550;
  letter-spacing: 0.125rem;
}

blockquote {
  border-left: solid 0.25rem var(--accent);
  padding-left: 1.5rem;
  font-family: "Source Serif", serif;
  font-weight: 500;
  letter-spacing: 0.02rem;
  font-style: italic;
}
blockquote div {
  margin: 0;
  margin-top: 0.5rem;
  padding: 0;
  text-align: left;
  font-weight: 620;
  opacity: 0.65;
  font-style: normal;
}

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

.button-primary {
  display: flex;
  align-items: center;
  height: 2.25rem;
  padding-inline: 1.25rem;
  padding-block: 0;
  font-weight: 620;
  color: var(--text-dark);
  background: var(--accent);
  border-radius: 0.375rem;
  box-shadow:
    0 0 20px 20px #FFB99810,
    0 0 0 8px #00000010,
    0 0 2px 1px #40728460 inset,
    0 3px 6px 0 #00000015;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease-out;
}

.button-primary:hover {
  background: #FFC4A8;
  box-shadow:
    0 0 20px 20px #FFB99825,
    0 0 0 8px #00000010,
    0 0 2px 1px #40728460 inset,
    0 3px 6px 0 #00000015;
  transition: box-shadow 0.3s ease-out;
}

.button-secondary {
  display: flex;
  align-items: center;
  height: 2.25rem;
  padding-inline: 1.25rem;
  padding-block: 0;
  font-weight: 620;
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 0.375rem;
  box-shadow: 0 3px 6px 0 #00000015;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease-out;
}

.button-secondary:hover {
  color: var(--text-dark);
  border: 2px solid #FFC4A8;
  background: #FFC4A8;
  box-shadow:
    0 0 20px 20px #FFB99810,
    0 3px 6px 0 #00000015;
  transition: box-shadow 0.3s ease-out;
}

.button-primary:active,
.button-secondary:active {
  opacity: 0.85;
}


/* Article */

article {
  flex: 1;

  margin-top: 4rem;

  display: flex;
  flex-direction: column;
  align-items: center;
}

article h1,
article h2,
article h3,
article h4,
article > p,
article > ul,
article > ol,
article pre,
article blockquote {
  width: 44rem;
  margin-top: 2.5rem;
}

@media (max-width: 64rem) {
  article h1,
  article h2,
  article h3,
  article h4,
  article p,
  article ul,
  article ol,
  article pre,
  article blockquote {
    width: calc(100% + 0.75rem);
    margin-right: -0.75rem;
  }
}

article h1 + p,
article h2 + p,
article h1 + ul,
article h2 + ul,
article h1 + ol,
article h2 + ol {
  margin-top: 1.5rem;
}
article h3 + p,
article h4 + p {
  margin-top: 1rem;
}

article figure + h1,
article figure + h2,
article figure + h3,
article figure + h4,
article figure + p,
article figure + ul,
article figure + ol,
article figure + blockquote {
  margin-top: 4rem;
}

@media (max-width: 50rem) {
  article figure + h1,
  article figure + h2,
  article figure + h3,
  article figure + h4,
  article figure + p,
  article figure + ul,
  article figure + ol,
  article figure + blockquote {
    margin-top: 2rem;
  }
}

article > ul,
article > ol {
  margin-top: 1.5rem;
  counter-reset: item;
}
article > ul li p,
article > ol li p {
  margin-top: 1rem;
}
article > ul li,
article > ol li {
  display: flex;
  counter-increment: item;
}
article > ul li::before {
  content: "—";
  margin-top: 1rem;
  margin-right: 1rem;
  margin-left: 1rem;
  color: var(--text-secondary);
}

article > ol li::before {
  content: counters(item, ".") ". ";
  margin-top: 1rem;
  margin-right: 1rem;
  margin-left: 1rem;
  color: var(--text-secondary);
}

article a {
  color: currentColor;
  text-decoration: underline;
  text-decoration-color: var(--accent-secondary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: all 0.4s ease-out;
}
article a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
  transition: none;
}

article > figure {
  margin-top: 4rem;
  width: 44rem;
  overflow: hidden;
}

@media (max-width: 50rem) {
  article > figure {
    margin-top: 4rem;
    width: calc(100% + 4rem);
  }  
  article > figure + figure {
    margin-top: 0.75rem;
  }
}

article > figure img {
  width: 100%;
  object-fit: cover;
}

article > figure iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
article > figure video {
  width: 100%;
}

article figcaption {
  margin-top: 1rem;

  font-size: 0.8rem;
  color: var(--text-secondary);
}


/* Home */

.home--hero {
  margin-inline: -100rem;
  padding-inline: 100rem;
  height: 100vh;
  margin-top: -5rem;
  margin-bottom: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.home--hero div {
  width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.home--hero h1 {
  text-align: center;
}
.home--hero span {
  text-align: center;
  letter-spacing: 0.05rem;
}
@media (max-width: 40rem) {
  .home--hero span {
    font-size: 1rem;
  }
}

.home--hero figure {
  position: absolute;
  inset: 0;
  z-index: -10;
}
.home--hero figure img,
.home--hero figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.start-button {
  position: absolute;
  top: calc(100vh - 6rem);
  padding: 1rem;
}
.start-button::before {
  content: "";
  display: inline-block;
  height: 1.25rem;
  width: 1.25rem;
  border-right: 3px solid var(--text-primary);
  border-bottom: 3px solid var(--text-primary);
  rotate: 45deg;
  transition: all 0.3s ease;
}
.start-button:hover::before {
  border-color: var(--accent);
  transition: none;
}


/* Stepper */

.stepper {
  position: absolute;
  top: 0;
  right: 0;
  height: calc(100% + 0.5rem);
  margin-block: -0.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.stepper > div {
  flex: 1;
  width: 1rem;
  padding-block: 0.25rem;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}

.stepper > div > span {
  position: relative;
  display: block;
  width: 0.5rem;
  height: 100%;
  border-radius: 0.25rem;
  background: #ffffff10;
  overflow: hidden;
  transition: all 0.2s ease;
}

/* Progress fill pseudo-element */
.stepper > div > span::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 0%;
  border-radius: 0.25rem;
  background: #ffffff40;
}

/* Fill animation */
@keyframes progressFill {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}

/* Active step = animated fill */
.stepper > div.active > span::after {
  animation: progressFill 8s linear forwards;
}

.stepper > div:hover > span {
  width: 1rem;
  background: var(--accent);
  transition: background 0s, width 0.2s ease;
}
.stepper > div:hover > span::after {
  background: var(--accent);
}

/* Pause animation when hovering the section */
section:hover .stepper > div.active > span::after {
  animation-play-state: paused;
}

/* Clicked/completed step = instantly filled */
.stepper > div.is-complete > span::after {
  height: 100%;
  animation: none;
}


/* Services */

.home--services {
  margin-top: 3rem;
  margin-bottom: 10rem;
  position: relative;
  display: grid;
}

.home--services .home--services--item {
  grid-area: 1 / 1;
  display: flex;
  visibility: hidden;
  opacity: 0;
}
.home--services .home--services--item.active {
  visibility: visible;
  opacity: 1;
}

.home--services .home--services--item div {
  padding-inline: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}
.home--services .home--services--item div * {
  font-family: "Source Sans", sans-serif;
}
.home--services .home--services--item div h3 {
  font-size: 1.5rem;
}

.home--services figure {
  flex-shrink: 0;
  width: 24rem;
  height: 24rem;
  border-radius: 0.5rem;
  overflow: hidden;
  pointer-events: none;
}
.home--services figure img,
.home--services figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile: horizontal stepper below slides */
@keyframes progressFillH {
  from { width: 0%; }
  to { width: 100%; }
}

@media (max-width: 50rem) {
  .home--services {
    padding-bottom: 2.5rem;
  }

  .home--services .home--services--item {
    flex-direction: column;
  }

  .home--services figure {
    width: 100%;
    height: 16rem;
  }

  .home--services .home--services--item div {
    padding-inline: 0;
    padding-top: 1.25rem;
  }

  .home--services .stepper {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5rem;
    flex-direction: row;
    align-items: center;
    margin-block: 0;
  }

  .home--services .stepper > div {
    height: 100%;
    padding-block: 0.375rem;
    padding-inline: 0.25rem;
    justify-content: center;
    align-items: stretch;
  }

  .home--services .stepper > div > span {
    width: 100%;
    height: 100%;
  }

  .home--services .stepper > div > span::after {
    inset: 0 auto 0 0;
    width: 0%;
    height: 100%;
  }

  .home--services .stepper > div.active > span::after {
    animation: progressFillH 8s linear forwards;
  }

  .home--services .stepper > div.is-complete > span::after {
    width: 100%;
    height: 100%;
    animation: none;
  }

  .home--services .stepper > div:hover > span {
    width: 100%;
    height: 0.75rem;
  }
}


/* References */

.home--references {
  margin-top: 3rem;
  margin-bottom: 10rem;
  position: relative;
  height: 32rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home--references .home--references--item {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding-right: 3rem;
}
.home--references .home--references--item:not(.active) {
  display: none;
}

.home--references .home--references--item p em {
  font-style: normal;
  background: var(--accent);
  color: var(--text-dark);
  padding-inline: 0.25rem;
}
.home--references .home--references--item div:first-of-type {
  border-left: solid 0.25rem var(--accent);
  margin-left: -1.5rem;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.home--references .home--references--item div:first-of-type * {
  font-weight: 500;
  letter-spacing: 0.02rem;
  font-style: italic;
}

.home--references .home--references--item div:last-of-type {
  display: flex;
  gap: 0.25rem;
}
.home--references .home--references--item div:last-of-type * {
  font-family: "Source Sans", sans-serif;
  font-weight: 620;
}
.home--references .home--references--item div:last-of-type span:first-of-type {
  opacity: 0.65;
}
.home--references .home--references--item div:last-of-type span:last-of-type::before {
  content: "/";
  margin-right: 0.25rem;
}
.home--references .home--references--item div:last-of-type span:last-of-type {
  opacity: 0.4;
}

@media (max-width: 50rem) {
  .home--references {
    height: auto;
    margin-top: 1.5rem;
    padding-bottom: 2.5rem;
  }

  .home--references .home--references--item {
    padding-right: 0;
  }

  .home--references .stepper {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5rem;
    flex-direction: row;
    align-items: center;
    margin-block: 0;
  }

  .home--references .stepper > div {
    height: 100%;
    padding-block: 0.375rem;
    padding-inline: 0.25rem;
    justify-content: center;
    align-items: stretch;
  }

  .home--references .stepper > div > span {
    width: 100%;
    height: 100%;
  }

  .home--references .stepper > div > span::after {
    inset: 0 auto 0 0;
    width: 0%;
    height: 100%;
  }

  .home--references .stepper > div.active > span::after {
    animation: progressFillH 8s linear forwards;
  }

  .home--references .stepper > div.is-complete > span::after {
    width: 100%;
    height: 100%;
    animation: none;
  }

  .home--references .stepper > div:hover > span {
    width: 100%;
    height: 0.75rem;
  }
}


/* About on Home */

.home--about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.home--about figure {
  height: 12rem;
  width: 12rem;
  border-radius: 100rem;
  overflow: hidden;
  margin-bottom: 4rem;
}
.home--about h3,
.home--about p {
  font-family: "Source Sans", sans-serif;
  max-width: 36rem;
  text-align: center;
}
.home--about p {
  margin-top: -0.25rem;
  margin-bottom: 1.5rem;
}
.home--about > div {
  margin-bottom: 1.5rem;
}


/* About */

.about h1,
.about h2 {
  text-align: center;
}

.about h2 {
  margin-top: 6rem;
  margin-bottom: 3rem;
}

.about--image {
  width: 14rem;
  height: 14rem;
  border-radius: 100rem;
  overflow: hidden;
}

.about--name {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about--name span:first-of-type {
  font-weight: 700;
}
.about--name span:last-of-type {
  color: var(--text-secondary);
}

.about--services {
  width: 100vw;
  padding-inline: 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 4rem;
  column-gap: 2rem;
}
.about--services > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.about--services h3 {
  width: 100%;
  margin-top: 1.75rem;
}
.about--services figure {
  width: 100%;
  height: 16rem;
  background: #00000010; 
}
.about--services figure img,
.about--services figure video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 60rem) {
  .about--services {
    padding-inline: 2rem;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 45rem) {
  .about--services {
    grid-template-columns: 1fr;
  }
}

.about--contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.about--contact > span {
  margin-top: -3.5rem;
  margin-bottom: 2rem;
}

.contact-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 2rem;
  column-gap: 1rem;
}
@media (min-width: 55rem) {
  .contact-buttons {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 32rem) {
  .contact-buttons {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }
}
.contact-buttons div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.contact-buttons div span {
  font-size: 0.9rem;
  color: var(--text-secondary);
}


/* Cases */

.cases-list {
  margin-top: 4rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cases-list--item {
  position: relative;
  height: 24rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  overflow: hidden;
  background: #00000010;
  transition: all 0.3s ease;
}
.cases-list--item:hover {
  background: var(--accent-transparent);
  border: 2px solid var(--accent);
  transition: none;
}

.cases-list--item figure {
  height: 100%;
  width: 100%;
}
.cases-list--item figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cases-list--item h3 {
  font-family: "Source Sans", sans-serif;
  font-size: 1.375rem;
  margin: 0;
}

.cases-list--item > div {
  position: absolute;
  inset: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
}
.cases-list--item > div > div {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cases-list--item > div > span {
  color: var(--accent);
}

@media (max-width: 44rem) {
  .cases-list--item > div {
    justify-content: space-between;
  }
}


/* Blog */

.blog-tag-filter {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 4rem;
}

.tag-pill {
  padding: 0.25rem 0.75rem;
  border-radius: 10rem;
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1rem;
  text-align: center;
  background: #00000010;
  color: var(--text-primary);
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.tag-pill:hover {
  background: var(--accent-transparent);
  color: var(--accent);
  transition: none;
}
.tag-pill.active {
  background: var(--accent);
  color: #1B2D35;
}

.blog-post-list {
  margin-top: 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.blog-post-list--item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background: #00000010;
  text-decoration: none !important;
  transition: all 0.3s ease;
}
.blog-post-list--item:hover {
  background: var(--accent-transparent);
  --text-secondary: var(--accent);
  transition: none;
}

.blog-post-list--item > span:first-of-type {
  color: var(--text-secondary);
  margin-bottom: -0.9rem;
}

.blog-post-list--item h3 {
  margin-top: 0;
  font-family: "Source Sans", sans-serif;
  font-size: 2rem;
  font-weight: 650;
  line-height: 1.15;
}
@media (max-width: 60rem) {
  .blog-post-list--item h3 {
    font-size: 1.5rem;
  }
}

.tags {
  display: flex;
  gap: 0.5rem;
}
.tags span {
  padding: 0.25rem 0.75rem;
  border-radius: 10rem;
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1rem;
  text-align: center;
  border: 2px solid #ffffff25;
  color: var(--text-primary);
  transition: all 0.2s ease;
}


/* Post */

.post {
  position: relative;
}
@media (max-width: 38rem) {
  .post {
    margin-top: 7rem;
  }
}

.post > span {
  width: 44rem;
  margin-bottom: -1.75rem;
  color: var(--accent);
}

@media (max-width: 64rem) {
  .post > span {
    width: 100%;
  }
}

.post p.intro {
  font-family: "Source Sans", sans-serif;
  font-size: 1.35rem;
}

.post p.signature {
  position: relative;
  font-style: italic;
  color: var(--accent);
  padding-left: 1.5rem;
}
.post p.signature::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-secondary);
}

.post h2 {
  font-family: "Source Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.025rem;
  font-variant: normal;
}

.info-box {
  position: absolute;
  width: 11rem;
  right: -13rem;
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.info-box > div {
  display: flex;
  flex-direction: column;
}
.info-box .smallcaps {
  color: var(--accent);
}
.info-box .tags {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 70rem) {
  .info-box {
    position: relative;
    width: 100%;
    left: 0;
    margin-top: 1.5rem;
  }
}


/* Navigation */

.nav {
  position: fixed;

  width: 100vw;
  padding-inline: 2rem;
  left: 0;
  z-index: 100;

  display: flex;
  justify-content: space-between;
  align-items: center;

  background-color: #00000010;
  backdrop-filter: blur(32px);

  transition: height 0.3s, padding 0.3s, background-color 0.3s, backdrop-filter 0.3s;
}

.nav--pages {
  display: flex;
}

.nav--pages > a {
  display: flex;
  align-items: center;
  height: 4rem;
  padding-inline: 1.5rem;

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.nav--pages > a:hover {
  background-color: #00000008;
}
.nav--pages > a[aria-current] {
  background-color: #00000012;
  color: var(--accent);
}

.nav--pages button {
  margin-left: 1.5rem;
}

.nav--logo svg * {
  color: var(--accent);
}

@media (max-width: 38rem) {
  .nav {
    padding-inline: 0;
    padding-top: 0.5rem;
    flex-direction: column;
    gap: 0.25rem;
  }
  .nav button {
    display: none;
  }
  .nav--pages {
    width: 100%;
    justify-content: center;
  }
  .nav--pages > a {
    flex: 1;
    justify-content: center;
  }
}


/* Footer */

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  margin-top: 6rem;
  background: #00000010;
}
footer * {
  color: var(--text-secondary);
}

footer > div {
  width: 100%;
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer .footer-socials {
  display: flex;
}

footer small {
  width: 100%;
  display: flex;
  align-items: baseline;
}
footer nav {
  display: flex;
  justify-content: flex-end;
}
footer nav a {
  flex-shrink: 0;
}

footer nav {
  flex: 1;
  width: 100%;
  display: flex;
}

footer a {
  padding: 0.5rem 1rem;
  transition: color 0.4s ease-out;

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
footer a:hover {
  color: var(--accent);
  transition: none;
}

footer small * {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-tertiary);
}

@media (max-width: 40rem) {
  footer div {
    gap: 2rem;
  }
  footer small {
    flex-direction: column;
    align-items: center;
  }
  footer nav {
    justify-content: center;
  }
}