/* Two editorial stories: everyday use and the design behind it. */
.brand-stories {
  background: #f8f7f4;
  padding-block: clamp(64px, 7vw, 112px);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.brand-stories-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: clamp(36px, 5vw, 88px);
}
.brand-story { min-width: 0; display: grid; grid-row: span 4; grid-template-rows: subgrid; }
/* Shared rows align the start of both text blocks regardless of line count. */
.brand-story h2, .brand-story-description { align-self: start; }
.brand-story h2 {
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .01em;
  white-space: pre-line;
  text-wrap: balance;
  color: #252725;
}
.brand-story-description {
  margin-top: 28px;
  max-width: 36em;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.8;
  color: #626460;
  white-space: pre-line;
  text-wrap: pretty;
}
.brand-story-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  margin: 28px 0;
}
.brand-story-link {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: 44px;
  font-size: 15px;
  color: #333830;
}
.brand-story-link:hover { color: var(--green); }
.brand-story-link:hover > span:first-child { text-decoration: underline; text-underline-offset: 5px; }
.brand-story-arrow { font-size: 26px; line-height: 1; }
.brand-story-award { width: 72px; height: auto; flex: 0 0 auto; }
.brand-story-image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.brand-story-image--detail { object-position: center 54%; }
@media (max-width: 760px) {
  .brand-stories { padding-block: 56px; }
  .brand-stories-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 60px; }
  .brand-story { grid-row: auto; grid-template-rows: auto auto auto auto; }
  .brand-story h2 { font-size: clamp(25px, 6.6vw, 32px); }
  .brand-story-description { margin-top: 20px; min-height: 0; font-size: 15px; }
  .brand-story-action { margin-block: 20px; }
  .brand-story-link { font-size: 14px; gap: 16px; }
  .brand-story-award { width: 64px; }
}