@font-face {
  font-family: "Inconsolata";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("./fonts/inconsolata-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inconsolata";
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url("./fonts/inconsolata-latin-700-normal.woff2") format("woff2");
}

@layer base, layout, components, pages;

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

  html {
    min-block-size: 100%;
    color-scheme: light dark;
    background: var(--neutral-1);
    scroll-behavior: smooth;
  }

  body {
    min-block-size: 100svh;
    margin: 0;
    background: var(--neutral-1);
    color: var(--neutral-10);
    font-family: var(--font-transitional);
    font-size: var(--font-size-0);
    line-height: var(--font-line-height-1);
    text-rendering: optimizeLegibility;
  }

  :where(h1, h2, h3, p, ul, ol, dl, blockquote, figure) {
    margin-block: 0;
  }

  :where(ul, ol) {
    padding-inline-start: var(--size-3);
  }

  :where(button, input, select, textarea) {
    font: inherit;
  }

  :where(a) {
    color: var(--primary-8);
    text-decoration-color: var(--primary-5);
    text-decoration-thickness: var(--border-width-0);
    text-underline-offset: calc(var(--size--2) / 4);
    transition:
      color var(--anim-duration-fast) var(--anim-ease-standard),
      text-decoration-color var(--anim-duration-fast) var(--anim-ease-standard);
  }

  :where(a:hover) {
    color: var(--primary-10);
    text-decoration-color: currentcolor;
  }

  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: var(--border-width-1) solid var(--primary-7);
    outline-offset: calc(var(--size--2) / 4);
  }

  :where(code, kbd, samp, pre) {
    font-family: var(--font-mono);
  }

  ::selection {
    background: var(--primary-4);
    color: var(--primary-4-on);
  }
}

@layer layout {
  .site-shell {
    min-block-size: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  .site-header,
  .site-main,
  .site-footer {
    inline-size: min(100%, var(--viewport-max));
    margin-inline: auto;
    padding-inline: var(--size-3);
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--zindex-dropdown);
    padding-block: var(--size-1);
  }

  .site-header__inner {
    min-block-size: var(--size-7);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-2);
    border: var(--border-width-0) solid var(--neutral-4);
    border-radius: 0em;
    background: var(--neutral-2);
    padding: var(--size-1) var(--size-2);
    box-shadow: var(--shadow-1);
  }

  .site-main {
    padding-block-end: var(--size-9);
  }

  .site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--size-2);
    padding-block: var(--size-6) var(--size-4);
    border-block-start: var(--border-width-0) solid var(--neutral-4);
  }
}

@layer components {
  .site-mark,
  .site-mark:visited {
    display: inline-flex;
    align-items: center;
    gap: var(--size-0);
    color: var(--neutral-12);
    font-family: var(--font-mono);
    font-size: var(--font-size--1);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--font-letter-spacing-2);
    text-decoration: none;
    text-transform: uppercase;
  }

  .site-mark::before {
    content: "S";
    display: inline-grid;
    inline-size: var(--size-5);
    aspect-ratio: var(--aspect-ratio-square);
    place-items: center;
    background: var(--neutral-12);
    color: var(--neutral-12-on);
  }

  .site-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-navigation a,
  .site-navigation a:visited,
  .site-navigation button {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    padding: var(--size--1) var(--size-0);
    color: var(--neutral-9);
    font-family: var(--font-mono);
    font-size: var(--font-size--2);
    letter-spacing: var(--font-letter-spacing-2);
    text-decoration: none;
    text-transform: uppercase;
  }

  .site-navigation button {
    cursor: pointer;
  }

  .site-navigation a:hover,
  .site-navigation a:focus-visible,
  .site-navigation a[aria-current="page"],
  .site-navigation button:hover,
  .site-navigation button:focus-visible {
    color: var(--neutral-12);
  }

  .site-navigation a[aria-current="page"] {
    box-shadow: inset 0 calc(-1 * var(--border-width-0)) var(--primary-7);
  }

  .eyebrow,
  .site-footer {
    color: var(--neutral-8);
    font-family: var(--font-mono);
    font-size: var(--font-size--2);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--font-letter-spacing-3);
    text-transform: uppercase;
  }

  .panel {
    min-inline-size: 0;
    border: var(--border-width-0) solid var(--neutral-4);
    border-radius: 0em;
    background: var(--neutral-2);
    box-shadow: var(--shadow-1);
  }

  .button {
    justify-self: start;
    border: var(--border-width-0) solid var(--neutral-8);
    border-radius: 0em;
    background: var(--primary-7);
    padding: var(--size-1) var(--size-2);
    color: var(--primary-7-on);
    font-family: var(--font-mono);
    font-size: var(--font-size--1);
    text-decoration: none;
    cursor: pointer;
    transition:
      background var(--anim-duration-fast) var(--anim-ease-standard),
      transform var(--anim-duration-fast) var(--anim-ease-standard);
  }

  .button:visited {
    color: var(--primary-7-on);
  }

  .button:hover {
    background: var(--primary-8);
    color: var(--primary-8-on);
  }

  .button:active {
    transform: translateY(var(--border-width-0));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: var(--anim-duration-none);
  }
}