/* Home only: keep the approved artwork below the product catalog. */
.how-illustrated { text-align: center; }
.how-illustrated h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 32px; }
.how-illustrated ol { gap: 32px; }
.how-illustrated li { min-width: 0; }
.how-illustrated li::before { content: none; }
.how-illustrated h3 { font-size: 20px; letter-spacing: -.02em; margin: 20px 0 6px; }
.how-illustrated li p { color: var(--ink-2); margin: 0; }

/* Three windows onto one cached artwork, preserving the approved drawing.
   Only the illustration panels are shown; all headings and captions are HTML. */
.how-illustration {
  --frame-width: 444;
  position: relative;
  width: 100%;
  aspect-ratio: var(--frame-width) / 452;
  overflow: hidden;
  border-radius: var(--radius);
}
.how-illustration img {
  position: absolute;
  max-width: none;
  width: calc(1536 / var(--frame-width) * 100%);
  height: auto;
  left: calc(-1 * var(--frame-x) / var(--frame-width) * 100%);
  top: calc(-314 / 452 * 100%);
}
.how-illustration-making { --frame-x: 50; }
.how-illustration-choosing { --frame-x: 546; }
.how-illustration-packing { --frame-x: 1042; }

@media (max-width: 800px) {
  .how-illustrated ol { gap: 36px; }
  .how-illustrated li { width: 100%; max-width: 440px; justify-self: center; }
}

/* Home: say what Makefew is first, and give the featured product an obvious route to buy and
   a route to browse, inside the first phone screen (390 x 844). */
.home-intro { margin: 24px 0 0; max-width: 900px; font-size: 18px; color: var(--ink-2); }
.home-intro a { color: var(--ink); white-space: nowrap; }
.home-page .feature { padding-top: 24px; }
.feature-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }

@media (max-width: 800px) {
  .home-intro { margin-top: 16px; font-size: 16px; }
  .home-page .feature { gap: 16px; padding-top: 16px; }
  .home-page .feature-media { aspect-ratio: 3 / 2; }
  .home-page .feature .lede { font-size: 18px; margin-bottom: 8px; }
  .home-page .feature-price { margin: 4px 0 8px; }
  .feature-actions { margin-top: 16px; }
  .feature-actions .btn { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 480px) { .feature-actions { flex-direction: column; gap: 10px; } }

/* Card hover preview (see home-card-preview.js). The script adds .card-preview inside .card-media after a
   deliberate mouse hover; without the script none of this exists. It sits over the first photo, so it carries
   the frame's own background, and its photos use the same absolute, contained sizing as the card photo and the same
   background, so a photo with margins (a wide one after a portrait one) hides the previous photo. */
.card-preview { position: absolute; inset: 0; background: #eceae4; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.card-preview.on { opacity: 1; }
.card-preview img { opacity: 0; transition: opacity .4s ease; pointer-events: none; background: #eceae4; }
.card-preview img.on { opacity: 1; }
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .card-preview { display: none; } }