/* ── Uitspan 333 — Karkloof river campsite & caravan park ──────────────────
   Structural move: the page's spine is ONE oat-paper band cut into a wet-slate
   page. It holds the story (photograph hard left, narrow right column, big
   letter-spaced heading with the kicker BENEATH it via ::first-line) and then,
   with no break in the ground, the bare symmetrical ledger — two plain lists of
   equal weight, each row a hairline, split by a single vertical rule, carrying
   no icon and no imagery at all. Photography carries every bit of saturation on
   the page; the lantern amber lands only on buttons, the kicker and the nav. */
body.t-uitspan.ws-body {
  --bg: #24272b; --fg: #c4c8c2; --heading: #f1efe8; --text: #c4c8c2; --muted: #8f948d;
  --up-oat: #e8e2d3; --up-ink: #1c1f1b; --up-body: #46493f;
  --up-rule: #c5bea8; --up-rule2: #d7d0bb;
  --up-lamp: #d99441; --up-lamp-d: #a3671a; --up-lichen: #a5ada2;
  --up-flat: #1a1d20; --up-line: #313639; --up-field: #2b2f33;
}
body.t-uitspan.ws-body .ws-section { padding: 104px 0; }
body.t-uitspan .ws-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 40; background: transparent; backdrop-filter: none; border-bottom: 0; color: #f4f2ec; }
body.t-uitspan .ws-nav-links a:hover, body.t-uitspan .ws-nav-links a.on { color: var(--up-lamp); border-bottom-color: var(--up-lamp); }
body.t-uitspan .ws-hero { min-height: 100vh; }
body.t-uitspan .ws-hero h1 { font-weight: 400; font-size: clamp(26px, 3.7vw, 44px); letter-spacing: 0.005em; line-height: 1.28; max-width: 25ch; }
body.t-uitspan.ws-body .btn.brand,
body.t-uitspan.ws-body .ws-hero-cta.btn.brand,
body.t-uitspan.ws-body .ws-cta .btn.brand { background: var(--up-lamp); color: #1a1d20; border-radius: 0; box-shadow: none; font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 14px 30px; }
body.t-uitspan.ws-body .btn.brand:hover,
body.t-uitspan.ws-body .ws-hero-cta.btn.brand:hover,
body.t-uitspan.ws-body .ws-cta .btn.brand:hover { background: #c37f2f; }
body.t-uitspan .ws-h2, body.t-uitspan .ws-cta-inner h2, body.t-uitspan .ws-feature h3,
body.t-uitspan .ws-col-h, body.t-uitspan .ws-form-heading h3 { color: var(--heading); font-weight: 500; font-size: clamp(13px, 1.6vw, 16px); letter-spacing: 0.24em; text-transform: uppercase; }
body.t-uitspan .ws-sub, body.t-uitspan .ws-feature p, body.t-uitspan .ws-form-heading p { color: var(--muted); }
/* the oat band: story + ledger read as one continuous piece of paper */
body.t-uitspan.ws-body .ws-story, body.t-uitspan.ws-body .ws-columns { background: var(--up-oat); }
body.t-uitspan.ws-body .ws-story { padding: 0; }
body.t-uitspan .ws-story-grid { max-width: none; padding: 0; gap: 0; grid-template-columns: 46% 1fr; align-items: stretch; }
body.t-uitspan .ws-story-media img { border-radius: 0; aspect-ratio: auto; height: 100%; min-height: 600px; }
body.t-uitspan .ws-story-copy { padding: 110px 68px 84px 72px; max-width: 620px; }
body.t-uitspan .ws-story-copy h2 { color: var(--up-ink); font-weight: 400; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: 0.26em; text-transform: uppercase; margin: 0 0 16px; }
body.t-uitspan .ws-story-copy p, body.t-uitspan .ws-col p { color: var(--up-body); font-size: 15.5px; line-height: 1.85; }
/* the quiet kicker sits BENEATH the heading, not above it */
body.t-uitspan .ws-story-copy p::first-line { color: var(--up-lamp-d); font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
body.t-uitspan.ws-body .ws-columns { padding: 0 0 110px; }
body.t-uitspan .ws-columns .ws-cols { gap: 0; }
body.t-uitspan .ws-col { padding: 0 52px; }
body.t-uitspan .ws-col + .ws-col { border-left: 1px solid var(--up-rule); }
body.t-uitspan .ws-col-h { color: var(--up-ink); margin: 0; padding-bottom: 15px; border-bottom: 1px solid var(--up-rule); }
body.t-uitspan .ws-col p { margin: 0; padding: 16px 0; line-height: 1.55; border-bottom: 1px solid var(--up-rule2); }
/* photograph bands: gapless, no chrome, never two in a row */
body.t-uitspan.ws-body .ws-gallery, body.t-uitspan.ws-body .ws-photogrid { padding: 0; }
body.t-uitspan .ws-gallery > .ws-container { max-width: none; padding: 0; }
body.t-uitspan .ws-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
body.t-uitspan .ws-gallery-item img { border-radius: 0; aspect-ratio: 3 / 2; }
body.t-uitspan .ws-photogrid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-uitspan .ws-photogrid-grid img { aspect-ratio: 4 / 5; }
body.t-uitspan .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
body.t-uitspan .ws-feature-icon { color: var(--up-lichen); }
body.t-uitspan.ws-body .ws-testimonials, body.t-uitspan.ws-body .ws-cta { background: var(--up-flat); }
body.t-uitspan .ws-testimonials-grid { grid-template-columns: 1fr; gap: 0; max-width: 780px; margin: 0 auto; }
body.t-uitspan .ws-quote { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 34px 0; text-align: center; }
body.t-uitspan .ws-quote + .ws-quote { border-top: 1px solid var(--up-line); }
body.t-uitspan .ws-quote blockquote { color: var(--heading); font-size: clamp(17px, 2.1vw, 22px); line-height: 1.6; margin-bottom: 12px; }
body.t-uitspan .ws-quote blockquote::before { content: none; }
body.t-uitspan .ws-quote figcaption { color: var(--muted); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; }
body.t-uitspan .ws-form-heading h3 { color: var(--up-lamp); margin: 0 0 4px; }
body.t-uitspan .ws-field input, body.t-uitspan .ws-field textarea, body.t-uitspan .ws-field select { background: var(--up-field); border: 1px solid var(--up-line); border-radius: 0; color: var(--heading); }
@media (max-width: 900px) {
  body.t-uitspan.ws-body .ws-section { padding: 66px 0; }
  body.t-uitspan .ws-story-grid { grid-template-columns: 1fr; }
  body.t-uitspan .ws-story-media img { min-height: 320px; }
  body.t-uitspan .ws-story-copy { padding: 48px 22px 40px; max-width: none; }
  body.t-uitspan.ws-body .ws-columns { padding: 0 0 66px; }
  body.t-uitspan .ws-col { padding: 0 22px 26px; }
  body.t-uitspan .ws-col + .ws-col { border-left: 0; }
  body.t-uitspan .ws-gallery-grid, body.t-uitspan .ws-features-grid, body.t-uitspan .ws-photogrid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* night — the slate goes deeper and the oat band smokes down to a lamplit tan */
html[data-theme="dark"] body.t-uitspan.ws-body {
  --bg: #15171a; --fg: #b3b8b2; --heading: #ecebe4; --text: #b3b8b2; --muted: #7e837d;
  --up-oat: #23221d; --up-ink: #ecE5d3; --up-body: #b6b0a0;
  --up-rule: #3b3930; --up-rule2: #2f2d26;
  --up-lamp: #e2a559; --up-lamp-d: #cf9440; --up-lichen: #7f8880;
  --up-flat: #0e1012; --up-line: #2a2e31; --up-field: #1d2023;
}
html[data-theme="dark"] body.t-uitspan { background: var(--bg); }
html[data-theme="dark"] body.t-uitspan .ws-nav { color: #ecebe4; }