:root {
  --brand-primary: #7654bb;
  color: #25382e;
  background: #f7f4ed;
  font-family: Georgia, serif;
}
* { box-sizing: border-box; }
body { margin: 0; }
.site-header { padding: 1.5rem 8%; border-bottom: 1px solid #deded2; font-size: 1.5rem; }
main { max-width: 1050px; margin: auto; padding: 2rem; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.eyebrow { font: 0.7rem system-ui; letter-spacing: 0.15em; }
h1 { max-width: 600px; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: normal; }
.supporting-copy, .sourcing-note { font: 1rem/1.7 system-ui; max-width: 38rem; }
.product { display: grid; place-items: center; min-height: 230px; background: #e4e9d9; border-radius: 0.5rem; }
.tin { padding: 2rem; background: #65775a; color: #faf7ef; border-radius: 0.6rem; font-size: 2rem; text-align: center; }
.tin small { display: block; margin-top: 1rem; font: 0.6rem system-ui; letter-spacing: 0.1em; }
.purchase { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-block: 1.5rem; }
.price { font: 1.5rem system-ui; }
.price small { display: block; font-size: 0.65rem; margin-top: 0.4rem; }
button { background: var(--brand-primary); color: white; border: 0; border-radius: 0.3rem; padding: 1rem 1.5rem; font: 0.9rem system-ui; }
button:focus-visible { outline: 3px solid #25382e; outline-offset: 4px; }
@media (min-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas: "copy product" "purchase product";
    align-items: center;
    column-gap: 2rem;
  }
  .hero-copy { grid-area: copy; }
  .product { grid-area: product; align-self: stretch; }
  .purchase { grid-area: purchase; margin-block: 0; }
}