/* ================= DOEK — hand-printed silk, Woodstock =================
   Bone paper ground, deep ink type, one muted indigo lifted straight out of
   the dye vat. Hairlines instead of boxes, a thin serif display over a plain
   sans body, and a lot of dead air between bands so the photographs are the
   only loud thing on the page.

   THE STRUCTURAL MOVE: the collection strip loses its container completely and
   runs the full width of the viewport, six tiles shoulder to shoulder with no
   gutters — not a contained grid like every other store here. It sits between
   two image splits that keep the picture on the SAME side both times, so the
   page rhymes instead of zig-zagging. Nothing below touches header order or
   position; the platform bar renders itself. */
body.t-doek {
  background: #f5f1e9;
  color: #23201a;
  --dk-indigo: #3c4a72;
  --bg-flat: #f5f1e9;
  --surface: #f5f1e9;
  --surface-2: #ece7da;
  --line: #ddd6c7;
  --line-strong: #c8bfab;
  --heading: #15130f;
  --text: #23201a;
  --muted: #6f6a5e;
  --header-bg: #f5f1e9;
  --radius: 0;
  --shadow: none;
}
body.t-doek .sf-header, body.t-doek .sf-head, body.t-doek .sf-footer, body.t-doek .sf-cats {
  background: #f5f1e9; border-color: #ddd6c7;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-doek .sf-name { font-family: var(--sf-serif); font-weight: 400; font-size: 23px; letter-spacing: 0.02em; }

/* flat indigo slab, no radius, no shadow, no lift */
body.t-doek .btn.brand {
  background: var(--dk-indigo); border-color: var(--dk-indigo); color: #f5f1e9;
  border-radius: 0; box-shadow: none; padding: 15px 32px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
body.t-doek .btn.brand:hover { background: #2c3757; border-color: #2c3757; }

/* the whole first screen and nothing else: three plates cross-fading, one thin
   serif line and a ghost outline held in the middle of the window */
body.t-doek .sc-hero { min-height: 100vh; padding: 0 clamp(20px, 6vw, 90px); }
/* one display face for the opener AND the mid-page divider — oversized thin
   serif letterforms are how this reference marks a section break */
body.t-doek .sc-hero h1, body.t-doek .sc-banner h2 {
  font-family: var(--sf-serif); font-weight: 300;
  font-size: clamp(32px, 5.6vw, 76px); line-height: 1.08;
  letter-spacing: -0.01em; text-shadow: none; margin: 0 0 22px;
}
body.t-doek .sc-hero p {
  text-shadow: none; font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; margin: 0 0 40px;
}
body.t-doek .sc-h2 {
  font-family: var(--sf-serif); font-weight: 300; color: var(--heading);
  font-size: clamp(26px, 3.6vw, 42px); letter-spacing: -0.005em; margin-bottom: 28px;
}

/* both splits, generous dead air, portrait plate hard left each time */
body.t-doek .sc-about-split { padding: clamp(84px, 11vw, 156px) 20px; gap: clamp(40px, 6vw, 84px); }
body.t-doek .sc-about-media img { aspect-ratio: 3 / 4; }
body.t-doek .sc-about-copy p, body.t-doek .sc-contact-lead p {
  color: var(--text); font-size: 16px; line-height: 1.85; white-space: pre-line;
}

/* ★ THE MOVE — container dropped, gutters closed, six tiles across the whole
   viewport. This is the band no other store in the set has. */
body.t-doek .sc-strip { max-width: none; padding: 0; }
body.t-doek .sc-strip-row { grid-template-columns: repeat(6, 1fr); gap: 0; }
body.t-doek .sc-strip-img { border: 0; border-radius: 0; aspect-ratio: 4 / 5; background: var(--surface-2); }
body.t-doek .sc-strip-label {
  margin: 0; padding: 13px 8px 32px; color: var(--dk-indigo);
  font-weight: 600; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
}
body.t-doek .sc-banner { margin: 0 calc(50% - 50vw); min-height: 62vh; display: flex; align-items: center; justify-content: center; }

/* catalogue: two big square photographs per row, three rows that fill, with the
   category, title, a hairline and the price set small BENEATH the picture —
   one `order` on the media does the whole flip. Grounds go flat, because the
   checkerboard would put a second colour on a page built on restraint. */
body.t-doek .sc-show-item,
body.t-doek .sc-show-item:nth-child(4n + 2),
body.t-doek .sc-show-item:nth-child(4n + 3) { background: transparent; }
body.t-doek .sc-show-inner { min-height: 0; padding: 0 clamp(14px, 2.6vw, 38px) clamp(58px, 7vw, 98px); }
body.t-doek .sc-show-media { order: -1; flex: none; padding: 0 0 22px; }
body.t-doek .sc-show-media img { width: 100%; max-width: none; max-height: none; aspect-ratio: 1; object-fit: cover; }
body.t-doek .sc-show-t {
  font-family: var(--sf-serif); font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: clamp(17px, 1.7vw, 21px); margin-top: 9px;
}
body.t-doek .sc-show-rule { width: 100%; height: 1px; opacity: 0.16; margin: 20px 0 15px; }
body.t-doek .sc-show-price { font-size: 15px; letter-spacing: 0.04em; margin: 0 0 22px; }

/* the last band: a hairline, the two places on the left, the enquiry on the
   right, fields ruled rather than boxed */
body.t-doek .sc-contact-split {
  border-top: 1px solid var(--line);
  padding: clamp(74px, 9vw, 124px) 20px clamp(84px, 10vw, 134px);
  gap: clamp(40px, 6vw, 84px);
}
body.t-doek .sc-field input, body.t-doek .sc-field textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--line-strong);
  border-radius: 0; padding: 9px 0;
}

@media (max-width: 900px) {
  body.t-doek .sc-strip-row { grid-template-columns: repeat(3, 1fr); }
  body.t-doek .sc-hero { min-height: 78vh; }
}

/* NIGHT — the paper goes to ink, the indigo lifts to a dye-lit blue so the
   accent stays an accent instead of vanishing into the ground, and the slab
   inverts to dark type on light blue. Tile and field grounds ride the tokens,
   so the strip and the fields flip on their own. */
html[data-theme="dark"] body.t-doek {
  background: #17160f;
  color: #cbc5b6;
  --dk-indigo: #9aa8d6;
  --bg-flat: #17160f;
  --surface: #17160f;
  --surface-2: #201e16;
  --line: #302d23;
  --line-strong: #494434;
  --heading: #f2eee3;
  --text: #cbc5b6;
  --muted: #8b8676;
  --header-bg: #17160f;
}
html[data-theme="dark"] body.t-doek .sf-header, html[data-theme="dark"] body.t-doek .sf-head,
html[data-theme="dark"] body.t-doek .sf-footer, html[data-theme="dark"] body.t-doek .sf-cats {
  background: #17160f; border-color: #302d23;
}
html[data-theme="dark"] body.t-doek .btn.brand { background: var(--dk-indigo); border-color: var(--dk-indigo); color: #14131a; }
html[data-theme="dark"] body.t-doek .btn.brand:hover { background: #b7c1e5; border-color: #b7c1e5; }
html[data-theme="dark"] body.t-doek .sc-show-cat { color: var(--dk-indigo); }