/* ---- ouerraad (Ouerraad — School governing body election 310) --------------
   THE STRUCTURAL MOVE: the about band is split 25 / 50 / 25 and the RIGHT
   QUARTER IS LEFT EMPTY — a narrow rail on what the body may decide beside a
   wide editorial column on where the money went, both hugging the left two
   thirds while a whole quarter of the page stands as air. Around it the page
   is deliberately low on ink: a 550px letterbox banner instead of a full
   screen, a dated announcement strip welded straight under it with no gap,
   and the pledge set at display size as the second band. Ochre is spent
   exactly three times — the rule over the date strip, the hairline under the
   signature, and the submit slab — and nowhere else on the page. The two
   columns bands are told apart by id (#columns against #columns-2), never by
   :nth-of-type, which matches the ELEMENT and would land on the hero.
   Nothing here positions, orders or reflows anything inside the header. */
body.t-ouerraad.ws-body {
  --bg: #f5f2ea; --fg: #454a41; --heading: #16412f; --text: #454a41; --muted: #7c8378;
  --or-green: #16412f; --or-ochre: #c8842a; --or-line: #ddd7c8; --or-band: #ece7da;
  --or-field: #fffdf7; --or-slab: #16412f; --or-slabfg: #f5f2ea;
  --hero-a: rgba(11, 24, 17, .34); --hero-b: rgba(11, 24, 17, .66);
}
body.t-ouerraad, body.t-ouerraad.ws-body .ws-section:not(.ws-cta):not(.ws-shoplink) { background: var(--bg); }
body.t-ouerraad .ws-nav { background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--or-line); }

