/* ---------- Brass and wood smoke (approved hero treatment, 27 Oct 2026; reworked as clouds) ----------
   Billowing smoke across the section backgrounds, made by tools/smoke.py (assets/smoke/), static:
   gold brass smoke on the dark hero and maker sections, walnut-and-oak wood smoke on the cream
   shopping sections, the colour carrying across where one section meets the next. It always sits
   behind the content; in the hero it thins behind the copy and clears around the tin photograph.
   Scoped to html.bt-marble.bt-smoke:
     ?smoke=off    the previous thin veins (marble.css alone)
     ?marble=off   the clean hero, no metal at all
   To remove it for good, delete this stylesheet's link and "bt-smoke" on <html>. */

/* ---- Hero: brass smoke over the charcoal ---- */
.bt-marble.bt-smoke .hero::after {
  background:
    url("smoke/hero-mobile.webp") 50% 0 / cover no-repeat,
    url("smoke/stone.svg") 50% 50% / cover no-repeat;
  -webkit-mask-image: none; mask-image: none;
}

/* ---- Cream shopping sections: wood smoke behind the categories, best sellers and "Help me choose" ---- */
.bt-marble.bt-smoke .storefront::before,
.bt-marble.bt-smoke .workbench::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("smoke/cream-mobile.webp") 50% 0 / cover no-repeat;
}
.bt-marble.bt-smoke .workbench::before { background-image: url("smoke/finder-mobile.webp"); }
.bt-marble.bt-smoke .storefront > .wrap,
.bt-marble.bt-smoke .workbench > .wrap { position: relative; z-index: 1; }
/* Small text over the smoke keeps a faint cream halo, so it stays crisp where the smoke is darkest. */
.bt-marble.bt-smoke :is(.storefront, .workbench) :is(.sf-head, .cat__name, .pcard__body, .wb-info, .wb-more) {
  text-shadow: 0 0 2px rgba(245, 239, 228, .95), 0 0 8px rgba(245, 239, 228, .9), 0 0 16px rgba(245, 239, 228, .6);
}

/* Text over the brass smoke keeps a soft charcoal halo, the dark twin of the cream one. */
.bt-marble.bt-smoke :is(.hero__copy, .story__body) {
  text-shadow: 0 0 2px rgba(19, 17, 15, .9), 0 0 10px rgba(19, 17, 15, .75), 0 0 24px rgba(19, 17, 15, .55);
}

/* ---- Maker section: brass smoke again ---- */
.bt-marble.bt-smoke .story::after {
  content: ""; opacity: 1;
  background: url("smoke/maker-mobile.webp") 50% 50% / cover no-repeat;
  -webkit-mask-image: none; mask-image: none;
}

@media (min-width: 1024px) {
  .bt-marble.bt-smoke .hero::after {
    background:
      url("smoke/hero.webp") 50% 50% / cover no-repeat,
      url("smoke/stone.svg") 50% 50% / cover no-repeat;
  }
  .bt-marble.bt-smoke .storefront::before { background-image: url("smoke/cream.webp"); }
  .bt-marble.bt-smoke .workbench::before { background-image: url("smoke/finder.webp"); }
  .bt-marble.bt-smoke .story::after { background-image: url("smoke/maker.webp"); }
}