/* ---- houtskool (Houtskool — Charcoal & ink drawings 308) -------------------
   THE structural move: the page opens on nothing but goods. No hero, no
   headline, no intro of any kind — the first pixel under the header is an
   artwork, and the catalogue IS the page: a two-column wall of enormous square
   tiles running nearly the full width of the viewport on a 6px gutter, with two
   small greyed lines and a price under each. Ground is unbleached cotton rag
   with no accent hue anywhere, so the drawings are the only true black on it. */
body.t-houtskool { background: #ece7dc; color: #2a2620;
  --header-bg: rgba(236, 231, 220, 0.9); --surface: #ece7dc; --surface-2: #e3ddd0;
  --line: #d6cfc1; --line-strong: #c7bfae; --heading: #141210; --muted: #6f6a61; --text: #2a2620; }
body.t-houtskool .sf-header, body.t-houtskool .sf-footer { background: #ece7dc; border-color: #d6cfc1; }
body.t-houtskool .btn.brand { background: #141210; border-color: #141210; color: #ece7dc; border-radius: 0;
  box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 600; padding: 15px 30px; }
body.t-houtskool .btn.brand:hover { background: #3a352e; border-color: #3a352e; }
body.t-houtskool .sc-h2 { font-weight: 500; font-size: clamp(21px, 2.6vw, 30px); letter-spacing: -0.02em; color: #141210; }

/* THE WALL — flush under the nav, edge to edge, two across, hairline gutter.
   The heading is empty by design and is removed outright so that nothing
   whatsoever precedes the first tile. */
body.t-houtskool .sc-masonry { padding: 0 0 clamp(48px, 7vh, 104px); }
body.t-houtskool .sc-masonry .sc-h2:empty { display: none; }
body.t-houtskool .sc-masonry .container { max-width: none; padding: 0 clamp(6px, 1vw, 16px); }
body.t-houtskool .sc-mas-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 6px; row-gap: clamp(30px, 4vh, 54px); }
body.t-houtskool .sc-mas-item { margin: 0; }
body.t-houtskool .sc-mas-item .sc-mas-media img { aspect-ratio: 1; }
body.t-houtskool .sc-mas-cat { margin-top: 14px; font-size: 10px; letter-spacing: 0.24em; font-weight: 500; color: var(--muted); }
body.t-houtskool .sc-mas-t { margin-top: 7px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
@media (max-width: 640px) { body.t-houtskool .sc-mas-grid { grid-template-columns: 1fr; } }

/* the only prose on the page, so the paragraph is set at reading weight and
   reading colour rather than the caption grey the rest of the page runs on */
body.t-houtskool .sc-about-split { gap: clamp(30px, 5vw, 78px); padding: clamp(70px, 11vh, 130px) clamp(20px, 4vw, 56px); }
body.t-houtskool .sc-about-copy p { color: var(--text); font-size: 16px; line-height: 1.85; }

/* the page's one interruption: a full-bleed plate carrying a single line */
body.t-houtskool .sc-banner { margin: 0 calc(50% - 50vw); min-height: 74vh; display: flex; align-items: center; }
body.t-houtskool .sc-banner h2 { font-size: clamp(20px, 2.8vw, 34px); font-weight: 400; letter-spacing: -0.01em; margin: 0; }

/* the form stands on the same paper as everything else — no band behind it, no
   card around it, nothing rounded, and nothing after it */
body.t-houtskool .sc-contact { padding: clamp(56px, 9vh, 104px) 20px clamp(80px, 13vh, 150px); }
body.t-houtskool .sc-field input, body.t-houtskool .sc-field textarea, body.t-houtskool .sc-about-media img,
body.t-houtskool .product-card, body.t-houtskool .product-card .ph, body.t-houtskool .pdp .ph { border-radius: 0; }

/* NIGHT — the paper goes to charcoal and the drawings become the only white on
   the page; the buy slab inverts to paper on ink. Still no colour anywhere. */
html[data-theme="dark"] body.t-houtskool { background: #141210; color: #cfc9bc;
  --header-bg: rgba(20, 18, 16, 0.9); --surface: #1a1815; --surface-2: #201d19;
  --line: #2e2a25; --line-strong: #3c3730; --heading: #ece7dc; --muted: #8b857a; --text: #cfc9bc; }
html[data-theme="dark"] body.t-houtskool .sf-header, html[data-theme="dark"] body.t-houtskool .sf-footer { background: #141210; border-color: #2e2a25; }
html[data-theme="dark"] body.t-houtskool .sc-h2 { color: #ece7dc; }
html[data-theme="dark"] body.t-houtskool .btn.brand { background: #ece7dc; border-color: #ece7dc; color: #141210; }
html[data-theme="dark"] body.t-houtskool .btn.brand:hover { background: #ffffff; border-color: #ffffff; }