/* ---- klank (Klank 261) — THE MOVE: the process row is four RINGED CIRCLES with
   captions under them, the only captioned images on the page. Apricot on paper,
   leaf green kept to the ring, the underline and the ticks; two pale wash bands
   give the boxed middle its rhythm between the page's only two full-bleeds. ---- */
body.t-klank.ws-body { --bg: #fbf7f3; --fg: #3d3630; --heading: #1b1815; --text: #423b36; --muted: #8b8078; --kl-blush: #fdeee7; --kl-mint: #eef4e9; --kl-leaf: #7fa86a; --kl-leafink: #5f8a4c; --kl-apricot: #c2603f; --kl-line: #f0e3da; --kl-card: #ffffff; }
body.t-klank .ws-nav { background: rgba(251, 247, 243, 0.94); border-bottom: 1px solid var(--kl-line); }
body.t-klank .ws-hero { min-height: 100vh; --hero-a: rgba(58, 34, 26, 0.26); --hero-b: rgba(58, 34, 26, 0.58); }
body.t-klank .btn.brand { background: #e8846a; color: #ffffff; border-radius: 999px; padding: 14px 32px; }
body.t-klank .btn.brand:hover { background: #d76d52; }
/* the shared alternating tint lands on the wrong bands here — switch it off so the
   only two grounds on the page are the blush and the mint, placed by hand */
body.t-klank .ws-section:nth-child(even):not(.ws-cta) { background: transparent; }
body.t-klank .ws-features { background: var(--kl-blush); }
body.t-klank .ws-gallery { background: var(--kl-mint); }
body.t-klank .ws-titleblock .ws-title-h::after { content: ''; display: block; width: 54px; height: 3px; border-radius: 2px; background: var(--kl-leaf); margin: 20px auto 0; }
body.t-klank .ws-feature-icon { color: var(--brand); }
body.t-klank .ws-feature p, body.t-klank .ws-story-copy p, body.t-klank .ws-quote blockquote, body.t-klank .ws-title-sub, body.t-klank .ws-sub { color: var(--text); }
body.t-klank .ws-story-media img { border-radius: 24px; aspect-ratio: 4 / 5; }
/* the signature: four round process tiles, ringed in leaf, label centred beneath */
body.t-klank .ws-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
body.t-klank .ws-gallery-item img { border-radius: 50%; box-shadow: 0 0 0 7px var(--kl-mint), 0 0 0 8px var(--kl-leaf); }
body.t-klank .ws-gallery-cap { align-items: center; text-align: center; padding-top: 20px; }
body.t-klank .ws-gallery-cap strong { font-size: 15.5px; color: var(--heading); }
body.t-klank .ws-gallery-cap span { color: var(--kl-leafink); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; }
/* the second full bleed — six photographs edge to edge with no gutter at all */
body.t-klank .ws-photogrid { padding: 0; }
body.t-klank .ws-photogrid-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-klank .ws-photogrid-grid img { aspect-ratio: 3 / 4; }
body.t-klank .ws-columns .ws-col p { white-space: pre-line; }
body.t-klank .ws-col-h { color: var(--kl-apricot); font-weight: 700; }
body.t-klank .ws-quote { border: 0; border-radius: 24px; background: var(--kl-card); box-shadow: 0 8px 26px rgba(80, 48, 34, 0.07); }
body.t-klank .ws-quote blockquote::before { color: var(--kl-leaf); }
body.t-klank .ws-field input, body.t-klank .ws-field textarea { border-radius: 14px; border-color: #ecdccf; background: var(--kl-card); color: var(--heading); }
@media (max-width: 900px) {
  body.t-klank .ws-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-klank .ws-photogrid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-klank .ws-columns .ws-cols-3 { grid-template-columns: 1fr; }
}
/* night — the paper goes to warm dark cocoa, both wash bands drop to the faintest
   tint of the same two hues so the rhythm survives, and the leaf lifts a shade to
   keep hold of the rings, the underline and the small caps under the circles */
html[data-theme="dark"] body.t-klank.ws-body {
  --bg: #191410; --fg: #cdc2b6; --heading: #f7f0e7; --text: #bcb1a4; --muted: #8c8175;
  --kl-blush: #251a15; --kl-mint: #182016; --kl-leaf: #9cc687; --kl-leafink: #9cc687;
  --kl-apricot: #f0977b; --kl-line: #2f251d; --kl-card: #221a14;
}
html[data-theme="dark"] body.t-klank .ws-nav { background: rgba(25, 20, 16, 0.94); }
html[data-theme="dark"] body.t-klank .ws-quote { box-shadow: none; }
html[data-theme="dark"] body.t-klank .ws-field input, html[data-theme="dark"] body.t-klank .ws-field textarea { border-color: #362a20; }