/* ============================== KOOI ==============================
   THE STRUCTURAL MOVE: one cool-white paper ground that never alternates —
   no tinted section, no card, no border and no radius anywhere — opened by a
   full-viewport three-frame slider and broken again exactly once, by a
   full-bleed workshop photograph near the foot. Between those two the width
   clamps into a centred column and never opens: the catalogue, the tiles and
   both prose blocks all sit inside the same 1080px measure, so the middle of
   the shop is type on paper rather than pictures. Oxblood is spent four times
   and no more: the four oversized figures, the hairline under each heading,
   the rand figure and the controls. Nothing here touches the header, the nav
   or the order of anything inside them. */
body.t-kooi {
  background: #f6f6f4;
  color: #33333a;
  --koi-ox: #7a2b3a;
  --koi-lit: #8f3444;
  --bg-flat: #f6f6f4;
  --header-bg: #f6f6f4;
  --surface: #f6f6f4;
  --surface-2: #f6f6f4;
  --line: #e4e4e0;
  --line-strong: #cdcdc7;
  --heading: #16161a;
  --text: #33333a;
  --muted: #85858b;
  --radius: 0;
  --shadow: none;
}

/* the bar is the same paper as the page, so the slider begins beneath it
   rather than behind it. Type, colour and tracking only. */
