@font-face {
  font-family: "Playfair";
  font-style: normal;
  font-weight: 360 900;
  font-stretch: 88% 113%;
  font-display: swap;
  font-feature-settings: "calt" 1, "case" 1, "liga" 1, "cpsp" 1, "kern" 1;
  src: url("/assets/fonts/playfair-roman.woff2") format(woff2) tech(variations);
}

@font-face {
  font-family: "Playfair";
  font-style: italic;
  font-weight: 360 900;
  font-stretch: 88% 113%;
  font-display: swap;
  font-feature-settings: "calt" 1, "case" 1, "liga" 1, "cpsp" 1, "kern" 1;
  src: url("/assets/fonts/playfair-italic.woff2") format(woff2) tech(variations);
}

@font-face {
  font-family: "Jakarta";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  font-feature-settings: "calt" 1, "case" 1, "liga" 1, "cpsp" 1, "kern" 1;
  src: url("/assets/fonts/jakarta-roman.woff2") format(woff2) tech(variations);
}

@font-face {
  font-family: "Jakarta";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  font-feature-settings: "calt" 1, "case" 1, "liga" 1, "cpsp" 1, "kern" 1;
  src: url("/assets/fonts/jakarta-italic.woff2") format(woff2) tech(variations);
}

:root {
  --color-bg-base: #fdf9f3;
  --color-bg-alt: #f7f3ed;
  --color-bg-muted: #ebe8e2;
  --color-bg-orange: #ffdcc2;
  --color-bg-brown: #2a1810;

  --color-fg-orange: #ffdcc2;
  --color-fg-brown: #845326;
  --color-fg-wood: #4f4440;
  --color-fg-charcoal: #1c1c18;
  --color-fg-nero: #050100;

  --type-size-xs: 0.75rem;
  --type-size-sm: 0.875rem;
  --type-size-md: 1rem;
  --type-size-lg: 1.125rem;
  --type-size-xl: 1.5rem;
  --type-size-x2: 2rem;
  --type-size-x3: 3rem;

  --type-lead-xs: 1rem;
  --type-lead-sm: 1.5rem;
  --type-lead-md: 1.5rem;
  --type-lead-lg: 1.5rem;
  --type-lead-xl: 2rem;
  --type-lead-x2: 2rem;
  --type-lead-x3: 3rem;

  --breakpoint-xs: 512px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1536px;
}

html {
  overscroll-behavior: none;
}

body {
  font-family: "Jakarta", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  background-color: var(--color-bg-base);
  color: var(--color-fg-charcoal);
}

.button {
  font-weight: 500;
  font-size: var(--type-size-xs);
  line-height: var(--type-lead-xs);
  padding: 0.75rem 1rem;
  border-radius: 1.5rem;
  display: flex;
  gap: 0.25rem;
  align-items: center;
  cursor: pointer;
  transition: background-color 250ms ease, box-shadow 500ms ease;
  @media (width >= 768px) {
    font-size: var(--type-size-sm);
    line-height: var(--type-lead-sm);
  }
  &:hover {
    box-shadow: 0 20px 25px -5px hsl(0deg 0% 0% / 10%), 0 8px 10px -6px hsl(0deg 0% 0% / 10%);
  }
  &:disabled {
    opacity: 50%;
  }

  &.button--primary {
    background-color: var(--color-bg-brown);
    color: #ffffff;
    &:hover {
      background-color: #3c2920;
    }
  }

  &.button--secondary {
    background-color: #ffffff;
    color: var(--color-fg-brown);
    &:hover {
      background-color: var(--color-bg-alt);
    }
  }

  & > svg {
    width: 0.75lh;
    height: 0.75lh;
    display: block;
  }

  & > span {
    text-box: trim-both cap alphabetic;
  }
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-fg-nero);
  font-family: "Playfair", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.wrapper {
  --inline-padding: 1rem;
  --inline-max-size: var(--breakpoint-md);

  display: grid;
  column-gap: var(--inline-padding);
  grid-template-columns: [full-start left-start] 1fr [content-start left-end] min(var(--inline-max-size), calc(100% - var(--inline-padding) * 2)) [right-start content-end] 1fr [full-end right-end];
  & > * {
    grid-column: content;
  }
  & > .full-bleed {
    grid-column: full;
  }
}

