/* PAGE FAMILY: brand homepages (B20) - SKIN tier - from site-wahooart-V2.0.css, original order. Migrated 2026-07-06. */

.homepage-site-widgets .section-title-art {
  font-family: var(--font-title);
  font-variant: small-caps;
  font-weight: 600;            /* UI-kit: serif SC section heads are 600 */
  letter-spacing: .02em;
  color: var(--wa-ink);
}

.homepage-site-widgets {
  max-width: 100%;
  overflow-x: clip;
}

.homepage-site-widgets {
        --homepage-slider-arrow-gap: 2.75rem;
        --hp-warm-bg: #ddd5c2;
      }

.mfp-section-head--raised { position: relative; z-index: 1; }

.bpa-spotlight__art-link { overflow: hidden; display: block; }

.bpa-spotlight__art-img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }

.bpa-text-muted { color: var(--pewter); }

.bpa-cc__grid { min-height: 16rem; }

.bpa-cc__grid-hero { width: 50%; min-width: 0; border-right: 2px solid var(--ink); }

@media (max-width: 991.98px) {
  .bpa-cc__grid-hero { width: 100%; border-right: none; border-bottom: 2px solid var(--ink); }

  .bpa-cc__grid { flex-direction: column; min-height: 0; }

}
@media (max-width: 767.98px) {
  .homepage-site-widgets,.mfp-hp { padding-left: clamp(12px, 3vw, 24px); padding-right: clamp(12px, 3vw, 24px); }

}
.hp-name-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(217, 209, 191, 0.92);
  color: #9a6a2e;
  text-align: center;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hp-widget-title__line1 {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--wm4p-title, #1a1a1a);
}

.hp-widget-title__accent {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--wm4p-accent, #875d2a);
}

.homepage-site-widgets .homepage-articles-quiz-row > [class*="col-"] {
  display: flex;
}

.wa-hero {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #f4ede0;
}

.wa-hero-frame {
  position: relative;
  z-index: 2;
  max-width: 340px;
  width: 100%;
  flex: 0 1 auto;
  padding: 0;
  background: none;
  box-shadow: none;
}

.wa-hero-frame::before {
  display: none;
}

.wa-hero-frame--empty {
  background: rgba(26, 18, 8, .06);
  min-height: 300px;
}

.wa-hero-frame img {
  display: block;
  /* width:auto (not 100%) so the element box keeps the artwork's true aspect
     ratio. The gilded frame is a CSS border on this img, so it only hugs the
     painting when the box matches the image ratio. With width:100% + a binding
     max-height, the box turned wider/taller than the artwork and object-fit:
     contain pillarboxed it — leaving the beige gaps on the left/right inside
     the frame. Letting both axes resolve from the intrinsic ratio (capped by
     max-width/max-height) keeps the frame tight on every orientation. */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 62vh;
  margin-inline: auto;          /* centre when narrower than the 340px column */
  object-fit: contain;          /* now a no-op: box already equals image ratio */
  box-sizing: border-box;
  filter: contrast(1.04) saturate(1.06) drop-shadow(4px 8px 18px rgba(0,0,0,0.42));
  position: relative;
  z-index: 2;
}

.wa-hero-gallery--landscape .wa-hero-frame img {
  max-height: min(50vh, 420px);
}

.wa-hero-frame__link {
  display: block;
}

.wa-hero-frame__link::before,.wa-hero-frame__link::after {
  display: none;
}

.wa-hero-artwork-meta {
  position: relative;
  z-index: 3;
  padding: 0 clamp(6px, 1.2vw, 14px);
  flex: 1 1 140px;
  min-width: 0;
  max-width: 240px;
  text-align: left;
}

.wa-hero-gallery--landscape .wa-hero-frame {
  max-width: 480px;
  flex: 0 0 auto;
}

.wa-hero-gallery--panoramic .wa-hero-frame {
  max-width: min(640px, 92%);
}

.wa-hero-gallery--landscape .wa-hero-artwork-meta {
  flex: 0 0 auto;
  max-width: min(640px, 100%);
  width: 100%;
  padding: clamp(12px, 2vw, 20px) 0 0;
  text-align: center;
}

.wa-hero-artwork-title {
  font-family: var(--font-title);
  font-size: clamp(14px, 1.5vw, 19px);
  font-weight: 400;
  color: #1a1208;
  line-height: 1.25;
  margin-bottom: 4px;
}

.wa-hero-artwork-title a { color: inherit; border-bottom: 1px solid rgba(26, 18, 8, .3); padding-bottom: 1px; }

