/* ---- kruin (Kruin — Bonsai nursery & specimen trees 288) -------------------
   THE STRUCTURAL MOVE: wide, narrow, WIDE AND GAPLESS, narrow again. The fold
   is a full-viewport three-slide cross-fade; the moment it ends the page gives
   up the window for a contained split, and it only takes the full width back
   once that matters — an eight-tile wall of finished trees, four across by two
   down, butted with no gutter and no frame, running edge to edge to the browser
   rim. It is built as TWO four-item strips back to back because parseSections
   caps a strip at six items; the second carries no heading so the eight read as
   one block. After the wall the page is a narrow column again all the way down
   apart from a single dark band at dusk, and the priced grid lands deliberately
   late, the only place a rand figure appears.
   Ochre-green is spent three times and nowhere else: the rand figure, the buy
   slab, and the rule that lights under a work-wall tile on hover — so the trees
   carry the colour. Sections are picked by ADJACENCY (.sc-about-split +
   .sc-strip, .sc-strip + .sc-strip, .sc-richtext + .sc-strip) and never by
   :nth-of-type, which would match the hero instead. Nothing here touches the
   header, the nav or any item inside them: type, colour and ground only. */
body.t-kruin {
  background: #f2efe8;
  color: #33363a;
  --kr-ink: #16181a;
  --kr-ochre: #7b7a2e;
  --kr-ochre-lit: #8f8e36;
  --bg-flat: #f2efe8;
  --header-bg: #f2efe8;
  --surface: #ece8df;
  --surface-2: #e4dfd3;
  --line: #ddd7ca;
  --line-strong: #c3bcaa;
  --heading: #16181a;
  --text: #33363a;
  --muted: #6f7168;
  --radius: 0;
  --shadow: none;
}

/* a flat sand bar the same colour as the page, so the fold starts beneath the
   header rather than behind it. Colour and tracking only — nothing here moves,
   reorders, floats or re-flows a single item in the header. */
