/* ── DUIKER · junior bush camp & veld school, Waterberg ────────────────────
   THE STRUCTURAL MOVE: both story bands are deliberately lopsided — one tall
   photograph holding two thirds of the width against a narrow column of text,
   mirrored the second time — and the page closes on a hard 50/50 where a
   photograph bleeds gaplessly to the page edge and the enquiry form sits on
   flat band tone beside it. Sun-bleached bone the whole way down, bushveld ink
   for type, and the ember spent only on the eyebrow, the arrows and the slabs;
   every green on the page comes out of a photograph, never the interface.
   `--brand` is the ember, so the shared stylesheet's own accents already land
   in the right place and the night block only has to warm it one stop. */
body.t-duiker.ws-body {
  --bg: #efe9dd; --fg: #4c5249; --heading: #232a24; --text: #4c5249; --muted: #857e6f;
  --du-band: #e5decf; --du-line: #d6ccb7;
  --hero-a: rgba(21, 26, 20, .24); --hero-b: rgba(21, 26, 20, .62);
}
body.t-duiker { background: var(--bg); }

/* the bar — type only, never position or order */
body.t-duiker .ws-brand { color: var(--heading); text-transform: uppercase; letter-spacing: .32em; font-size: 13px; font-weight: 800; }

/* the stage — a whole viewport of veld with the copy held left */
body.t-duiker .ws-hero { min-height: 100vh; }
body.t-duiker .ws-hero h1 { font-size: clamp(38px, 6.4vw, 84px); font-weight: 800; letter-spacing: -.045em; line-height: .98; max-width: 13ch; }

/* the ember — flat slabs carrying the reference's arrow, never a border */
body.t-duiker.ws-body .btn.brand, body.t-duiker.ws-body .ws-hero-cta.btn.brand { background: var(--brand); color: #fdf7ee; border: 0; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 700; padding: 17px 32px; }
body.t-duiker.ws-body .btn.brand::after { content: '→'; }

/* bone ground the whole way down; the deeper tone is spent on four bands only */
body.t-duiker .ws-section { padding: 96px 0; }
body.t-duiker .ws-section:nth-child(even):not(.ws-cta) { background: transparent; }
body.t-duiker.ws-body .ws-section.ws-features, body.t-duiker.ws-body .ws-section.ws-listblock, body.t-duiker.ws-body .ws-section.ws-cta, body.t-duiker.ws-body .ws-section.ws-contact { background: var(--du-band); color: var(--text); }
body.t-duiker .ws-h2, body.t-duiker .ws-story-copy h2, body.t-duiker .ws-cta-inner h2 { color: var(--heading); font-size: clamp(25px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; margin: 0 0 20px; }
body.t-duiker .ws-story-copy p, body.t-duiker .ws-feature p, body.t-duiker .ws-quote blockquote, body.t-duiker .ws-gallery-cap span { color: var(--text); font-size: 14.8px; line-height: 1.85; }

/* THE LOPSIDED SPLIT — two thirds photograph against one third of text, mirrored */
body.t-duiker .ws-story-grid { grid-template-columns: 2fr 1fr; gap: 56px; }
body.t-duiker .ws-story-right .ws-story-grid { grid-template-columns: 1fr 2fr; }
body.t-duiker .ws-story-media img, body.t-duiker .ws-gallery-item img { border-radius: 0; aspect-ratio: 4 / 5; }

/* six of everything, three across, so every row closes */
body.t-duiker .ws-features-grid, body.t-duiker .ws-gallery-grid, body.t-duiker .ws-testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
body.t-duiker .ws-feature-icon { color: var(--brand); margin-bottom: 14px; }

/* field notes hang off a centred ember eyebrow instead of a heading */
body.t-duiker .ws-gallery .ws-h2 { color: var(--brand); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; margin: 0 0 40px; }

/* six teachers, no cards — a hairline over each, the ember quote mark kept */
body.t-duiker .ws-quote { background: transparent; border: 0; border-top: 2px solid var(--heading); border-radius: 0; box-shadow: none; padding: 18px 0 0; }

/* the partner wall — six school names set in our own type, never a logo image */
body.t-duiker .ws-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; padding: 0; list-style: none; }
body.t-duiker .ws-list li { border-top: 1px solid var(--du-line); margin: 0; padding: 18px 0 16px; color: var(--heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; line-height: 1.6; }

/* THE CLOSE — the photograph bleeds gaplessly to the page edge, form beside it */
body.t-duiker.ws-body .ws-section.ws-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; }
body.t-duiker .ws-contact::before { content: ''; background: url("/media/samples/dui_hero_fire.jpg") center / cover; min-height: 580px; }
body.t-duiker .ws-contact .ws-container { max-width: none; margin: 0; padding: 92px 6vw; }
body.t-duiker .ws-contact .ws-sub { max-width: 42ch; margin: 0 auto 30px; white-space: pre-line; color: var(--muted); font-size: 13.5px; line-height: 2; }
body.t-duiker .ws-field input, body.t-duiker .ws-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--du-line); border-radius: 0; color: var(--heading); padding: 11px 2px; }

@media (max-width: 880px) {
  body.t-duiker .ws-story-grid, body.t-duiker .ws-story-right .ws-story-grid, body.t-duiker.ws-body .ws-section.ws-contact { grid-template-columns: 1fr; gap: 30px; }
  body.t-duiker .ws-features-grid, body.t-duiker .ws-gallery-grid, body.t-duiker .ws-testimonials-grid, body.t-duiker .ws-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-duiker .ws-story-media img { aspect-ratio: 4 / 3; }
  body.t-duiker .ws-contact::before { min-height: 260px; }
}

/* night — the same camp once the fire is lit, the ember one stop hotter */
html[data-theme="dark"] body.t-duiker.ws-body {
  --bg: #15180f; --fg: #a7a798; --heading: #f2eee2; --text: #a7a798; --muted: #7d7c6d;
  --du-band: #1c2015; --du-line: #2e3226; --brand: #dd7f3f;
  --hero-a: rgba(6, 8, 5, .32); --hero-b: rgba(6, 8, 5, .70);
}