/* ============================================================
   koevert — the WEBSITE face. THE STRUCTURAL MOVE: the page opens
   on a full-viewport photographic slider with the copy laid
   straight onto the picture, and that is the last full-bleed thing
   on it — from the intro band down the width clamps to ONE
   contained measure and stays clamped for the entire remainder.
   Warm kraft paper, near-black ink, one deep official green, and a
   manila hairline used only under the journal captions.
   ============================================================ */
body.t-koevert.ws-body {
  --bg: #f6f2e9; --fg: #46423b; --heading: #191815; --text: #4c463d; --muted: #8d8579;
  --kv-green: #1f5347; --kv-band: #1f5347; --kv-manila: #c39b5e; --kv-line: #e3dbcb; --kv-card: #fbf8f1;
  --hero-a: rgba(20, 19, 16, .30); --hero-b: rgba(20, 19, 16, .60);
}

/* one unbroken sheet — the alternating wash is switched off, so the only band
   that paints itself is the mid-page capture strip further down */
body.t-koevert.ws-body .ws-section, body.t-koevert.ws-body .ws-section:nth-child(even) { background: transparent; padding: 78px 0; }

/* the clamp: everything below the photograph lives inside this measure */
body.t-koevert .ws-container { max-width: 1000px; }
body.t-koevert .ws-narrow { max-width: 640px; }
body.t-koevert .ws-hero { min-height: 100vh; }

/* the shared sheet's hardcoded greys re-pointed at tokens so night moves them */
body.t-koevert .ws-sub, body.t-koevert .ws-feature p, body.t-koevert .ws-story-copy p, body.t-koevert .ws-richtext p, body.t-koevert .ws-video-caption, body.t-koevert .ws-gallery-cap span { color: var(--text); }

/* headline and one paragraph, on the picture, with nothing behind them */
body.t-koevert.ws-body .ws-hero h1 { font-size: clamp(36px, 6.2vw, 72px); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; max-width: 17ch; }
body.t-koevert.ws-body .ws-hero p { max-width: 58ch; font-size: 16.5px; line-height: 1.6; }

/* below the fold the page reads like a printed schedule: hard left, never centred */
body.t-koevert .ws-h2, body.t-koevert .ws-sub, body.t-koevert .ws-video-caption, body.t-koevert .ws-quoteblock .ws-narrow { text-align: left; }
body.t-koevert .ws-h2 { font-size: clamp(22px, 3vw, 31px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 14px; }
body.t-koevert .ws-sub { max-width: 62ch; margin: 0 0 34px; }
body.t-koevert .ws-richtext .ws-h2 { font-size: clamp(27px, 4.4vw, 45px); line-height: 1.1; max-width: 17ch; margin-bottom: 22px; }

/* the one accent: hero button, feature icons, caption rules, form button */
body.t-koevert.ws-body .btn.brand { background: var(--kv-green); color: #f6f2e9; border-radius: 2px; padding: 14px 28px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
body.t-koevert.ws-body .ws-hero-cta.btn.brand { background: var(--kv-green); color: #f6f2e9; box-shadow: none; }
body.t-koevert.ws-body .ws-section.ws-cta { background: var(--kv-band); padding: 54px 0; }
body.t-koevert.ws-body .ws-cta .btn.brand { background: #f6f2e9; color: var(--kv-band); }

/* the disqualifier grid — eight ruled checklist rows, the icon hard left of each */
body.t-koevert .ws-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 26px; }
body.t-koevert .ws-feature { display: grid; grid-template-columns: 24px 1fr; column-gap: 13px; text-align: left; padding: 17px 0 0; border-top: 1px solid var(--kv-line); }
body.t-koevert .ws-feature-icon { grid-row: 1 / span 2; margin: 0; color: var(--kv-green); }
body.t-koevert .ws-feature-icon .ws-ico { width: 24px; height: 24px; }
body.t-koevert .ws-feature h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; margin: 2px 0 7px; }
body.t-koevert .ws-feature p { font-size: 12.8px; line-height: 1.6; }

/* flat paper edges everywhere; the portrait stands upright on the right */
body.t-koevert .ws-story-media img, body.t-koevert .ws-gallery-item img, body.t-koevert .ws-video-frame { border-radius: 2px; box-shadow: none; }
body.t-koevert .ws-story-grid { grid-template-columns: 1.2fr .8fr; gap: 54px; align-items: start; }
body.t-koevert .ws-story-media img { aspect-ratio: 3 / 4; }

/* journal tiles — the manila hairline lives here and nowhere else on the page */
body.t-koevert .ws-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 26px; }
body.t-koevert .ws-gallery-item img { aspect-ratio: 4 / 3; }
body.t-koevert .ws-gallery-cap { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--kv-manila); }
body.t-koevert .ws-gallery-cap strong { font-size: 14px; font-weight: 650; color: var(--heading); }

/* the single line that breaks the narrow column before the form */
body.t-koevert .ws-quoteblock .ws-narrow { max-width: 1000px; }
body.t-koevert .ws-quote-t { font-style: normal; font-weight: 400; font-size: clamp(21px, 3.4vw, 35px); line-height: 1.34; color: var(--heading); }
body.t-koevert .ws-quote-a { color: var(--kv-green); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }

/* the bar, the labels and the four fields share one flat institutional face */
body.t-koevert .ws-nav { background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--kv-line); }
/* a 20-character wordmark beside seven links is the tightest header in the
   gallery; the tracking comes in so the bar has real margin rather than just
   fitting. Same treatment chicane and klank needed. */
body.t-koevert .ws-brand { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
body.t-koevert .ws-nav-links { gap: 16px; }
body.t-koevert .ws-nav-links a { text-transform: uppercase; letter-spacing: .05em; font-size: 10px; font-weight: 700; white-space: nowrap; }
body.t-koevert .ws-field label { font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; color: var(--muted); }
body.t-koevert .ws-field input, body.t-koevert .ws-field textarea { background: var(--kv-card); border: 1px solid var(--kv-line); border-radius: 2px; color: var(--heading); }
body.t-koevert .ws-contact .ws-form { max-width: none; margin: 0; }

/* every band folds and still fills its rows: 8 features 4→2→1, 6 tiles 3→2→1 */
@media (max-width: 980px) {
  body.t-koevert .ws-features-grid, body.t-koevert .ws-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-koevert .ws-story-grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 620px) {
  body.t-koevert .ws-features-grid, body.t-koevert .ws-gallery-grid { grid-template-columns: 1fr; }
}

/* night — the kraft cools to charcoal, the green lifts to #3f9a83 so it still
   carries the icons and the caption rules, and the capture band drops to a
   deeper green so it stays the darkest surface above the foot */
html[data-theme="dark"] body.t-koevert.ws-body {
  --bg: #16181a; --fg: #b8b4ac; --heading: #f1ede4; --text: #a8a39a; --muted: #7c776e;
  --kv-green: #3f9a83; --kv-band: #143b34; --kv-manila: #a8834b; --kv-line: #282c2f; --kv-card: #1d2022;
  --hero-a: rgba(8, 9, 10, .32); --hero-b: rgba(8, 9, 10, .66);
}
html[data-theme="dark"] body.t-koevert { background: #16181a; }
html[data-theme="dark"] body.t-koevert.ws-body .btn.brand, html[data-theme="dark"] body.t-koevert.ws-body .ws-cta .btn.brand { background: var(--kv-green); color: #0d1f1b; }