/* ============================== STEMVURK ==============================
   (Stemvurk — Restored pianos, stools & tuning tools 264)

   THE STRUCTURAL MOVE: the opening screen is split down the middle and never
   pretends otherwise. The section's own background photograph is cut to the
   LEFT half of the window — and the cross-fading slide layer is cut to match
   it — so the picture stops dead at the centre line and the right half stays
   bare bone paper carrying left-set, left-ragged type with no word anywhere
   on the photograph. Every block below repeats that same half-and-half at a
   smaller scale: a tall unframed photograph beside a narrow column of prose,
   then the catalogue as alternating image-half / type-half rows, then the
   form. The page is a column of type standing beside pictures, never a grid
   of tiles.

   Copper hammer-felt red is spent exactly three times on the whole page — the
   slashed eyebrow above the headline, the short rule under every rand figure,
   and the submit. Every other control is ink or bone. Nothing here positions,
   orders or reflows a single item inside the header; only colour changes. */
body.t-stemvurk {
  background: #f7f4ef;
  color: #3f3a34;
  --stv-copper: #9c4a35;
  --stv-ink: #14110f;
  --bg-flat: #f7f4ef;
  --header-bg: #f7f4ef;
  --surface: #ffffff;
  --surface-2: #efeae1;
  --line: #e6e0d6;
  --line-strong: #d3cabb;
  --heading: #14110f;
  --text: #3f3a34;
  --muted: #7c756b;
  --radius: 0;
  --shadow: none;
}

/* a flat bone bar the same colour as the paper, so the split screen begins
   beneath it rather than behind it. Colour and border only. */
