/* ---- ghoema (Ghoema — Handmade drums & percussion 155) ---------------------
   THE STRUCTURAL MOVE: three strips run back to back and are told apart by
   ADJACENCY alone, never :nth-of-type — the hero is always the first section
   element, so a type selector would fire on the wrong band. `.sc-hero +
   .sc-strip` is the capability row, welded to the hero's bottom edge with zero
   gap and one oatmeal caption band running under the pictures. `.sc-strip +
   .sc-strip` is the gallery, and the chained `.sc-strip + .sc-strip +
   .sc-strip` catches ONLY its second row, taking that row's top padding to
   nothing so the eight photographs read as a single four-by-two block. (Eight
   has to be two strips: the section parser caps a strip at six items.)
   Everything else holds the contained centre line — the hero kicker is hoisted
   above the oversized light headline with flex order, and the lookbook is
   re-gridded out of alternating full-bleed rows into four across, two rows
   that fill. No hue on the page but the skin, the rope and the timber, plus a
   single burnt-umber hairline under every price. */
body.t-ghoema {
  background: #f7f3ea;
  color: #14120f;
  --radius: 0;
  --header-bg: #f7f3ea;
  --surface: #ffffff;
  --surface-2: #ece5d7;
  --line: #e2d9c8;
  --line-strong: #d3c7b1;
  --heading: #0d0c0a;
  --text: #14120f;
  --muted: #6f685c;
}
body.t-ghoema .sf-header, body.t-ghoema .sf-footer { background: #f7f3ea; border-color: #e2d9c8; }
body.t-ghoema .btn.brand { background: #14120f; border-color: #14120f; color: #f7f3ea; border-radius: 0; box-shadow: none; font-weight: 600; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; padding: 15px 30px; }

/* the first screen is picture plus centred type and nothing else — the small
   wide-tracked line is pulled ABOVE the headline with flex order, which is the
   one thing the markup cannot do on its own */
body.t-ghoema .sc-hero { min-height: 100vh; padding: 150px 20px; }
body.t-ghoema .sc-hero-inner { display: flex; flex-direction: column; align-items: center; }
body.t-ghoema .sc-hero h1 { font-weight: 300; font-size: clamp(32px, 6.6vw, 82px); line-height: 1.03; letter-spacing: 0.01em; text-transform: uppercase; }
body.t-ghoema .sc-hero p { order: -1; margin: 0 0 22px; font-size: 11px; font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase; }
body.t-ghoema .sc-h2 { font-weight: 500; font-size: clamp(13px, 1.5vw, 16px); letter-spacing: 0.24em; text-transform: uppercase; margin: 0 0 30px; }
body.t-ghoema .sc-strip-img { border: 0; }
body.t-ghoema .sc-strip-label, body.t-ghoema .sc-look-cat { display: block; margin: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
body.t-ghoema .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

/* THE WELD — fused to the hero, full width, zero gap, no heading above it */
body.t-ghoema .sc-hero + .sc-strip { max-width: none; padding: 0; }
body.t-ghoema .sc-hero + .sc-strip .sc-strip-label { background: #ece5d7; padding: 19px 12px 23px; }

/* THE GALLERY — two strips, one block: row one carries the heading and no
   bottom padding, row two is caught by the chained selector and starts flush */
body.t-ghoema .sc-strip + .sc-strip { padding: 100px 20px 0; }
body.t-ghoema .sc-strip + .sc-strip + .sc-strip { padding: 0 20px 96px; }
body.t-ghoema .sc-strip + .sc-strip .sc-strip-row { gap: 5px; }
body.t-ghoema .sc-strip + .sc-strip .sc-strip-label { padding: 9px 0 4px; font-size: 9px; font-weight: 500; letter-spacing: 0.18em; color: var(--muted); }

/* the contained spine breaks exactly once, mid-page, edge to edge */
body.t-ghoema .sc-banner { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); min-height: 60vh; border-radius: 0; }

/* the shop arrives fifth and stays quiet: big picture, tiny name, tiny price */
body.t-ghoema .sc-lookbook { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 58px 26px; max-width: 1080px; margin: 0 auto; padding: 100px 20px 92px; align-items: start; }
body.t-ghoema .sc-lookbook > .container { grid-column: 1 / -1; max-width: none; padding: 0; }
body.t-ghoema .sc-look-row { display: block; }
body.t-ghoema .sc-look-copy { padding: 15px 0 0; }
body.t-ghoema .sc-look-t, body.t-ghoema .sc-look-desc { font-size: 12.5px; font-weight: 400; letter-spacing: 0; line-height: 1.65; margin: 9px 0 0; }
body.t-ghoema .sc-look-cat { color: #6b3f24; font-size: 9.5px; letter-spacing: 0.24em; }
body.t-ghoema .sc-look-p { font-size: 12.5px; font-weight: 600; margin: 15px 0 16px; padding-bottom: 12px; border-bottom: 1px solid #6b3f24; }

@media (max-width: 900px) {
  body.t-ghoema .sc-strip-row, body.t-ghoema .sc-lookbook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-ghoema .sc-hero { min-height: 84vh; padding: 108px 20px; }
}

/* NIGHT — the workshop after the lights go off. The cream drops to wet timber
   and the oatmeal caption band stays one half-shade up from the ground, so the
   weld under the hero still reads without a line being drawn. The umber lifts,
   because #6b3f24 on a near-black ground simply disappears into it. */
html[data-theme="dark"] body.t-ghoema {
  background: #12100d;
  color: #ddd5c6;
  --header-bg: #12100d;
  --surface: #1a1713;
  --surface-2: #201c16;
  --line: #2c2620;
  --line-strong: #3b342b;
  --heading: #f3ede1;
  --text: #ddd5c6;
  --muted: #968d7e;
}
html[data-theme="dark"] body.t-ghoema .sf-header, html[data-theme="dark"] body.t-ghoema .sf-footer { background: #12100d; border-color: #2c2620; }
html[data-theme="dark"] body.t-ghoema .btn.brand { background: #f3ede1; border-color: #f3ede1; color: #12100d; }
html[data-theme="dark"] body.t-ghoema .sc-hero + .sc-strip .sc-strip-label { background: #201c16; }
html[data-theme="dark"] body.t-ghoema .sc-look-cat { color: #a97049; }
html[data-theme="dark"] body.t-ghoema .sc-look-p { border-bottom-color: #a97049; }