/* ── The split showcase after the hero: hueylightshop.com's "An artful approach
   to lighting" section (.c-split-showcase.dreaming-2), cloned rule for rule from
   their theme (refs/huey/home.html) and checked box for box at 1905, 1440, 1024,
   800 and 390. Their cream #FFFBF0 -> ours #f7f3ee, their slate ink #374454 ->
   our navy #2a4254; their words -> ours. The pictures are stand-ins (his call:
   the pictures get fixed at the end).
     left   a small flourish + label, then one justified paragraph with a drop
            cap and two words in italic; at the bottom two drawings, one in each
            corner
     right  a 668:744 slideshow, one picture fading into the next every 4s */

/* their paper, over the whole page: fixed, one tile 100vw wide, at .7 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/paper-texture.webp?v=3") 0 0 / 100vw repeat; opacity: .7;
}

.hs { --hs-ink: #2a4254; color: var(--hs-ink); padding: 60px 38px 100px; }
@media (max-width: 1300px) { .hs { padding-bottom: 60px; } }

.hs-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 750px) { .hs-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }

.hs-left { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.hs-content { display: flex; flex-direction: column; align-items: flex-start; }

.hs-label {
  display: flex; align-items: center; gap: 6px; max-width: fit-content;
  margin: 14px 0; padding-bottom: 10px;
  font: 400 14px / 1 var(--f-head); letter-spacing: .1em; text-transform: uppercase;
}
.hs-flourish { flex: none; }

.hs-heading { margin: 0 0 16px 40px; max-width: 533px; }
.hs-heading h2 {
  width: 97%; margin: 0; text-align: justify;
  font: 400 clamp(15px, 2vw, 26px) / 105.1% var(--f-body); letter-spacing: 0;
}
.hs-heading h2 em { font-style: italic; }   /* unify.css sets heading em upright */
.hs-heading h2::first-letter { font-size: 38px; line-height: 105%; }

.hs-bottom { display: flex; gap: 10px; width: 100%; }
.hs-pic { position: relative; flex: 1 1 0; aspect-ratio: 1 / 1; overflow: hidden; margin: 0; }
.hs-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hs-pic--left img { max-width: 127px; object-position: left bottom; }
.hs-pic--right img { max-width: 66px; object-position: right bottom; float: right; }

.hs-right { position: relative; overflow: hidden; width: 100%; aspect-ratio: 668 / 744; align-self: start; }
.hs-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease; }
.hs-slide.is-active { opacity: 1; z-index: 1; }
.hs-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 749px) {
  .hs { padding: 15px 15px 60px; }
  .hs-heading h2 { font-size: 23px; }
  .hs-pic--left img { max-width: 23vw; }
  .hs-pic--right img { max-width: 12vw; }
}