/* ---- asem (Asem — Highveld clean-air campaign 296) --------------------------
   STRUCTURAL MOVE: the page WIDENS as it descends and darkens as it widens.
   Three strictly contained bands open it on cold paper — six glyphs, the about
   split, the ruled target register — then the four-tile campaign grid breaks
   the container and it never closes again: two full-bleed story bands run edge
   to edge on ash below it. Clear-sky blue is spent in exactly three places and
   nowhere else: the six feature glyphs, the six numerals on the target register
   and the solid buttons. No green anywhere on the page, deliberately — this is
   an instrument-maker's page, not a charity's. The three story blocks are
   reached by ID (#story, #story-2, #story-3) and the partner wall by
   #features-2, never by :nth-of-type, which matches the ELEMENT and would land
   on the hero instead. Nothing here positions or reorders anything inside the
   header — only the bar itself is touched. */
body.t-asem.ws-body {
  --bg: #fbfbf9; --fg: #4d5155; --heading: #16191c; --text: #4d5155; --muted: #7a7f84;
  --as-sky: #3f86b8; --as-ash: #e6e6e3; --as-line: #dcdcd7; --as-field: #ffffff;
  --hero-a: rgba(16, 20, 24, .34); --hero-b: rgba(16, 20, 24, .60);
}
body.t-asem { background: var(--bg); }
body.t-asem.ws-body .ws-section:not(.ws-cta):not(.ws-shoplink) { background: var(--bg); }
body.t-asem .ws-section { padding: 98px 0; }

/* the bar stays solid paper, closed by one hairline — its items are left alone */
body.t-asem .ws-nav { background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--as-line); }

/* hero — a whole viewport, three stills cross-fading, the copy dead centre */
body.t-asem .ws-hero { min-height: calc(100vh - 62px); }

/* blue 1 of 3 — every slab on the page, flat, square-cornered and borderless */
body.t-asem.ws-body .btn.brand, body.t-asem.ws-body .ws-cta .btn.brand { background: var(--as-sky); color: #ffffff; border-radius: 2px; box-shadow: none; padding: 15px 30px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* one type system: ink on every heading, slate on every line of body copy */
body.t-asem .ws-h2, body.t-asem .ws-story-copy h2, body.t-asem .ws-cta-inner h2 { color: var(--heading); font-size: clamp(23px, 3.1vw, 34px); font-weight: 700; letter-spacing: -.03em; }
body.t-asem .ws-sub, body.t-asem .ws-feature p, body.t-asem .ws-story-copy p, body.t-asem .ws-list li { color: var(--text); }

/* blue 2 of 3 — six programme glyphs, three across and three across again */
body.t-asem .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 44px; }
body.t-asem .ws-feature { text-align: left; padding: 0; }
body.t-asem .ws-feature-icon { color: var(--as-sky); margin-bottom: 14px; }
body.t-asem .ws-feature h3 { color: var(--heading); font-size: 16px; font-weight: 700; margin: 0 0 8px; }

/* the about split — the instrument hard left, the explanation ranged right */
body.t-asem .ws-story-media img { border-radius: 0; }
body.t-asem #story .ws-story-grid { grid-template-columns: 5fr 6fr; gap: 64px; }

/* blue 3 of 3 — the target register standing in for the reference's progress
   bars: six ruled lines and six accent numerals, no chart, no fake percentage */
body.t-asem #list .ws-list { list-style: none; padding-left: 0; margin: 0; counter-reset: as; border-top: 1px solid var(--as-line); }
body.t-asem #list .ws-list li { counter-increment: as; position: relative; margin: 0; padding: 21px 0 21px 56px; border-bottom: 1px solid var(--as-line); font-size: 16px; line-height: 1.72; }
body.t-asem #list .ws-list li::before { content: counter(as, decimal-leading-zero); position: absolute; left: 0; top: 23px; color: var(--as-sky); font-size: 13px; font-weight: 700; letter-spacing: .08em; }

/* the ask stays on the same plain paper as everything above it — no brand slab */
body.t-asem.ws-body .ws-cta { background: var(--bg); color: var(--text); border-top: 1px solid var(--as-line); border-bottom: 1px solid var(--as-line); }

