@layer layout {
  body {
    font-family: var(--font-body);
    background: var(--page);
    color: var(--ink);
  }

  :is(h1, h2, h3, h4, h5, h6),
  .header__title,
  .menu__title {
    font-family: var(--font-display);
    font-variation-settings: var(--font-display-settings);
    font-optical-sizing: auto;
  }

  .main {
    min-block-size: 100dvh;
    padding-block-start: var(--header-height);
  }

  body.layout-cover {
    overflow-y: hidden;
  }

  body.layout-cover .main {
    min-block-size: 0;
    padding-block-start: 0;
  }

  body.layout-cover .header {
    background: transparent;
    backdrop-filter: none;
    color: var(--ink-on-image);
    text-shadow: var(--shadow-on-image);
  }

  .lightbox {
    border: 0;
    padding: 0;
    background: var(--page);
  }

  .lightbox:popover-open {
    display: grid;
    place-items: center;
    inline-size: 100vw;
    max-inline-size: 100vw;
    block-size: 100dvh;
    max-block-size: 100dvh;
    padding: var(--gutter);
  }

  .lightbox :is(img, picture) {
    display: block;
    max-block-size: 90dvh;
    inline-size: auto;
    max-inline-size: 100%;
  }

  .lightbox__close {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    z-index: 1;
    font-size: var(--font-size-small);
  }
}

@layer components {
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .work-grid__item {
        animation: work-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
      }

      @keyframes work-reveal {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
    }
  }
}