@layer pasta, project, components, pages;

@import url("https://unpkg.com/@jaredpdesigns/pasta") layer(pasta);

@layer project {
  :root {
    --background: color-mix(in oklab, hsl(var(--bg)) 25%, var(--color__contrast));
    --color: color-mix(in oklab, hsl(var(--bg)) 50%, var(--color__base));
    --outline__color: color-mix(in oklab, hsl(var(--bg)) 75%, var(--color__contrast));
    --outline__offset: var(--size__xs);
    --outline__size: calc(var(--size__xxs) * 2);
    --outline__style: dotted;
    --type__family--primary: articulat-cf, sans-serif;
    --type__family--secondary: argent-cf, serif;
    --type__family--tertiary: cartograph-cf, monospace;
  }

    :root:has([popover]:popover-open) {
      background-color: var(--background);
    }

      :root:has([popover]:popover-open) body {
        background: none;
        inset: 0;
        position: fixed;
      }

      :root:has([popover]:popover-open) article {
        opacity: 0;
      }

  body {
    font-optical-sizing: auto;
    font-style: normal;
  }

  h1,
  h2,
  h4,
  h5 {
    font-family: var(--type__family--secondary);
    font-weight: 800;
  }

  h1 {
    font-size: var(--type__size--xxxl);
    letter-spacing: -0.10625rem;
    line-height: var(--type__lineheight--xxxl);
  }

    @media (min-width: 79rem) {

  h1 {
      font-size: var(--type__size--xxxxl);
      line-height: var(--type__lineheight--xxxxl)
  }
    }

  h2 {
    letter-spacing: -0.03125rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    color: var(--color__base--ish);
  }

  a[class] {
    color: var(--color__base);
    text-decoration: none;
    transition: 0.375s ease-in;
    transition-property: color, opacity;
  }

    a[class]:focus,
    a[class]:hover {
      color: var(--color__base--ish);
    }
    p svg {
      flex-shrink: 0;
      margin-block-start: calc((var(--size__xxs) * 2) * -1);
    }

    p:empty {
      display: none;
    }

    header a,
    header button {
      --outline__offset: calc(var(--size__xxs) * -1);
      block-size: var(--size__xl);
      border-radius: 50%;
      inline-size: var(--size__xl);
      transition: 0.375s ease-in;
      transition-property: color, opacity;
      z-index: 2;
    }

      header a:focus-visible, header button:focus-visible {
        background-color: unset;
      }

    header a {
      place-self: start;
    }

    header button {
      align-self: start;
      background-color: unset;
      border: unset;
      justify-self: end;
    }
        [data-theme="light"] header button svg:last-child {
          display: none;
        }
        [data-theme="dark"] header button svg:first-child {
          display: none;
        }
}

