/* ---------- Vonkel — wedding day (WEBSITE) ---------------------------------
   THE STRUCTURAL MOVE: two flat ochre slabs with no photograph in either, and
   nothing else on the page painted at all. The first is the page's hinge — a
   date band with the running order welded onto its underside: .ws-titleblock
   drops its bottom padding and .ws-features drops its top, so the date and the
   four times read as ONE band of type. The second slab is the reply form at the
   foot, the page's only destination. Between them the lime-plaster ground never
   changes — the shared even-band wash is switched off, hairlines stand in for
   cards, and the eight-square wall is the only block let out of the container.
   The slabs are painted by CLASS, never :nth-of-type — the hero is the first
   section, so a type-index rule would land on the photograph, not the band. */
body.t-vonkel.ws-body {
  --bg: #f7f3ec; --fg: #4c463c; --heading: #191713; --text: #4c463c; --muted: #857c6d;
  --vk-ochre: #b4863c; --vk-ink: #191713; --vk-line: #ded3bf;
  --hero-a: rgba(20, 17, 12, .26); --hero-b: rgba(20, 17, 12, .34);
}
body.t-vonkel { background: var(--bg); }

/* the bar rides the photograph and leaves with it; RSVP is the one filled item */
body.t-vonkel .ws-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  background: transparent; backdrop-filter: none; border-bottom: 0; color: #f7f3ec; }
body.t-vonkel .ws-nav-links a { color: #f7f3ec; font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; opacity: .84; }
body.t-vonkel .ws-nav-links a:last-of-type { background: var(--vk-ochre); color: var(--vk-ink);
  padding: 11px 20px; opacity: 1; border-bottom: 0; }

/* the whole first screen is one photograph with the two names middled on it */
body.t-vonkel .ws-hero { min-height: 100vh; align-items: center; }
body.t-vonkel .ws-hero h1 { font-family: var(--sf-serif); font-size: clamp(46px, 9.2vw, 118px);
  font-weight: 400; line-height: .96; letter-spacing: -.02em; text-shadow: none; margin: 0 0 22px; max-width: 14ch; }
body.t-vonkel .ws-hero p { font-size: clamp(12px, 1.4vw, 14px); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; line-height: 1.9; max-width: 46ch; margin-bottom: 36px; }
body.t-vonkel.ws-body .btn.brand { background: var(--vk-ink); color: #f7f3ec; border-radius: 0;
  text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 700; padding: 17px 36px; }
body.t-vonkel.ws-body .ws-hero-cta.btn.brand { background: var(--vk-ochre); color: var(--vk-ink); }

/* one plaster ground — the alternating wash is switched off wherever it shows */
body.t-vonkel .ws-section:not(.ws-titleblock):not(.ws-features):not(.ws-contact) { background: var(--bg); padding: 94px 0; }
/* THE TWO SLABS — type only, no photograph in either, painted by class */
body.t-vonkel.ws-body .ws-section.ws-titleblock, body.t-vonkel.ws-body .ws-section.ws-features,
body.t-vonkel.ws-body .ws-section.ws-contact { background: var(--vk-ochre); color: var(--vk-ink); padding: 100px 0; }
/* THE WELD — date band and running order share one slab */
body.t-vonkel .ws-titleblock { padding-bottom: 0; }
body.t-vonkel .ws-features { padding-top: 44px; }
body.t-vonkel .ws-title-sub, body.t-vonkel .ws-feature p, body.t-vonkel .ws-contact .ws-h2,
body.t-vonkel .ws-contact .ws-sub { color: var(--vk-ink); }

/* one serif carries every display line on the page */
body.t-vonkel .ws-brand, body.t-vonkel .ws-h2, body.t-vonkel .ws-story-copy h2, body.t-vonkel .ws-title-h,
body.t-vonkel .ws-feature h3, body.t-vonkel .ws-col-h, body.t-vonkel .ws-quote-t {
  font-family: var(--sf-serif); font-weight: 400; font-style: normal; letter-spacing: -.005em; }
body.t-vonkel .ws-title-h { font-size: clamp(34px, 5.8vw, 70px); line-height: 1.02; }
body.t-vonkel .ws-h2, body.t-vonkel .ws-story-copy h2 { font-size: clamp(23px, 3vw, 34px); color: var(--heading); }

/* the running order — four times across one row, ruled, never boxed */
body.t-vonkel .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-vonkel .ws-feature { text-align: left; padding: 22px 30px 0 0; border-top: 1px solid rgba(25, 23, 19, .45); }
body.t-vonkel .ws-feature p, body.t-vonkel .ws-col p { font-size: 13.5px; line-height: 1.72; margin: 0; }
/* the quiet tiles answering the wall — an ochre hairline instead of a card */
body.t-vonkel .ws-col { border-top: 1px solid var(--vk-ochre); padding: 18px 0 0; }

/* THE ONE LOUD BLOCK — eight squares four across, out past the container */
body.t-vonkel .ws-gallery .ws-container { max-width: none; padding: 0 14px; }
body.t-vonkel .ws-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
body.t-vonkel .ws-gallery-item img, body.t-vonkel .ws-story-media img { border-radius: 0; }

/* ouma, on bare plaster between two hairlines */
body.t-vonkel .ws-quoteblock .ws-narrow { border-top: 1px solid var(--vk-line);
  border-bottom: 1px solid var(--vk-line); padding: 46px 0; color: var(--heading); }
body.t-vonkel .ws-field input, body.t-vonkel .ws-field textarea, body.t-vonkel .ws-field select {
  border-radius: 0; border-color: rgba(25, 23, 19, .4); background: rgba(247, 243, 236, .86); color: var(--vk-ink); }

@media (max-width: 1040px) {
  body.t-vonkel .ws-features-grid, body.t-vonkel .ws-gallery-grid, body.t-vonkel .ws-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.t-vonkel .ws-hero { min-height: 86vh; }
  /* the burger panel is painted on plaster, so the cream links have to darken */
  body.t-vonkel .ws-nav-links a { color: var(--heading); }
}

/* vonkel by night — the plaster goes to a dark room and the ochre does not move,
   so the date band and the reply band stay the only lit things on the page */
html[data-theme="dark"] body.t-vonkel.ws-body {
  --bg: #16140f; --fg: #a69d8c; --heading: #f4f0e6; --text: #a69d8c; --muted: #7d7466;
  --vk-ochre: #b4863c; --vk-ink: #191713; --vk-line: #302c23;
  --hero-a: rgba(8, 7, 5, .30); --hero-b: rgba(8, 7, 5, .42);
}
html[data-theme="dark"] body.t-vonkel { background: var(--bg); }