/* ---- bakermat (Bakermat — Early childhood centres & school feeding 260) ----
   THE STRUCTURAL MOVE: the widest and the narrowest moments on the page are
   adjacent. A 100vh three-plate photograph, its type stacked hard left in the
   lower third over a bottom-up scrim, drops straight into a 940px column on
   warm sand where one plate carries a second photograph offset over its
   lower-right corner — and the four-figure ledger hangs off the bottom of that
   same sand block with NO heading between them, so the numerals read as proof
   of the paragraph above rather than as a section of their own. Below it the
   page alternates full-bleed picture and contained type: four gapless cause
   tiles with their labels typeset ON the photographs, an image-free four-up
   glyph row, one near-black band carrying a single line, and six gates and
   yards welded edge to edge. Mulberry is spent on four things and nothing else.
   nth-child appears only where the platform's own zebra selector does, over
   siblings that are all sections; nothing here uses :nth-of-type, and nothing
   here touches the header, the nav, or anything inside them. */
body.t-bakermat.ws-body {
  --bg: #f6f2ea; --fg: #171512; --heading: #171512; --text: #3c362e; --muted: #7c7466;
  --bk-mul: #8a3f5a; --bk-band: #8a3f5a; --bk-sand: #efe7d9; --bk-ink: #14120f;
  --bk-line: #ded5c3; --bk-card: #fffdf8;
  --hero-a: rgba(18, 16, 13, .05); --hero-b: rgba(18, 16, 13, .76);
}

/* the lime-washed paper runs unbroken — only the bands that paint themselves break it */
body.t-bakermat.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-quoteblock):not(.ws-story):not(.ws-columns) { background: transparent; }

/* the shared sheet's hardcoded greys re-pointed at tokens, so night moves the page */
body.t-bakermat .ws-sub, body.t-bakermat .ws-feature p, body.t-bakermat .ws-story-copy p, body.t-bakermat .ws-columns .ws-col p, body.t-bakermat .ws-quote blockquote { color: var(--text); }

/* a whole screen of photograph; the type sits hard left in the lower third */
body.t-bakermat .ws-hero { min-height: 100vh; align-items: flex-end; }
body.t-bakermat .ws-hero-inner { padding: 0 22px 13vh; }
body.t-bakermat .ws-hero h1 { font-size: clamp(32px, 5vw, 62px); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; max-width: 18ch; }

