@layer pasta, project, page, typography, components;

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

@layer project {
  :root {
    --gutter: calc(var(--size__l) + env(safe-area-inset-left));
    --maxWidth: var(--width__l);
    --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;
    --transition: cubic-bezier(0.5, -0.1, 0.1, 1.5);
    --bleed: 0;
  }

    @media (min-width: 60rem) {
  :root {
      --bleed: calc(var(--size__l) * -1)
  }
    }

    @media screen and (prefers-color-scheme: dark) {
  :root {
      --color__saffron--ghost: var(--color__base--ghost);
      --color__saffron--light: var(--color__base--light)
  }
    }

    :root[data-theme="dark"] {
      --color__saffron--ghost: var(--color__base--ghost);
      --color__saffron--light: var(--color__base--light);
    }

  body {
    align-items: start;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-block-size: 100vh;
  }

    body >header,
    body >footer {
      padding-inline: var(--gutter);
    }

      body >header >section, body >footer >section {
        inline-size: 100%;
        margin-inline: auto;
        max-inline-size: var(--maxWidth);
      }

    body >header {
      border-block-start-color: var(--color__highlight);
      border-block-start-width: var(--size__xs);
      padding-block-start: env(safe-area-inset-top);
      position: sticky;
      top: 0;
      z-index: 3;
    }

      @supports ((-webkit-backdrop-filter: blur(32px)) or (backdrop-filter: blur(32px))) {

    body >header {
        background-color: color-mix(in srgb, var(--color__contrast), transparent 25%);
        -webkit-backdrop-filter: blur(32px);
                backdrop-filter: blur(32px)
    }
      }

      @supports not ((-webkit-backdrop-filter: blur(32px)) or (backdrop-filter: blur(32px))) {

    body >header {
        background-color: color-mix(in srgb, var(--color__contrast), transparent 2%)
    }
        ;
      }
        @media (min-width: 30rem) {

      body >header nav {
          justify-content: space-between
      }
        }
          @media (max-width: 30rem) {

        body >header nav >a:first-child {
            inline-size: 100%
        }
          }

          body >header nav >a:first-child p {
            inline-size: 100%;
          }

          body >header nav button:hover,
          body >header nav button:focus-visible {
            color: var(--color__base);
            opacity: 1;
          }

          body >header nav button:focus-visible {
            background-color: var(--color__highlight--ghost);
          }
          @media (min-width: 45rem) {

        body >header nav >section>section {
            gap: var(--size__l)
        }
          }

    body >footer {
      inset-block: 0;
      position: sticky;
      z-index: 1;
    }

    body >main {
      background-color: var(--color__contrast);
      block-size: 100%;
      border-block-end: var(--size__xxs) solid var(--color__saffron--light);
      border-bottom-left-radius: var(--size__l);
      border-bottom-right-radius: var(--size__l);
      inline-size: 100%;
      margin-inline: auto;
      max-inline-size: 100%;
      overflow: clip;
      transform: translate3d(0, 0, 0);
      z-index: 2;
    }

      @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
        @supports (animation-timeline: scroll()) {
          @keyframes shrinkWidth {
            to {
              max-inline-size: calc(100% - var(--gutter));
            }
          }
          body >main{

          animation: shrinkWidth linear both;
          animation-range: 90% 100%;
          animation-timeline: scroll(root block);
      }
        }
      }

    body >main>article {
      display: grid;
      inline-size: 100%;
      margin-inline: auto;
      max-inline-size: calc(var(--maxWidth) + (var(--gutter) * 2));
      padding-block: var(--size__l);
      padding-inline: var(--gutter);
    }

      @media(min-width: 60rem) {

    body >main>article {
        padding-block: var(--size__xxxl)
    }
      }

      body >main>article >* {
        min-inline-size: 0;
        scroll-margin-top: calc(var(--size__xxxl) * 2);
      }

        body >main>article >* +* {
          margin-block-start: var(--size__l);
        }

        body >main>article >* +hr {
          margin-block-start: var(--size__xxxl);
        }

      body >main>article >p:empty {
        display: none;
      }
}