.sectionheader {
  p {
    text-transform: uppercase;
    color: var(--color-fg-brown);
    font-size: var(--type-size-xs);
    line-height: var(--type-lead-xs);
    font-weight: 700;
    @media (width >= 768px) {
      font-size: var(--type-size-sm);
      line-height: var(--type-lead-sm);
    }
  }

  h2 {
    font-size: var(--type-size-x2);
    line-height: var(--type-lead-x2);
    text-wrap: balance;
    @media (width >= 768px) {
      font-size: var(--type-size-x3);
      line-height: var(--type-lead-x3);
    }
  }
}

@scope (body > .topbar) {
  :scope {
    background-color: hsl(35deg 75% 98% / 85%);
    box-shadow: 0 1px 16px hsl( 0deg 0% 25% / 10%);
    position: sticky;
    top: 0;
    backdrop-filter: blur(10px);
    z-index: 999;
  }

  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 0.75rem;
    display: flex;
  }

  .logo {
    height: 2.5rem;
    width: auto;
    display: block;
  }

  .menu {}
}

@scope (body > .hero) {
  :scope {
    background-color: hsl(28deg 50% 95%);
    background-image: radial-gradient(at 0% 85%, hsl(28deg 50% 85%) 0px, transparent 50%), radial-gradient(at 100% 15%, hsl(28deg 50% 85%) 0px, transparent 50%);
    padding-block: 2.5rem;
    @media (width >= 768px) {
      padding-block: 4rem;
    }
    @media (width >= 1024px) {
      padding-block: 6rem;
    }
  }

  .content {
    display: flex;
    gap: 1.5rem;
    align-items: center;
  }

  .copy {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    .pill {
      background-color: var(--color-bg-orange);
      border-radius: 1.5rem;
      padding: 0.5rem 1rem;
      display: flex;
      font-weight: 500;
      color: var(--color-fg-brown);
      font-size: var(--type-size-sm);
      line-height: var(--type-lead-sm);
      width: auto;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.25rem;

      & > svg {
        width: 1em;
        height: 1em;
        display: block;
      }

      & > span {
        text-box: trim-both cap alphabetic;
      }
    }

    .lead {
      h1 {
        font-size: var(--type-size-x2);
        line-height: var(--type-lead-x2);
        margin-bottom: 0.5rem;
        @media (width >= 768px) {
          font-size: var(--type-size-x3);
          line-height: var(--type-lead-x3);
        }
        & > span {
          white-space: nowrap;
        }
        & > span:first-child {
          color: var(--color-fg-nero);
          font-weight: 700;
          letter-spacing: -0.05em;
        }
        & > span:last-child {
          color: var(--color-fg-brown);
          font-style: italic;
          font-weight: 400;
        }
      }

      p {
        margin-bottom: 0.5rem;
        font-size: var(--type-size-md);
        line-height: var(--type-lead-md);
        color: var(--color-fg-wood);
        @media (width >= 768px) {
          font-size: var(--type-size-lg);
          line-height: var(--type-lead-lg);
        }
      }
    }
  }

  .graphic {
    display: none;
    min-width: 35%;
    @media (width >= 768px) {
      display: block;
    }

    img {
      display: block;
      border-radius: 1.5rem;
      width: 100%;
      height: auto;
      box-shadow: 0 20px 25px -5px hsl(0deg 0% 0% / 10%), 0 8px 10px -6px hsl(0deg 0% 0% / 10%);
    }
  }
}

@scope (#producten) {
  :scope {
    padding-block: 4rem;
    row-gap: 2rem;
    scroll-margin-top: 4.5rem;
  }

  .products {
    --item-width: 18rem;
    --grid-gap: 1.5rem;
    --cols-max: 3;

    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--item-width), (100% - (var(--cols-max) - 1) * var(--grid-gap)) / var(--cols-max))), 1fr));
  }
}