body.t-kooi .sf-head, body.t-kooi .sf-header,
body.t-kooi .sf-foot, body.t-kooi .sf-footer, body.t-kooi .sf-cats {
  background: #f6f6f4; border-color: #e4e4e0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-kooi .sf-name, body.t-kooi .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 12px; font-weight: 600; }

/* every control is a flat oxblood slab with no edge on it */
body.t-kooi .btn.brand { background: var(--koi-ox); border: 0; box-shadow: none; color: #f6f6f4; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11.5px; font-weight: 600; padding: 16px 34px; }
body.t-kooi .btn.brand:hover { background: var(--koi-lit); color: #ffffff; }

/* WIDE, ONCE — the whole first screen, three frames cross-fading under an
   extra scrim so the centred white type reads clean off a lit bedroom */
body.t-kooi .sc-hero { min-height: 100vh; padding: 96px 20px; }
body.t-kooi .sc-hero::after { content: ''; position: absolute; inset: 0; background: rgba(13, 12, 14, 0.34); }
body.t-kooi .sc-hero h1 { font-size: clamp(32px, 5.2vw, 60px); line-height: 1.08; font-weight: 500; letter-spacing: -0.025em; margin-bottom: 20px; }

/* the hairline under every heading is the only rule drawn on the page */
body.t-kooi .sc-h2 { color: var(--heading); font-size: clamp(19px, 2.4vw, 26px); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 34px; }
body.t-kooi .sc-h2::after { content: ''; display: block; width: 40px; height: 2px; background: var(--koi-ox); margin: 20px auto 0; }

/* THE CLAMP — the measure the page lives in from the slider down */
body.t-kooi .sc-richtext { max-width: 880px; padding: 118px 20px 104px; }

/* the HEADINGLESS block: four oversized figures and nothing else — no
   photograph, no card, no border. :has is the only safe way to tell it from
   the prose block, since both render as <section class="sc-richtext">. */
body.t-kooi .sc-richtext:not(:has(.sc-h2)) p { color: var(--koi-ox); font-size: clamp(21px, 3.1vw, 40px); line-height: 1.45; font-weight: 400; letter-spacing: -0.025em; }

/* the prose under the catalogue: plain paragraphs, narrower again, ranged left */
body.t-kooi .sc-richtext:has(.sc-h2) { max-width: 620px; padding: 92px 20px 100px; }
body.t-kooi .sc-richtext:has(.sc-h2) p { color: var(--text); font-size: 16.5px; line-height: 1.95; text-align: left; }

/* the catalogue stays inside the same measure: six tall panels three across in
   two rows, and the shared checkerboard is switched off so nothing bands */
body.t-kooi .sc-showcase { padding: 40px 0 0; }
body.t-kooi .sc-show-grid { max-width: 1080px; margin: 0 auto; padding: 0 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 66px 36px; }
body.t-kooi .sc-show-item { background: transparent; }
body.t-kooi .sc-show-inner { padding: 0; min-height: 0; }
body.t-kooi .sc-show-cat { color: var(--muted); font-weight: 600; letter-spacing: 0.18em; }
body.t-kooi .sc-show-t { margin-top: 10px; font-size: clamp(15px, 1.5vw, 18px); font-weight: 500; text-transform: none; letter-spacing: 0; }
body.t-kooi .sc-show-rule, body.t-kooi .sc-sample-note { display: none; }
body.t-kooi .sc-show-media img { width: 100%; max-width: none; max-height: none; aspect-ratio: 3 / 4; object-fit: cover; }
body.t-kooi .sc-show-price { color: var(--koi-ox); font-size: 17px; font-weight: 600; letter-spacing: 0.02em; margin: 16px 0 18px; }

/* four pale tiles, one word laid on the photograph itself. Section furniture
   only — the header is never touched. */
body.t-kooi .sc-strip { padding: 104px 20px 92px; }
body.t-kooi .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
body.t-kooi .sc-strip-card { position: relative; }
body.t-kooi .sc-strip-img { aspect-ratio: 3 / 4; border: 0; border-radius: 0; background: #ececeb; }
body.t-kooi .sc-strip-label { position: absolute; left: 0; right: 0; bottom: 24px; margin: 0; color: #16161a; font-size: 12.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }

/* WIDE, TWICE AND LAST — the workshop floor edge to edge at full weight, one
   line laid on it and a control that stays out of the photograph's way */
body.t-kooi .sc-banner { min-height: 62vh; padding: 22vh 24px 0; margin: 96px calc(50% - 50vw) 0; }
body.t-kooi .sc-banner h2 { font-size: clamp(22px, 3vw, 34px); font-weight: 500; line-height: 1.22; margin-bottom: 26px; }
body.t-kooi .sc-banner .btn.brand { background: rgba(246, 246, 244, 0.16); color: #f6f6f4; }

/* the last thing on the page and the quietest: one narrow measure on bare
   paper, the fields reduced to ruled lines so no box appears anywhere */
body.t-kooi .sc-contact { max-width: 480px; padding: 110px 20px 118px; }
body.t-kooi .sc-field input, body.t-kooi .sc-field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 12px 0; }

@media (max-width: 900px) {
  body.t-kooi .sc-hero { min-height: 88vh; }
  body.t-kooi .sc-show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kooi .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-kooi .sc-banner { min-height: 48vh; padding: 16vh 20px 0; }
}

/* NIGHT — the paper inverts to a flat near-black that also never alternates,
   so the only lit things left in the room are the two photographic bands and
   the four pale tiles. The oxblood lifts far enough to hold the figures, the
   hairlines and the rand line against it, and the slabs take dark type. */
html[data-theme="dark"] body.t-kooi {
  background: #131316;
  color: #c4c4bf;
  --koi-ox: #c05a6a;
  --koi-lit: #d16d7c;
  --bg-flat: #131316;
  --header-bg: #131316;
  --surface: #131316;
  --surface-2: #131316;
  --line: #26262b;
  --line-strong: #3b3b41;
  --heading: #f2f2ef;
  --text: #c4c4bf;
  --muted: #7e7e84;
}
html[data-theme="dark"] body.t-kooi .sf-head, html[data-theme="dark"] body.t-kooi .sf-header,
html[data-theme="dark"] body.t-kooi .sf-foot, html[data-theme="dark"] body.t-kooi .sf-footer,
html[data-theme="dark"] body.t-kooi .sf-cats { background: #131316; border-color: #26262b; }
html[data-theme="dark"] body.t-kooi .btn.brand, html[data-theme="dark"] body.t-kooi .btn.brand:hover { color: #131316; }
html[data-theme="dark"] body.t-kooi .sc-banner .btn.brand { background: rgba(246, 246, 244, 0.18); color: #f6f6f4; }
html[data-theme="dark"] body.t-kooi .sc-strip-img { background: #1d1d21; }