body.t-kruin .sf-head, body.t-kruin .sf-header,
body.t-kruin .sf-foot, body.t-kruin .sf-footer, body.t-kruin .sf-cats {
  background: #f2efe8; border-color: #ddd7ca;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-kruin .sf-name, body.t-kruin .sf-navlink { text-transform: uppercase; letter-spacing: 0.22em; font-size: 12px; font-weight: 600; }

/* OCHRE 1 of 3 — every control is a flat lichen slab with no edge on it */
body.t-kruin .btn.brand { background: var(--kr-ochre); border: 0; box-shadow: none; color: #f7f5ee; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; padding: 15px 32px; }
body.t-kruin .btn.brand:hover { background: var(--kr-ochre-lit); color: #ffffff; }

/* WIDE, ONCE — the whole first screen and nothing else on it */
body.t-kruin .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-kruin .sc-hero h1, body.t-kruin .sc-banner h2 { font-weight: 500; letter-spacing: -0.025em; line-height: 1.07; }
body.t-kruin .sc-hero h1 { font-size: clamp(32px, 5.4vw, 62px); margin-bottom: 18px; }
body.t-kruin .sc-h2 { color: var(--kr-ink); font-weight: 500; font-size: clamp(21px, 2.8vw, 33px); letter-spacing: -0.015em; margin-bottom: 30px; }

/* THE FIRST COLLAPSE — a contained split with real white sand either side, the
   photograph square and dropped straight onto the ground */
body.t-kruin .sc-about-split { max-width: 980px; padding: 116px 20px 100px; gap: 58px; }
body.t-kruin .sc-about-media img { aspect-ratio: 1; border-radius: 0; }
body.t-kruin .sc-about-copy p, body.t-kruin .sc-richtext p { color: var(--text); font-size: clamp(16px, 1.9vw, 17.5px); line-height: 1.95; }
body.t-kruin .sc-richtext { max-width: 620px; padding: 100px 20px 100px; }

/* every tile on the page is a bare square: no border, no radius, no card */
body.t-kruin .sc-strip-img { border: 0; border-radius: 0; background: var(--surface-2); }
body.t-kruin .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }

/* THE WORK WALL — the only edge-to-edge grid on the site. Both strips lose the
   container entirely and the gutter goes to nothing, so the eight photographs
   butt into one another and the labels are the only air in the block. */
body.t-kruin .sc-about-split + .sc-strip,
body.t-kruin .sc-strip + .sc-strip { max-width: none; padding: 0; }
body.t-kruin .sc-about-split + .sc-strip .sc-strip-row,
body.t-kruin .sc-strip + .sc-strip .sc-strip-row { gap: 0; }
body.t-kruin .sc-about-split + .sc-strip .sc-h2 { margin: 0 0 26px; padding: 0 20px; }
body.t-kruin .sc-about-split + .sc-strip .sc-strip-card,
body.t-kruin .sc-strip + .sc-strip .sc-strip-card { padding-bottom: 14px; border-bottom: 2px solid transparent; transition: border-color 0.25s ease; }
/* OCHRE 2 of 3 — the one rule on the wall, and it only exists on hover */
body.t-kruin .sc-about-split + .sc-strip .sc-strip-card:hover,
body.t-kruin .sc-strip + .sc-strip .sc-strip-card:hover { border-bottom-color: var(--kr-ochre); }
body.t-kruin .sc-about-split + .sc-strip .sc-strip-label,
body.t-kruin .sc-strip + .sc-strip .sc-strip-label { margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* the customers' rail: contained and gapped again, and the quote set at reading
   size in ink rather than as a tracked caption — the opposite of the wall */
body.t-kruin .sc-richtext + .sc-strip { padding: 0 20px 104px; }
body.t-kruin .sc-richtext + .sc-strip .sc-strip-label { margin-top: 16px; font-size: 15px; font-weight: 400; line-height: 1.6; text-transform: none; letter-spacing: 0; color: var(--kr-ink); }

/* the one dark band, butted flush, words held in the upper third */
body.t-kruin .sc-banner { min-height: 66vh; padding: 16vh 22px 0; margin: 0 calc(50% - 50vw); }

/* the catalogue, four across in two rows that both fill. OCHRE 3 of 3 is the
   rand figure; the category above it is muted so the colour lands once a tile. */
body.t-kruin .sc-buygrid { padding: 96px 20px 106px; }
body.t-kruin .sc-buy-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 26px; }
body.t-kruin .sc-buy-cat { color: var(--muted); letter-spacing: 0.18em; }
body.t-kruin .sc-buy-p { color: var(--kr-ochre); font-weight: 700; font-size: 16px; }

/* the form takes the left column and the nursery details the right, which is
   the reference's appointment block. Grid order on a content section only —
   nothing in the header or the nav is reordered anywhere in this theme. */
body.t-kruin .sc-contact-split { max-width: 940px; padding: 8px 20px 116px; gap: 56px; }
body.t-kruin .sc-contact-split .sc-contact-body { order: -1; }
body.t-kruin .sc-contact-lead p { color: var(--muted); font-size: 15.5px; line-height: 1.85; white-space: pre-line; }

@media (max-width: 900px) {
  body.t-kruin .sc-hero { min-height: 86vh; }
  body.t-kruin .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kruin .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kruin .sc-banner { min-height: 52vh; padding: 13vh 20px 0; }
}

/* NIGHT — the sand and the ink change places. The ground becomes the near-black
   the type was set in, the type becomes the sand, and the lichen is lifted two
   stops so the rand figures and the buy slab still read against it; the slab's
   label goes dark because the lifted ochre is now the brighter of the two. */
html[data-theme="dark"] body.t-kruin {
  background: #16181a;
  color: #cbc9bf;
  --kr-ink: #f2efe8;
  --kr-ochre: #a7a63f;
  --kr-ochre-lit: #bcbb4c;
  --bg-flat: #16181a;
  --header-bg: #16181a;
  --surface: #1c1f21;
  --surface-2: #24272a;
  --line: #2b2f32;
  --line-strong: #3d4247;
  --heading: #f2efe8;
  --text: #cbc9bf;
  --muted: #85877c;
}
html[data-theme="dark"] body.t-kruin .sf-head, html[data-theme="dark"] body.t-kruin .sf-header,
html[data-theme="dark"] body.t-kruin .sf-foot, html[data-theme="dark"] body.t-kruin .sf-footer,
html[data-theme="dark"] body.t-kruin .sf-cats { background: #16181a; border-color: #2b2f32; }
html[data-theme="dark"] body.t-kruin .btn.brand { color: #16181a; }