/* ---- kraal (Kraal — Stock handling gear 102) -------------------------------
   THE STRUCTURAL MOVE: the photograph takes the whole first screen and then the
   page shrinks and never widens again. Richtext, strip and catalogue are all
   pinned to one narrow centred measure, and that column is broken exactly
   twice — the banner and the contact foot, both bled to 100vw and inverted to
   thorn-shade green-black with bone type reversed out. Nothing else changes
   ground, so the two bleeds are the page's only structural events. The bar is
   unsticky and scrolls away with the slides. Turquoise is the dip tank: buttons,
   strip labels and the price line, and nowhere else. */
body.t-kraal {
  background: #f2efe6;
  color: #26261f;
  --kr-dip: #35786e;
  --kr-thorn: #10201a;
  --surface: #ffffff;
  --surface-2: #e8e4d8;
  --line: #dbd6c8;
  --line-strong: #c3bdaa;
  --heading: #171815;
  --text: #26261f;
  --muted: #6d6c5f;
  --header-bg: #f2efe6;
  --radius: 0;
  --shadow: none;
}
/* unsticky, and a solid slab rather than glass — it sits above the slides and
   scrolls off with them, exactly as the reference does */
body.t-kraal .sf-header, body.t-kraal .sf-footer {
  position: static; background: #f2efe6; border-color: #dbd6c8;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-kraal .btn.brand { background: var(--kr-dip); border-color: var(--kr-dip); color: #f2efe6; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 14px 28px; }
body.t-kraal .btn.brand:hover { background: #275c55; border-color: #275c55; opacity: 1; }

/* the whole first screen is picture, copy hard left */
body.t-kraal .sc-hero { min-height: calc(100vh - 68px); }
body.t-kraal .sc-hero h1 { font-weight: 700; font-size: clamp(32px, 5.6vw, 62px); line-height: 1.04; letter-spacing: -0.02em; max-width: 15ch; }
body.t-kraal .sc-hero-left .sc-hero-inner { max-width: 660px; padding-left: clamp(0px, 3vw, 40px); }

/* --- and then it collapses, and stays collapsed --- */
body.t-kraal .sc-h2 { text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(12px, 1.6vw, 14px); font-weight: 700; color: var(--heading); margin-bottom: 30px; }
body.t-kraal .sc-richtext { max-width: 560px; padding: 92px 20px 36px; }
body.t-kraal .sc-richtext p { color: var(--heading); font-size: clamp(15.5px, 1.9vw, 17.5px); line-height: 1.95; }
body.t-kraal .sc-strip, body.t-kraal .sc-buygrid { max-width: 940px; }
body.t-kraal .sc-strip { padding: 46px 20px 10px; }
body.t-kraal .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
body.t-kraal .sc-strip-label { margin-top: 12px; color: var(--kr-dip); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; }
/* six tiles have to fill two rows of three — the auto-fill grid would leave a
   4 + 2 hangover at wide widths */
body.t-kraal .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 26px; }
body.t-kraal .sc-buy-cat { color: var(--muted); letter-spacing: 0.18em; }
body.t-kraal .sc-buy-p { color: var(--kr-dip); font-weight: 700; font-size: 16px; }

/* BREAK ONE — the race and the crush, bled and sunk into thorn shade */
body.t-kraal .sc-banner { background-color: var(--kr-thorn); background-blend-mode: multiply; min-height: 46vh; display: flex; align-items: center; margin: 62px calc(50% - 50vw); }

/* BREAK TWO — the foot: the same inverted ground, three fields in one row */
body.t-kraal .sc-contact { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--kr-thorn); color: #f2efe6; padding: 68px 24px 78px; }
body.t-kraal .sc-contact .sc-h2, body.t-kraal .sc-contact .sc-contact-sub { color: #f2efe6; }
body.t-kraal .sc-contact-form { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 22px; }
body.t-kraal .sc-contact-form .btn { grid-column: 1 / -1; justify-self: center; margin-top: 12px; }
body.t-kraal .sc-contact .sc-field label { color: #8fa89f; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; }
body.t-kraal .sc-contact .sc-field input, body.t-kraal .sc-contact .sc-field textarea { background: transparent; border: 0; border-bottom: 1px solid #2e4640; color: #f2efe6; padding: 10px 0; }
body.t-kraal .sc-contact .sc-field textarea { height: 42px; resize: none; }

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

/* NIGHT — the limewash goes out and the thorn shade takes the whole page, so the
   two bleeds sink a further step below it rather than disappearing. The dip
   colour lifts to hold its contrast off the dark ground. */
html[data-theme="dark"] body.t-kraal {
  background: #0f1512;
  color: #b9bdb4;
  --kr-dip: #6fbfb2;
  --kr-thorn: #060d0a;
  --surface: #171c19;
  --surface-2: #1d231f;
  --line: #2a312c;
  --line-strong: #3a423b;
  --heading: #f2efe6;
  --text: #b9bdb4;
  --muted: #838a80;
  --header-bg: #0f1512;
}
html[data-theme="dark"] body.t-kraal .sf-header, html[data-theme="dark"] body.t-kraal .sf-footer { background: #0f1512; border-color: #2a312c; }
html[data-theme="dark"] body.t-kraal .btn.brand { background: var(--kr-dip); border-color: var(--kr-dip); color: #06110d; }
html[data-theme="dark"] body.t-kraal .btn.brand:hover { background: #8ad3c6; border-color: #8ad3c6; }
html[data-theme="dark"] body.t-kraal .sc-contact .sc-field input, html[data-theme="dark"] body.t-kraal .sc-contact .sc-field textarea { border-bottom-color: #24332d; }
html[data-theme="dark"] body.t-kraal .sc-contact .sc-field label { color: #7d968d; }