@scope (#producten .products > .product) {
  :scope {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 1.5rem;
    box-shadow: 0px 2px 6px 0px hsl(0deg 0% 0% / 10%);
    transition: box-shadow 500ms ease;
    display: flex;
    gap: 1rem;
    flex-direction: column;

    &:hover {
      box-shadow: 0 20px 25px -5px hsl(0deg 0% 0% / 10%), 0 8px 10px -6px hsl(0deg 0% 0% / 10%);
    }
  }

  .picture {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
  }

  h3 {
    font-size: var(--type-size-xl);
    line-height: var(--type-lead-xl);
  }

  p {
    font-size: var(--type-size-sm);
    line-height: var(--type-lead-sm);
  }

  hr {
    border-top: 1px solid var(--color-bg-muted);
  }

  .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .price {
    color: var(--color-fg-nero);
    font-family: "Playfair", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    font-size: var(--type-size-xl);
    line-height: var(--type-lead-xl);
    letter-spacing: -0.025em;
  }

  .weight {
    font-weight: 600;
    font-size: var(--type-size-md);
    line-height: var(--type-lead-md);
    color: var(--color-fg-brown);
  }

  form {
    display: flex;
    gap: 1rem;

    > select {
      font: inherit;
      font-family: ui-monospace, monospace;
      flex-grow: 1;
      border-radius: 0.5rem;
      padding: 0.25rem 1rem;
      background-color: white;
      border: 1px solid var(--color-bg-muted);
    }

    > button {
      margin-left: auto;
      background-color: var(--color-bg-brown);
      color: white;
      line-height: 1rem;
      font-size: 0.8125rem;
    }
  }
}

@scope (#werkwijze) {
  :scope {
    padding-block: 4rem;
    row-gap: 1rem;
    background-color: #ebe8e2;
    scroll-margin-top: 4.5rem;
  }

  > .sectionheader,
  > p {
    text-align: center;
    @media (width >= 512px) {
      padding-inline: 12vw;
    }
  }

  > p {
    font-size: var(--type-size-md);
    line-height: var(--type-lead-md);
    @media (width >= 768px) {
      font-size: var(--type-size-lg);
      line-height: var(--type-lead-lg);
    }
  }

  .steps {
    --item-width: 18rem;
    --grid-gap: 1.5rem;
    --cols-max: 3;

    margin-top: 2rem;
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--item-width), (100% - (var(--cols-max) - 1) * var(--grid-gap)) / var(--cols-max))), 1fr));
  }

  .step {
    border-radius: 1rem;
    background-color: #ffffff;
    padding: 1.5rem;
    box-shadow: 0px 2px 6px 0px hsl(0deg 0% 0% / 10%);

    svg {
      display: block;
      width: 3rem;
      height: 3rem;
    }

    h3 {
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      font-size: var(--type-size-xl);
      line-height: var(--type-lead-xl);
    }

    p {
      font-size: var(--type-size-sm);
      line-height: var(--type-lead-sm);
    }
  }
}

@scope (body > footer) {
  :scope {
    padding-block: 4rem;
    row-gap: 2rem;
  }

  & > .columns {
    --item-width: 18rem;
    --grid-gap: 1.5rem;
    --cols-max: 3;

    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--item-width), (100% - (var(--cols-max) - 1) * var(--grid-gap)) / var(--cols-max))), 1fr));

    & > .column {
      h2 {
        margin-bottom: 1rem;
        font-size: var(--type-size-xl);
        line-height: var(--type-lead-xl);
      }

      p, dt, dd, address {
        font-size: var(--type-size-sm);
        line-height: var(--type-lead-sm);
      }

      dl {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0.5rem;
        margin-bottom: 1rem;
      }
  
      dt {
        font-weight: 600;
      }
    }

    & > .column:nth-child(1) > svg {
      height: 2.5rem;
      width: auto;
      margin-bottom: 0.75rem;
    }
  }

  & > .legal {
    font-size: var(--type-size-sm);
    line-height: var(--type-lead-sm);
    border-top: 1px solid #dccdbd;
    padding-top: 2rem;
    text-align: center;
  }
}