@layer typography {
  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)
  }
    }

    h1:not(*[class^="color__type"]) {
      color: var(--color__highlight);
    }

  h2 {
    letter-spacing: -0.03125rem;
  }

  h4 {
    text-transform: uppercase;
  }
    h2:not(*[class^="color__type"]), h3:not(*[class^="color__type"]), h4:not(*[class^="color__type"]), h5:not(*[class^="color__type"]) {
      color: var(--color__base--ish);
    }

  code:not(pre code) {
    word-wrap: unset;
  }

  pre code .comment {
    font-style: italic;
  }

  blockquote {
    --color__bg: var(--color__saffron--ghost);
    --color__border: var(--color__saffron--light);
    border-radius: var(--size__l);
    box-shadow: none;
    margin-inline: var(--bleed);
    padding: var(--size__l);
  }

    blockquote p a {
      text-decoration-color: var(--color__highlight--mid);
    }

      blockquote p a:hover,
      blockquote p a:focus-visible {
        background-color: var(--color__contrast);
        text-decoration-color: var(--color__highlight--mid);
      }

  a:not([class]),
  .gallery__meta a,
  dialog a {
    border-radius: var(--size__xs);
    display: inline-flex;
    text-decoration-style: wavy;
    -webkit-text-decoration-skip-ink: none;
            text-decoration-skip-ink: none;
  }

  ul li {
    list-style: none;
    padding-inline-start: 0.625cap;
    position: relative;
  }

    ul li:before {
      color: var(--color__highlight);
      content: '※';
      display: inline-block;
      font-family: var(--type__family--tertiary);
      font-weight: normal;
      position: absolute;
      inset-block-start: -0.1875cap;
      inset-inline-start: -0.875cap;
    }

  nav a {
    text-decoration: unset;
  }

    nav a:focus-visible,
    nav a:hover {
      color: var(--color__base);
    }

    nav a[aria-current="page"] {
      color: var(--color__base);
      text-decoration-color: var(--color__highlight--semi);
      text-decoration-thickness: calc(var(--size__xxs) * 2);
      text-decoration-line: underline;
      text-underline-offset: var(--size__xs);
      text-decoration-style: wavy;
      -webkit-text-decoration-skip-ink: none;
              text-decoration-skip-ink: none;
    }
}

@layer page {
  .profile article {
    grid-template-columns: minmax(calc(var(--size__l) + env(safe-area-inset-left)), 1fr) minmax(0, var(--maxWidth)) minmax(calc(var(--size__l) + env(safe-area-inset-left)), 1fr);
    max-inline-size: unset;
    padding-inline: 0;
  }

    .profile article >*:not(.gallery) {
      grid-column: 2;
    }

  .hire article {
    --gap: var(--size__l);
  }

    @media (min-width: 60rem) {

  .hire article {
      --gap: calc((var(--bleed) * 3) * -1)
  }
    }

    .hire article .process {
      min-inline-size: 0;
    }

      .hire article .process__wrap {
        -moz-column-gap: var(--gap);
             column-gap: var(--gap);
        row-gap: var(--size__l);
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      }

    .cv article >p,
    .cv article >ul li {
      max-inline-size: 65ch;
    }

    .clients article a {
      text-decoration: none;
    }

  .error {
    position: relative;
  }

    .error article {
      align-content: center;
      min-block-size: calc(100vh - 78px);
    }

      .error article >h1,
      .error article p {
        color: var(--color__contrast) !important;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25)
      }

      .error article >a:focus,
      .error article a:hover {
        color: var(--color__contrast);
        opacity: 0.75;
      }

      .error article img {
        block-size: 100%;
        inline-size: 100%;
        inset: 0;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center;
           object-position: center;
        position: absolute;
        z-index: -1;
      }
}

