/* ==========================================================================
   Homepage sections
   Matches the Stitch "Yak & Yeti Enterprises Homepage" screen.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 85vh;
  padding-block: 6rem;
  padding-inline: var(--page-margin);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* The scrim behind the headline — black, with light text over it.

   The first attempt was a cream wash, which is what the client was objecting
   to ("the photo behind looks very blur"): tinting a photo TOWARDS the page
   background flattens it, because it drags every pixel toward one pale value
   and kills the separation between them. A dark scrim does the opposite — it
   lowers brightness but leaves saturation and local contrast intact, so the
   red couch and the brass stay rich.

   It only works because the text flipped to light at the same time. Dark text
   on a darkened photo would have been worse than what we started with.

   Unlike the cream version this does not need to clear to nothing on the
   right: a slight, even deepening across the whole frame reads as deliberate
   grading rather than as half the photo being covered. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgb(0 0 0 / 0.70) 0%,
    rgb(0 0 0 / 0.58) 38%,
    rgb(0 0 0 / 0.40) 66%,
    rgb(0 0 0 / 0.34) 100%);
}

.hero__inner {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
}
.hero__title {
  color: var(--color-surface-bright);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
/* No second typeface. This was italic Libre Caslon at weight 400 against the
   roman at 700, which read to the client as "two different fonts of two
   lines". Same family, same weight, upright.

   Gold, not purple, now that the scrim is dark: the brand's purple is a dark
   colour and all but disappears against it. CLAUDE.md's rule that gold is
   decoration-only applies to the LIGHT background, where #D4AF37 fails
   contrast — on a dark ground the light gold is the accent that works, which
   is exactly what the collection tiles already use over their photos. */
.hero__title em { color: var(--color-secondary-fixed); font-style: normal; font-weight: inherit; }
.hero__lead {
  /* Back to the full measure. The narrowing was only needed while the scrim
     had to clear before it reached the products; the dark scrim covers the
     whole frame, so the copy can breathe again. */
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--color-surface-bright);
}
/* The outlined button is purple-on-light by default, which is invisible here. */
.hero__actions .btn--outline {
  border-color: color-mix(in srgb, var(--color-surface-bright) 70%, transparent);
  color: var(--color-surface-bright);
}
.hero__actions .btn--outline:hover {
  background: color-mix(in srgb, var(--color-surface-bright) 14%, transparent);
  border-color: var(--color-surface-bright);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding-top: 1rem;
}

@media (min-width: 640px) {
  .hero__actions { flex-direction: row; width: auto; }
}
@media (min-width: 768px) {
  .hero__title { font-size: 4rem; }
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero__content { grid-column: span 7 / span 7; }
}

/* ---- Curated Collections (bento grid) ------------------------------------ */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 300px;
  gap: 1.5rem;
}
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-surface-container-highest);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-ambient);
}
.tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.tile:hover .tile__img { transform: scale(1.05); }
.tile--ceramics { background: var(--color-surface); }
.tile--ceramics .tile__img { opacity: 0.8; }
.tile--bowls { background: var(--color-tertiary-fixed); }
.tile--bowls .tile__img { opacity: 0.7; }

.tile__shade { position: absolute; inset: 0; }
.tile__shade--up {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--color-inverse-surface) 90%, transparent),
    color-mix(in srgb, var(--color-inverse-surface) 40%, transparent),
    transparent);
}
.tile__shade--down {
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--color-inverse-surface) 80%, transparent));
}

.tile__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
}
.tile__caption--feature {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 2rem;
}
.tile__title {
  margin-bottom: 0.25rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  color: var(--color-surface-bright);
  transition: color 150ms var(--ease);
}
.tile--feature .tile__title { margin-bottom: 0.5rem; }
.tile:hover .tile__title { color: var(--color-secondary-fixed); }
.tile__text { color: var(--color-surface-dim); }
.tile__arrow {
  padding: 0.75rem;
  border-radius: var(--radius-soft);
  background: color-mix(in srgb, var(--color-surface-bright) 20%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--color-surface-bright);
  transition: all 150ms var(--ease);
}
.tile:hover .tile__arrow { background: var(--color-secondary); color: var(--color-on-secondary); }

.tile--wide {
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--color-primary-container) 10%, transparent);
}
.tile__half-media { display: none; width: 50%; height: 100%; }
.tile__half-media img { width: 100%; height: 100%; object-fit: cover; }
.tile__half-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 2rem;
}
.tile__half-body p { margin-bottom: 1.5rem; color: var(--color-on-surface-variant); }
.tile--wide .tile__title { margin-bottom: 0.5rem; color: var(--color-primary); }
.tile--wide:hover .tile__title { color: var(--color-secondary); }
.tile__link {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}
.tile__link .material-symbols-outlined { margin-left: 0.25rem; font-size: 0.875rem; }
.tile--wide:hover .tile__link { text-decoration: underline; }

