@layer tokens, reset, base, layout, components, variants;

@layer tokens {
  :root {
    --font-mono: "Roboto Mono", monospace;

    --color-bg: #fff;
    --color-fg: #000;
    --color-meta: #444;
    --color-muted: #555;
    --color-subtle: #666;
    --color-surface: #f8f8f8;
    --color-surface-alt: #eee;
    --color-border-subtle: #f0f0f0;
    --color-border-dark: #111;

    --measure: 800px;
    --menu-clearance: 180px;
    --gutter-desktop: 2rem;
    --gutter-mobile: 1.25rem;
  }
}

@layer reset {
  html {
    box-sizing: border-box;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  :where(
    body, header, nav, main, section, footer,
    div, figure, figcaption, dialog, p,
    h1, h2, h3, h4, a, button, img, iframe, video, kbd, code
  ),
  :where(
    body, header, nav, main, section, footer,
    div, figure, figcaption, dialog, p,
    h1, h2, h3, h4, a, button, img, iframe, video, kbd, code
  )::before,
  :where(
    body, header, nav, main, section, footer,
    div, figure, figcaption, dialog, p,
    h1, h2, h3, h4, a, button, img, iframe, video, kbd, code
  )::after {
    box-sizing: inherit;
  }
}

@layer base {
  body {
    font-family: var(--font-mono);
    font-weight: 400;
    background: var(--color-bg);
    color: var(--color-fg);
    padding: var(--gutter-desktop);
    margin: 0 0 5em 0;
  }

  button, input, textarea, select, code, kbd {
    font-family: inherit;
  }

  .italic-text {
    font-style: italic;
  }

  a {
    color: var(--color-fg);
  }

  a.anchor {
    display: block;
    position: relative;
    top: -32px;
    visibility: hidden;
  }

  h1, h2, h3 {
    font-weight: 500;
    margin-top: 0;
    max-width: var(--measure);
  }

  h1 {
    font-size: 2rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.25em;
  }

  img, video {
    max-width: 100%;
  }

  .pixel {
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
  }
}

@layer layout {
  header {
    margin-top: 0;
    margin-bottom: 3em;
    max-width: var(--measure);
  }

  .back-link {
    display: inline-block;
    margin-bottom: 1.5em;
    font-size: 0.95rem;
    text-decoration: none;
  }

  .back-link:hover {
    text-decoration: underline;
  }

  #menu {
    position: fixed;
    top: 1em;
    right: 0;
    padding: 1.5em;
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    z-index: 2;
  }

  section, footer {
    margin: 5em 0;
  }

  footer {
    max-width: var(--measure);
  }

  section p {
    max-width: var(--measure);
    line-height: 1.65;
    margin: 1.2em 0;
  }

  @media (min-width: 768px) {
    section {
      max-width: calc(100% - var(--menu-clearance));
    }

    a.anchor {
      top: -32px;
    }
  }

  @media (max-width: 767px) {
    body {
      padding: var(--gutter-mobile);
    }

    header {
      margin-bottom: 1.5em;
    }

    #menu {
      position: static;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 0;
      margin-top: 0.5em;
      margin-bottom: 2em;
      gap: 0.5em 1.2em;
      background-color: transparent;
    }
  }
}

@layer components {
  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  .back-to-top-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 220px;
    pointer-events: none;
    visibility: hidden;
  }

  .back-to-top {
    display: none;
  }

  @media (max-width: 767px) {
    .back-to-top {
      position: fixed;
      top: max(var(--gutter-mobile), env(safe-area-inset-top));
      right: max(var(--gutter-mobile), env(safe-area-inset-right));
      z-index: 50;
      min-inline-size: 44px;
      min-block-size: 44px;
      padding: 0.45em 0.85em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.3em;
      background: var(--color-bg);
      color: var(--color-fg);
      border: 1px solid var(--color-fg);
      font-family: inherit;
      font-size: 0.8rem;
      line-height: 1;
      cursor: pointer;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      .back-to-top {
        translate: 0 -8px;
        transition:
          opacity 0.2s ease,
          translate 0.2s ease,
          visibility 0.2s,
          background-color 0.15s ease,
          color 0.15s ease;
      }
    }

    .back-to-top.is-visible {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      translate: 0 0;
    }

    .back-to-top:active {
      background: var(--color-fg);
      color: var(--color-bg);
    }

    .back-to-top:focus-visible {
      outline: 2px solid var(--color-fg);
      outline-offset: 2px;
    }
  }
}