/* Homepage — monochrome editorial. Ink on warm paper, serif display, one
   thread of brass. Uses shared components from theme.css; only page-specific
   layout lives here. Static only: no hover/focus/active, no transitions,
   no animation. */

/* ── Hero: text left, image plate right ── */
.home-hero{padding-block:var(--space-2xl) var(--space-xl)}
.home-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-2xl);align-items:center}
.home-hero__text{max-width:36ch}
.home-hero h1{margin-top:var(--space-s)}
.home-hero__lead{margin-top:var(--space-m);font-size:var(--step-1);color:var(--ink-2);line-height:1.6}
.home-hero .cta-row{margin-top:var(--space-l)}
.home-hero__media{margin:0}
.home-hero__media img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--ivory-2)}

/* ── Range: product cards (shared .product-card) ── */
.home-range{margin-top:var(--space-l)}

/* ── House band: image + text ── */
.home-house{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:center}
.home-house__media{margin:0}
.home-house__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.home-house__text{max-width:46ch}
.home-house__text h2{margin-top:var(--space-s)}
.home-house__text p{margin-top:var(--space-m);color:var(--ink-2)}

/* ── Category tiles ── */
.home-cats{margin-top:var(--space-l)}
.home-cat{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.home-cat__media{background:var(--ivory-2);overflow:hidden}
.home-cat__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.home-cat__label{font-family:var(--font-display);font-size:var(--step-2);color:var(--ink);margin-top:var(--space-s);font-weight:500}
.home-cat__note{font-size:var(--step--1);color:var(--ink-3);margin-top:.35em;max-width:28ch}

/* ── Closing band ── */
.home-close{max-width:52ch}
.home-close h2{margin-top:var(--space-s)}
.home-close p{margin-top:var(--space-m)}
.home-close .cta-row{margin-top:var(--space-l)}

@media (max-width:900px){
  .home-hero__grid,.home-house{grid-template-columns:1fr;gap:var(--space-l)}
  .home-hero__media{order:-1}
  .home-hero__media img{aspect-ratio:16/10}
}