/* Route announcer */
	.astro-route-announcer {
		position: absolute;
		left: 0;
		top: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		overflow: hidden;
		white-space: nowrap;
		width: 1px;
		height: 1px;
	}@layer reset, layout, utilities, components, variations;

@layer reset {
  :root {
    --light-gray: hsl(200deg, 15%, 92%, 1);
    --mid-gray: hsl(0deg, 0%, 58%);
    --gray: hsl(193deg, 11%, 86%, 1);
    --blue: hsl(208deg, 100%, 36%, 1);
    --dark-gray: hsl(0deg, 9%, 0%);
    --black: hsl(0deg, 0%, 0%);
    --white: hsl(0deg, 0%, 100%);

    /* Semantic Colors */
    --primary: var(--blue);
    --bg-color: var(--light-gray);
    --text-color: var(--black);
    --text-color-inverse: var(--light-gray);
    --text-muted: var(--mid-gray);

    /* Gradients */
    --footer-section-gradient: linear-gradient(
      var(--highlight-section-bg) 0%,
      var(--dark-gray) 100%
    );

    --highlight-section-bg: var(--black);
    --highlight-section-gradient: linear-gradient(
      var(--highlight-section-bg) 0%,
      var(--dark-gray) 100%
    );

    --alt-section-bg: var(--gray);
    --alt-section-gradient: linear-gradient(
      var(--alt-section-bg) 0%,
      var(--dark-gray) 100%
    );

    /* Layout & Spacing */
    --container-padding: 24px;
    --section-padding: 4rem;

    /* Was hardcoded in sections.css */

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 8rem;

    /* Typography */
    --font-family-base: var(--font-ibm-plex-sans);
    --font-size-base: 16px;
    --line-height-base: 1.5;

    --font-size-h1: 1.88rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.15rem;
    --font-size-h4: 1rem;
    --font-size-small: 0.75rem;
    --font-size-footer: 1.5rem;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Components */
    --main-title: 1.75rem;
    --navbar-subtitle: 1rem;
    --nav-bg: var(--white);
    --nav-menu-color: var(--black);
    --logos-bg: var(--gray);
    --project-card-bg: hsl(0deg, 0%, 0%, 0.5);

    /* Animation */
    --transition: cubic-bezier(0.45, 0, 0.55, 1);
    --navmenu-delay-base: 0s;
    --navmenu-delay-step: 0.05s;
    --navmenu-delay-curve: 0.02s;
    --navmenu-slide-x: 25%;

    /* Borders */
    --radius-sm: 0.4375rem;
    --radius-lg: 0.625rem;
    --radius-xl: 1rem;

    /* Misc */
    --paragraph-margin-bottom: 1.5rem;
  }

  @media (width >=992px) {
    :root {
      --main-title: 2.5rem;
      --navbar-subtitle: 1.125rem;
    }
  }

  @media (width >=1200px) {
    :root {
      --main-title: 3.25rem;
      --navbar-subtitle: 1.325rem;
    }
  }

  @media (width >=1600px) {
    :root {
      --main-title: 4.5rem;
      --navbar-subtitle: 1.625rem;
    }
  }

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

  /* * {
    font-feature-settings: "liga", "clig off";
    font-variant-ligatures: no-common-ligatures;
    line-height: inherit;
    margin: 0;
  } */

  html {
    scrollbar-gutter: stable;
  }

  html,
  body {
    font-family: var(--font-ibm-plex-sans), sans-serif;
    font-weight: 400;
    margin: 0;
    width: 100%;
  }

  body {
    -webkit-font-smoothing: antialiased;
    height: auto;
  }

  p {
    margin-bottom: var(--paragraph-margin-bottom);
    text-wrap: pretty;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  a {
    text-decoration: none;
  }
}

@layer utils {
  .container {
    display: grid;
    grid-template-columns: 1fr;
    padding-inline: var(--container-padding);
  }

  .relative {
    position: relative;
  }

  .markdown-image {
    border-radius: var(--radius-lg);
    height: auto;
    max-width: 100%;
  }

  .image-bg {
    display: flex;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
  }

  .image-bg img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .badges-wrapper {
    align-items: center;
    display: flex;
    gap: var(--spacing-lg);
  }

  .badges-label {
    color: var(--mid-gray);
    display: none;
    text-transform: uppercase;
  }

  .badges {
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
  }

  .badge {
    background: transparent;
    border: 2px solid var(--black);
    border-radius: var(--radius-lg);
    color: var(--black);
    cursor: pointer;
    line-height: 0.75;
    padding: var(--spacing-sm) var(--spacing-md);
    white-space: nowrap;
  }

  .badge.active {
    background: var(--black);
    color: var(--bg-color);
  }

  .flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .grid-auto-fit {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }

  .main-title {
    font-size: var(--main-title);
    font-weight: var(--font-weight-light);
    line-height: 1;
    text-decoration: none;
    transition:
      transform 0.42s var(--transition),
      font-size 0.42s var(--transition);
  }

  .collection-page-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--container-padding);
  }

  .page-header {
    align-items: center;
    background: var(--text-color);
    color: var(--bg-color);
    display: flex;
    justify-content: space-between;
    padding: var(--container-padding);
  }

  @media (width <=767px) {
    .mobile-hidden {
      display: none;
    }
  }

  @media (width >=768px) {
    .desktop-hidden {
      display: none;
    }
  }

  @media (width >=992px) {
    .badges {
      overflow-x: visible;
    }

    .badges-label {
      display: block;
    }

    .collection-page-header {
      align-items: center;
      flex-direction: row;
    }
  }
}

