/* ============================================================
   bryndeli — product.css
   Page-specific styles for /product.html.
   Loaded after base.css and home.css; re-uses card recipes.
   ============================================================ */

/* ============= PAGE HEAD ============= */
.page-head {
  padding: 32px 0 56px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}
.page-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--pine);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 22px;
  font-weight: 500;
}
.page-head .eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--terracotta);
}
.page-head h1 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 100;
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--pine-deep);
  margin-bottom: 22px;
  max-width: 960px;
}
.page-head h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}
.page-head .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 22px);
  color: var(--bark-soft);
  line-height: 1.55;
  letter-spacing: -0.005em;
  max-width: 680px;
}

/* Tighten the first section under the page-head; the home version has 110px top padding */
main > section:first-of-type { padding-top: 72px; }

/* The .cta section here doesn't need the big top margin from home.css */
main > .cta { margin-top: 80px; }

/* ============= RESPONSIVE ============= */
@media (max-width: 580px) {
  .page-head { padding: 20px 0 36px; }
  .page-head .eyebrow { margin-bottom: 16px; }
  .page-head h1 { margin-bottom: 16px; }
  main > section:first-of-type { padding-top: 48px; }
  main > .cta { margin-top: 56px; }
}