/* ---- blockman (Blockman — Dry-aged butchery & braai packs 121) — warm charcoal, bone, ox-blood ----
   THE STRUCTURAL MOVE: the about band and the price counter are ONE dark
   movement. The full-bleed photograph loses its bottom padding and is pulled
   down into flat #17150f by a gradient, and the buygrid beneath it is bled to
   100vw on that same ground at the same 15% inset, titled with a small left
   label instead of a centred headline — so the price list reads as though it
   were set inside the photograph, which is the reference's signature. Hero and
   both banners carry the same near-black, leaving the page three dark
   movements with light strips between them. */
body.t-blockman {
  background: #f4efe4;
  color: #17150f;
  --radius: 0;
  --header-bg: #f4efe4;
  --surface: #fbf8f1;
  --surface-2: #eae3d5;
  --line: #ddd4c2;
  --line-strong: #c0b49b;
  --heading: #17150f;
  --text: #17150f;
  --muted: #5b5346;
}
body.t-blockman .sf-head, body.t-blockman .sf-foot, body.t-blockman .sf-footer { background: #f4efe4; border-color: #ddd4c2; }

/* MOVEMENT ONE — a tall appetite stage, never a full viewport, with the promo
   banner welded straight onto its bottom edge. Both banners lose their margin,
   so the page opens and closes on the same weld. */
body.t-blockman .sc-hero { padding: clamp(118px, 21vh, 200px) 20px; background-color: #17150f; }
body.t-blockman .sc-hero h1 { font-weight: 800; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -0.03em; }
body.t-blockman .sc-banner { margin: 0 calc(50% - 50vw); background-color: #17150f; min-height: 46vh; display: flex; align-items: center; }

/* the four claims — the only even, equal, small tiles anywhere on the page */
body.t-blockman .sc-strip { padding: 66px 20px 70px; }
body.t-blockman .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 26px; }
body.t-blockman .sc-strip-label { margin-top: 14px; text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; font-weight: 700; color: #5b5346; }

/* MOVEMENT TWO, part one — inset 15% from both edges, copy hard left, and the
   bottom half of the photograph pulled into flat charcoal so the counter below
   has no seam to sit on */
body.t-blockman .sc-about-overlay { position: relative; background-color: #17150f; padding: clamp(96px, 16vh, 155px) 15% 0; }
body.t-blockman .sc-about-overlay::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(rgba(23, 21, 15, 0), #17150f); }
body.t-blockman .sc-about-overlay-inner { position: relative; z-index: 1; max-width: 620px; margin: 0; }
body.t-blockman .sc-about-overlay .sc-h2 { text-align: left; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 22px; }

/* MOVEMENT TWO, part two — the counter on the same ground at the same inset.
   The three ink tokens are re-pointed here rather than restated on each card,
   which is also what keeps the ox-blood off the category labels. */
body.t-blockman .sc-buygrid {
  width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw);
  background: #17150f; padding: clamp(56px, 8vh, 88px) 15% 135px;
  --heading: #f4efe4; --muted: #c9c1b2; --brand: #978d7e; --surface-2: #221f18;
}
body.t-blockman .sc-buygrid .sc-h2 { text-align: left; color: #f4efe4; text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 700; margin: 0 0 34px; }
body.t-blockman .sc-buy-grid { grid-template-columns: repeat(3, 1fr); gap: 48px 34px; }
body.t-blockman .sc-buy-card { align-items: flex-start; text-align: left; }
/* the ONLY other place the ox-blood is spent — a dotted leader under each price */
body.t-blockman .sc-buy-p { width: 100%; font-weight: 700; font-size: 15px; padding-bottom: 10px; border-bottom: 1px dotted #8e2b22; }

/* the small contained light block that stands in for the newsletter — four
   lines wide and nothing else */
body.t-blockman .sc-richtext { max-width: 640px; padding: 78px 20px 82px; }

/* MOVEMENT THREE — the close: details stacked on the left, one photograph
   filling the right half with the fields beneath it, then the phone strip */
body.t-blockman .sc-contact-split { padding: 86px 20px 74px; gap: 56px; }
body.t-blockman .sc-contact-lead p { white-space: pre-line; line-height: 2.05; color: #17150f; }
body.t-blockman .sc-contact-body::before { content: ''; display: block; aspect-ratio: 3 / 2; margin-bottom: 28px; background: url("/media/samples/bkm_contact.jpg") center / cover; }

body.t-blockman .btn.brand { background: #8e2b22; border-color: #8e2b22; color: #f4efe4; box-shadow: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; padding: 15px 30px; }
body.t-blockman .btn.brand:hover { background: #75211a; border-color: #75211a; }
@media (max-width: 980px) {
  /* both grids have to keep filling their rows: six cuts become three rows of
     two, four claims become two rows of two, and the 15% inset would eat the
     counter alive on a phone */
  body.t-blockman .sc-buy-grid, body.t-blockman .sc-strip-row { grid-template-columns: repeat(2, 1fr); }
  body.t-blockman .sc-about-overlay, body.t-blockman .sc-buygrid { padding-left: 26px; padding-right: 26px; }
  body.t-blockman .sc-buygrid { padding-bottom: 80px; }
}

/* NIGHT — the three dark movements each drop one step further down and the bone
   type holds, but the ox-blood has to lift: #8e2b22 on a #0b0a07 ground stops
   reading as a rule under a price and just disappears. */
html[data-theme="dark"] body.t-blockman {
  background: #100f0b;
  color: #cfc8b9;
  --header-bg: #100f0b;
  --surface: #171610;
  --surface-2: #1f1d16;
  --line: #2a2721;
  --line-strong: #3a362d;
  --heading: #f4efe4;
  --text: #cfc8b9;
  --muted: #8b8375;
}
html[data-theme="dark"] body.t-blockman .sf-head, html[data-theme="dark"] body.t-blockman .sf-foot,
html[data-theme="dark"] body.t-blockman .sf-footer { background: #100f0b; border-color: #2a2721; }
html[data-theme="dark"] body.t-blockman .sc-hero, html[data-theme="dark"] body.t-blockman .sc-banner,
html[data-theme="dark"] body.t-blockman .sc-about-overlay, html[data-theme="dark"] body.t-blockman .sc-buygrid { background-color: #0b0a07; }
html[data-theme="dark"] body.t-blockman .sc-about-overlay::after { background: linear-gradient(rgba(11, 10, 7, 0), #0b0a07); }
html[data-theme="dark"] body.t-blockman .sc-strip-label { color: #9b9285; }
html[data-theme="dark"] body.t-blockman .sc-contact-lead p { color: #cfc8b9; }
html[data-theme="dark"] body.t-blockman .sc-buy-p { border-bottom-color: #c4483b; }
html[data-theme="dark"] body.t-blockman .sc-field input,
html[data-theme="dark"] body.t-blockman .sc-field textarea { background: #171610; border-color: #2a2721; color: #f4efe4; }
html[data-theme="dark"] body.t-blockman .btn.brand { background: #c4483b; border-color: #c4483b; color: #100f0b; }
html[data-theme="dark"] body.t-blockman .btn.brand:hover { background: #d55c4e; border-color: #d55c4e; }