/* Home hero: use the monitor width and scale its editorial composition together. */
@media (min-width: 1001px) {
  .home-page .hero {
    --hero-unit: clamp(10px, min(1vw, 1.6svh), 28px);
    --hero-edge: clamp(38px, 3.8vw, 144px);
    --hero-heading-top: calc(clamp(100px, 7vw, 140px) + var(--hero-unit));
    --hero-copy-size: clamp(30px, calc(2.5 * var(--hero-unit)), 60px);
    --hero-copy-gap: clamp(22px, calc(1.6 * var(--hero-unit)), 36px);
    --hero-action-height: clamp(54px, calc(4 * var(--hero-unit)), 80px);
    --hero-bottom-gap: clamp(66px, calc(5 * var(--hero-unit)), 128px);
    height: clamp(700px, 100svh, 1700px);
    aspect-ratio: auto;
  }

  .home-page .hero-title {
    left: var(--hero-edge);
    top: var(--hero-heading-top);
  }

  .home-page .hero-bistro {
    font-size: calc(22.5 * var(--hero-unit));
  }

  .home-page .hero-si {
    font-size: calc(22 * var(--hero-unit));
    top: calc(17 * var(--hero-unit));
    left: calc(17 * var(--hero-unit));
  }

  .home-page .si-accent {
    width: calc(.8 * var(--hero-unit));
    height: calc(3 * var(--hero-unit));
    top: calc(4.1 * var(--hero-unit));
    right: calc(.2 * var(--hero-unit));
  }

  .home-page .hero-subbrand {
    left: var(--hero-edge);
    top: auto;
    bottom: calc(var(--hero-bottom-gap) + var(--hero-action-height) + var(--hero-copy-gap) + 2.4 * var(--hero-copy-size) + 24px);
    font-size: clamp(16px, 1.25vw, 28px);
  }

  .home-page .hero-note {
    top: calc(var(--hero-heading-top) + 3 * var(--hero-unit));
    right: var(--hero-edge);
    font-size: clamp(19px, 1.5vw, 34px);
    line-height: 1.4;
  }

  .home-page .hero-bottom {
    left: var(--hero-edge);
    bottom: var(--hero-bottom-gap);
  }

  .home-page .hero-description {
    font-size: var(--hero-copy-size);
    line-height: 1.2;
    margin-bottom: var(--hero-copy-gap);
  }

  .home-page .hero-bottom .oval {
    font-size: clamp(22px, calc(1.65 * var(--hero-unit)), 36px);
    min-height: var(--hero-action-height);
    padding: 12px clamp(24px, 2vw, 48px);
    gap: .6em;
  }

  .home-page .scroll-link {
    left: var(--hero-edge);
    bottom: clamp(12px, 1vw, 26px);
    min-height: 44px;
  }

  .home-page .scroll-link .micro {
    font-size: clamp(11px, .85vw, 18px);
  }
}

@media (min-width: 1800px) {
  body.home-page {
    max-width: none;
  }

  .home-page #main > section:not(.hero),
  .home-page .footer {
    max-width: 1800px;
    margin-inline: auto;
  }

  .home-page .hero .header {
    padding: clamp(20px, 1.2vw, 36px) var(--hero-edge);
    gap: clamp(26px, 2vw, 56px);
  }

  .home-page .hero .header .brand {
    flex-basis: 300px;
    width: 300px;
    max-width: 300px;
  }

  .home-page .hero .header .desktop-nav {
    gap: clamp(28px, 2vw, 56px);
    font-size: clamp(24px, 1.2vw, 32px);
  }

  .home-page .hero .header :is(.header-book, .header-cart-button) {
    min-height: 52px;
    padding: 12px 24px;
    font-size: clamp(21px, 1vw, 28px);
  }
}