/* mulberry: the hero slab, the numerals, the hairline under headings, one band */
body.t-bakermat.ws-body .btn.brand { background: var(--bk-mul); color: #f6f2ea; border-radius: 0; padding: 15px 30px; font-size: 12.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
body.t-bakermat.ws-body .ws-cta .btn.brand { background: #f6f2ea; color: #171512; box-shadow: none; }
body.t-bakermat .ws-h2, body.t-bakermat .ws-logos-heading { text-align: left; color: var(--heading); font-size: clamp(20px, 2.4vw, 27px); font-weight: 600; letter-spacing: -.02em; text-transform: none; margin: 0 0 30px; padding-bottom: 11px; border-bottom: 1px solid var(--bk-mul); }

/* THE NARROW MOMENT — sand ground, plate left, a second picture over its corner */
body.t-bakermat.ws-body .ws-section.ws-story { background: var(--bk-sand); padding: 88px 0 46px; }
body.t-bakermat .ws-story .ws-container, body.t-bakermat .ws-columns .ws-container { max-width: 940px; }
body.t-bakermat .ws-story-grid { grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: start; }
body.t-bakermat .ws-story-media { position: relative; padding: 0 40px 54px 0; transform: rotate(-.6deg); }
body.t-bakermat .ws-story-media img, body.t-bakermat .ws-gallery-item img { border-radius: 0; aspect-ratio: 4 / 5; }
body.t-bakermat .ws-story-media::after { content: ''; position: absolute; right: 0; bottom: 0; width: 56%; aspect-ratio: 4 / 3; background: url("/media/samples/bak_story_2.jpg") center / cover; border: 7px solid var(--bk-sand); transform: rotate(1.4deg); }

/* THE LEDGER — hangs off the bottom of the same sand, unheaded */
body.t-bakermat.ws-body .ws-section.ws-columns { background: var(--bk-sand); padding: 0 0 84px; }
body.t-bakermat .ws-columns .ws-cols-4 { gap: 0 34px; border-top: 1px solid var(--bk-line); padding-top: 26px; }
body.t-bakermat .ws-col-h { color: var(--bk-mul); font-size: clamp(38px, 5.6vw, 66px); font-weight: 600; letter-spacing: -.05em; line-height: .88; margin: 0 0 10px; }
body.t-bakermat .ws-columns .ws-col p { font-size: 12.5px; line-height: 1.6; margin: 0; max-width: 24ch; }

/* four cause tiles welded gapless, the label typeset on the photograph */
body.t-bakermat .ws-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
body.t-bakermat .ws-gallery-item { position: relative; }
body.t-bakermat .ws-gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 20px 20px; gap: 5px; background: linear-gradient(rgba(20, 18, 15, 0), rgba(20, 18, 15, .82)); color: #f6f2ea; }
body.t-bakermat .ws-gallery-cap strong { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
body.t-bakermat .ws-gallery-cap span { font-size: 12.5px; line-height: 1.45; color: rgba(246, 242, 234, .8); }

/* the eye rests: four glyphs and four voices, no cards and no photographs */
body.t-bakermat .ws-features-grid, body.t-bakermat .ws-testimonials-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
body.t-bakermat .ws-feature, body.t-bakermat .ws-quote { text-align: left; background: transparent; border: 0; border-top: 1px solid var(--bk-line); border-radius: 0; box-shadow: none; margin: 0; padding: 20px 0 0; }
body.t-bakermat .ws-feature-icon { color: var(--bk-mul); margin-bottom: 13px; }
body.t-bakermat .ws-quote blockquote::before { content: none; }

/* the one inverted band on the page */
body.t-bakermat.ws-body .ws-section.ws-quoteblock { background: var(--bk-ink); padding: 100px 0; }
body.t-bakermat .ws-quote-t { color: #f6f2ea; font-style: normal; font-weight: 500; font-size: clamp(23px, 3.2vw, 38px); line-height: 1.28; letter-spacing: -.02em; max-width: 20ch; margin: 0 auto 20px; }
body.t-bakermat .ws-quote-a { color: #a2988a; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* six gates and yards, edge to edge, no wordmarks and no gutter */
body.t-bakermat .ws-logos-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; opacity: 1; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
body.t-bakermat .ws-logos-row img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: none; }

/* the ask, on the only mulberry ground above the foot */
body.t-bakermat.ws-body .ws-section.ws-cta { background: var(--bk-band); padding: 76px 0; }

/* last band splits: the plain facts left, the pledge form right */
body.t-bakermat .ws-contact .ws-narrow { max-width: 1120px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 4px 64px; align-items: start; }
body.t-bakermat .ws-contact .ws-h2 { grid-column: 1 / -1; }
body.t-bakermat .ws-contact .ws-sub { grid-column: 1; grid-row: 2; max-width: none; margin: 0; text-align: left; white-space: pre-line; color: var(--heading); font-size: 14px; line-height: 1.95; }
body.t-bakermat .ws-contact .ws-form { grid-column: 2; grid-row: 2; max-width: none; margin: 0; }
body.t-bakermat .ws-field input, body.t-bakermat .ws-field textarea { background: var(--bk-card); border: 1px solid var(--bk-line); border-radius: 0; color: var(--heading); }

/* every band folds to a count that still fills its rows: 4→2, 6→3, 4→2 */
@media (max-width: 980px) {
  body.t-bakermat .ws-features-grid, body.t-bakermat .ws-testimonials-grid, body.t-bakermat .ws-gallery-grid, body.t-bakermat .ws-columns .ws-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-bakermat .ws-logos-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-bakermat .ws-story-grid, body.t-bakermat .ws-contact .ws-narrow { grid-template-columns: 1fr; }
  body.t-bakermat .ws-contact .ws-sub, body.t-bakermat .ws-contact .ws-form { grid-column: 1; grid-row: auto; }
}
@media (max-width: 620px) {
  body.t-bakermat .ws-gallery-grid, body.t-bakermat .ws-testimonials-grid, body.t-bakermat .ws-features-grid { grid-template-columns: 1fr; }
  body.t-bakermat .ws-story-media { padding-right: 24px; }
}

/* night — ground and ink swap, the sand cools to a warm dark step, the quote
   band drops below the page so it is still the darkest thing on it, and the
   mulberry lifts to hold the numerals (its type goes dark on the lighter slab).
   The CTA band keeps a deeper mulberry so white copy still holds on it. */
html[data-theme="dark"] body.t-bakermat.ws-body {
  --bg: #141210; --fg: #d8d1c4; --heading: #f6f2ea; --text: #b6aea0; --muted: #857d70;
  --bk-mul: #c2657f; --bk-band: #7a3550; --bk-sand: #1c1916; --bk-ink: #0a0908;
  --bk-line: #2f2a24; --bk-card: #1c1916;
  --hero-a: rgba(8, 7, 6, .10); --hero-b: rgba(8, 7, 6, .82);
}
html[data-theme="dark"] body.t-bakermat.ws-body .btn.brand { color: #14120f; }
html[data-theme="dark"] body.t-bakermat.ws-body .ws-cta .btn.brand { background: #f6f2ea; color: #171512; }
