:root {
  color-scheme: light;
  --menu-color: #25451e;
  --menu-bg: #fff9fb;
  --focus: #fff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 14px; }
body { margin: 0; background: #fff; font-family: system-ui, sans-serif; }
.lp { width: 100%; margin-inline: auto; overflow: clip; }
.art-section { position: relative; width: 100%; line-height: 0; }
.art-section img { display: block; width: 100%; height: auto; }
/* Design source is a narrow vertical LP. At tablet/desktop it is 30% wider than the previous 624px layout. */
@media (min-width: 600px) {
  .lp { width: min(100%, 811px); }
}
.menu-trigger {
  position: absolute; top: 1.05%; right: 3.5%; z-index: 3;
  width: 8%; aspect-ratio: 1.15; padding: 0; border: 0; background: transparent;
  cursor: pointer;
  /* The original hamburger artwork is already in the hero image. Keep this hit area transparent. */
  background: transparent;
}
.menu-trigger:focus-visible, .menu-close:focus-visible, .menu-panel a:focus-visible, .hotspot:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hotspot { position: absolute; display: block; z-index: 2; border-radius: 999px; }
.hero-cta { left: 13%; top: 92%; width: 74%; height: 5%; }
.bottom-cta { left: 9%; top: 84%; width: 82%; height: 11%; }
.menu-panel {
  position: fixed; z-index: 10; inset: 0 0 0 auto; width: min(86vw, 360px); padding: 76px 28px 32px;
  display: flex; flex-direction: column; gap: 0; overflow-y: auto;
  background: var(--menu-bg); box-shadow: -12px 0 32px rgb(41 28 33 / 18%); line-height: 1.5;
}
.menu-panel[hidden] { display: none; }
.menu-panel a { display: block; padding: 16px 4px; border-bottom: 1px solid #e8d9df; color: var(--menu-color); text-decoration: none; font-size: 16px; }
.menu-panel a:last-child { margin-top: 16px; padding: 14px 16px; border: 0; border-radius: 999px; background: #06c755; color: white; text-align: center; }
.menu-close { position: absolute; top: 16px; right: 18px; border: 0; background: none; color: var(--menu-color); font-size: 32px; cursor: pointer; }
body.menu-open { overflow: hidden; }