@layer components {
    .photo button {
      background-color: unset;
      border: unset;
    }
      .photo__card img {
        aspect-ratio: 1;
        background-color: var(--color__base--ghost);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        inline-size: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center;
           object-position: center;
      }

        @media(min-width: 600px) {
      .photo__card img {
          border-bottom-left-radius: 0;
          border-top-right-radius: var(--size__m)
      }
        }

      .photo__card figcaption {
        align-content: center;
      }

        .photo__card figcaption >* {
          margin-inline: auto;
        }

        .photo__card figcaption section {
          flex-direction: column;
          row-gap: 0;
        }

        .photo__card figcaption p {
          row-gap: 0;
        }

          .photo__card figcaption p span:not(:last-child):after {
            content: ', ';
          }

        .photo__card figcaption svg {
          color: var(--color__base--ish);
        }

    .photo__header {
      padding-inline-start: calc(var(--size__m) + env(safe-area-inset-left));
      padding-inline-end: calc(var(--size__m) + env(safe-area-inset-right));
    }

      .photo__header >* {
        grid-area: 1/1;
      }

        .photo__header a:focus,
        .photo__header a:hover,
        .photo__header button:focus,
        .photo__header button:hover {
          opacity: 0.75;
        }

      .photo__header figure {
        inline-size: 100%;
        min-inline-size: 0;
      }

      .photo__header img {
        aspect-ratio: 16/9;
        block-size: 100%;
        overflow: hidden;
      }

      .photo__header figcaption section {
        flex-direction: row;
      }

    .photo__preview img {
      aspect-ratio: 1/1;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: center;
         object-position: center;
    }

    .photo__details {
      display: none;
    }

      .photo__details::backdrop {
        background: none;
        backdrop-filter: unset;
      }

      .photo__details:popover-open {
        background: none;
        border: unset;
        align-items: center;
        block-size: 100dvh;
        display: grid;
        inline-size: 100%;
        inset: 0;
      }

        @media(min-width: 80rem) {

      .photo__details:popover-open {
          padding: var(--size__m)
      }
        }

        .photo__details:popover-open >section {
          block-size: 100dvh;
          grid-template-rows: 1fr auto;
          place-items: center;
          position: relative;
        }

          @media(min-width: 80rem) {

        .photo__details:popover-open >section {
            block-size: calc(100dvh - var(--size__l));
            max-inline-size: calc(var(--width__xl) - var(--size__l))
        }
          }

          .photo__details:popover-open >section nav {
            padding-inline-start: calc(var(--size__m) + env(safe-area-inset-left));
            padding-inline-end: calc(var(--size__m) + env(safe-area-inset-right));
          }

            @media(min-width: 80rem) {

          .photo__details:popover-open >section nav {
              padding: unset
          }
            }

          .photo__details:popover-open >section img {
            inline-size: auto;
            max-inline-size: 100%;
            max-block-size: calc(100dvh - (var(--size__l) * 2) - 64px);
          }

          .photo__details:popover-open >section figcaption {
            color: var(--color);
          }

    .photo__nav {
      grid-template-rows: auto 1fr;
      inset: 0;
    }

      .photo__nav button {
        --outline__offset: calc(var(--size__xxs)*-1);
        background-color: var(--background);
        block-size: var(--size__xl);
        border-radius: 50%;
        color: var(--color);
        inline-size: var(--size__xl);
        transition: color 0.375s ease-in;
      }

        .photo__nav button[disabled] {
          --color: color-mix(in oklab, hsl(var(--bg)) 75%, var(--color__base));
          cursor: not-allowed;
        }

        .photo__nav button:focus,
        .photo__nav button:not([disabled]):hover {
          --color: color-mix(in oklab, hsl(var(--bg)) 25%, var(--color__base));
        }

  .cards {
    inline-size: 100%;
    list-style: none;
  }

    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: view()) {

  .cards {
        --card-top-offset: var(--size__m);
        margin-block-end: var(--size__l);
        padding-block-end: calc(var(--numcards) * var(--card-top-offset));
        view-timeline-name: --cards-element-scrolls-in-body
  }

        .cards li {
          --index0: calc(var(--index) - 1);
          --reverse-index: calc(var(--numcards) - var(--index0));

          inset-block-start: 0;
          margin-bottom: calc(var(--index) * var(--card-top-offset) * -1);
          padding-top: calc(var(--index) * var(--card-top-offset));
          position: sticky;
        }

          @keyframes scale {
            to {
              scale: calc(1.1 - calc(0.1 * var(--reverse-index)));
            }
          }

          .cards li a {
            --end-range: calc((var(--index)) / var(--numcards) * 100%);
            --start-range: calc(var(--index0) / var(--numcards) * 100%);

            animation: linear scale forwards;
            animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
            animation-timeline: --cards-element-scrolls-in-body;
            will-change: scale;
          }
      }
    }
}

@layer pages {

    .overview header a,
    .overview header button,
    .error header a,
    .error header button,
    .detail header a,
    .detail header button {
      color: var(--color__base--mid);
    }

      .overview header a:focus,
      .overview header a:hover,
      .overview header button:focus,
      .overview header button:hover,
      .error header a:focus,
      .error header a:hover,
      .error header button:focus,
      .error header button:hover,
      .detail header a:focus,
      .detail header a:hover,
      .detail header button:focus,
      .detail header button:hover {
        color: var(--color__base--ish);
      }

  .overview article,
  .error article {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-block-size: 100dvh;
  }

    .overview article header, .error article header {
      padding-inline-start: calc(var(--size__m) + env(safe-area-inset-left));
      padding-inline-end: calc(var(--size__m) + env(safe-area-inset-right));
    }

    .overview article >section, .error article >section {
      align-items: start;
      display: grid;
      gap: var(--size__m);
      justify-items: center;
      padding-inline-start: calc(var(--size__m) + env(safe-area-inset-left));
      padding-inline-end: calc(var(--size__m) + env(safe-area-inset-right));
    }

      .overview article >section >*, .error article >section >* {
        min-inline-size: 0;
      }

  .error article>section {
    align-content: center;
    align-items: center;
    background-color: var(--color__base--ghost);
    border-radius: var(--size__m);
    grid-template-columns: unset;
  }

  .detail article {
    display: grid;
    min-block-size: 100dvh;
  }
      @media(min-width: 600px) {
        .detail article header button {
          color: var(--color__contrast--fixed);
        }

          .detail article header button:focus,
          .detail article header button:hover {
            color: var(--color__contrast--fixed);
            opacity: 0.75;
          }
      }

    .detail article >section {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      padding-inline-start: calc(var(--size__m) + env(safe-area-inset-left));
      padding-inline-end: calc(var(--size__m) + env(safe-area-inset-right));
      position: relative;
    }

      .detail article >section >* {
        min-inline-size: 0;
      }
        @media (prefers-reduced-motion: no-preference) {
          @supports (animation-timeline: view()) {
            @keyframes reveal {
              from {
                scale: .90;
              }
            }
            .detail article >section .photo{

            animation: reveal linear both;
            animation-timeline: scroll();
            animation-range: 25vh 75vh;
      }
          }
        }
}