body.t-stemvurk .sf-head, body.t-stemvurk .sf-header,
body.t-stemvurk .sf-foot, body.t-stemvurk .sf-footer, body.t-stemvurk .sf-cats {
  background: #f7f4ef; border-color: #e6e0d6;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* nothing on this page is centred type */
body.t-stemvurk .sc-h2, body.t-stemvurk .sc-look-t { text-align: left; font-weight: 500; letter-spacing: -0.015em; color: var(--stv-ink); }

/* COPPER 1 of 3 lives on the eyebrow below; this is 3 of 3 — the submit, and
   it is the only copper slab in the building */
body.t-stemvurk .btn.brand { background: var(--stv-copper); border: 0; box-shadow: none; color: #ffffff; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 600; padding: 16px 32px; }
body.t-stemvurk .btn.brand:hover { background: #853c2a; color: #ffffff; }

/* THE SPLIT — background-size cuts both the photograph and its scrim to the
   left half of the window; the slide layer is cut to the same half so the
   cross-fade happens inside the picture and never across the paper */
body.t-stemvurk .sc-hero { min-height: 82vh; padding: 110px 0; background-size: 50% 100%; background-position: left center; background-repeat: no-repeat; background-color: #f7f4ef; }
body.t-stemvurk .sc-hero-slides { inset: 0 auto 0 0; width: 50%; }
body.t-stemvurk .sc-hero-inner { margin-left: 50%; max-width: 520px; padding: 0 clamp(22px, 4vw, 68px); }
body.t-stemvurk .sc-hero h1 { color: var(--stv-ink); text-shadow: none; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.1; font-weight: 500; margin-bottom: 18px; }
/* COPPER 1 of 3 — the slashed eyebrow, set above the first-person headline */
body.t-stemvurk .sc-hero h1::before { content: '/ Twenty-two years of it'; display: block; color: var(--stv-copper); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; margin-bottom: 24px; }
body.t-stemvurk .sc-hero p { color: #5d564d; text-shadow: none; font-size: 16.5px; line-height: 1.7; margin-bottom: 30px; }
body.t-stemvurk .sc-hero .btn.brand.sc-hero-ghost { border-color: #bcb3a4; color: var(--stv-ink); }
body.t-stemvurk .sc-hero .btn.brand.sc-hero-ghost:hover { background: var(--stv-ink); color: #f7f4ef; }

/* the split again, smaller: the photograph stands tall and unframed against
   the three paragraphs rather than sitting in a card */
body.t-stemvurk .sc-about-media img { aspect-ratio: 3 / 4; border-radius: 0; }
body.t-stemvurk .sc-about-copy p, body.t-stemvurk .sc-look-desc { color: #4a443c; line-height: 1.85; font-size: 15.5px; }

/* one small-caps voice for every label on the page — the catalogue category,
   the tile caption and the field label are the same object */
body.t-stemvurk .sc-look-cat, body.t-stemvurk .sc-field label, body.t-stemvurk .sc-strip-label { text-transform: uppercase; letter-spacing: 0.2em; font-size: 10.5px; font-weight: 600; color: #8b8377; }
body.t-stemvurk .sc-strip-label { margin-top: 13px; text-align: left; }

/* COPPER 2 of 3 — a short rule under every rand figure and nowhere else */
body.t-stemvurk .sc-look-p::after { content: ''; display: block; width: 34px; height: 2px; background: var(--stv-copper); margin: 12px 0 20px; }
body.t-stemvurk .btn.brand.sc-look-btn { background: var(--stv-ink); color: #f7f4ef; }
body.t-stemvurk .btn.brand.sc-look-btn:hover { background: #33291f; color: #ffffff; }

/* four tall unframed tiles, captioned underneath, never over */
body.t-stemvurk .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body.t-stemvurk .sc-strip-img { aspect-ratio: 3 / 4; border: 0; border-radius: 0; background: var(--surface-2); }

/* the one full-width photograph on the page, with its line held in the left
   third of it — the only place the split is allowed to break */
body.t-stemvurk .sc-banner { min-height: 52vh; text-align: left; padding: clamp(76px, 10vw, 132px) max(24px, calc(50vw - 620px)); }
body.t-stemvurk .sc-banner-inner { margin: 0; }
body.t-stemvurk .sc-banner .btn.brand { background: #f7f4ef; color: var(--stv-ink); }

/* the page ends on the form: ruled detail rows one side, bare underlined
   fields the other, and no box anywhere near either of them */
body.t-stemvurk .sc-contact-lead p { white-space: pre-line; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; line-height: 2.3; font-size: 15px; color: #4a443c; }
body.t-stemvurk .sc-field input, body.t-stemvurk .sc-field textarea { border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; padding: 9px 0; }

@media (max-width: 900px) {
  /* the pinned half becomes a full-bleed band and the copy drops beneath it,
     still left-set */
  body.t-stemvurk .sc-hero { min-height: 0; background-size: 100% 44vh; background-position: top center; padding: calc(44vh + 46px) 0 72px; }
  body.t-stemvurk .sc-hero-slides { inset: 0 0 auto 0; width: 100%; height: 44vh; }
  body.t-stemvurk .sc-hero-inner { margin-left: 0; max-width: none; padding: 0 22px; }
  body.t-stemvurk .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* NIGHT — the paper goes to a deep charcoal and the copper holds its warmth
   instead of lifting to orange, so the pinned photograph is the only lit
   thing on the opening screen. The ink token flips to cream, which is why the
   two ink-slab controls have to be restated here. */
html[data-theme="dark"] body.t-stemvurk {
  background: #16130f;
  color: #bdb4a7;
  --stv-copper: #b8583f;
  --stv-ink: #f2ece2;
  --bg-flat: #16130f;
  --header-bg: #16130f;
  --surface: #1e1a15;
  --surface-2: #241f19;
  --line: #2b251e;
  --line-strong: #3d352b;
  --heading: #f2ece2;
  --text: #bdb4a7;
  --muted: #857c6f;
}
html[data-theme="dark"] body.t-stemvurk .sf-head, html[data-theme="dark"] body.t-stemvurk .sf-header,
html[data-theme="dark"] body.t-stemvurk .sf-foot, html[data-theme="dark"] body.t-stemvurk .sf-footer,
html[data-theme="dark"] body.t-stemvurk .sc-hero,
html[data-theme="dark"] body.t-stemvurk .sf-cats { background-color: #16130f; border-color: #2b251e; }
html[data-theme="dark"] body.t-stemvurk .sc-hero p, html[data-theme="dark"] body.t-stemvurk .sc-about-copy p,
html[data-theme="dark"] body.t-stemvurk .sc-look-desc, html[data-theme="dark"] body.t-stemvurk .sc-contact-lead p { color: #bdb4a7; }
html[data-theme="dark"] body.t-stemvurk .btn.brand.sc-look-btn, html[data-theme="dark"] body.t-stemvurk .sc-banner .btn.brand { background: #f2ece2; color: #16130f; }
html[data-theme="dark"] body.t-stemvurk .btn.brand.sc-look-btn:hover, html[data-theme="dark"] body.t-stemvurk .sc-hero .btn.brand.sc-hero-ghost:hover { background: #ffffff; color: #16130f; }