@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile--feature { grid-column: span 8 / span 8; grid-row: span 2 / span 2; }
  .tile--small { grid-column: span 4 / span 4; }
  .tile--wide { grid-column: span 12 / span 12; }
  .tile__half-media { display: block; }
  .tile__half-body { width: 50%; padding-left: 3rem; }
}

/* ---- Featured Handicrafts ------------------------------------------------ */
.products {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--color-surface-container-highest);
  border-radius: var(--radius-card);
  background: var(--color-surface-container-low);
  box-shadow: var(--shadow-ambient);
}
.product-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.1);
  transition: background-color 300ms var(--ease);
}
.product-card:hover .product-card__media::after { background: transparent; }
.product-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem;
}
.product-card__title { margin-bottom: 0.5rem; font-size: 1.125rem; line-height: 1.75rem; }
.product-card__text {
  flex-grow: 1;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-on-surface-variant);
}
.product-card__cta {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding-block: 0.5rem;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-control);
  background: var(--color-surface-container);
  color: var(--color-primary);
  text-align: center;
  transition: background-color 150ms var(--ease);
}
.product-card__cta:hover { background: var(--color-surface-container-highest); }

@media (min-width: 640px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Our Story & Heritage ------------------------------------------------ */
.story-section { overflow-x: clip; } /* keeps the blurred glows from widening the page on phones */
.story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}
.story__media { position: relative; width: 100%; }
.story__frame {
  position: relative;
  z-index: 10;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--color-tertiary-fixed);
  border-radius: var(--radius-soft) var(--radius-soft) 0 0;
  box-shadow: var(--shadow-ambient);
}
.story__frame img { width: 100%; height: 100%; object-fit: cover; }
.story__glow { position: absolute; z-index: 0; border-radius: var(--radius-soft); }
.story__glow--gold {
  right: -1.5rem;
  bottom: -1.5rem;
  width: 12rem;
  height: 12rem;
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  filter: blur(40px);
}
.story__glow--purple {
  top: 3rem;
  left: -1.5rem;
  width: 8rem;
  height: 8rem;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  filter: blur(24px);
}
.story__body { display: flex; flex-direction: column; gap: 2rem; width: 100%; }
.story__title {
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.story__title em { color: var(--color-secondary); font-style: normal; font-weight: inherit; }
.story__lead { font-size: 1.125rem; line-height: 1.75rem; color: var(--color-on-surface-variant); }
.story__text { color: var(--color-outline); }

.stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-surface-container-highest);
}
.stat { text-align: center; }
.stat__value {
  display: block;
  font-family: var(--font-headline);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  color: var(--color-primary);
}
.stat__label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}
.stats__rule { width: 1px; height: 3rem; background: var(--color-surface-container-highest); }

@media (min-width: 1024px) {
  .story { flex-direction: row; }
  .story__media, .story__body { width: 50%; }
}

/* ---- Latest News & Stories ----------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.news-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-surface-container-highest);
  border-radius: var(--radius-card-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-ambient);
}
.news-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.2);
  transition: background-color 500ms var(--ease);
}
.news-card:hover .news-card__media::after { background: rgb(0 0 0 / 0.1); }
.news-card__body { padding: 2rem; }
.news-card__meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.news-card__tag { letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); }
.news-card__meta time { color: var(--color-outline); }
.news-card__title {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  line-height: 2rem;
  transition: color 150ms var(--ease);
}
.news-card:hover .news-card__title { color: var(--color-primary); }
.news-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-bottom: 1.5rem;
  color: var(--color-on-surface-variant);
}
.news-card__link { display: inline-flex; align-items: center; color: var(--color-primary); }
.news-card__link .material-symbols-outlined { margin-left: 0.25rem; font-size: 0.875rem; }
.news-card:hover .news-card__link { text-decoration: underline; }

@media (min-width: 768px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Why Partner With Us ------------------------------------------------- */
.partners {
  position: relative;
  overflow: hidden;
  padding-block: 5rem;
  padding-inline: var(--page-margin);
  background: var(--color-inverse-surface);
  color: var(--color-surface-bright);
}
/* The band used to be a flat dark panel. It now sits over a photo of the
   workshop, which is the point of the section — the partnership pitch is about
   the people making the goods, so show them. Explicit layers, because a photo,
   two pseudo-elements and the content all share one stacking context:
   photo (0) -> scrim (1) -> hairline texture (2) -> content (10). */
