/* A compact, product-led cover. The image has its own framing on phones. */
.collections-hero { position: relative; height: clamp(340px,26vw,400px); overflow: hidden; background: #f7eee3; border-bottom: 1px solid #e7ded2; }
.collections-hero-art { position: absolute; right: max(0px,calc((100% - 1680px)/2)); bottom: 0; height: 100%; aspect-ratio: 3 / 1; pointer-events: none; mask-image: linear-gradient(to right,transparent,#000 18%); }
.collections-hero-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.collections-hero-inner { position: relative; display: flex; align-items: center; width: 100%; max-width: 1600px; height: 100%; margin-inline: auto; padding: 32px 48px; }
.collections-hero-copy { width: 44%; max-width: 600px; }
.collections-hero-copy h1 { margin-top: 13px; color: #211f1b; font-size: clamp(32px,3vw,44px); font-weight: 650; line-height: 1.13; letter-spacing: -.035em; text-wrap: balance; }
.collections-hero-description { margin-top: 16px; color: #625a50; font-size: 16px; line-height: 1.6; }
.collections-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 23px; }
.collections-hero-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 20px; border: 1px solid #211f1b; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 1.4; letter-spacing: .025em; }
.collections-browse { color: #fff; background: #211f1b; }
.collections-project { color: #342d25; background: #fffaf3; border-color: #d4c8b7 !important; }
.collections-browse:hover { background: #3b332a; }
.collections-project:hover { border-color: #958068 !important; }
.collections-hero-actions a:focus-visible { outline: 2px solid #8d765b; outline-offset: 4px; }
@media (min-width: 1700px) { .collections-hero-inner { max-width: 90%; padding-inline: 48px; } }
@media (max-width: 1100px) and (min-width: 900px) {
  .collections-hero-art { height: 84%; mask-image: linear-gradient(to right,transparent,#000 18%),linear-gradient(to bottom,transparent,#000 10%); mask-composite: intersect; }
  .collections-hero-inner { padding-inline: 32px; }
  .collections-hero-copy { width: 46%; }
  .collections-hero-actions a { padding-inline: 16px; font-size: 11px; }
}
@media (max-width: 999px) and (min-width: 900px) {
  .collections-hero-art { height: 76%; }
  .collections-hero-copy { width: 44%; }
}
@media (max-width: 899px) {
  .collections-hero { display: flex; flex-direction: column; height: auto; }
  .collections-hero-inner { order: 0; display: block; height: auto; padding: 29px 22px 12px; }
  .collections-hero-copy { width: 100%; max-width: 600px; }
  .collections-hero-copy h1 { max-width: 21ch; margin-top: 10px; font-size: clamp(29px,5.2vw,36px); }
  .collections-hero-description { margin-top: 12px; font-size: 15px; }
  .collections-hero-actions { margin-top: 18px; }
  .collections-hero-actions a { min-height: 44px; padding: 11px 17px; font-size: 11px; }
  .collections-hero-art { position: relative; order: 1; inset: auto; height: clamp(150px,48vw,230px); aspect-ratio: auto; overflow: hidden; mask-image: none; }
  .collections-hero-art img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: none; }
}
@media (max-width: 359px) {
  .collections-hero-inner { padding-inline: 18px; }
  .collections-hero-actions { gap: 8px; }
  .collections-hero-actions a { padding-inline: 8px; font-size: 11px; }
}