:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #20211f;
  background: #f9f8f5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body, h1, p, figure { margin: 0; }
a { color: inherit; }
.wrap { width: min(1040px, calc(100% - 80px)); margin-inline: auto; }

.site-header { height: 76px; display: flex; align-items: center; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.045em; text-decoration: none; }
.wordmark img { display: block; flex: none; }
.hero { padding-block: 24px 32px; text-align: center; }
h1 { font-size: clamp(52px, 6.6vw, 80px); font-weight: 600; line-height: 1.02; letter-spacing: -0.06em; }
.hero-description { margin: 22px auto 0; font-size: 20px; line-height: 1.5; text-wrap: balance; }
.availability { margin-top: 16px; font-size: 16px; line-height: 1.5; color: #5e615b; text-wrap: balance; }
.product-visual img { display: block; width: 100%; height: auto; }
.site-footer { padding-block: 32px; font-size: 14px; line-height: 1.5; color: #5e615b; }

a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.skip-link { position: absolute; z-index: 1; top: 12px; left: 16px; padding: 12px 16px; background: #f9f8f5; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

@media (max-width: 700px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { height: 68px; }
  .hero { padding-block: 24px 28px; }
  h1 { font-size: clamp(44px, 11.8vw, 64px); }
  .hero-description { max-width: 340px; margin-top: 20px; font-size: 18px; line-height: 1.5; }
  .availability { margin-top: 14px; }
  .site-footer { padding-block: 28px; }
}