/* THE HINGE — the container breaks here and never closes again: four tiles two
   by two, gapped, with the caption over the photograph instead of under it */
body.t-asem .ws-gallery .ws-container { max-width: 1500px; }
body.t-asem .ws-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
body.t-asem .ws-gallery-item { position: relative; }
body.t-asem .ws-gallery-item img { aspect-ratio: 16 / 10; border-radius: 0; }
body.t-asem .ws-gallery-cap { position: absolute; inset: auto 0 0 0; gap: 4px; padding: 84px 28px 24px; background: linear-gradient(rgba(14, 17, 20, 0), rgba(14, 17, 20, .82)); }
body.t-asem .ws-gallery-cap strong { color: #ffffff; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
body.t-asem .ws-gallery-cap span { color: #cfd6db; font-size: 12.5px; }

/* the two edge-to-edge bands — the only ash on the page, the page at its widest */
body.t-asem #story-2, body.t-asem #story-3 { background: var(--as-ash); padding: 0; }
body.t-asem #story-2 .ws-story-grid, body.t-asem #story-3 .ws-story-grid { max-width: none; padding: 0; gap: 0; grid-template-columns: 1fr 1fr; align-items: stretch; }
body.t-asem #story-2 .ws-story-media img, body.t-asem #story-3 .ws-story-media img { aspect-ratio: auto; height: 100%; min-height: 560px; }
body.t-asem #story-2 .ws-story-copy, body.t-asem #story-3 .ws-story-copy { align-self: center; max-width: 660px; padding: 96px clamp(24px, 5vw, 84px); }

/* the partner wall — six marks set as type in one flat gapless row, no frames */
body.t-asem #features-2 .ws-features-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-asem #features-2 .ws-feature { border-left: 1px solid var(--as-line); padding: 2px 18px; }
body.t-asem #features-2 .ws-feature h3 { font-size: 11.5px; letter-spacing: .09em; line-height: 1.5; text-transform: uppercase; }

/* the close — the fields on the right, the three lines that matter on the left */
body.t-asem .ws-contact .ws-narrow { max-width: 1120px; display: grid; grid-template-columns: 5fr 6fr; column-gap: 80px; }
body.t-asem .ws-contact .ws-h2 { text-align: left; margin: 0; }
body.t-asem .ws-contact .ws-sub { text-align: left; margin: 24px 0 0; max-width: 30ch; white-space: pre-line; font-size: 15px; line-height: 2; }
body.t-asem .ws-contact .ws-form { grid-column: 2; grid-row: 1 / -1; max-width: none; }
body.t-asem .ws-field input, body.t-asem .ws-field textarea, body.t-asem .ws-field select, body.t-asem .ws-select-trigger { background: var(--as-field); border: 1px solid var(--as-line); border-radius: 2px; color: var(--heading); }

@media (max-width: 1000px) {
  body.t-asem .ws-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-asem #features-2 .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-asem #story .ws-story-grid { grid-template-columns: 1fr; gap: 28px; }
  body.t-asem #story-2 .ws-story-copy, body.t-asem #story-3 .ws-story-copy { padding: 56px 24px 64px; }
  body.t-asem #story-2 .ws-story-media img, body.t-asem #story-3 .ws-story-media img { min-height: 320px; }
  body.t-asem .ws-contact .ws-narrow { grid-template-columns: 1fr; row-gap: 34px; }
  body.t-asem .ws-contact .ws-form { grid-column: 1; grid-row: auto; }
}

/* night — the cold paper goes to cold ink and the ash one stop up from it, the
   sky lifted a shade so it still reads as clear sky and never as navy */
html[data-theme="dark"] body.t-asem.ws-body {
  --bg: #101417; --fg: #9aa4ab; --heading: #eef2f4; --text: #9aa4ab; --muted: #7c868d;
  --as-sky: #5aa6d8; --as-ash: #191e22; --as-line: #262c31; --as-field: #171c20;
  --hero-a: rgba(6, 9, 12, .40); --hero-b: rgba(6, 9, 12, .70);
}
html[data-theme="dark"] body.t-asem { background: var(--bg); }
html[data-theme="dark"] body.t-asem .ws-gallery-cap span { color: #b8c1c7; }