/* Page-level layout: hero, section rhythm, prose articles, product page. */

/* Hero (home page) */
.hero {
  background: linear-gradient(180deg, var(--sand), var(--cream));
  padding: var(--space-8) 0 var(--space-7);
  text-align: center;
}
.hero .wrap { max-width: 46rem; }
.hero p {
  margin-inline: auto;
  font-size: var(--step-1);
}
.hero .btn { margin-top: var(--space-3); }

/* Shop / category page heading block */
.page-head { padding-block: var(--space-7) var(--space-6); }
.page-head p { font-size: var(--step-1); }

/* Generic vertical section rhythm */
.section { padding-block: var(--space-7); }

/* Two-column layout that collapses on narrow screens */
.split {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* Long-form article copy (about, contact, faq, policies) */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: var(--space-7);
}
.prose h2 { margin-top: var(--space-6); }
.prose h2:first-of-type { margin-top: var(--space-5); }

.signature {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--navy);
}

/* Stands in for a photo before real photography exists. */
.placeholder-media {
  aspect-ratio: 4 / 3;
  background: var(--sand);
  border-radius: var(--radius-md);
}

/* Product detail page */
.product {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1.1fr 1fr;
  padding-block: var(--space-7);
  align-items: start;
}

.product__media {
  aspect-ratio: 4 / 5;
  background: var(--sand);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.product__media img { width: 100%; height: 100%; object-fit: cover; }

.product__detail { display: flex; flex-direction: column; gap: var(--space-2); }

.product__price {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.product__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-3);
}

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field select {
  min-height: 44px; /* WCAG 2.2 SC 2.5.8 target size */
  padding: var(--space-2) var(--space-3);
  /* --hairline is only 1.38:1 on --paper — too faint to identify a form
     control's boundary. --clay clears 3:1 (SC 1.4.11 non-text contrast). */
  border: 1px solid var(--clay);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--step-0);
}

.product__status {
  min-height: 1.2em;
  font-size: var(--step--1);
  color: var(--body);
}

.product__copy { margin-top: var(--space-5); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .product { grid-template-columns: 1fr; }
}

/* Atmospheric photography bands */
.photo-band {
  position: relative;
  margin-block: var(--space-7);
  overflow: hidden;
  background: var(--sand);
}
.photo-band__img {
  display: block;
  width: 100%;
  height: clamp(240px, 42vw, 520px);
  object-fit: cover;
  /* Shared grade: pulls every borrowed image toward the brand palette so the
     set reads as ours rather than as unrelated stock photos. */
  filter: saturate(0.82) contrast(1.04) sepia(0.10);
}
.photo-band::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--navy) 12%, transparent);
  mix-blend-mode: multiply;
}
.photo-band--tall .photo-band__img { height: clamp(320px, 56vw, 680px); }

.split .photo-band { margin-block: 0; border-radius: var(--radius-sm); }
.split .photo-band__img { height: clamp(220px, 34vw, 380px); }