/* ---- imbenge (Imbenge — Zulu wire baskets & ilala weaving 238) --------------
   Bone paper, ink type, one burnt copper taken off the telephone wire. THE ONE
   STRUCTURAL MOVE is the collapse: the contained TWO-UP grid is the entire
   visual mass of the page, and the block directly under it is text on bare
   ground with nothing in it — no picture, no rule, no band. Sections are
   separated by air alone, so nothing here paints a background on anything
   except the flat-lay tiles, which stay white so the copper price line reads. */
body.t-imbenge {
  background: #f4f1ea;
  color: #17161a;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --line: #e3ded2;
  --line-strong: #cbc4b4;
  --heading: #17161a;
  --text: #17161a;
  --muted: #5f5b52;
}
body.t-imbenge .sf-header, body.t-imbenge .sf-footer { background: #f4f1ea; border-color: #e3ded2; }
body.t-imbenge a:hover { color: #9a5a33; }
body.t-imbenge .btn.brand { background: #17161a; color: #f4f1ea; border-radius: 0; box-shadow: none; }
body.t-imbenge .btn.brand:hover { background: #9a5a33; }

/* the opener is the whole first screen: three plates cross-fading, type centred
   over them, and nothing else asking for attention */
body.t-imbenge .sc-hero { min-height: 100vh; }
body.t-imbenge .sc-hero h1 { font-weight: 400; font-size: clamp(28px, 4.6vw, 56px); line-height: 1.14; letter-spacing: -0.015em; }
body.t-imbenge .sc-hero p { text-transform: uppercase; letter-spacing: 0.24em; font-size: 11px; font-weight: 600; }
body.t-imbenge .sc-hero .btn.brand.sc-hero-ghost { border-width: 1px; border-radius: 0; }
body.t-imbenge .sc-h2 { font-weight: 400; font-size: clamp(23px, 3vw, 34px); letter-spacing: -0.02em; }

/* the page's only split — picture hard left, copy right, whitespace between the
   two halves instead of a card, a border or a tint */
body.t-imbenge .sc-about-split { gap: clamp(30px, 5.5vw, 78px); padding: clamp(58px, 8vw, 108px) 20px; }
body.t-imbenge .sc-about-media img, body.t-imbenge .sc-strip-img, body.t-imbenge .product-card .ph { border-radius: 0; border: 0; }

/* four small squares, evenly spaced, spanning the contained width */
body.t-imbenge .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 30px); }
body.t-imbenge .sc-strip-label { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: #9a5a33; }

/* the visual mass: two up, near square, generously gapped, caption sitting
   under the tile with no card around it */
body.t-imbenge .sc-products { padding: clamp(52px, 7vw, 96px) 20px clamp(20px, 3vw, 36px); }
body.t-imbenge .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 70px) clamp(24px, 4vw, 56px); padding-bottom: 0; }
body.t-imbenge .product-card, body.t-imbenge .product-card:hover { background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
body.t-imbenge .product-card .meta { padding: 16px 0 0; }
body.t-imbenge .product-card .t { font-weight: 500; font-size: 15.5px; }
body.t-imbenge .product-card .p { color: #9a5a33; font-size: 11.5px; letter-spacing: 0.14em; margin-top: 5px; }

/* THE COLLAPSE — the only block with no picture in it. Narrow measure, a great
   deal of air above and below, the dated lines set plain. Targeted by plain
   class: the split about renders as .sc-about-split, so this is the only
   .sc-richtext on the page and no :nth-of-type is needed to find it. */
body.t-imbenge .sc-richtext { max-width: 480px; padding: clamp(96px, 15vw, 200px) 20px clamp(80px, 12vw, 168px); }
body.t-imbenge .sc-richtext .sc-h2 { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600; margin-bottom: 44px; }
body.t-imbenge .sc-richtext p { color: #17161a; font-size: 15px; line-height: 2.05; }
body.t-imbenge .sc-field input, body.t-imbenge .sc-field textarea { border-radius: 0; }

@media (max-width: 620px) {
  body.t-imbenge .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* night — the bone ground inverts to coal; the copper lifts a shade so it still
   reads as wire rather than rust, and the flat-lay tiles keep their own ground
   under the photograph so a white-background shot does not float */
html[data-theme="dark"] body.t-imbenge {
  background: #131211;
  color: #ddd7cb;
  --surface: #1c1a17;
  --surface-2: #1c1a17;
  --line: #2b2723;
  --line-strong: #3d3833;
  --heading: #f3efe6;
  --text: #ddd7cb;
  --muted: #8d877b;
}
html[data-theme="dark"] body.t-imbenge .sf-header, html[data-theme="dark"] body.t-imbenge .sf-footer { background: #131211; border-color: #2b2723; }
html[data-theme="dark"] body.t-imbenge a:hover { color: #c8834f; }
html[data-theme="dark"] body.t-imbenge .btn.brand { background: #f3efe6; color: #131211; }
html[data-theme="dark"] body.t-imbenge .btn.brand:hover { background: #c8834f; color: #131211; }
html[data-theme="dark"] body.t-imbenge .product-card .p, html[data-theme="dark"] body.t-imbenge .sc-strip-label { color: #c8834f; }
html[data-theme="dark"] body.t-imbenge .sc-richtext p { color: #ddd7cb; }