/* Full-bleed bakery photography behind the floating home navigation. */
body.page-home header {
  background: rgba(255, 250, 242, .96);
  border-bottom-color: rgba(83, 62, 44, .12);
  box-shadow: 0 5px 20px rgba(45, 31, 22, .045);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
}

body.page-home header.is-scrolled {
  background: rgba(255, 250, 242, .72);
  border-color: rgba(255, 255, 255, .68);
  box-shadow: 0 12px 40px rgba(45, 31, 22, .16), inset 0 1px 0 rgba(255, 255, 255, .76);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

body.page-home header .nav-link,
body.page-home header .icon-button,
body.page-home header .language-toggle,
body.page-home header .menu-button {
  text-shadow: 0 1px 5px rgba(255, 250, 242, .78);
}

header .logo img {
  display: block;
  width: 132px;
  height: auto;
}

.footer-logo-art img {
  display: block;
  width: min(72vw, 720px);
  height: auto;
  filter: brightness(0) invert(1);
}

body.page-home .hero {
  margin-top: -82px;
  height: calc(700px + 82px);
  max-height: 932px;
}

body.page-home .hero-content {
  padding-top: 160px;
}

body.page-home .hero-image picture,
body.page-home .hero-image img {
  display: block;
  width: 100%;
  height: 100%;
}

body.page-home .hero-image img {
  object-fit: cover;
  object-position: 64% 50%;
}

@media (max-width: 700px) {
  body.page-home header,
  body.page-home header.is-scrolled {
    background: rgba(255, 250, 242, .94);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
  }

  body.page-home header.is-scrolled {
    background: rgba(255, 250, 242, .76);
    -webkit-backdrop-filter: blur(23px) saturate(175%);
    backdrop-filter: blur(23px) saturate(175%);
  }

  body.page-home .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    max-height: none;
    margin-top: 0;
    background: var(--oat);
  }

  body.page-home .hero-image {
    position: relative;
    inset: auto;
    height: clamp(320px, 107vw, 610px);
  }

  body.page-home .hero-image img {
    object-position: 50% 56%;
  }

  body.page-home .hero:after {
    display: none;
  }

  body.page-home .hero-content {
    position: relative;
    inset: auto;
    width: 100%;
    padding: 28px clamp(20px, 6vw, 38px) 32px;
    background: var(--oat);
    color: var(--espresso);
  }

  body.page-home .hero-content .eyebrow,
  body.page-home .hero p {
    color: var(--cocoa);
    text-shadow: none;
  }

  body.page-home .hero h1 {
    color: var(--espresso);
    font-size: clamp(37px, 10.3vw, 54px);
    text-shadow: none;
  }

  body.page-home .hero h1 em {
    color: var(--crust);
  }

  body.page-home .hero p {
    font-size: 15px;
    max-width: 40ch;
  }

  body.page-home .hero-actions {
    gap: 14px;
  }

  body.page-home .hero .cta {
    background: #785521;
    border-color: #785521;
    color: var(--flour);
    box-shadow: none;
  }

  body.page-home .hero .cta:hover {
    background: #5c3f19;
    border-color: #5c3f19;
  }
}