/* ---------- Datum — Factory costing & operations 84 (website) ----------
   The one structural move: contained, bleed, contained, bleed, like a metronome.
   Kraft-manila — the colour of a job folder — carries every contained band, and
   the page darkens exactly twice: the bare quote band and the gapless four-photo
   strip invert to graphite with kraft type over a copper hairline. Inside the
   column the count is always four, and the case grid's titles are the only
   left-aligned headings on the page. */
body.t-datum.ws-body { --bg: #e7dfcc; --fg: #45443c; --heading: #191c1f; --text: #45443c; --muted: #7d7767; }
body.t-datum .ws-nav { position: static; background: #e7dfcc; border-bottom: 1px solid #cfc5ac; }
body.t-datum .ws-section { padding: 98px 0; }
body.t-datum .ws-section:nth-child(even):not(.ws-cta) { background: transparent; }
body.t-datum .ws-hero { min-height: 100vh; }
body.t-datum .ws-h2::after { content: ''; display: block; width: 46px; height: 2px; background: #a6522a; margin: 18px auto 6px; }
body.t-datum .ws-story-copy p, body.t-datum .ws-feature p, body.t-datum .ws-member p, body.t-datum .ws-quote blockquote, body.t-datum .ws-sub { color: #45443c; }
body.t-datum .ws-story-media img { border-radius: 0; aspect-ratio: 5 / 4; }
/* the method reads as a numbered ledger row — copper numerals, the page's only accent */
body.t-datum .ws-features-grid { grid-template-columns: repeat(4, 1fr); gap: 34px; counter-reset: step; }
body.t-datum .ws-feature { counter-increment: step; }
body.t-datum .ws-feature::before { content: counter(step, decimal-leading-zero); display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: #a6522a; margin-bottom: 12px; }
body.t-datum .ws-col { border-top: 2px solid #191c1f; padding-top: 16px; }
body.t-datum .ws-col-h { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: #a6522a; }
/* the case grid — two large tiles across, and the one deliberate break from centre */
body.t-datum .ws-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
body.t-datum .ws-gallery-item img { aspect-ratio: 3 / 2; border-radius: 0; }
body.t-datum .ws-gallery-cap { text-align: left; padding-top: 14px; }
/* the two interruptions: graphite ground, kraft type, one copper hairline on top */
body.t-datum .ws-quoteblock, body.t-datum .ws-photogrid { background: #191c1f; border-top: 2px solid #a6522a; padding: 0; }
body.t-datum .ws-quoteblock { padding: 108px 0; }
body.t-datum .ws-quote-t { color: #e7dfcc; font-style: normal; font-weight: 500; max-width: 28ch; margin: 0 auto 20px; }
body.t-datum .ws-quote-a { color: #cf8b5c; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; }
body.t-datum .ws-photogrid-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
body.t-datum .ws-quote { background: transparent; border: 0; border-top: 2px solid #191c1f; border-radius: 0; box-shadow: none; padding: 18px 0 0; }
body.t-datum .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 0; margin: 0 0 14px; }
body.t-datum .ws-video-frame { border-radius: 0; box-shadow: none; }
body.t-datum .ws-field input, body.t-datum .ws-field textarea, body.t-datum .ws-field select { border-radius: 0; background: #f2ecdd; border-color: #cfc5ac; }
body.t-datum .btn.brand { background: #a6522a; color: #f2ecdd; }
body.t-datum .btn.brand:hover { background: #8b4322; }
@media (max-width: 900px) {
  body.t-datum .ws-section { padding: 58px 0; }
  body.t-datum .ws-features-grid, body.t-datum .ws-gallery-grid, body.t-datum .ws-photogrid-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-datum .ws-quoteblock { padding: 64px 0; }
}

/* datum — the same job folder under a work lamp: the kraft ground goes graphite,
   and the two interruptions lift instead of darkening */
html[data-theme="dark"] body.t-datum.ws-body { --bg: #16181a; --fg: #b3ada0; --heading: #ece4d2; --text: #b3ada0; --muted: #7c7669; }
html[data-theme="dark"] body.t-datum { background: #16181a; }
html[data-theme="dark"] body.t-datum .ws-nav { background: #16181a; border-bottom-color: #2c3033; }
html[data-theme="dark"] body.t-datum .ws-col, html[data-theme="dark"] body.t-datum .ws-quote { border-top-color: #3b4045; }
html[data-theme="dark"] body.t-datum .ws-quoteblock, html[data-theme="dark"] body.t-datum .ws-photogrid { background: #22262a; border-top-color: #cf8b5c; }
html[data-theme="dark"] body.t-datum .ws-quote-t { color: #ece4d2; }
html[data-theme="dark"] body.t-datum .ws-col-h, html[data-theme="dark"] body.t-datum .ws-feature::before, html[data-theme="dark"] body.t-datum .ws-quote-a { color: #d68b5b; }
html[data-theme="dark"] body.t-datum .ws-h2::after { background: #d68b5b; }
html[data-theme="dark"] body.t-datum .ws-story-copy p, html[data-theme="dark"] body.t-datum .ws-feature p, html[data-theme="dark"] body.t-datum .ws-member p, html[data-theme="dark"] body.t-datum .ws-quote blockquote, html[data-theme="dark"] body.t-datum .ws-sub, html[data-theme="dark"] body.t-datum .ws-gallery-cap span { color: #b3ada0; }
html[data-theme="dark"] body.t-datum .ws-field input, html[data-theme="dark"] body.t-datum .ws-field textarea, html[data-theme="dark"] body.t-datum .ws-field select { background: #1e2124; border-color: #2c3033; color: #ece4d2; }
html[data-theme="dark"] body.t-datum .btn.brand { background: #cf8b5c; color: #16181a; }
html[data-theme="dark"] body.t-datum .btn.brand:hover { background: #dd9a6b; }