/* ============================== STOOKHUIS ==============================
   THE STRUCTURAL MOVE: the goods arrive FIFTH. The page opens on a
   full-viewport plate with the copy hard LEFT on a 482px measure and the
   bottle anchored to the right edge and bleeding off it, then butts EIGHT
   tiny botanical tiles straight underneath with no heading and no gap device
   at all — that dense two-row band is the whole signature — and only then
   starts alternating full-bleed halves. Nothing on the page is ever filled:
   every control inside the page is a 1px underline drawn with an inset
   shadow (never a border), the brass note lives in the photographs and in
   the rand figure, and every heading is upper-case at light weight with
   0.28em of tracking. The result reads as typography on darkness rather
   than as a coloured theme. */
body.t-stookhuis {
  background: #0d0c0b;
  color: #9a938a;
  --sk-bone: #ece7dd;
  --sk-brass: #a17a45;
  --sk-lit: #c09253;
  --bg-flat: #0d0c0b;
  --header-bg: #0d0c0b;
  --surface: #141210;
  --surface-2: #1a1714;
  --line: #24201b;
  --line-strong: #38322a;
  --heading: #ece7dd;
  --text: #9a938a;
  --muted: #6e675e;
  --radius: 0;
  --shadow: none;
}

/* a flat bar the same near-black as the page, so the plate begins beneath it
   rather than behind it. Type, colour and tracking only — nothing here moves,
   reorders or repositions a single item in the header. */
