/* XIA TIAN · Final 2026 launch refinements. Does not change site structure. */
/* Compact metallic banner, approximately one-third less total vertical space. */
body .banner-pad { padding: 17px 0 18px !important; }
body .banner-pad + .section { padding-top: 15px !important; }
body .art-banner {
  min-height: 108px;
  border-radius: 13px;
  padding: 12px 27px;
  grid-template-columns: minmax(250px, 1.25fr) minmax(170px, .75fr);
  gap: 20px;
}
body .art-banner .banner-kicker { font-size: 10px; margin-bottom: 5px; letter-spacing: .14em; }
body .art-banner .banner-copy h2 { font-size: clamp(20px, 2.1vw, 24px); line-height: 1.17; margin: 0 0 5px; }
body .art-banner .banner-copy p { font-size: 12px; line-height: 1.45; max-width: 600px; }
body .art-banner .banner-visual { min-height: 52px; }
body .art-banner .banner-visual .ribbon { height: 52px; width: min(280px, 100%); border-radius: 12px; }
body .art-banner .banner-visual .ribbon::after { width: 52px; height: 36px; right: 10px; top: 10px; border-radius: 9px; }
body .art-banner .banner-visual .swatches { bottom: -1px; height: 6px; }

/* Uploaded images from Decap CMS appear inside existing cards and blog covers. */
.media-loaded { background-size: cover !important; background-position: center !important; }
.tile-thumb.media-loaded::before,.tile-thumb.media-loaded::after { display:none !important; }
.video-thumb.media-loaded::before { display:none !important; }
.video-thumb.media-loaded span:not(.preview-flag) { color: transparent !important; }
.blog-entry .cover.media-loaded { color: transparent !important; }
.article-cover.media-loaded { color: transparent !important; }
.media-loaded.photo-fade { background-color:var(--ivory) }

@media(max-width: 760px) {
  body .banner-pad { padding: 14px 0 16px !important; }
  body .art-banner { grid-template-columns: 1fr; min-height: 0; padding: 16px 19px; gap: 10px; }
  body .art-banner .banner-visual { min-height: 34px; }
  body .art-banner .banner-visual .ribbon { height: 30px; width: 100%; max-width: 280px; }
  body .art-banner .banner-visual .ribbon::after { height: 17px; top: 6px; width: 35px; }
  body .art-banner .banner-copy p { font-size: 12px; }
}