/* the banner is a letterbox strip, not a screen — four frames, copy hard left */
body.t-ouerraad .ws-hero { min-height: 550px; }
body.t-ouerraad .ws-hero h1 { max-width: 15ch; font-size: clamp(32px, 5.2vw, 56px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }

/* every control is a flat slab; the one at the foot is the only ochre one */
body.t-ouerraad.ws-body .btn.brand, body.t-ouerraad.ws-body .ws-hero-cta.btn.brand { background: var(--or-slab); color: var(--or-slabfg); border-radius: 0; box-shadow: none; padding: 14px 30px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body.t-ouerraad.ws-body .ws-cta .btn.brand { background: #f5f2ea; color: #16412f; }
body.t-ouerraad.ws-body .ws-contact .btn.brand { background: var(--or-ochre); color: #1c1508; }

/* one type system: bottle green on every heading, slate on every line of copy */
body.t-ouerraad .ws-h2, body.t-ouerraad .ws-story-copy h2, body.t-ouerraad .ws-title-h, body.t-ouerraad .ws-col-h, body.t-ouerraad .ws-feature h3 { color: var(--heading); font-weight: 700; letter-spacing: -.02em; }
body.t-ouerraad .ws-sub, body.t-ouerraad .ws-story-copy p, body.t-ouerraad .ws-col p, body.t-ouerraad .ws-feature p, body.t-ouerraad .ws-title-sub, body.t-ouerraad .ws-quote blockquote { color: var(--text); }

/* OCHRE 1 of 3 — the dated announcement strip, welded under the banner */
body.t-ouerraad #title { padding: 0; text-align: left; }
body.t-ouerraad #title .ws-narrow { max-width: 1120px; padding: 28px 22px 34px; border-top: 4px solid var(--or-ochre); }
body.t-ouerraad #title .ws-title-h { font-size: clamp(19px, 2.3vw, 27px); margin: 0 0 10px; }
body.t-ouerraad #title .ws-title-sub { font-size: 15px; line-height: 1.8; }

/* the pledge — the only display-size text on the page — and OCHRE 2 of 3, a
   hairline sitting directly under the signature */
body.t-ouerraad.ws-body #quote { background: var(--or-band); padding: 92px 0 96px; }
body.t-ouerraad .ws-quote-t { color: var(--heading); font-style: normal; font-weight: 500; font-size: clamp(23px, 3.4vw, 38px); line-height: 1.3; letter-spacing: -.025em; }
body.t-ouerraad .ws-quote-a { display: inline-block; margin-top: 26px; padding-bottom: 12px; border-bottom: 2px solid var(--or-ochre); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* the portrait hard left against the first-person account; nothing is rounded */
body.t-ouerraad #story .ws-story-grid { grid-template-columns: 5fr 7fr; gap: 56px; }
body.t-ouerraad .ws-story-media img, body.t-ouerraad .ws-gallery-item img, body.t-ouerraad .ws-video-frame { border-radius: 0; box-shadow: none; }
body.t-ouerraad .ws-story-media img { aspect-ratio: 4 / 5; }

/* THE MOVE — 25 / 50 / 25 with only two columns in it, so the right quarter
   of the width is left standing as air */
body.t-ouerraad #columns .ws-cols-2 { grid-template-columns: 1fr 2fr 1fr; gap: 0 60px; }
body.t-ouerraad #columns .ws-col:first-child { padding-top: 10px; border-top: 3px solid var(--or-green); }
body.t-ouerraad #columns .ws-col:first-child p { color: var(--muted); font-size: 14.5px; line-height: 1.8; }
body.t-ouerraad #columns-2 { border-top: 1px solid var(--or-line); }

/* six issues, three across and three across again — glyphs in bottle green */
body.t-ouerraad .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 44px; }
body.t-ouerraad .ws-feature { text-align: left; padding: 0; }
body.t-ouerraad .ws-feature-icon { color: var(--or-green); margin-bottom: 12px; }

/* four dated news cards, photograph flush to the top, caption under a rule */
body.t-ouerraad .ws-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
body.t-ouerraad .ws-gallery-item img { aspect-ratio: 4 / 3; }
body.t-ouerraad .ws-gallery-cap { margin-top: 14px; padding: 12px 0 0; gap: 7px; border-top: 1px solid var(--or-line); }
body.t-ouerraad .ws-gallery-cap strong { color: var(--heading); font-size: 15px; font-weight: 700; line-height: 1.4; }
body.t-ouerraad .ws-gallery-cap span { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* four endorsements two by two, the card chrome stripped back to one rule */
body.t-ouerraad .ws-testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 56px; }
body.t-ouerraad .ws-quote { background: transparent; border: 0; border-top: 1px solid var(--or-line); border-radius: 0; box-shadow: none; padding: 22px 0 0; }
body.t-ouerraad .ws-quote blockquote::before { color: var(--or-green); }

/* the close — the hall times and the no-money line above square fields */
body.t-ouerraad .ws-contact .ws-sub { max-width: 620px; text-align: left; white-space: pre-line; line-height: 1.9; }
body.t-ouerraad .ws-field input, body.t-ouerraad .ws-field textarea, body.t-ouerraad .ws-field select, body.t-ouerraad .ws-select-trigger { background: var(--or-field); border: 1px solid var(--or-line); border-radius: 0; color: var(--heading); }

@media (max-width: 1000px) {
  body.t-ouerraad .ws-hero { min-height: 430px; }
  body.t-ouerraad #columns .ws-cols-2, body.t-ouerraad #columns-2 .ws-cols-2 { grid-template-columns: 1fr; gap: 34px; }
  body.t-ouerraad #story .ws-story-grid { grid-template-columns: 1fr; gap: 28px; }
  body.t-ouerraad .ws-features-grid, body.t-ouerraad .ws-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-ouerraad .ws-testimonials-grid { grid-template-columns: 1fr; }
}

/* night — chalk paper turns to slate board, the pledge band one stop up from
   it, and the bottle green lifts to a chalk green so it still reads as green
   and never as black. The ochre stays exactly where it was, all three times */
html[data-theme="dark"] body.t-ouerraad.ws-body {
  --bg: #101513; --fg: #a4aea5; --heading: #eaf0e9; --text: #a4aea5; --muted: #808980;
  --or-green: #86c3a2; --or-ochre: #d99b46; --or-line: #25302a; --or-band: #17201b;
  --or-field: #161d19; --or-slab: #86c3a2; --or-slabfg: #0c1310;
  --hero-a: rgba(5, 9, 7, .38); --hero-b: rgba(5, 9, 7, .72);
}
html[data-theme="dark"] body.t-ouerraad { background: var(--bg); }
html[data-theme="dark"] body.t-ouerraad .ws-nav-links a:hover, html[data-theme="dark"] body.t-ouerraad .ws-nav-links a.on { color: var(--or-green); }