.wa-hero-artwork-title a:hover { border-color: #8b6914; color: #8b6914; }

.wa-hero-artwork-artist {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8b6914;
  font-family: var(--font-body);
  margin-bottom: 10px;
}

.wa-hero-artwork-artist a { color: inherit; text-decoration: none; }

.wa-hero-artwork-artist a:hover { color: #1a1208; }

.wa-hero-artwork-desc {
  font-size: 11px;
  color: rgba(26, 18, 8, .55);
  line-height: 1.6;
  margin: 0;
  overflow-wrap: break-word;
}

.wa-hero-content {
  background: #faf6f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 88px) clamp(32px, 5vw, 72px);
  border-left: 1px solid rgba(26, 18, 8, .1);
}

.wa-hero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.wa-hero-kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: #8b6914;
  flex-shrink: 0;
}

.wa-hero-kicker span {
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8b6914;
  font-weight: 500;
  font-family: var(--font-body);
}

.wa-hero-h1 {
  font-family: var(--font-title);
  font-size: clamp(36px, 5.2vw, 68px);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: 0.02em;
  color: #1a1208;
  margin: 0 0 28px;
}

.wa-hero-h1 em {
  font-style: normal;
  color: #8b6914;
  font-weight: 400;
  font-family: var(--font-title-accent);
  font-size: inherit;
  line-height: inherit;
}

.wa-hero-body {
  font-size: 15px;
  line-height: 1.7;
  color: #3d2f1a;
  max-width: 420px;
  margin: 0 0 36px;
  font-family: var(--font-body);
}

.wa-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  --mpl-btn-border: #b28a55;
  --mpl-btn-text: #9b6d39;
}

.wa-hero-stats {
  display: flex;
  gap: 36px;
  border-top: 1px solid rgba(26, 18, 8, .1);
  padding-top: 28px;
}

.wa-hero-stat-val {
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 400;
  color: #1a1208;
  line-height: 1;
  margin-bottom: 4px;
}

.wa-hero-stat-lab {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a6450;
  font-family: var(--font-body);
}

@media (max-width: 900px) {
  .wa-hero { grid-template-columns: 1fr; min-height: auto; }

  .wa-hero-artwork-meta {
    flex: 0 0 auto;
    max-width: min(640px, 100%);
    width: 100%;
    padding: 12px 0 0;
    text-align: center;
  }

  .wa-hero-content { padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px); }

  .wa-hero-stats { flex-direction: column; gap: 16px; }

}
@media (max-width: 575px) {
  .wa-hero-frame { max-width: 260px; }

  .wa-hero-h1 { font-size: clamp(28px, 8vw, 42px); }

}
.homepage-site-widgets .hp-widget-title__line1 {
  font-family:var(--font-title);
  font-size: clamp(1.25rem, 1.65vw, 1.75rem) !important;
  font-weight:400;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
}

.homepage-site-widgets .hp-widget-title__accent {
  font-family:var(--font-title);
  font-size: clamp(1.25rem, 1.65vw, 1.75rem) !important;
  font-weight:400;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  font-style:normal;
}

.homepage-site-widgets .view_all_art a,.homepage-site-widgets .w37__group a,.homepage-site-widgets .w37__meta a,.wa-hero-artwork-title a,.wa-hero-artwork-artist a,.wa-hero-stats > a {
  display: inline-block;
}

.homepage-site-widgets .view_all_art a::before,.homepage-site-widgets .view_all_art a::after,.homepage-site-widgets .w37__group a::before,.homepage-site-widgets .w37__group a::after,.homepage-site-widgets .w37__meta a::before,.homepage-site-widgets .w37__meta a::after,.wa-hero-artwork-title a::before,.wa-hero-artwork-title a::after,.wa-hero-artwork-artist a::before,.wa-hero-artwork-artist a::after,.wa-hero-stats > a::before,.wa-hero-stats > a::after {
  display:block;
  content:'';
}

.homepage-site-widgets .view_all_art a,.homepage-site-widgets .w37__group a,.homepage-site-widgets .w37__meta a,.wa-hero-artwork-title a,.wa-hero-artwork-artist a,.wa-hero-stats > a {
  transition: color 0.25s ease, opacity 0.25s ease;
}

.homepage-site-widgets .view_all_art a:hover,.homepage-site-widgets .w37__group a:hover,.homepage-site-widgets .w37__meta a:hover,.wa-hero-artwork-title a:hover,.wa-hero-artwork-artist a:hover,.wa-hero-stats > a:hover {
  text-decoration: none;
  opacity: 0.8;
  color:#6b4822;
}

.wa-hero-artwork-title a {
  border-bottom: none;
  padding-bottom: 0;
}

.hero_swiper .swiper-caption h3 {
    text-align: center;
    margin-top: 0;
}

.bpa-stf__label {
  font-family:var(--font-title, inherit);
  font-size: clamp(0.95rem, 1.2vw, 1.0625rem) !important;
  font-weight:400;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
  text-transform:none;
  font-style:normal;
  font-synthesis:none;
}

.wa-hero-gallery {
  background: #e8dfcc;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(12px, 1.8vw, 24px);
  padding: clamp(40px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}

.wa-hero-gallery::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 110% 90% at 50% 50%, #e0d5bf 0%, #d4c8ac 45%, #c9bca0 100%);
  pointer-events: none;
}

.wa-hero-gallery--landscape {
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 900px) {
  .wa-hero-gallery {
    min-height: 55vw;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
  }

}