/* Work-page showcase bands (golf buckles, signs, coasters). Feature bands, not category filters.
   Markup generated by tools/build_showcases.py. Dark luxury: lux tokens from styles.css. */
.ks-band { position: relative; padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid rgba(201, 169, 98, .14);
  background: radial-gradient(120% 70% at 85% 0%, rgba(201, 169, 98, .07), transparent 60%), var(--lux-bg, #08080A); }
.ks-band + .ks-band { background: radial-gradient(120% 70% at 15% 0%, rgba(201, 169, 98, .06), transparent 60%), #0b0b0e; }
.ks-band h2 { font-family: var(--font-display); color: var(--lux-cream, #F5F2EB); font-weight: 600; font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.04; margin: 10px 0 16px; letter-spacing: .005em; }
.ks-copy { max-width: 34rem; }
.ks-intro { color: rgba(245, 242, 235, .86); font-size: 1.08rem; line-height: 1.65; margin: 0 0 12px; }
.ks-audience { color: var(--lux-gold, #C9A962); font-size: .98rem; margin: 0; }
.ks-copy .turnaround-note { margin: 16px 0 22px; }
.ks-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.ks-draft { margin-top: 18px; }

.ks-head { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.ks-head--hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); margin-bottom: clamp(36px, 5vw, 60px); }
.ks-head--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ks-head--wide { grid-template-columns: 1fr; margin-bottom: clamp(28px, 4vw, 44px); }
.ks-head--wide .ks-copy { max-width: 46rem; }

.ks-piece { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.ks-media { position: relative; overflow: hidden; border-radius: 12px; background: #111217;
  border: 1px solid rgba(201, 169, 98, .18); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .02); }
.ks-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ks-piece:hover .ks-media img { transform: scale(1.025); }
.ks-piece--portrait .ks-media { aspect-ratio: 4 / 5; }
.ks-piece--square .ks-media { aspect-ratio: 1 / 1; }
.ks-piece--wide .ks-media { flex: 1 1 auto; min-height: 0; }
.ks-cap { padding: 12px 2px 0; display: grid; gap: 3px; }
.ks-cap b { font-family: var(--font-display); color: var(--lux-cream, #F5F2EB); font-size: 1.12rem; font-weight: 600; line-height: 1.2; }
.ks-cap span { color: var(--lux-muted, #A09B94); font-size: .9rem; line-height: 1.45; }
.ks-hero-fig .ks-media { border-color: rgba(201, 169, 98, .38); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(201, 169, 98, .08); }
.ks-hero-fig .ks-cap b { font-size: 1.3rem; }

.ks-grid { display: grid; gap: clamp(14px, 1.8vw, 24px); }
.ks-grid--mosaic, .ks-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ks-grid--mosaic .ks-piece--wide { grid-column: span 2; }
.ks-grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-grid--split.ks-grid--n1 { grid-template-columns: minmax(0, 1fr); max-width: 420px; justify-self: end; width: 100%; }

.ks-tile { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 28px; border-radius: 12px; text-decoration: none !important;
  border: 1px solid rgba(201, 169, 98, .32); background: linear-gradient(160deg, rgba(201, 169, 98, .12), rgba(201, 169, 98, .02) 55%), #101116; min-height: 220px;
  transition: border-color .2s ease, background .2s ease; }
.ks-tile:hover { border-color: var(--lux-gold, #C9A962); }
.ks-tile b { font-family: var(--font-display); color: var(--lux-cream, #F5F2EB); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.ks-tile span { color: var(--lux-muted, #A09B94); line-height: 1.5; }
.ks-tile em { font-style: normal; color: var(--lux-gold, #C9A962); font-weight: 600; margin-top: 6px; }
.ks-tile--span1 { grid-column: span 1; } .ks-tile--span2 { grid-column: span 2; } .ks-tile--span3 { grid-column: span 3; } .ks-tile--span4 { grid-column: span 4; }

@media (max-width: 980px) {
  .ks-head--hero, .ks-head--split { grid-template-columns: 1fr; }
  .ks-head--hero .ks-hero-fig { max-width: 520px; }
  .ks-grid--split.ks-grid--n1 { justify-self: start; }
}
@media (max-width: 760px) {
  .ks-grid--mosaic, .ks-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-grid--mosaic .ks-piece--wide { grid-column: span 2; }
  .ks-piece--wide .ks-media { aspect-ratio: 16 / 9; flex: none; }
  .ks-tile--span1, .ks-tile--span3, .ks-tile--span4 { grid-column: span 2; }
  .ks-tile { min-height: 0; padding: 22px; }
  .ks-cap b { font-size: 1.02rem; }
  .ks-cap span { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) { .ks-media img { transition: none; } .ks-piece:hover .ks-media img { transform: none; } }
@media (max-width: 980px) { .ks-head--hero .ks-copy { order: -1; } }
/* Signs: the first piece (R3-14 deliveries sign) leads. */
.ks-grid--split.ks-grid--n2 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; }
@media (max-width: 760px) { .ks-grid--split.ks-grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }