/* ============================ SILWERDOEK ============================
   THE STRUCTURAL MOVE: the pacing is done by how much room each band is
   given, never by type size. The page runs WIDE (full-viewport stage),
   BOXED (four gapped landscape tiles), BOXED (the priced grid), WIDE (one
   full-bleed band), WIDE-AND-GAPLESS (a four-across filmstrip welded edge
   to edge with its labels underneath), then BOXED again for a narrow
   column of text on bare charcoal. That gapless rail landing AFTER the
   catalogue rather than before it is the signature, and the heading
   alignment flips from centred to left at exactly the moment the
   container gives up its container. Platinum is spent three times only:
   the controls, the rand figure and the hairline under each heading.
   Nothing here touches the header, the nav, or anything inside them
   beyond colour and letterform. */
body.t-silwerdoek {
  background: #151312;
  color: #cfc7bb;
  --swd-plat: #c8c6bf;
  --swd-lit: #e4e2da;
  --swd-bone: #efe7dc;
  --bg-flat: #151312;
  --header-bg: #151312;
  --surface: #1b1917;
  --surface-2: #221f1c;
  --line: #2a2724;
  --line-strong: #3c3833;
  --heading: #efe7dc;
  --text: #cfc7bb;
  --muted: #8a8276;
  --radius: 0;
  --shadow: none;
}

/* one unbroken dark room — the bar is the same charcoal as the page, so the
   stage begins beneath it rather than behind it. Colour and letterform only;
   no rule here moves or reorders a single item in the header. */
body.t-silwerdoek .sf-head, body.t-silwerdoek .sf-header,
body.t-silwerdoek .sf-foot, body.t-silwerdoek .sf-footer, body.t-silwerdoek .sf-cats {
  background: #151312; border-color: #2a2724;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.t-silwerdoek .sf-name { font-family: var(--sf-serif); font-weight: 400; font-size: 23px; letter-spacing: 0.01em; }
body.t-silwerdoek .sf-navlink { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; }

/* every display line on the page is set in the one serif, light and tight */
body.t-silwerdoek .sc-hero h1, body.t-silwerdoek .sc-banner h2, body.t-silwerdoek .sc-h2 {
  font-family: var(--sf-serif); font-weight: 400; letter-spacing: -0.005em; line-height: 1.12; text-shadow: none;
}

/* PLATINUM 1 of 3 — every control is a flat platinum slab with no edge on it */
body.t-silwerdoek .btn.brand { background: var(--swd-plat); border: 0; box-shadow: none; color: #151312; text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 700; padding: 16px 34px; }
body.t-silwerdoek .btn.brand:hover { background: var(--swd-lit); color: #151312; opacity: 1; }

/* WIDE, ONCE — the whole first screen, three stills cross-fading, and the copy
   sat down in the lower third with nothing else on the fold */
body.t-silwerdoek .sc-hero { min-height: 100vh; align-items: flex-end; padding: 130px 20px 15vh; }

/* PLATINUM 2 of 3 — the hairline under every heading, and the only rule
   anywhere on the page. It slides left wherever the heading is left-set. */
body.t-silwerdoek .sc-h2 { color: var(--swd-bone); font-size: clamp(21px, 2.8vw, 33px); margin-bottom: 30px; }
body.t-silwerdoek .sc-h2::after { content: ''; display: block; width: 42px; height: 1px; background: var(--swd-plat); margin: 16px auto 0; }

/* BOXED, ONCE — the first collapse out of the full window: four gapped
   landscape tiles under the stage, each with a small tracked caption */
body.t-silwerdoek .sc-strip { padding: clamp(66px, 8vw, 104px) 20px 0; }
body.t-silwerdoek .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
body.t-silwerdoek .sc-strip-img { aspect-ratio: 16 / 10; border: 0; border-radius: 0; background: var(--surface); }
body.t-silwerdoek .sc-strip-label, body.t-silwerdoek .sc-buy-cat { margin-top: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted); }

/* BOXED, TWICE — the one priced block on the page: three across, two rows that
   both fill. PLATINUM 3 of 3 is the rand figure, and the category above it is
   muted so the accent lands once per tile instead of twice. */
body.t-silwerdoek .sc-buygrid { padding: clamp(78px, 9vw, 120px) 20px clamp(56px, 7vw, 90px); }
body.t-silwerdoek .sc-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 30px; }
body.t-silwerdoek .sc-buy-p { color: var(--swd-plat); font-weight: 700; font-size: 16px; }

/* WIDE, TWICE — the only full photograph after the stage, words in the upper
   third and the rest of the frame left to the building */
body.t-silwerdoek .sc-banner { min-height: 72vh; padding: 13vh 22px 0; margin: 0 calc(50% - 50vw); }

/* THE SIGNATURE — wide a THIRD time and gapless, and it lands after the
   catalogue rather than before it. Four stills welded edge to edge with no
   gutter, the labels sitting underneath as titles rather than captions, and
   the heading flipping left because the container has gone. */
body.t-silwerdoek section:has(> .sc-banner) + .sc-strip { width: 100vw; max-width: 100vw; margin: clamp(66px, 8vw, 104px) calc(50% - 50vw) 0; padding: 0; }
body.t-silwerdoek section:has(> .sc-banner) + .sc-strip .sc-h2 { text-align: left; margin: 0 clamp(20px, 5vw, 64px) 30px; }
body.t-silwerdoek section:has(> .sc-banner) + .sc-strip .sc-h2::after { margin-left: 0; }
body.t-silwerdoek section:has(> .sc-banner) + .sc-strip .sc-strip-row { gap: 0; }
body.t-silwerdoek section:has(> .sc-banner) + .sc-strip .sc-strip-label { margin: 16px 0 0; padding: 0 clamp(12px, 1.6vw, 22px); text-align: left; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--swd-bone); }

