/* ============================== KUIP ==============================
   THE STRUCTURAL MOVE: the catalogue stops being a grid. `.sc-show-grid`
   drops from two columns to ONE and runs edge to edge, so the six tubs
   become six window-wide panels stacked one under the other, alternating
   bone and warm grey like a checkerboard — the reference's single-column
   dated feed rebuilt with a price and a buy control in every entry. The
   page never returns to a grid after it: strip, then the long column,
   then split prose, then one band. Everything on the page is pinned to
   the same left rail, and the hero and that one band are the only dark
   surfaces anywhere. Copper-oxide teal is spent three times only — the
   controls, the rand figure and the hairline under each showcase title.
   Nothing here touches the header, the nav, or anything inside them. */
body.t-kuip {
  background: #f2efe8;
  color: #3a423c;
  --ku-teal: #1f5f66;
  --ku-lit: #27757e;
  --ku-ink: #1a211d;
  --ku-bone: #f2efe8;
  --ku-wash: #e7e3d9;
  --bg-flat: #f2efe8;
  --header-bg: #f2efe8;
  --surface: #f2efe8;
  --surface-2: #e7e3d9;
  --line: #ddd8cc;
  --line-strong: #c6c0b1;
  --heading: #1a211d;
  --text: #3a423c;
  --muted: #7d8279;
  --radius: 0;
  --shadow: none;
}

/* a flat bone bar the same colour as the page, so the slider begins beneath it
   rather than behind it. Type, colour and tracking only — nothing here moves,
   stacks or reorders a single item in the header. */
