/* ---- duiwehok (Duiwehok — Racing pigeon lofts, feed & timing 301) -----------
   THE STRUCTURAL MOVE: the first strip stops being a row of category tiles and
   becomes a STACKED NUMBERED LIST read downwards — 01 to 04, an outsized slate
   numeral, a small landscape frame and one line of type per row, each row shut
   by a hairline in the accent. It is picked out with :not(:has(.sc-h2)) — the
   headingless strip — because the SECOND strip further down keeps its heading
   and stays the ordinary four-across row, so one class carries two geometries
   without ever reaching for :nth-of-type. Everything else is chalk ground, ink
   type and hairline grey; the only colour is loft slate, spent on the numerals,
   the rand figures, the buy slabs and those rules. The catalogue's alternating
   bands are flattened into two full rows of three tiles — the portfolio grid
   the reference runs — and the closing form is pulled to the left of the
   details, which is where the reference puts it. */
body.t-duiwehok { background: #f6f6f4; color: #23272c; }
body.t-duiwehok .sf-header, body.t-duiwehok .sf-footer { background: #f6f6f4; border-color: #dddfe1; }
body.t-duiwehok .btn.brand { background: #15181c; border-color: #15181c; color: #f6f6f4; box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }
/* the buy slab is the one place the accent becomes a field rather than a mark */
body.t-duiwehok .sc-look-btn { background: #556878; border-color: #556878; }
/* the photographic band takes an outline, never a slab — same as the hero */
body.t-duiwehok .sc-banner .btn.brand { background: transparent; border-color: rgba(255, 255, 255, 0.85); color: #ffffff; }

/* the opener is the whole first screen, copy on the vertical midline */
body.t-duiwehok .sc-hero { min-height: 100vh; }
body.t-duiwehok .sc-hero h1 { font-weight: 600; font-size: clamp(30px, 5.2vw, 58px); letter-spacing: -0.03em; max-width: 16ch; margin: 0 auto 14px; }

/* ↓ THE MOVE — 01 to 04 read downwards, one row at a time, not across */
body.t-duiwehok .sc-strip:not(:has(.sc-h2)) { max-width: 940px; padding: clamp(48px, 7vw, 92px) 20px 12px; }
body.t-duiwehok .sc-strip:not(:has(.sc-h2)) .sc-strip-row { display: block; counter-reset: dwh; }
body.t-duiwehok .sc-strip:not(:has(.sc-h2)) .sc-strip-card { display: grid; grid-template-columns: clamp(56px, 8vw, 98px) clamp(96px, 15vw, 170px) 1fr; align-items: center; gap: clamp(14px, 3vw, 36px); text-align: left; padding: clamp(15px, 2.2vw, 26px) 0; border-bottom: 1px solid #556878; }
body.t-duiwehok .sc-strip:not(:has(.sc-h2)) .sc-strip-card::before { counter-increment: dwh; content: "0" counter(dwh); color: #556878; font-weight: 300; font-size: clamp(32px, 5.2vw, 58px); line-height: 1; font-variant-numeric: tabular-nums; }
body.t-duiwehok .sc-strip:not(:has(.sc-h2)) .sc-strip-label { margin: 0; font-size: clamp(15px, 1.7vw, 19px); font-weight: 500; letter-spacing: -0.01em; }
body.t-duiwehok .sc-strip-img { aspect-ratio: 3 / 2; border-radius: 0; border-color: #dddfe1; background: #eeeeec; }

/* the catalogue: alternating full-bleed bands flattened to two rows of three */
body.t-duiwehok .sc-lookbook { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 44px) clamp(16px, 2.4vw, 30px); max-width: 1180px; margin: 0 auto; padding: clamp(34px, 5vw, 66px) 20px 18px; }
body.t-duiwehok .sc-lookbook > .container { grid-column: 1 / -1; padding: 0; }
body.t-duiwehok .sc-look-row { display: block; }
body.t-duiwehok .sc-look-desc { display: none; }
body.t-duiwehok .sc-look-copy { padding: 13px 0 0; }
body.t-duiwehok .sc-look-p { color: #556878; font-size: 17px; margin: 9px 0 14px; }

/* the story picture is square-cut and upright; the closing form goes hard left */
body.t-duiwehok .sc-about-media img { border-radius: 0; aspect-ratio: 4 / 5; }
body.t-duiwehok .sc-contact-split .sc-contact-body { order: -1; }

@media (max-width: 900px) {
  body.t-duiwehok .sc-lookbook { grid-template-columns: 1fr 1fr; }
  body.t-duiwehok .sc-strip:not(:has(.sc-h2)) .sc-strip-card { grid-template-columns: 52px 1fr; }
  body.t-duiwehok .sc-strip:not(:has(.sc-h2)) .sc-strip-img { display: none; }
}

/* night — the chalk page turned to slate-black, the accent lifted so it still
   reads as blue-grey instead of sinking into the ground */
html[data-theme="dark"] body.t-duiwehok { background: #0f1113; color: #c2c7cc; }
html[data-theme="dark"] body.t-duiwehok .sf-header, html[data-theme="dark"] body.t-duiwehok .sf-footer { background: #0f1113; border-color: #272b2f; }
html[data-theme="dark"] body.t-duiwehok .btn.brand { background: #edeef0; border-color: #edeef0; color: #0f1113; }
html[data-theme="dark"] body.t-duiwehok .sc-look-btn { background: #8ea3b4; border-color: #8ea3b4; color: #0f1113; }
html[data-theme="dark"] body.t-duiwehok .sc-strip-img { border-color: #272b2f; background: #171a1d; }
html[data-theme="dark"] body.t-duiwehok .sc-strip:not(:has(.sc-h2)) .sc-strip-card { border-bottom-color: #3f505f; }
html[data-theme="dark"] body.t-duiwehok .sc-strip:not(:has(.sc-h2)) .sc-strip-card::before, html[data-theme="dark"] body.t-duiwehok .sc-look-p { color: #8ea3b4; }