.partners__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(0.9);
}
.partners::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  /* Neutral, not the brand's warm dark: mixed over the workshop's green walls
     that tint went olive and the whole band read muddy. A near-black scrim
     leaves the photo's own colour alone. Slightly stronger at the top, where
     the heading sits over the brightest part of the frame. */
  background: linear-gradient(to bottom, rgb(12 10 9 / 0.78), rgb(12 10 9 / 0.68));
}
.partners::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg,
    var(--color-surface-bright) 0, var(--color-surface-bright) 1px,
    transparent 1px, transparent 10px);
}
.partners__inner { position: relative; z-index: 10; }
.partners__head { margin-bottom: 4rem; text-align: center; }
.partners__head h2 { font-size: 2rem; line-height: 2.5rem; font-weight: 700; }
.partners__rule { width: 6rem; height: 2px; margin: 1rem auto 0; background: var(--color-secondary); }
.partners__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  text-align: center;
}
.benefit { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-soft);
  background: rgb(255 255 255 / 0.16);
  color: var(--color-secondary);
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.benefit:hover .benefit__icon { background: var(--color-secondary); color: var(--color-inverse-surface); }
.benefit__icon .material-symbols-outlined { font-size: 1.875rem; }
.benefit__title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }
/* 70% was fine against a flat dark panel; over a photo the worst pixels fell
   to 4.36:1, under the 4.5 minimum for 16px. Raising the text's own alpha buys
   the margin back without darkening the scrim and losing the photo. */
.benefit__text { color: color-mix(in srgb, var(--color-inverse-on-surface) 88%, transparent); }

@media (min-width: 640px) {
  .partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .partners__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Frequently Asked Questions ------------------------------------------ */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem 4rem;
  max-width: 56rem;
  margin-inline: auto;
}
.faq-item { display: flex; flex-direction: column; gap: 1rem; }
.faq-item h3 { font-size: 1.25rem; line-height: 1.75rem; color: var(--color-primary); }
.faq-item p { color: var(--color-on-surface-variant); }

@media (min-width: 768px) {
  .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Call to action ------------------------------------------------------ */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-block: 8rem;
  padding-inline: var(--page-margin);
  text-align: center;
}
/* A real photograph of the client's own pieces, shown as a photograph.
   What was here before was not an image at all: a 90%-opaque pink-to-gold
   gradient with a stock render underneath at opacity 0.2 and mix-blend-mode
   overlay — a texture, not a picture. The client asked for every section's
   photo to read clearly, and this one could not, by construction. */
.cta__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.cta__scrim {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(to bottom, rgb(12 10 9 / 0.46), rgb(12 10 9 / 0.58));
}
.cta__panel {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 48rem;
  margin-inline: auto;
  padding: 3rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--radius-panel);
  /* The panel carries the legibility, not the scrim. Darkening the scrim
     instead would dim the whole photograph, which is the thing the client
     asked to see clearly; this only deepens the patch behind the copy. */
  background: rgb(0 0 0 / 0.30);
}
/* No backdrop-filter. It blurred the photograph directly behind the copy,
   which is the opposite of what was asked for; the scrim above already does
   the legibility work. */
/* Light type on the photo. It used to be `on-primary-container`, a dark plum
   that sat on a pale pink gradient and read as pale-on-pale. */
.cta__title { font-size: 2.25rem; line-height: 1.25; color: var(--color-surface-bright); }
.cta__text {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: color-mix(in srgb, var(--color-surface-bright) 92%, transparent);
}
.cta__action { padding-top: 1rem; }
.cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 2.5rem;
  border-radius: var(--radius-soft);
  background: var(--color-inverse-surface);
  color: var(--color-surface-bright);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  transition: all 300ms var(--ease);
}
.cta__btn:hover {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  transform: translateY(-0.25rem);
}
.cta__btn .material-symbols-outlined { margin-left: 0.5rem; }
.cta__btn { white-space: nowrap; }

@media (max-width: 639.98px) {
  .cta__panel { padding-inline: 1.5rem; }
}
@media (min-width: 768px) {
  .cta__title { font-size: 3rem; }
}

/* ── Our Product Range ───────────────────────────────────────────────
   One section, five named ranges, in the order the client reads their own
   business: Handicrafts first and biggest, Silver last (September 2026).
   It replaced two sections ("Our Product Range" tiles + "More From Our
   Range" cards) that were doing the same job and between them covered only
   eight of the fourteen top-level categories.

   Handicrafts is a grid of every category; the four named lines are single
   wide rows, because each is one category and a grid of one looks broken. */
.range { margin-top: clamp(2.5rem, 5vw, 4rem); }
.range:first-of-type { margin-top: clamp(2rem, 4vw, 3rem); }

