@font-face {
  font-family: Artnoova;
  src: url("../fonts/Artnoova-Thin.7cbd2eda.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Artnoova;
  src: url("../fonts/Artnoova-Light.8e09b88e.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Artnoova;
  src: url("../fonts/Artnoova-Regular.c478c1ef.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Artnoova;
  src: url("../fonts/Artnoova-Medium.842d3585.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Metropolis;
  src: url("../fonts/Metropolis-Light.c0e720cb.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Metropolis;
  src: url("../fonts/Metropolis-Regular.890bd366.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Metropolis;
  src: url("../fonts/Metropolis-Medium.f8927012.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

*, :before, :after {
  box-sizing: inherit;
}

:root {
  --light-fg: #196666;
  --light-bg: #fff4e0;
  --dark-fg: #f9e9c8;
  --dark-bg: #125454;
  --backdrop: #000a0acc;
  --fg: var(--light-fg);
  --bg: var(--light-bg);
  --theme-toggle-timing: 2s;

  @media (prefers-color-scheme: dark) {
    --fg: var(--dark-fg);
    --bg: var(--dark-bg);
  }

  &[data-theme="light"] {
    --fg: var(--light-fg);
    --bg: var(--light-bg);
    color-scheme: light;
  }

  &[data-theme="dark"] {
    --fg: var(--dark-fg);
    --bg: var(--dark-bg);
    color-scheme: dark;
  }

  &.loaded {
    transition: var(--theme-toggle-timing) background-color, .4s color;
  }

  --content-width: 66em;
  --gutter: 3em;
  --spacing: 3em;

  @media (width <= 1280px) {
    --gutter: 2em;
  }

  @media (width <= 540px) {
    --gutter: 1em;
  }

  background: var(--bg);
  box-sizing: border-box;
  color: var(--fg);
  color-scheme: light dark;
  -webkit-tap-highlight-color: transparent;
  height: 100%;
  font: 300 22px / 1.32 Metropolis, sans-serif;
}

body {
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  display: flex;
}

h1 {
  font-family: Artnoova, sans-serif;
  font-size: 2.2em;
  font-weight: 200;
}

h2 {
  font-family: Artnoova, sans-serif;
  font-weight: 300;
}

a {
  color: inherit;
  text-underline-offset: .15em;
  text-decoration-thickness: from-font;

  &:hover {
    text-decoration-style: dashed;
  }
}

img {
  vertical-align: middle;
  max-width: 100%;
}

main {
  margin: var(--spacing) auto;
  max-width: calc(var(--content-width)  + 2 * var(--gutter));
  padding-inline: var(--gutter);
  width: 100%;
}

.page--home {
  text-align: center;
  margin-block: auto;
}

.page--404 {
  text-align: center;
  margin-block: auto;

  & h1 {
    margin: 0;
    font-size: 5em;
    font-weight: 200;
  }
}

body > footer {
  --bg: var(--dark-bg);
  --fg: var(--dark-fg);
  background: var(--bg);
  color: var(--fg);
  margin-block: var(--spacing) 0;
  padding-block: var(--spacing);

  & > div {
    margin: var(--spacing) auto;
    max-width: calc(var(--content-width)  + 2 * var(--gutter));
    padding-inline: var(--gutter);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-block: 0;
    display: flex;
  }

  & a {
    font-size: smaller;
    text-decoration-line: none;

    &:hover {
      text-decoration-line: underline;
    }
  }

  @media (width <= 640px) {
    padding-block: var(--gutter);

    & > div {
      flex-direction: column;
    }

    & small {
      order: 3;
      margin-top: .4em;
    }

    & a {
      order: 2;
      margin-top: 1em;
    }
  }
}

.fslightbox-container.fslightbox-container {
  background: var(--backdrop);

  & .fslightbox-slide-number-container {
    color: var(--dark-fg);
  }

  & .fslightbox-toolbar {
    background: var(--dark-bg);
  }

  & .fslightbox-slide-btn {
    background: var(--dark-bg);
    border-radius: 9999em;
  }

  & .fslightbox-svg-path {
    fill: var(--dark-fg);
  }
}

body > header {
  --bg: var(--dark-bg);
  --fg: var(--dark-fg);
  background: var(--bg);
  color: var(--fg);
  margin-block: 0;
  padding-block: 1em;

  & > div {
    margin: var(--spacing) auto;
    max-width: calc(var(--content-width)  + 2 * var(--gutter));
    padding-inline: var(--gutter);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-block: 0;
    display: flex;
  }

  & h1 {
    text-transform: uppercase;
    align-items: center;
    margin: 0;
    font-size: 50px;
    line-height: 1;
    display: flex;

    & .logomark {
      cursor: pointer;
      border-radius: 9999em;
      margin-inline: -.16em;

      &[hidden] {
        display: none;
      }
    }

    & a {
      margin-left: .4em;
      text-decoration: none;
    }

    @media (width <= 720px) {
      font-size: 38px;

      & .logomark {
        width: 60px !important;
        height: 60px !important;
      }
    }
  }

  & .themeToggle {
    color: currentColor;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;

    & .hex {
      transform-origin: center;
      will-change: transform;
    }

    & svg {
      transition: var(--theme-toggle-timing) fill;
      fill: var(--bg);
      display: block;
    }

    &:hover .hex {
      transition: transform .3s;
      transform: rotate(60deg);
    }

    & .rays {
      transform-origin: center;
      transition: transform .4s .4s;
    }

    & .inner {
      transition: transform .4s .4s;
    }

    [data-theme="light"] & .rays {
      transition-delay: .2s;
      transform: scale(.75);
    }

    [data-theme="dark"] & .inner {
      transition-delay: .2s;
      transform: translateX(-10px);
    }
  }
}

.page--instructions {
  & figure {
    margin: var(--spacing) 0;

    & > img, & > [x-data="swiper"] {
      border-radius: 1.4em;
    }

    & .has-lighbox {
      cursor: pointer;
    }
  }

  @media (width >= 961px) {
    & figure {
      align-items: flex-start;
      display: flex;

      & > * {
        width: calc(50% - var(--gutter) / 2);
      }

      & > :first-child {
        margin-right: var(--gutter);
      }
    }
  }

  @media (width <= 960px) {
    & h1 {
      margin: 0;
      font-size: 1.8em;
    }
  }
}

.page--leafy-warbler {
  margin: var(--spacing) auto;
  max-width: calc(var(--content-width)  + 2 * var(--gutter));
  padding-inline: var(--gutter);
  column-gap: var(--gutter);
  grid-auto-flow: dense;
  grid-template-columns: repeat(2, calc(50% - var(--gutter) / 2));
  grid-template-rows: 0fr 1fr;
  width: 100%;
  display: grid;

  & header {
    grid-column: 2;

    & h1 {
      font-size: 2.2em;
      font-weight: 300;
    }

    & .price {
      font-family: Artnoova, sans-serif;
      font-size: 2em;
      font-weight: 200;

      & small {
        margin-right: .2em;
        font-size: .56em;
        font-weight: 300;
      }
    }

    & .buy {
      background: var(--fg);
      box-shadow: 0 0 0 0 var(--bg), 0 0 0 0 var(--fg);
      color: var(--bg);
      vertical-align: .25em;
      border-radius: 999em;
      margin-left: 1em;
      padding: .2em 1em;
      font-family: Artnoova, sans-serif;
      font-size: 1.1em;
      font-weight: 500;
      text-decoration: none;
      transition: box-shadow .15s;
      display: inline-block;

      &:hover {
        box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--fg);
      }
    }

    & .notice {
      font-size: .8em;

      &:before {
        content: "!";
        text-align: center;
        border: thin solid;
        border-radius: 9999em;
        width: 1.3em;
        height: 1.3em;
        margin-right: .2em;
        font-family: Artnoova, sans-serif;
        font-weight: 400;
        line-height: 1.18;
        display: inline-block;
      }

      & strong {
        font-weight: 500;
      }

      & span {
        display: inline-block;
      }
    }
  }

  & .gallery {
    aspect-ratio: 1;
    background: var(--light-fg);
    border-radius: 1.4em;
    grid-row: 1 / span 2;
    margin: 0;
    overflow: hidden;

    & .swiper-slide.video {
      aspect-ratio: 1;
      box-sizing: border-box;
      align-items: center;
      padding: 1.4em;
      display: flex;
    }

    & video {
      border-radius: 1.4em;
      max-width: 100%;
    }
  }

  & ul li {
    margin-block: .4em;
  }

  & > video {
    border: .2em solid var(--light-fg);
    margin-top: var(--spacing);
    border-radius: 1.4em;
    grid-column: 1 / span 2;
    justify-self: center;
    width: 960px;
    max-width: 100%;
  }

  & .details {
    align-self: center;
  }

  & dl {
    grid-template-columns: max-content 1fr;
    display: grid;

    & dt, & dd {
      margin-left: 1em;
    }
  }

  & svg.distance {
    vertical-align: text-bottom;
  }

  & .leaf-models {
    margin: var(--spacing) 0 0;
    border-radius: 1.4em;
    grid-column: 2;
  }

  & .diagram {
    margin: var(--spacing) 0 0;
    border-radius: 1.4em;
  }

  @media (width <= 960px) {
    display: block;

    & header {
      text-align: center;
      margin-bottom: 2em;
    }
  }

  @media (width <= 380px) {
    & header .buy {
      margin: 1em 1.4em;
    }
  }
}

[x-data="swiper"] {
  width: 100%;
  position: relative;
  overflow: hidden;

  & .navigation button {
    background: var(--dark-bg);
    color: var(--dark-fg);
    border: none;
    border-radius: 9999em;
    width: 3em;
    height: 3em;
    padding: 0;
    top: auto;
    bottom: .8em;

    &:after {
      font-size: 1.8em;
      transition: transform .15s;
    }

    &.swiper-button-prev {
      padding-right: .3em;

      &:hover:after {
        transform: translate(-.15em);
      }
    }

    &.swiper-button-next {
      padding-left: .3em;

      &:hover:after {
        transform: translate(.15em);
      }
    }
  }
}
/*# sourceMappingURL=main.34df27b5.css.map */