body.t-kuip .sf-head, body.t-kuip .sf-header,
body.t-kuip .sf-foot, body.t-kuip .sf-footer, body.t-kuip .sf-cats {
  background: #f2efe8; border-color: #ddd8cc;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-kuip .sf-name { color: var(--ku-ink); text-transform: uppercase; letter-spacing: 0.3em; font-size: 13px; font-weight: 700; }
body.t-kuip .sf-navlink { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 600; }

/* TEAL 1 of 3 — every control is a flat copper-oxide slab with no edge on it */
body.t-kuip .btn.brand { background: var(--ku-teal); border: 0; box-shadow: none; color: #f4f2ec; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 15px 32px; }
body.t-kuip .btn.brand:hover { background: var(--ku-lit); color: #ffffff; }

/* THE FOLD — three frames cross-fading over the whole window, copy pinned to
   the container's left rail and sitting straight on the photograph */
body.t-kuip .sc-hero { min-height: 100vh; padding: 96px max(24px, calc(50vw - 540px)); }
body.t-kuip .sc-hero h1 { font-size: clamp(31px, 5.1vw, 60px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 600; margin-bottom: 18px; }
body.t-kuip .sc-hero-left .sc-hero-inner { max-width: 560px; }

/* one left rail for the whole page — no heading is ever centred */
body.t-kuip .sc-h2 { text-align: left; color: var(--heading); font-weight: 600; font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -0.01em; margin-bottom: 30px; }

/* the one gapped row on the page, and the last time anything sits side by side */
body.t-kuip .sc-strip { padding: 96px 20px 92px; }
body.t-kuip .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
body.t-kuip .sc-strip-img { border: 0; border-radius: 0; background: var(--ku-wash); }
body.t-kuip .sc-strip-card { text-align: left; }
body.t-kuip .sc-strip-label { margin-top: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }

/* ★ THE MOVE — one column, full width, and it never becomes a grid again.
   Six tubs, six window-wide panels, bone and warm grey turn about. */
body.t-kuip .sc-showcase > .container { padding-top: 26px; padding-bottom: 8px; }
body.t-kuip .sc-show-grid { grid-template-columns: 1fr; }
body.t-kuip .sc-show-item { background: var(--ku-bone); }
body.t-kuip .sc-show-item:nth-child(even) { background: var(--ku-wash); }
body.t-kuip .sc-show-inner { align-items: flex-start; text-align: left; min-height: 0; max-width: 1080px; margin: 0 auto; padding: 88px max(24px, calc(50vw - 540px)) 92px; }
body.t-kuip .sc-show-cat { color: var(--muted); letter-spacing: 0.2em; font-size: 10.5px; }
body.t-kuip .sc-show-t { margin-top: 10px; font-size: clamp(20px, 2.8vw, 32px); font-weight: 600; text-transform: none; letter-spacing: -0.015em; color: var(--ku-ink); }
/* TEAL 2 of 3 — the hairline, and the only rule anywhere on the page */
body.t-kuip .sc-show-rule { width: 64px; height: 1px; background: var(--ku-teal); opacity: 1; margin: 18px 0 28px; }
body.t-kuip .sc-show-media { padding: 0; }
body.t-kuip .sc-show-media img { width: 100%; max-width: 100%; max-height: none; aspect-ratio: 3 / 2; object-fit: cover; }
/* TEAL 3 of 3 — the rand figure */
body.t-kuip .sc-show-price { color: var(--ku-teal); font-weight: 700; font-size: clamp(21px, 2.2vw, 28px); margin: 30px 0 24px; }

/* the page visibly narrows the moment the catalogue ends */
body.t-kuip .sc-about-split { max-width: 1000px; padding: 104px 20px 96px; gap: 58px; }
body.t-kuip .sc-about-media img { aspect-ratio: 3 / 4; border-radius: 0; }
body.t-kuip .sc-about-copy p { color: var(--text); font-size: 16.5px; line-height: 1.95; }

/* the second and last dark surface — words held in the upper left, on the
   same rail as everything above them */
body.t-kuip .sc-banner { min-height: 70vh; text-align: left; margin: 0 calc(50% - 50vw); padding: 13vh max(24px, calc(50vw - 540px)) 22vh; }
body.t-kuip .sc-banner-inner { margin: 0; max-width: 520px; }
body.t-kuip .sc-banner h2 { font-size: clamp(24px, 3.4vw, 38px); font-weight: 600; line-height: 1.14; }

/* it closes on a form, not a grid: a warm grey strip, never a dark one */
body.t-kuip .sc-contact-band { background: var(--ku-wash); padding: 96px 0 104px; }
body.t-kuip .sc-contact-band-inner { text-align: left; max-width: 680px; margin: 0 auto; }
body.t-kuip .sc-contact-band .sc-contact-sub { font-size: 16px; line-height: 1.75; margin-bottom: 30px; }

@media (max-width: 900px) {
  body.t-kuip .sc-hero { min-height: 86vh; padding: 88px 22px; }
  body.t-kuip .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kuip .sc-show-inner { padding: 54px 22px 60px; }
  body.t-kuip .sc-banner { min-height: 54vh; padding: 11vh 22px 16vh; }
}

/* NIGHT — the bone and the pine ink change places. The ground goes to the
   colour of wet cedar in the dark, the type comes up bone, and the teal is
   lifted two stops so the hairlines and the rand figures still carry; the
   checkerboard survives because the wash lifts with it. */
html[data-theme="dark"] body.t-kuip {
  background: #141916;
  color: #c3c9c0;
  --ku-teal: #3f8b91;
  --ku-lit: #4fa3a9;
  --ku-ink: #eceade;
  --ku-bone: #141916;
  --ku-wash: #1b211d;
  --bg-flat: #141916;
  --header-bg: #141916;
  --surface: #141916;
  --surface-2: #1b211d;
  --line: #262d28;
  --line-strong: #38423b;
  --heading: #eceade;
  --text: #c3c9c0;
  --muted: #7f877d;
}
html[data-theme="dark"] body.t-kuip .sf-head, html[data-theme="dark"] body.t-kuip .sf-header,
html[data-theme="dark"] body.t-kuip .sf-foot, html[data-theme="dark"] body.t-kuip .sf-footer,
html[data-theme="dark"] body.t-kuip .sf-cats { background: #141916; border-color: #262d28; }
html[data-theme="dark"] body.t-kuip .btn.brand { color: #0d1210; }
html[data-theme="dark"] body.t-kuip .btn.brand:hover { color: #0d1210; }