@layer components {
  .album {
    container-type: inline-size;
    text-decoration: none;
  }
      @container (min-width: 40rem) {

    .album__wrap {
        grid-template-columns: var(--width__s) 1fr
    }

        .album__wrap figcaption {
          padding: var(--size__l);
        }
      }

    .album img {
      aspect-ratio: 1/1;
      max-inline-size: var(--width__s);
    }

      @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
        @supports (animation-timeline: view()) {
          @keyframes albumStack {

            entry 0%,
            exit 100% {
              scale: 0.875;
            }

            entry 100%,
            exit 0% {
              scale: 1;
            }
          }
          .album img{

          view-timeline: --album-timeline;
          view-timeline-axis: block;
          view-timeline-inset: 5rem 0rem;
          animation-name: albumStack;
          animation-timing-function: linear;
          animation-fill-mode: both;
          animation-timeline: --album-timeline;
          animation-range: entry 0% exit 100%;
      }
        }
      }
      .album h3 span:before {
        content: "“";
        margin-inline-start: -0.75ch;
      }

      .album h3 span:after {
        content: "”";
      }

    .album .genre {
      margin-inline-start: calc(var(--size__s) * -1);
    }

    .album a {
      text-decoration: none;
    }

      .album a svg {
        color: var(--color__base--mid);
      }
        .album a:hover svg, .album a:focus svg {
          color: var(--color__highlight)
        }

  .gallery {
    --overlay:
      color-mix(in srgb, var(--color__contrast), transparent 100%),
      color-mix(in srgb, var(--color__contrast), transparent 80%),
      color-mix(in srgb, var(--color__contrast), transparent 75%),
      color-mix(in srgb, var(--color__contrast), transparent 62.5%),
      color-mix(in srgb, var(--color__contrast), transparent 50%),
      color-mix(in srgb, var(--color__contrast), transparent 38%),
      color-mix(in srgb, var(--color__contrast), transparent 25%),
      color-mix(in srgb, var(--color__contrast), transparent 12%),
      color-mix(in srgb, var(--color__contrast), transparent 10%),
      color-mix(in srgb, var(--color__contrast), transparent 5%),
      color-mix(in srgb, var(--color__contrast), transparent 2%),
      color-mix(in srgb, var(--color__contrast), transparent 0%);
    grid-template-columns: inherit;
    grid-column: 1/-1;
  }

    .gallery >section:first-child {
      grid-column: 2;
    }

    .gallery__meta {
      margin-inline: var(--bleed);
    }

    .gallery__images {
      grid-column: 1 / -1;
      grid-template-columns: inherit;
      overflow-x: scroll;
      overscroll-behavior-x: contain;
      position: relative;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

      .gallery__images:before {
        background-image: linear-gradient(to left, var(--overlay));
        block-size: 100%;
        content: "";
        display: block;
        inline-size: var(--size__m);
        padding: var(--size__s);
        position: sticky;
        inset-inline-start: 0;
        z-index: 2;
      }

      .gallery__images::-webkit-scrollbar {
        display: none;
        inline-size: 0 !important;
      }

      .gallery__images--wrap {
        grid-column: 2;
        margin-inline-start: var(--bleed);
        scroll-snap-align: center;
      }

        .gallery__images--wrap:after {
          background-image: linear-gradient(to right, var(--overlay));
          block-size: 100%;
          content: "";
          display: block;
          inline-size: var(--size__m);
          padding: var(--size__s);
          position: sticky;
          inset-inline-end: 0;
          z-index: 2;
        }

        .gallery__images--wrap>* {
          flex: 1 0 auto;
          inline-size: 50ch;
          max-inline-size: 100%;
          position: relative;
          scroll-margin-inline-start: var(--size__m);
          scroll-snap-align: start;
        }
          @media (prefers-reduced-motion: no-preference) and (min-width: 640px) {
            @supports (animation-timeline: view()) {
              @keyframes reveal {
                from {
                  filter: blur(8px);
                  opacity: 0.25;
                  scale: .90;
                }
              }
              .gallery__images--wrap label{

              animation: reveal linear both;
              animation-timeline: view(inline);
              animation-range: 0vh 40vh;
      }
            }
          }

          .gallery__images--wrap label:focus-within {
            opacity: 1;
            scale: 1;
          }

          .gallery__images--wrap label >* {
            grid-area: 1 / 1;
          }

          .gallery__images--wrap label >span {
            margin-block-end: 3.75rem;
          }

          .gallery__images--wrap label input {
            block-size: 100%;
            inline-size: 100%;
          }
              [data-theme="dark"] .gallery__images--wrap label picture:first-of-type img {
                display: none;
              }
              [data-theme="light"] .gallery__images--wrap label picture:last-of-type img {
                display: none;
              }

          .gallery__images--wrap label p:last-child {
            align-self: end;
            margin-block-start: 3.75rem;
          }

  .gallery-sides {
    --column__width: 320px;
  }

    .gallery-sides a {
      color: var(--color__base);
      text-decoration: unset;
      transition: 0.375s var(--transition);
      transition-property: transform;
    }

      @media(min-width: 600px) {

    .gallery-sides a {
        grid-template-columns: auto 1fr
    }
      }

      .gallery-sides a:hover {
        transform: scale(1.00625);
      }

    .gallery-sides svg {
      border-radius: var(--size__m);
    }

  .process {
    container-type: inline-size;
    grid-template-columns: 4rem 1fr;

  }

    @container (min-width: 40rem) {

  .process {
      -moz-column-gap: var(--size__l);
           column-gap: var(--size__l)

  }
    }

    .process h3,
    .process p {
      margin-top: unset;
    }

    .process p {
      grid-column: 1/-1;
    }

      @container (min-width: 40rem) {

    .process p {
        grid-column: 2
    }
      }

  .profile__img {
    aspect-ratio: 640/854;
    clip-path: shape(from 10.42% 93.65%, curve by 43.05% -6.71% with 13.88% 15.91%/26.77% -2.6%, curve by 40.55% -2.1% with 16.28% -4.1%/26.77% 13.71%, curve by -18.38% -65.85% with 13.78% -15.81%/2.1% -42.43%, curve to 5.72% 14.09% with 55.07% -4.33%/23.7% -6.43%, curve by 14.68% 43.74% with -17.98% 20.52%/11.89% 26.92%, curve to 10.42% 93.65% with 23.2% 74.63%/-3.47% 77.74%);
    max-inline-size: var(--width__xs);
  }

    .profile__img:hover img {
      transform: scale(1.0625);
    }

      [data-theme="dark"] .profile__img:hover img {
        filter: brightness(1) grayscale(0);
      }

    .profile__img img {
      animation: var(--animation);
      inline-size: 100%;
      transform: scale(1.0125);
      transition: transform 0.75s var(--transition);
    }

  .profile__wrap {
    container-type: inline-size;
  }

    @container (min-width: 40rem) {
      .profile__wrap >span {
        -moz-column-gap: var(--size__l);
             column-gap: var(--size__l);
        grid-template-columns: auto 1fr;
      }
    }

  .reccommendation {
    padding-block-start: var(--size__m);
    padding-block-end: unset;
    padding-inline: unset;
  }

    .reccommendation >p {
      font-family: var(--type__family--secondary);
      font-weight: 300;
      padding-inline: var(--size__l);
    }

      .reccommendation >p:first-child:before,
      .reccommendation >p:last-of-type:after {
        color: var(--color__highlight);
        display: inline-block;
        font-size: var(--type__size--xxxl--fluid);
        line-height: var(--type__lineheight--l--fluid);
        transform: translateY(0.5ch);
      }

      .reccommendation >p:first-child:before {
        content: open-quote;
        margin-inline-start: -0.625ch;
        margin-inline-end: 0.125ch;
      }

      .reccommendation >p:last-of-type:after {
        content: close-quote;
        margin-inline-start: 0.125ch;
      }
      .interfaces article >* {
        min-inline-size: 0;
      }

      .interfaces article h1 {
        grid-column: 1/-1;
      }

      .interfaces article .interfaces__tile {
        min-inline-size: 0;
        text-decoration: none;
      }

        .interfaces article .interfaces__tile svg {
          transition: scale 0.375s ease-in;
        }
          .interfaces article .interfaces__tile:focus svg, .interfaces article .interfaces__tile:hover svg {
            scale: 1.03125;
          }
}

@media print {

  :root {
    --maxWidth: var(--width__xl);
  }

  html {
    font-size: 80%;
  }

  body>header {
    overflow: hidden;
    padding-top: 0;
    position: relative;
  }
      body>header nav section:last-child >* {
        display: none;
      }

      body>header nav section:last-child:after {
        content: "jaredpdesigns@gmail.com • 503-474-7437";
        display: inline-flex;
        font-size: var(--type__size--s);
      }

  main {
    overflow: unset;
    padding: var(--size__l) 0;
  }

    article >*+h1,
    article >h1+*,
    article >*+h2,
    article >h2+*,
    article >*+h3,
    article >*+hr {
      margin-top: var(--size__l);
    }

  li+li,
  ol ol {
    margin-top: var(--size__m);
  }

  hr {
    display: inline-block;
    border-top: var(--size__xs) solid var(--color__highlight--semi);
  }

  blockquote {
    padding: unset;
  }

  .agreement #signatures+hr,
  .agreement hr:last-of-type {
    page-break-before: always;
  }
}