/* DRIEPOOT — cast-iron potjies, flat pots and griddles, Dundee.
   THE STRUCTURAL MOVE: the hero is inverted. The section's own background is
   switched off (background-size: 0 0 — the inline style only sets the image, so
   nothing has to be fought) and the cross-fade stack is un-stacked into a
   two-column grid running edge to edge, which puts TWO photographs side by side
   as a full-bleed band with the heading, the sub and the CTA flowing UNDERNEATH
   them on bare cream. Every slide is left at opacity 1, so the fade wire has
   nothing to fade and the pair simply stands there. That one edge-to-edge
   moment is the only full-bleed element on the page: everything after it drops
   into the contained column on identical padding — four method cards, a plain
   four-across buy grid, a split story, six gapped frames three across — and
   type is never set on a photograph again. One burnt caramel, and only two
   places to find it: the buy slab and the hairline under each heading. No
   order, no absolute positioning and no nth-of-type anywhere near the header. */
body.t-driepoot {
  background: #f4eee1;
  color: #241d16;
  --dp-caramel: #a25a22;
  --dp-caramel-hi: #b8682a;
  --bg-flat: #f4eee1;
  --header-bg: #f4eee1;
  --surface: #efe7d6;
  --surface-2: #efe7d6;
  --line: #e2d8c5;
  --line-strong: #c9bba1;
  --heading: #17130f;
  --text: #241d16;
  --muted: #8b8074;
  --radius: 0;
  --shadow: none;
}

/* a flat cream bar the same colour as the page — colour and hairline only, so
   the two-up begins beneath the header rather than behind it */
body.t-driepoot .sf-head, body.t-driepoot .sf-header,
body.t-driepoot .sf-foot, body.t-driepoot .sf-footer, body.t-driepoot .sf-cats {
  background: #f4eee1; border-color: #e2d8c5;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* CARAMEL 1 of 2 — the buy control, a flat slab with no edge on it */
body.t-driepoot .btn.brand { background: var(--dp-caramel); border: 0; box-shadow: none; color: #fdf6ea; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 700; padding: 13px 26px; }
body.t-driepoot .btn.brand:hover { background: var(--dp-caramel-hi); color: #ffffff; }

/* THE TWO-UP — the section stops being a picture with type on it and becomes a
   band of two pictures with the type set below them on cream */
body.t-driepoot .sc-hero { display: block; padding: 0 0 clamp(44px, 5.5vw, 76px); background-size: 0 0; color: var(--text); }
body.t-driepoot .sc-hero-slides { position: static; display: grid; grid-template-columns: 1fr 1fr; height: clamp(260px, 38vw, 500px); }
body.t-driepoot .sc-hero-slide { position: static; opacity: 1; transition: none; filter: brightness(1.4); }
body.t-driepoot .sc-hero-inner { max-width: 760px; padding: clamp(34px, 4.4vw, 60px) 20px 0; }
body.t-driepoot .sc-hero h1 { color: var(--heading); text-shadow: none; font-size: clamp(27px, 4.2vw, 46px); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 16px; }
body.t-driepoot .sc-hero p { color: var(--muted); text-shadow: none; font-size: 16.5px; line-height: 1.62; max-width: 560px; margin: 0 auto 30px; }

/* CARAMEL 2 of 2 — a hairline drawn under every heading on the page */
body.t-driepoot .sc-h2 { color: var(--heading); font-weight: 600; font-size: clamp(18px, 2.2vw, 25px); letter-spacing: -0.015em; padding-bottom: 13px; margin: 0 0 30px; border-bottom: 1px solid var(--dp-caramel); }

/* one padding for every contained band, so the airy rhythm under the two-up is
   identical from the method cards to the story */
body.t-driepoot .sc-strip, body.t-driepoot .sc-buygrid, body.t-driepoot .sc-about-split { padding: clamp(46px, 5.4vw, 78px) 20px; }

/* the strip runs twice: four method cards above the buy grid, six frames below
   it. Four across by default; the six-item row (and only that row) goes three
   across, so both bookends fill their rows exactly. */
body.t-driepoot .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.8vw, 34px); }
body.t-driepoot .sc-strip-img { aspect-ratio: 4 / 3; }
body.t-driepoot .sc-strip-label { margin-top: 13px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--heading); }
body.t-driepoot .sc-strip-row:has(.sc-strip-card:nth-child(5)) { grid-template-columns: repeat(3, 1fr); }

/* the category caps come off the caramel and into the grey with the prices —
   the accent is rationed to two places and this is not one of them */
body.t-driepoot .sc-buy-cat { color: var(--muted); letter-spacing: 0.18em; }

/* no hover theatrics: nothing on this page moves under the cursor */
body.t-driepoot .sc-buy-card:hover .sc-buy-media img,
body.t-driepoot .sc-strip-card:hover .sc-strip-img img { transform: none; }

/* one closing strip on the same cream, separated by a hairline. Nothing after it. */
body.t-driepoot .sc-contact-band { background: var(--bg-flat); border-top: 1px solid var(--line); padding: clamp(56px, 6.6vw, 88px) 0 clamp(62px, 7.4vw, 100px); }

@media (max-width: 860px) {
  body.t-driepoot .sc-hero-slides { height: clamp(170px, 40vw, 300px); }
  body.t-driepoot .sc-strip-row,
  body.t-driepoot .sc-strip-row:has(.sc-strip-card:nth-child(5)) { grid-template-columns: repeat(2, 1fr); }
}

/* NIGHT — the oat ground goes to the colour of the iron itself and the ink to
   cream, which leaves the photographs as the only lit things on the page. The
   brightness lift comes off the two-up (a dark page does not need it) and the
   caramel is raised two stops, because at #a25a22 the buy slab and the heading
   hairline both sink into a near-black ground. */
html[data-theme="dark"] body.t-driepoot {
  background: #16130f;
  color: #cdc3b4;
  --dp-caramel: #c07636;
  --dp-caramel-hi: #d3873f;
  --bg-flat: #16130f;
  --header-bg: #16130f;
  --surface: #1c1813;
  --surface-2: #1e1a14;
  --line: #2c251d;
  --line-strong: #453a2d;
  --heading: #f4ece0;
  --text: #cdc3b4;
  --muted: #91867a;
}
html[data-theme="dark"] body.t-driepoot .sf-head, html[data-theme="dark"] body.t-driepoot .sf-header,
html[data-theme="dark"] body.t-driepoot .sf-foot, html[data-theme="dark"] body.t-driepoot .sf-footer,
html[data-theme="dark"] body.t-driepoot .sf-cats { background: #16130f; border-color: #2c251d; }
html[data-theme="dark"] body.t-driepoot .sc-hero-slide { filter: none; }
html[data-theme="dark"] body.t-driepoot .btn.brand { color: #191108; }