body.t-stookhuis .sf-head, body.t-stookhuis .sf-header,
body.t-stookhuis .sf-foot, body.t-stookhuis .sf-footer, body.t-stookhuis .sf-cats {
  background: #0d0c0b; border-color: #24201b; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-stookhuis .sf-name, body.t-stookhuis .sf-navlink { text-transform: uppercase; letter-spacing: 0.26em; font-size: 11px; font-weight: 500; }

/* cart, checkout and product-page controls stay flat solid slabs so a shop
   still reads as a shop — but in BONE, never in brass: the brass note is
   never carried by a filled shape anywhere on this theme. */
body.t-stookhuis .btn.brand { background: var(--sk-bone); color: #0d0c0b; border: 0; box-shadow: none; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 600; padding: 15px 30px; }
body.t-stookhuis .btn.brand:hover { background: #ffffff; color: #0d0c0b; }

/* EVERY BUTTON IN THE PAGE ITSELF IS A 1px UNDERLINE AND NOTHING ELSE — no
   fill, no box, no edge. The rule is an inset shadow rather than a border, so
   the control never grows a border the house rule forbids. */
body.t-stookhuis .sc-hero .btn.brand, body.t-stookhuis .sc-hero .btn.brand.sc-hero-ghost,
body.t-stookhuis .sc-banner .btn.brand, body.t-stookhuis .sc-contact-band .btn.brand {
  background: transparent; border: 0; padding: 0 0 9px; margin-top: 0; align-self: end;
  color: var(--sk-bone); box-shadow: inset 0 -1px 0 rgba(236, 231, 221, 0.6);
}
body.t-stookhuis .sc-hero .btn.brand:hover, body.t-stookhuis .sc-hero .btn.brand.sc-hero-ghost:hover,
body.t-stookhuis .sc-banner .btn.brand:hover, body.t-stookhuis .sc-contact-band .btn.brand:hover {
  background: transparent; color: var(--sk-lit); box-shadow: inset 0 -1px 0 var(--sk-lit);
}

/* the single typographic decision the whole page rests on */
body.t-stookhuis .sc-h2 { color: var(--sk-bone); font-weight: 300; text-transform: uppercase; letter-spacing: 0.28em; font-size: clamp(16px, 2.2vw, 25px); line-height: 1.55; text-align: left; margin: 0 0 26px; }

/* THE PLATE — full viewport, copy hard left, the bottle anchored right and
   running off the edge. The scrim is a horizontal wash, not a card: no panel,
   no box, no border, and the darkness of the plate does the contrast. */
body.t-stookhuis .sc-hero { min-height: 100vh; padding: 0 max(24px, calc(50vw - 620px)); background-position: right center; }
body.t-stookhuis .sc-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0d0c0b 4%, rgba(13, 12, 11, 0.82) 38%, rgba(13, 12, 11, 0.10) 74%, rgba(13, 12, 11, 0.42) 100%); }
body.t-stookhuis .sc-hero-inner { max-width: 620px; }
body.t-stookhuis .sc-hero-inner::before { content: 'Prince Albert · Great Karoo'; display: block; margin: 0 0 30px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(236, 231, 221, 0.55); }
body.t-stookhuis .sc-hero h1 { font-size: clamp(32px, 5vw, 58px); font-weight: 200; line-height: 1.16; letter-spacing: 0.055em; text-transform: uppercase; text-shadow: none; margin: 0 0 26px; }
body.t-stookhuis .sc-hero p { max-width: 482px; font-size: 16px; line-height: 1.85; color: rgba(236, 231, 221, 0.62); text-shadow: none; margin: 0 0 34px; }

/* THE SIGNATURE — eight tiny botanical tiles butted straight under the plate
   with no heading and no gap. parseSections caps a strip at six items, so the
   band is two four-tile strips back to back; the first loses its top padding
   so it meets the hero, the second carries the padding out of the band. Four
   per strip, so neither row can come up ragged. */
body.t-stookhuis .sc-strip { max-width: 1240px; padding: 0 20px; }
body.t-stookhuis .sc-strip + .sc-strip { padding-top: 22px; padding-bottom: clamp(70px, 11vh, 110px); }
body.t-stookhuis .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
body.t-stookhuis .sc-strip-img, body.t-stookhuis .sc-mas-media { border: 0; border-radius: 0; background: #141210; }
body.t-stookhuis .sc-strip-img { aspect-ratio: 4 / 3; }
body.t-stookhuis .sc-strip-label { margin-top: 13px; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.8; color: var(--muted); }

/* HALF ONE — a true full-bleed 50/50: the photograph runs to the viewport
   edge while the prose keeps a short measure, an eyebrow above the heading
   and the reference's underline-only control closing it off. */
body.t-stookhuis .sc-about-split { max-width: none; padding: 0; gap: 0; grid-template-columns: 1fr 1fr; align-items: stretch; }
body.t-stookhuis .sc-about-media img { aspect-ratio: auto; height: 100%; min-height: 68vh; border-radius: 0; }
body.t-stookhuis .sc-about-copy { align-self: center; max-width: 520px; padding: clamp(56px, 9vh, 104px) clamp(24px, 5vw, 76px); }
body.t-stookhuis .sc-about-copy p, body.t-stookhuis .sc-about-overlay p { color: rgba(236, 231, 221, 0.62); font-size: 15.5px; line-height: 2; text-shadow: none; }
body.t-stookhuis .sc-about-copy .sc-h2::before { content: 'The still house'; display: block; margin: 0 0 18px; font-size: 10px; font-weight: 600; letter-spacing: 0.4em; color: var(--sk-brass); }
body.t-stookhuis .sc-about-copy::after { content: 'How the cut is made'; display: inline-block; margin-top: 30px; padding-bottom: 8px; box-shadow: inset 0 -1px 0 rgba(236, 231, 221, 0.45); color: var(--sk-bone); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }

/* THE INTERRUPTION — one cinematic band wedged between the halves, flush top
   and bottom, carrying a photograph and a single tracked line and nothing else */
body.t-stookhuis .sc-banner { min-height: 72vh; margin: 0 calc(50% - 50vw); padding: 0 max(24px, calc(50vw - 620px)) 12vh; display: flex; align-items: flex-end; text-align: left; }
body.t-stookhuis .sc-banner-inner { max-width: 620px; margin: 0; }
body.t-stookhuis .sc-banner h2 { font-size: clamp(14px, 1.7vw, 19px); font-weight: 300; text-transform: uppercase; letter-spacing: 0.3em; line-height: 1.8; text-shadow: none; margin: 0; }

/* HALF THREE BREAKS THE MIRROR — the photograph goes under the type instead
   of beside it, and the column stays hard left rather than centring */
body.t-stookhuis .sc-about-overlay { min-height: 78vh; padding: clamp(70px, 12vh, 130px) max(24px, calc(50vw - 620px)); display: flex; align-items: center; }
body.t-stookhuis .sc-about-overlay-inner { max-width: 560px; margin: 0; text-align: left; }

/* THE GOODS ARRIVE FIFTH — six bottles in a three-column wall, two clean rows,
   and the rand figure is the only brass on the page outside the photographs */
body.t-stookhuis .sc-masonry { padding: clamp(80px, 13vh, 130px) 0 clamp(40px, 7vh, 70px); }
body.t-stookhuis .sc-masonry .container { max-width: 1240px; }
body.t-stookhuis .sc-mas-grid { column-count: 3; column-gap: 30px; }
body.t-stookhuis .sc-mas-cat { margin-top: 18px; color: var(--muted); letter-spacing: 0.26em; font-size: 9.5px; font-weight: 600; }
body.t-stookhuis .sc-mas-t { margin-top: 8px; color: var(--sk-bone); font-weight: 400; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.7; }
body.t-stookhuis .sc-mas-p { margin-top: 6px; color: var(--sk-brass); font-weight: 600; font-size: 13.5px; letter-spacing: 0.1em; }

/* THE FOOT — one dark strip the width of the window: a single line of copy on
   the left and the whole form beside it on ONE row, three fields and a
   submit, every field a hairline rather than a box */
body.t-stookhuis .sc-contact-band { background: #080807; padding: clamp(54px, 8vh, 86px) 0; }
body.t-stookhuis .sc-contact-band-inner { max-width: 1240px; text-align: left; display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 30px 60px; align-items: center; }
body.t-stookhuis .sc-contact-band .sc-h2 { margin: 0; font-size: clamp(12.5px, 1.4vw, 15px); letter-spacing: 0.24em; line-height: 2; }
body.t-stookhuis .sc-contact-band .sc-contact-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 18px; align-items: end; }
body.t-stookhuis .sc-contact-band .sc-field label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
body.t-stookhuis .sc-contact-band .sc-field input, body.t-stookhuis .sc-contact-band .sc-field textarea { height: 40px; padding: 9px 0; background: transparent; border: 0; border-radius: 0; box-shadow: inset 0 -1px 0 #2b2620; color: var(--sk-bone); resize: none; }

@media (max-width: 900px) {
  body.t-stookhuis .sc-hero { min-height: 88vh; background-position: 74% center; }
  body.t-stookhuis .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-stookhuis .sc-about-split { grid-template-columns: 1fr; }
  body.t-stookhuis .sc-about-media img { min-height: 46vh; }
  body.t-stookhuis .sc-mas-grid { column-count: 2; }
  body.t-stookhuis .sc-banner { min-height: 52vh; }
  body.t-stookhuis .sc-contact-band-inner { grid-template-columns: 1fr; }
  body.t-stookhuis .sc-contact-band .sc-contact-form { grid-template-columns: 1fr 1fr; }
}

/* NIGHT — the ground takes the last stop down to black so the four
   photographs become the only lit things in the room, the bone warms half a
   shade and the brass is lifted so the rand figures and the underlines still
   cut through. Same structure, one notch more contrast. */
html[data-theme="dark"] body.t-stookhuis {
  background: #060605;
  color: #8f887f;
  --sk-bone: #f4efe5;
  --sk-brass: #c08f4d;
  --sk-lit: #d8a95f;
  --bg-flat: #060605;
  --header-bg: #060605;
  --surface: #100e0c;
  --surface-2: #16130f;
  --line: #1e1a16;
  --line-strong: #322c25;
  --heading: #f4efe5;
  --text: #8f887f;
  --muted: #6a635a;
}
html[data-theme="dark"] body.t-stookhuis .sf-head, html[data-theme="dark"] body.t-stookhuis .sf-header,
html[data-theme="dark"] body.t-stookhuis .sf-foot, html[data-theme="dark"] body.t-stookhuis .sf-footer,
html[data-theme="dark"] body.t-stookhuis .sf-cats { background: #060605; border-color: #1e1a16; }
html[data-theme="dark"] body.t-stookhuis .sc-hero::before { background: linear-gradient(90deg, #060605 4%, rgba(6, 6, 5, 0.86) 38%, rgba(6, 6, 5, 0.12) 74%, rgba(6, 6, 5, 0.46) 100%); }
html[data-theme="dark"] body.t-stookhuis .sc-strip-img, html[data-theme="dark"] body.t-stookhuis .sc-mas-media { background: #100e0c; }
html[data-theme="dark"] body.t-stookhuis .sc-contact-band { background: #000000; }
html[data-theme="dark"] body.t-stookhuis .sc-contact-band .sc-field input,
html[data-theme="dark"] body.t-stookhuis .sc-contact-band .sc-field textarea { box-shadow: inset 0 -1px 0 #241f1a; }