@layer content {
  .h1 {
    font-size: 1.88rem;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  .h2 {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }

  .h3 {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }

  .h4 {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }
}

@view-transition {
  navigation: auto;
}
@layer layout {
  body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .navbar {
    container-name: sticky-heading;
    container-type: scroll-state;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .navbar.is-open {
    color: var(--text-color-inverse);
  }

  .navbar.is-sticky {
    padding-block: calc(var(--container-padding) / 2);
  }

  .navbar.is-sticky:not(.is-open) {
    background-color: var(--nav-bg);
    transition-delay: 0.2s;
  }

  .navbar.is-sticky .navbar-subtitle span {
    opacity: 0;
    transform: translateY(-100%);
  }

  .navbar.is-sticky .navbar-title {
    transform: translateY(12px);
  }

  .navbar-wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-block: calc(var(--container-padding) / 2);
    padding-inline: var(--container-padding);
    transition:
      color 0.42s var(--transition),
      background 0.2s ease;
  }

  @container sticky-heading scroll-state(stuck: top) {
    .navbar-wrapper {
      padding-block: calc(var(--container-padding) / 2);
    }

    &:not(.is-open) .navbar-wrapper {
      background-color: var(--nav-bg);
      transition-delay: 0.2s;
    }

    .navbar-subtitle span {
      opacity: 0;
      transform: translateY(-100%);
    }

    .navbar-title {
      transform: translateY(12px);
    }

    @media (width >=992px) {
      .navbar-title {
        --main-title: 2.25rem;
      }
    }
  }

  .navbar-title {
    color: inherit;
    display: block;
    font-size: var(--main-title);
    font-weight: var(--font-weight-light);
    line-height: 1;
    text-decoration: none;
    transition:
      transform 0.42s var(--transition),
      font-size 0.42s var(--transition);
  }

  @media (width >=768px) and (height >=425px) {
    .header-title {
      font-weight: 400;
    }
  }

  .navbar-subtitle {
    font-size: var(--navbar-subtitle);
    font-weight: var(--font-weight-light);
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
  }

  .navbar-subtitle span {
    display: block;
    transition: all 0.42s var(--transition);
  }

  body.navmenu-open {
    overflow: hidden;
  }

  .navbar-menu {
    display: none;
  }

  .navmenu-toggle {
    background: none;
    border: none;
    color: #161616;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.5rem;
  }

  .navbar.is-open .navmenu-toggle {
    color: var(--text-color-inverse);
  }

  .navmenu-dialog {
    background-color: var(--blue);
    color: var(--text-color-inverse);
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 0;
    position: fixed;
    text-transform: uppercase;
    top: 0;
    transform: translateX(100%);
    transition: transform 0.35s ease-in-out;
    width: 100%;
    z-index: 90;

    &.is-open {
      transform: translateX(0);
    }

    .navbar-menu {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: flex-end;
    }

    .navbar-menu-item {
      color: var(--text-color-inverse);
      font-size: var(--font-size-footer);
      font-weight: var(--font-weight-bold);
      opacity: 0;
      padding-inline: var(--container-padding);
      text-decoration: none;
      transform: translateX(var(--navmenu-slide-x));
      transition:
        opacity 0.42s ease,
        transform 0.42s var(--transition);
    }

    .navmenu-dialog-footer {
      display: block;
    }
  }

  .navmenu-dialog-footer p {
    opacity: 0;
    transform: translateX(var(--navmenu-slide-x));
    transition:
      opacity 0.42s ease,
      transform 0.42s var(--transition);
  }

  .navmenu-dialog.is-open .navbar-menu-item {
    opacity: 1;
    transform: translateX(0);
  }

  .navmenu-dialog.is-open .navbar-menu-item:nth-child(1) {
    transition-delay: calc(
      var(--navmenu-delay-base) + var(--navmenu-delay-step) * 1
    );
  }

  .navmenu-dialog.is-open .navbar-menu-item:nth-child(2) {
    transition-delay: calc(
      var(--navmenu-delay-base) + var(--navmenu-delay-step) * 1.8
    );
  }

  .navmenu-dialog.is-open .navbar-menu-item:nth-child(3) {
    transition-delay: calc(
      var(--navmenu-delay-base) + var(--navmenu-delay-step) * 2.4
    );
  }

  .navmenu-dialog.is-open .navbar-menu-item:nth-child(4) {
    transition-delay: calc(
      var(--navmenu-delay-base) + var(--navmenu-delay-step) * 2.8
    );
  }

  .navmenu-dialog.is-open .navbar-menu-item:nth-child(5) {
    transition-delay: calc(
      var(--navmenu-delay-base) + var(--navmenu-delay-step) * 3
    );
  }

  .navmenu-dialog.is-open .navmenu-dialog-footer p {
    opacity: 1;
    transform: translateX(0);
    transition-delay: calc(
      var(--navmenu-delay-base) + var(--navmenu-delay-step) * 3.2
    );
  }

  .navmenu-dialog-footer {
    display: none;
    font-weight: 500;
    margin-block-start: 1rem;
    padding-inline: var(--container-padding);
  }

  .main-content {
    background: var(--bg-color);
    min-height: 100vh;
    position: relative;
    transform: translateZ(0);
    z-index: 1;
  }

  .footer {
    background: var(--footer-section-gradient);
    bottom: 0;
    color: var(--text-color-inverse);
    padding: var(--container-padding);
    position: sticky;
    text-transform: uppercase;
    z-index: 0;
  }

  .footer-contact-link {
    color: var(--text-color-inverse);
    display: flex;
    font-size: var(--font-size-footer);
    font-weight: var(--font-weight-bold);
    gap: var(--spacing-xl);
    padding-block: var(--container-padding);
    text-decoration: none;
    transition: opacity 0.42s ease;
  }

  .footer-contact-link div {
    white-space: pre;
  }

  .footer-contact-arrow {
    align-items: center;
    background-image: linear-gradient(
      to bottom,
      transparent 50%,
      var(--text-color-inverse) 50%,
      var(--text-color-inverse) calc(50% + 4px),
      transparent calc(50% + 4px)
    );
    display: flex;
    flex: 1;
    justify-content: end;
  }

  .footer-contact-arrow svg {
    display: block;
    flex: 0 0 16px;
    height: 28px;
    transform: translate(4px, 2px);
    width: 16px;
  }

  .footer-contact-text {
    font-size: clamp(1rem, 5vw, 4.5rem);
  }

  .footer-menu {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-end;
    padding-block-end: var(--container-padding);
    padding-block-start: calc(var(--container-padding) / 2);
  }

  .footer-menu-item {
    color: var(--text-color-inverse);
    font-size: var(--footer-font-size);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.42s ease;
  }

  .footer-menu-item-active span {
    border-bottom: 2px solid var(--text-color-inverse);
  }

  .footer-text {
    color: var(--mid-gray);
  }

  @media (width >=768px) {
    .navmenu-toggle {
      display: none;
    }

    .navbar-menu {
      align-items: center;
      display: flex;
      flex-direction: row;
      gap: 1rem;
    }

    .navbar-menu-item {
      color: var(--nav-menu-color);
      display: inline-block;
      font-size: var(--font-size-h4);
      font-weight: var(--font-weight-bold);
      text-decoration: none;
      text-transform: uppercase;
      transition: color 0.2s ease;

      &:hover {
        color: var(--primary);
      }

      &.navbar-menu-item-active {
        color: var(--primary);

        &::after {
          background-color: var(--primary);
          content: "";
          display: block;
          height: 2px;
        }
      }
    }

    .navbar {
      .navbar-menu-item-active {
        /* view-transition-name: navbar-item-active; */

        &::after {
          view-transition-name: navbar-item-active-border;
        }
      }
    }
  }
}