/* BOXED, LAST — a narrow column on bare charcoal with no photograph in it,
   which is what makes it the quietest band on the page */
body.t-silwerdoek .sc-richtext { max-width: 640px; padding: clamp(90px, 11vw, 138px) 20px clamp(72px, 9vw, 112px); }
body.t-silwerdoek .sc-richtext p { color: var(--swd-bone); font-size: 16.5px; line-height: 2; }

/* the booking window: the practical lines on one side, the three fields on the other */
body.t-silwerdoek .sc-contact-split { max-width: 1000px; padding: 0 20px clamp(76px, 9vw, 116px); gap: 64px; }

@media (max-width: 900px) {
  body.t-silwerdoek .sc-hero { min-height: 88vh; padding: 110px 20px 12vh; }
  body.t-silwerdoek .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-silwerdoek .sc-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-silwerdoek .sc-banner { min-height: 54vh; padding-top: 11vh; }
}

/* NIGHT — the house lights go all the way down. The charcoal drops another
   three stops toward black so the two wide photographs and the gapless
   filmstrip become the only lit things in the room, and the platinum is
   lifted to meet them so the hairlines and the rand figures still hold. */
html[data-theme="dark"] body.t-silwerdoek {
  background: #0c0b0a;
  color: #c5bdb1;
  --swd-plat: #d8d6ce;
  --swd-lit: #f2f0e8;
  --swd-bone: #f4ede3;
  --bg-flat: #0c0b0a;
  --header-bg: #0c0b0a;
  --surface: #131110;
  --surface-2: #191614;
  --line: #201d1a;
  --line-strong: #322e29;
  --heading: #f4ede3;
  --text: #c5bdb1;
  --muted: #7e766a;
}
html[data-theme="dark"] body.t-silwerdoek .sf-head, html[data-theme="dark"] body.t-silwerdoek .sf-header,
html[data-theme="dark"] body.t-silwerdoek .sf-foot, html[data-theme="dark"] body.t-silwerdoek .sf-footer,
html[data-theme="dark"] body.t-silwerdoek .sf-cats { background: #0c0b0a; border-color: #201d1a; }