.range__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-outline-variant);
}
.range__title {
  font-family: var(--font-headline);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-on-surface);
}
.range__meta {
  font-size: var(--sz-xs, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

/* ── the Handicrafts grid ── */
.range__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
@media (min-width: 640px)  { .range__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Three across on desktop. Eleven handicraft categories go 3+3+3+2, and each
   card is ~420px wide instead of ~310, which is most of where the extra size
   comes from — the taller ratio below does the rest. (Five columns was worse
   still: it left Wooden Mallet orphaned alone on a third row.) */
@media (min-width: 1024px) { .range__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The caption sits ON the photo, under a gradient that is clear at the top and
   darkens into the bottom fifth — the same device the collection tiles already
   use, so the two read as one design rather than two. */
.rcard {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-dim);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.rcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom,
    rgb(0 0 0 / 0) 42%,
    rgb(0 0 0 / 0.30) 62%,
    rgb(0 0 0 / 0.74) 80%,
    rgb(0 0 0 / 0.93) 100%);
  pointer-events: none;
}
.rcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -18px rgb(0 0 0 / 0.55);
}
.rcard:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
/* The ratio lives on the IMG, not the wrapper. On the wrapper it was silently
   ignored: `height: 100%` on the image resolves against an auto-height parent,
   which is indefinite, so the image fell back to its intrinsic height and
   stretched the box past the ratio — the cards came out 180px to 357px tall in
   the same row. A ratio on a replaced element with a definite width cannot be
   overridden that way. */
.rcard__media { display: block; background: var(--color-surface-dim); }
.rcard__media img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
.rcard__body {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 1.1rem 1.25rem 1.2rem;
}
.rcard__title {
  font-family: var(--font-headline);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-surface-bright);
}
.rcard__meta { font-size: 0.875rem; color: color-mix(in srgb, var(--color-surface-bright) 82%, transparent); }

/* Pashmina, Silk and Silver: the same card, wider and with room for the
   subcategory chips. They used to be four full-width rows with the image on
   one side and almost nothing on the other — with the ratio bug above, Silver's
   row was 720px tall and mostly empty. */
.range__grid--lg { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px)  { .range__grid--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .range__grid--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rcard--lg .rcard__media img { aspect-ratio: 5 / 4; }
.rcard--lg .rcard__body { padding: 1.15rem 1.25rem 1.25rem; }
.rcard--lg .rcard__title { font-size: 1.375rem; }

/* ── the four named lines ── */
.rrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-bright);
  box-shadow: inset 0 0 0 1px var(--color-outline-variant);
  transition: box-shadow 200ms var(--ease);
}
.rrow:hover { box-shadow: inset 0 0 0 1px var(--color-primary), 0 16px 34px -20px rgb(0 0 0 / 0.45); }
.rrow__media { display: block; aspect-ratio: 16 / 9; background: var(--color-surface-dim); }
.rrow__media img { width: 100%; height: 100%; object-fit: cover; }
.rrow__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
}
/* The subcategories of Pashmina and Silver. The other two lines have none, so
   this simply does not render for them. */
.rrow__subs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rrow__sub {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-soft);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-outline-variant);
  font-size: 0.8125rem;
  color: var(--color-on-surface-variant);
}
.rrow__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--color-primary);
}
.rrow__go .material-symbols-outlined { font-size: 1.1rem; transition: transform 200ms var(--ease); }
.rrow:hover .rrow__go .material-symbols-outlined { transform: translateX(3px); }

@media (min-width: 768px) {
  .rrow { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; }
  .rrow__media { aspect-ratio: auto; height: 100%; min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .rcard, .rrow, .rrow__go .material-symbols-outlined { transition: none; }
  .rcard:hover { transform: none; }
}

/* The caption was sized for a 413px desktop card. On a phone the handicraft
   cards are two-up at ~173px, where the same 19px title wrapped to two lines
   and the caption covered 84% of the card. The single-column lines below keep
   the full-size caption, because they are full-bleed there. */
@media (max-width: 639px) {
  .rcard__body { padding: 0.6rem 0.7rem 0.7rem; }
  .rcard__title { font-size: 0.9375rem; }
  .rcard__meta { font-size: 0.75rem; }
  .rcard--lg .rcard__body { padding: 1rem 1.1rem 1.1rem; }
  .rcard--lg .rcard__title { font-size: 1.25rem; }
  .rcard--lg .rcard__meta { font-size: 0.875rem; }
}

/* No workshop photo behind the partners band on phones. The band stacks to
   ~1240px tall there, so `cover` on a 1280x960 landscape photo scales it ~29%
   PAST its native size and crops it to a narrow keyhole — soft, and the scene
   is unreadable. Hiding the photo and its scrim restores the flat dark panel,
   which is what the section was designed against. The story section above
   still carries a workshop photo on mobile, so nothing is lost. */
@media (max-width: 767px) {
  .partners__bg,
  .partners::after { display: none; }
}