/*
 * Art direction for the Home and About pages.
 *
 * Loaded ONLY on those two (see borrego_basic_enqueue_assets). Both are far
 * more art-directed in the design comp than the rest of the site: photographs
 * bleed off the page edges behind organic S-curves, coloured panels have wavy
 * edges, program cards sit at staggered heights inside irregular blob masks,
 * and botanical line art drifts across several sections.
 *
 * None of that belongs on interior pages, so it is scoped here rather than
 * pushed into style.css.
 *
 * SHAPES are SVG masks as data URIs with preserveAspectRatio="none", so they
 * stretch to whatever box they are applied to and need no DOM node. Every one
 * is duplicated with the -webkit- prefix because Safari and iOS Safari still
 * require it for mask-image.
 */

/*
 * SHAPE MASKS — TRACED FROM THE COMPS, NOT DRAWN BY HAND.
 *
 * Every path below was measured out of the 856x1838 design JPEGs by
 * scripts/trace-comp-shapes.mjs, which walks each scanline and finds where a
 * flat brand colour (cream / sand / forest / terracotta) gives way to a
 * photograph or another field. Two details make that reliable:
 *
 *   - it floods IN FROM THE EDGE the shape bleeds off, because the headline
 *     text sits inside the cream field and a naive left-to-right scan finds
 *     letters rather than the photo edge;
 *   - runs are gap-tolerant and width-floored, because the gold text drawn on
 *     the bands fragments the colour field, and the cream card overlapping the
 *     event photo is narrower than the photo itself.
 *
 * Re-run: node scripts/trace-comp-shapes.mjs (writes overlay images so each
 * trace can be checked against the comp before it is trusted).
 *
 * The measured aspect ratio of each shape is applied to its element, so a mask
 * authored at the comp's proportions is never stretched into a different curve.
 */

:root {
	--bb-clip-hero: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M43.8,0C42.8,1 40.4,3.9 38.3,5.9C36.2,7.9 33.6,9.8 31.3,11.8C28.9,13.8 27.7,15.7 24.2,17.7C20.7,19.7 14,21.6 10.4,23.6C6.7,25.6 3.9,27.5 2.1,29.5C0.4,31.5 0,33.4 0,35.4C0,37.4 1.2,39.3 2.3,41.3C3.5,43.3 5.5,45.3 6.6,47.2C7.7,49.1 8.4,50.9 9,52.8C9.6,54.7 10,56.7 10.2,58.7C10.3,60.7 10.1,62.6 9.8,64.6C9.5,66.6 9,68.5 8.4,70.5C7.7,72.5 6.7,74.4 5.9,76.4C5,78.4 3.9,80.3 3.1,82.3C2.4,84.3 1.7,86.2 1.4,88.2C1.1,90.2 1.1,92.1 1.4,94.1C1.7,96.1 2.8,99 3.1,100L100,100L100,0Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-clip-quote: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M0,78.9C1,78.9 3.9,78.9 5.8,78.9C7.8,78.9 9.8,79 11.8,78.9C13.8,78.8 15.7,78.3 17.7,78.3C19.6,78.3 21.6,89.3 23.5,78.9C25.5,68.5 27.4,28 29.4,16.1C31.3,4.2 33.4,9.4 35.3,7.5C37.3,5.6 39.2,6.3 41.2,5C43.1,3.8 45,-0.2 47,0C49,0.2 51,4.9 53,6.4C55,7.9 56.9,8 58.8,8.9C60.8,9.8 62.7,10.9 64.7,11.7C66.6,12.4 68.7,13 70.6,13.3C72.6,13.7 74.5,13.9 76.5,13.6C78.4,13.3 80.4,10.6 82.3,11.7C84.3,12.7 86.2,21.5 88.2,19.7C90.2,18 92.2,4.4 94.2,1.1C96.1,-2.2 99,0.2 100,0L100,100L0,100Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-clip-band: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M0,0C1,0.4 3.9,1.7 5.8,2.1C7.8,2.6 9.8,2.6 11.8,2.9C13.8,3.1 15.7,3.6 17.7,3.6C19.6,3.6 21.6,3.1 23.5,2.9C25.5,2.6 27.4,2.1 29.4,2.1C31.3,2.1 33.4,2.7 35.3,2.9C37.3,3 39.2,2.9 41.2,2.9C43.1,2.9 45,3 47,2.9C49,2.7 51,2.4 53,2.1C55,1.9 56.9,1.8 58.8,1.4C60.8,1.1 62.7,0.2 64.7,0C66.6,-0.2 68.7,-0.4 70.6,0C72.6,0.4 74.5,1.4 76.5,2.1C78.4,2.9 80.4,3.7 82.3,4.3C84.3,4.9 86.2,5.6 88.2,5.7C90.2,5.8 92.2,5.5 94.2,5C96.1,4.5 99,3.2 100,2.9L100,94.3C99,94.2 96.1,93.7 94.2,93.6C92.2,93.5 90.2,93.5 88.2,93.6C86.2,93.7 84.3,93.9 82.3,94.3C80.4,94.6 78.4,95.2 76.5,95.7C74.5,96.2 72.6,96.7 70.6,97.1C68.7,97.6 66.6,98.2 64.7,98.6C62.7,98.9 60.8,99 58.8,99.3C56.9,99.5 55,99.9 53,100C51,100.1 49,100.1 47,100C45,99.9 43.1,99.5 41.2,99.3C39.2,99 37.3,98.9 35.3,98.6C33.4,98.2 31.3,97.6 29.4,97.1C27.4,96.7 25.5,96.2 23.5,95.7C21.6,95.2 19.6,94.6 17.7,94.3C15.7,93.9 13.8,93.6 11.8,93.6C9.8,93.6 7.8,93.9 5.8,94.3C3.9,94.6 1,95.5 0,95.7L0,95.7Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-clip-donate: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M0,2.1C1,1.8 3.9,0.2 5.8,0C7.8,-0.2 9.8,0.6 11.8,1.1C13.8,1.5 15.7,2.1 17.7,2.6C19.6,3.2 21.6,3.7 23.5,4.2C25.5,4.8 27.4,5.2 29.4,5.8C31.3,6.4 33.4,7.2 35.3,7.9C37.3,8.6 39.2,9.3 41.2,10.1C43.1,10.8 45,11.5 47,12.2C49,12.9 51,6.7 53,14.3C55,21.9 56.9,54.9 58.8,57.7C60.8,60.5 62.7,40.5 64.7,31.2C66.6,22 68.7,7 70.6,2.1C72.6,-2.7 74.5,2.1 76.5,2.1C78.4,2.1 80.4,2.1 82.3,2.1C84.3,2.1 86.2,0.6 88.2,2.1C90.2,3.6 92.2,9.3 94.2,11.1C96.1,12.9 99,12.4 100,12.7L100,100L0,100Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-clip-card-a: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M7.3,0C6.9,1.3 5.5,5.2 4.6,7.8C3.7,10.4 2.5,13 1.8,15.6C1.1,18.2 0.8,20.9 0.5,23.4C0.2,25.9 0.1,28 0,30.5C-0.1,33 -0.1,35.7 0,38.3C0.1,40.9 0.2,43.5 0.5,46.1C0.7,48.7 1,51.3 1.4,53.9C1.8,56.5 2.3,59.1 2.8,61.7C3.2,64.3 3.5,67 4.1,69.5C4.7,72 5.4,74.1 6.4,76.6C7.4,79.1 8.5,81.8 10.1,84.4C11.7,87 15,89.6 16.1,92.2C17.1,94.8 16.4,98.7 16.5,100L85.8,100C86.8,98.7 90.1,94.8 91.7,92.2C93.3,89.6 94.6,87 95.4,84.4C96.3,81.8 96.3,79.1 96.8,76.6C97.3,74.1 98.1,72 98.6,69.5C99.2,67 99.8,64.3 100,61.7C100.2,59.1 100,56.5 100,53.9C100,51.3 100,48.7 100,46.1C100,43.5 100,40.9 100,38.3C100,35.7 100,33 100,30.5C100,28 100,25.9 100,23.4C100,20.9 100.4,18.2 100,15.6C99.6,13 100.6,10.4 97.7,7.8C94.8,5.2 85.1,1.3 82.6,0Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-clip-card-b: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M24.4,0C22,1.3 13.4,5.4 9.7,7.9C6,10.5 3.9,12.8 2.3,15.3C0.7,17.9 0.3,20.7 0,23.3C-0.3,25.8 0.8,28.1 0.8,30.7C0.8,33.2 0.1,36.1 0,38.6C-0.1,41.2 0,43.5 0,46C0,48.6 -1.1,51.4 0,54C1.1,56.5 5.4,58.8 6.6,61.4C7.8,63.9 6.8,66.8 7,69.3C7.1,71.9 7.3,74.2 7.4,76.7C7.4,79.3 7.3,82.1 7.4,84.7C7.4,87.2 6.8,89.5 7.8,92.1C8.7,94.6 12,98.7 12.8,100L94.6,100C95.3,98.7 97.9,94.6 98.8,92.1C99.7,89.5 99.9,87.2 100,84.7C100.1,82.1 99.5,79.3 99.2,76.7C99,74.2 98.8,71.9 98.4,69.3C98.1,66.8 97.5,63.9 97.3,61.4C97,58.8 97,56.5 96.9,54C96.8,51.4 96.8,48.6 96.9,46C97,43.5 97.4,41.2 97.7,38.6C97.9,36.1 98.2,33.2 98.4,30.7C98.7,28.1 99.1,25.8 99.2,23.3C99.4,20.7 99.8,17.9 99.2,15.3C98.6,12.8 97.9,10.5 95.7,7.9C93.6,5.4 88,1.3 86.4,0Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-clip-card-c: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M3.7,0C3.1,1.3 0.6,5.4 0,7.9C-0.6,10.5 0,12.7 0,15.3C0,17.8 0,20.6 0,23.2C0,25.7 0,28 0,30.5C0,33.1 0,35.8 0,38.4C0,41.1 0,43.8 0,46.3C0,48.9 0,51.1 0,53.7C0,56.2 0,58.9 0,61.6C0,64.2 0,66.9 0,69.5C0,72 0,74.3 0,76.8C0,79.4 0,82.2 0,84.7C0,87.3 -1.1,89.5 0,92.1C1.1,94.6 5.7,98.7 6.9,100L80.3,100C82,98.7 87.7,94.6 90.4,92.1C93,89.5 94.9,87.3 96.3,84.7C97.8,82.2 98.5,79.4 99.1,76.8C99.7,74.3 99.8,72 100,69.5C100.2,66.9 100.1,64.2 100,61.6C99.9,58.9 99.7,56.2 99.5,53.7C99.4,51.1 99.4,48.9 99.1,46.3C98.8,43.8 98.2,41.1 97.7,38.4C97.2,35.8 96.7,33.1 95.9,30.5C95,28 94,25.7 92.7,23.2C91.3,20.6 89.9,17.8 87.6,15.3C85.3,12.7 82.2,10.5 78.9,7.9C75.6,5.4 69.7,1.3 67.9,0Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-clip-event: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M1.7,0C1.4,0.9 0.5,3.5 0.2,5.2C0,6.8 0,8.2 0,9.8C0,11.4 0,13.2 0,14.9C0,16.7 -2.8,16 0.2,20.1C3.3,24.2 18.5,35.6 18.4,39.7C18.4,43.8 0.2,41.1 0,44.8C-0.2,48.6 17.2,57.3 17.2,62.4C17.2,67.4 2.9,72.3 0,75.3C-2.9,78.2 0,78.3 0,79.9C0,81.5 0,83.3 0,85.1C0,86.8 0,88.6 0,90.2C0,91.8 -0.1,93.2 0,94.8C0.1,96.5 0.6,99.1 0.7,100L98.8,100C99,99.1 99.8,96.5 100,94.8C100.2,93.2 100,91.8 100,90.2C100,88.6 100,86.8 100,85.1C100,83.3 100,81.5 100,79.9C100,78.3 100,78.2 100,75.3C100,72.3 100,67.4 100,62.4C100,57.3 100,48.6 100,44.8C100,41.1 100,43.8 100,39.7C100,35.6 100,24.2 100,20.1C100,16 100.1,16.7 100,14.9C99.9,13.2 99.9,11.4 99.5,9.8C99.1,8.2 98.7,6.8 97.6,5.2C96.5,3.5 93.6,0.9 92.8,0Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-clip-student: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M2.8,0C2.4,1.3 0.7,5.4 0.3,7.9C-0.2,10.4 0.3,12.7 0.3,15.3C0.3,17.8 0.3,20.6 0.3,23.2C0.3,25.7 0.3,28 0.3,30.5C0.3,33.1 0.3,35.8 0.3,38.4C0.2,41.1 0,43.8 0,46.3C0,48.9 0,51.1 0,53.7C0,56.2 0,58.9 0,61.6C0,64.2 0,66.9 0,69.5C0,72 0,74.3 0,76.8C0,79.4 0,82.2 0,84.7C0,87.3 0,89.6 0,92.1C0,94.6 0,98.7 0,100L97.7,100C97.7,98.7 97.7,94.6 97.7,92.1C97.7,89.6 97.7,87.3 97.7,84.7C97.7,82.2 97.7,79.4 97.7,76.8C97.7,74.3 97.7,72 97.7,69.5C97.7,66.9 97.6,64.2 97.7,61.6C97.8,58.9 98.2,56.2 98.2,53.7C98.2,51.1 97.8,48.9 97.7,46.3C97.6,43.8 97.7,41.1 97.7,38.4C97.7,35.8 97.6,33.1 97.7,30.5C97.8,28 98.2,25.7 98.2,23.2C98.2,20.6 97.8,17.8 97.7,15.3C97.6,12.7 97.7,10.4 97.7,7.9C97.7,5.4 97.7,1.3 97.7,0Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-clip-about-hero: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M11.2,0C10.9,1 9.5,4 9.1,5.9C8.6,7.9 8.4,9.9 8.3,11.9C8.1,13.8 8.1,15.6 8.3,17.5C8.4,19.4 8.8,21.5 9.1,23.4C9.3,25.4 9.6,27.4 9.6,29.4C9.7,31.4 9.7,33.3 9.4,35.3C9.2,37.3 8.7,39.3 8.3,41.2C7.8,43.2 7.3,45.2 6.7,47.2C6.1,49.1 5.4,50.9 4.7,52.8C4,54.8 3.1,56.8 2.6,58.8C2,60.7 1.6,62.7 1.2,64.7C0.8,66.7 0.4,68.6 0.2,70.6C0,72.6 0,74.6 0.2,76.6C0.4,78.5 0.7,80.6 1.2,82.5C1.7,84.4 2.4,86.2 3.3,88.1C4.3,90.1 5.7,92.1 7.1,94.1C8.5,96 10.9,99 11.6,100L100,100L100,0Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-clip-about-panel: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M41.5,0C41.6,1 41.5,3.9 41.7,5.9C41.9,7.9 42.3,9.9 42.6,11.8C42.8,13.8 43.1,15.6 43.3,17.5C43.4,19.5 43.3,21.5 43.3,23.5C43.2,25.4 42.8,27.4 42.7,29.4C42.7,31.4 43.1,33.3 43.1,35.3C43.1,37.3 42.8,39.3 42.6,41.2C42.3,43.2 48.6,45.2 41.5,47.2C34.4,49.1 0.1,50.9 0,52.8C-0.1,54.8 33.9,56.8 40.8,58.8C47.8,60.7 41.3,62.7 41.7,64.7C42.1,66.7 42.8,68.6 43.4,70.6C44.1,72.6 45,74.6 45.7,76.5C46.3,78.5 46.8,80.5 47.2,82.5C47.7,84.4 47.7,86.2 48.3,88.2C48.8,90.1 49.6,92.1 50.5,94.1C51.5,96.1 53.4,99 54,100L100,100L100,0Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-clip-about-mission: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M8.3,0C8.1,1 7.5,3.8 7.1,5.8C6.7,7.7 6.4,9.9 6,11.9C5.7,13.8 5.5,15.7 5.2,17.6C5,19.5 4.8,21.4 4.6,23.4C4.4,25.4 4.2,27.5 4.2,29.5C4.1,31.5 4.1,33.3 4.2,35.3C4.2,37.2 4.4,39 4.6,41C4.7,43 4.9,45.1 5,47.1C5.1,49.1 5.3,50.9 5.4,52.9C5.5,54.9 5.6,57 5.6,59C5.7,61 5.6,62.8 5.6,64.7C5.6,66.7 5.7,68.5 5.6,70.5C5.5,72.5 5.2,74.6 5,76.6C4.8,78.6 4.7,80.5 4.4,82.4C4.1,84.3 3.8,86.2 3.3,88.1C2.9,90.1 2.2,92.3 1.7,94.2C1.1,96.2 0.3,99 0,100L100,100L100,0Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-clip-about-sunset: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M0,0L100,0C99.6,1 98.3,4 97.9,6C97.4,8 97.3,10.1 97.1,12C97,13.9 97.1,15.5 97.1,17.4C97.1,19.3 97.2,21.4 97.1,23.4C97.1,25.3 97,27.3 96.8,29.3C96.5,31.3 96,33.3 95.7,35.3C95.4,37.3 95.9,39.3 95,41.3C94.1,43.3 91.2,45.4 90.4,47.3C89.5,49.2 90.1,50.8 90,52.7C89.9,54.6 90,56.7 90,58.7C90,60.7 90.5,62.7 90,64.7C89.5,66.7 87.6,68.7 86.8,70.7C86,72.7 85.7,74.7 85.4,76.6C85,78.6 85,80.7 84.6,82.6C84.3,84.5 84,86.1 83.2,88C82.4,89.9 80.9,92 79.6,94C78.4,96 76.4,99 75.7,100L0,100Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");

	/* Deckled (torn) paper edge for the archival print. Hand-authored: the
	   comp's torn edge is finer than the tracer's scanline resolution. */
	--bb-deckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M1.6,2.4 L8,1 L14,2.6 L21,1.2 L28,2.8 L35,1.4 L42,2.6 L49,1.2 L56,2.8 L63,1.4 L70,2.6 L77,1.2 L84,2.8 L91,1.4 L98.4,2.4 L97,9 L98.6,16 L97.2,23 L98.8,31 L97.4,39 L98.6,47 L97.2,55 L98.8,63 L97.4,71 L98.6,79 L97.2,87 L98.4,97.6 L91,99 L84,97.4 L77,98.8 L70,97.2 L63,98.6 L56,97.4 L49,98.8 L42,97.2 L35,98.6 L28,97.4 L21,98.8 L14,97.2 L8,99 L1.6,97.6 L3,87 L1.4,79 L2.6,71 L1.2,63 L2.8,55 L1.4,47 L2.6,39 L1.2,31 L2.8,23 L1.4,16 L3,9 Z' fill='%23fff'/%3E%3C/svg%3E");

	--bb-clip-quote-shape: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M50.7,0L100,0L100,95.1C98.9,94.5 95.6,92.4 93.4,91.3C91.2,90.3 89,89.3 86.7,88.7C84.5,88.1 82.2,88.4 80,87.7C77.7,86.9 75.5,83.9 73.3,84C71.1,84.1 68.9,87 66.7,88.2C64.5,89.5 62.3,90.4 60.1,91.4C57.9,92.4 55.7,93.2 53.5,94.1C51.2,95 48.9,96.2 46.7,96.9C44.4,97.7 42.3,98.2 40.1,98.7C37.8,99.2 35.6,99.6 33.4,99.8C31.2,100 29,99.9 26.8,99.7C24.6,99.5 22.4,99 20.2,98.4C17.9,97.8 15.6,97.1 13.4,96.1C11.2,95.1 9,93.7 6.8,92.5C4.6,91.3 1.2,89.5 0.1,88.9C14.6,98.9 10.2,95.3 7.7,93.2C5.2,91 2.4,89.2 1.1,87C-0.2,84.8 0.2,82.4 0.1,80.1C-0.1,77.9 0,75.6 0,73.3C0,71 0.1,68.6 0.2,66.4C0.3,64.3 0.4,62.4 0.6,60.3C0.7,58.1 0.9,55.7 1.1,53.4C1.3,51.1 1.6,48.9 1.9,46.6C2.2,44.3 2.6,41.9 3,39.7C3.4,37.6 3.7,35.7 4.2,33.6C4.7,31.4 5.3,29 6,26.7C6.7,24.4 7.3,22.1 8.2,19.9C9.1,17.6 10.3,15.2 11.4,13C12.5,10.8 8.1,9 14.7,6.8C21.2,4.7 44.7,1.1 50.7,0Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-divider-impact-top: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M0,0C1,6.3 3.9,29.2 5.8,37.5C7.8,45.8 9.8,45.8 11.8,50C13.8,54.2 15.7,62.5 17.7,62.5C19.6,62.5 21.6,54.2 23.5,50C25.5,45.8 27.4,37.5 29.4,37.5C31.3,37.5 33.4,47.9 35.3,50C37.3,52.1 39.2,50 41.2,50C43.1,50 45,52.1 47,50C49,47.9 51,41.7 53,37.5C55,33.3 56.9,31.3 58.8,25C60.8,18.8 62.7,4.2 64.7,0C66.6,-4.2 68.7,-6.2 70.6,0C72.6,6.3 74.5,25 76.5,37.5C78.4,50 80.4,64.6 82.3,75C84.3,85.4 86.2,97.9 88.2,100C90.2,102.1 92.2,95.8 94.2,87.5C96.1,79.2 99,56.3 100,50L100,100L0,100Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-divider-impact-bot: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M0,33.3C1,29.6 3.9,16.7 5.8,11.1C7.8,5.6 9.8,0 11.8,0C13.8,0 15.7,5.6 17.7,11.1C19.6,16.7 21.6,25.9 23.5,33.3C25.5,40.7 27.4,48.1 29.4,55.6C31.3,63 33.4,72.2 35.3,77.8C37.3,83.3 39.2,85.2 41.2,88.9C43.1,92.6 45,98.1 47,100C49,101.9 51,101.9 53,100C55,98.1 56.9,92.6 58.8,88.9C60.8,85.2 62.7,83.3 64.7,77.8C66.6,72.2 68.7,63 70.6,55.6C72.6,48.1 74.5,40.7 76.5,33.3C78.4,25.9 80.4,16.7 82.3,11.1C84.3,5.6 86.2,1.9 88.2,0C90.2,-1.9 92.2,-1.9 94.2,0C96.1,1.9 99,9.3 100,11.1L100,0L0,0Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");
	--bb-divider-donate-top: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 preserveAspectRatio=%27none%27 viewBox=%270 0 100 100%27%3E%3Cpath d=%27M0,0C1,0.4 3.9,1.5 5.8,2.7C7.8,3.9 9.8,4.5 11.8,7.1C13.8,9.6 15.7,14.2 17.7,18C19.6,21.8 21.6,26.1 23.5,29.9C25.5,33.7 27.4,37 29.4,40.7C31.3,44.4 33.4,47.2 35.3,52C37.3,56.9 39.2,64.1 41.2,69.7C43.1,75.3 45,81.6 47,85.5C49,89.4 51,91.3 53,93.1C55,94.9 56.9,103.8 58.8,96.2C60.8,88.7 62.7,56 64.7,48C66.6,39.9 68.7,48 70.6,48C72.6,48 74.5,50.5 76.5,48C78.4,45.5 80.4,32.2 82.3,33.1C84.3,33.9 86.2,46.6 88.2,53C90.2,59.5 92.2,67.1 94.2,71.7C96.1,76.4 99,79.4 100,80.9L100,100L0,100Z%27 fill=%27%23fff%27/%3E%3C/svg%3E");

	/* Wave amplitudes as a fraction of width, measured from the comp. A band's
	   curved edge is a fixed-ratio strip rather than a mask on the band itself:
	   the band's height is driven by its content, and stretching a traced curve
	   to an arbitrary height turns it into a different curve. As a strip, the
	   amplitude scales with width and the shape is preserved at any height. */
	/* The green quote form is a SHAPE, not a band: in the comp it begins 26%
	   across with a large rounded top-left corner and bleeds right. Building it
	   as a full-width band with a wave on top was simply the wrong object. */
	--bb-quote-width: 74%;
	--bb-ar-quote: 4.342;
	--bb-amp-impact-top: 0.93;
	--bb-amp-impact-bot: 1.05;
	--bb-amp-donate: 3.17;

	/* Measured from the comp. */
	--bb-ar-hero: 1.438;
	--bb-ar-card-a: 1.546;
	--bb-ar-card-b: 1.365;
	--bb-ar-card-c: 1.232;
	--bb-ar-event: 2.155;
	--bb-ar-student: 2.068;
	--bb-ar-about-hero: 1.435;
	--bb-ar-about-mission: 1.727;
	--bb-ar-about-sunset: 1.677;

	--bb-header-h: clamp( 5.5rem, 9vw, 7.5rem );
}


/* --------------------------------------------------------------------------
   Headings inside the art-directed coloured panels
   --------------------------------------------------------------------------
   theme.json colours every heading forest so headings separate from body text
   on cream. Inside these panels that renders forest-on-forest (invisible) or
   forest-on-terracotta (about 2:1). Each panel already declares a text colour
   the contrast gate checks, so inheriting is correct in every case.

   style.css handles this for panels built from core blocks, which carry
   .has-*-background-color. These sections are hand-authored markup and carry
   their own class names instead, so they need naming here too. */

.bb-home-impact :is( h1, h2, h3, h4, h5, h6 ),
.bb-home-donate :is( h1, h2, h3, h4, h5, h6 ),
.bb-about-story__panel :is( h1, h2, h3, h4, h5, h6 ),
.bb-about-cta :is( h1, h2, h3, h4, h5, h6 ) {
	color: inherit;
}

/* Brush strokes sitting on the dark panels need the light accent, not the
   cream-side terracotta, which measures 1.84:1 on forest-deep. */
.bb-home-impact .bb-section-brush,
.bb-about-story__panel .bb-section-brush {
	color: var(--wp--preset--color--terracotta-on-dark);
}

/* --------------------------------------------------------------------------
   Header overlays the hero
   --------------------------------------------------------------------------
   In the comp the hero photograph reaches the very top of the page, to the
   right of the navigation — so the header cannot sit on its own cream band.
   WordPress adds the `home` body class, which scopes this to the front page
   without touching the shared header pattern. */

/* THE OVERLAY IS CONDITIONAL.
   In the comp the navigation occupies ~23% of the page width, which leaves it
   clear of the photograph. On the web that proportion is only achievable with
   unreadably small type below ~1800px, so at ordinary widths the nav WILL run
   onto the dark photo, where forest-on-photo cannot be read.

   So the header only overlays the composition when it genuinely clears: the nav
   is left-aligned after the wordmark, and the overlay applies from 1200px up.
   Below that the header keeps its own cream band and the composition starts
   underneath it — a small departure from the comp, in exchange for legible
   navigation at every width. */

/* The header is taken OUT OF FLOW rather than pulled up with a negative
   margin. A negative margin has to match the header's rendered height, and that
   height changes with the font scale and the viewport — the first attempt left
   a 103px cream strip above the photo because the estimate was short. Absolute
   positioning needs no estimate: the hero simply starts at the top of the page
   and reserves room for the nav with its own padding.

   THIS BREAKPOINT MUST MATCH the one that hides .bb-hero__art further down
   (@media max-width: 899px). They are two halves of ONE decision — "is the hero
   an art-directed composition with the header laid over it, or the stacked
   fallback?" — and they must not be allowed to drift apart.

   They had drifted: the header only went out of flow at 1200px while the
   artwork appeared from 900px, so across 900-1199px the composition rendered
   with the header sitting ABOVE it on its own cream band instead of over it.
   That is the range in which the placeholder artwork's baked-in comp chrome
   (see assets/images/README.md) stopped being covered by the real header and
   became plainly visible as a second nav and a second Donate button. */
@media ( min-width: 900px ) {
	body.home .wp-site-blocks > header.wp-block-template-part {
		position: absolute;
		inset-inline: 0;
		top: 0;
		z-index: 20;
		background: transparent;
	}

	body.home .wp-site-blocks > header.wp-block-template-part .wp-block-group.has-base-background-color {
		background: transparent !important;
	}

	body.home .wp-site-blocks {
		position: relative;
	}
}

/* Core gives .wp-site-blocks > * a block-start margin. With the header taken
   out of flow, <main> becomes the first in-flow child and that margin COLLAPSES
   THROUGH the unpadded .wp-site-blocks, pushing the whole page down 24px and
   leaving a cream strip above the photo. Zeroing it on the front page is the
   fix; the hero supplies its own spacing. */
body.home .wp-site-blocks > main.wp-block-group {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Hero composition
   --------------------------------------------------------------------------
   ONE SVG carries the photograph and the green form. They share a boundary in
   the comp — photoBottom(x) === greenTop(x) — so as two separately positioned
   HTML elements they drifted apart and opened a cream gap at some widths.
   Inside one viewBox that cannot happen: the photo is clipped to the green's
   BASE curve and the green is painted over it, so what looks like a seam is
   just the green's own top edge with photograph behind it.

   The SVG scales as a unit (width:100%, height auto), and the copy is placed in
   PERCENTAGES of the same box, so text and artwork track each other exactly at
   every viewport width. */

.bb-hero {
	position: relative;
	isolation: isolate;
}

/* The navigation has to scale WITH the composition, not sit at a fixed size.
   In the comp the nav occupies ~23% of the page width; at a fixed rem size it
   grew relatively as the viewport narrowed and "Media"/"About" ended up on the
   dark photograph, where forest-on-photo is unreadable. Sizing it against the
   same 856px artboard the artwork uses keeps it clear at every width. */
body.home .bb-header__bar .wp-block-navigation {
	font-size: clamp( 0.72rem, 1.05vw, 0.95rem );
}

/* Left-aligned, not centred: centring pushed the last two items onto the
   photograph. Hugging the wordmark buys ~150px of clearance. */
body.home .bb-header__nav {
	justify-content: flex-start;
	margin-inline-start: clamp( 1rem, 3vw, 3rem );
}

body.home .bb-header__bar .wp-block-navigation .wp-block-navigation__container {
	gap: clamp( 0.55rem, 2.34vw, 2.1rem );
}

body.home .bb-header__bar .bb-wordmark__name {
	font-size: clamp( 1rem, 2.1vw, 1.5rem );
}

body.home .bb-header__bar .bb-wordmark__place {
	font-size: clamp( 0.36rem, 0.7vw, 0.5rem );
}

body.home .bb-header__bar .wp-block-button__link {
	font-size: clamp( 0.66rem, 1.17vw, 0.9rem );
	padding: 0.8em 1.3em;
}

.bb-hero__art {
	position: relative;
	z-index: 0;
}

.bb-hero__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Copy sits over the cream side of the composition. Percentages of the SVG box
   keep it in the same place relative to the artwork at any size. */
.bb-hero__copy {
	position: absolute;
	z-index: 2;
	left: 5.5%;
	top: 24%;
	width: 33%;
}

.bb-hero__title {
	font-family: var(--wp--preset--font-family--display);
	/* 5.14vw is the comp's headline size expressed against its 856px artboard,
	   so the type grows with the artwork; clamped so it stops scaling on very
	   wide screens where it would otherwise become billboard-sized. */
	font-size: clamp( 1.6rem, 5.14vw, 4.4rem );
	font-weight: 500;
	line-height: 1.03;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--forest);
	margin: 0;
}

.bb-hero__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--terracotta-text);
}

.bb-hero__brush {
	display: block;
	width: 62%;
	height: clamp( 0.3rem, 0.8vw, 0.7rem );
	margin-block: 0.3em 0.9em;
	color: var(--wp--preset--color--terracotta);
}

.bb-hero__lead {
	font-size: clamp( 0.75rem, 1.32vw, 1.06rem );
	line-height: 1.6;
	margin: 0 0 1.4em;
}

.bb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp( 0.6rem, 1.8vw, 1.6rem );
}

.bb-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	padding: 0.9em 1.5em;
	border-radius: 5px;
	background: var(--wp--preset--color--terracotta-text);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-weight: 600;
	font-size: clamp( 0.7rem, 1.17vw, 0.95rem );
	line-height: 1;
}

.bb-btn-primary:hover,
.bb-btn-primary:focus {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
}

.bb-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	color: var(--wp--preset--color--forest);
	text-decoration: none;
	font-weight: 600;
	font-size: clamp( 0.7rem, 1.17vw, 0.95rem );
	line-height: 1;
}

.bb-btn-ghost__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.bb-btn-ghost:hover,
.bb-btn-ghost:focus {
	color: var(--wp--preset--color--terracotta-text);
}

/* Quotation sits on the green form. */
.bb-hero__quote {
	position: absolute;
	z-index: 2;
	left: 35%;
	top: 76%;
	width: 34%;
	margin: 0;
	color: var(--wp--preset--color--base);
}

.bb-hero__quote-glyph {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1rem, 3vw, 2.6rem );
	line-height: 0.5;
	color: var(--wp--preset--color--terracotta-on-dark);
	margin-bottom: 0.35em;
}

.bb-hero__quote p {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp( 0.95rem, 3.04vw, 2.5rem );
	line-height: 1.24;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Botanical line art
   --------------------------------------------------------------------------
   Purely decorative, aria-hidden in the markup. Hidden on small screens where
   it would crowd the text rather than frame it. */

/* Decorative only, and never allowed to widen the page: a botanical hanging a
   few pixels past the viewport edge produced a horizontal scrollbar across the
   whole site. The sections that host them clip on the inline axis. */
.bb-home-programs,
.bb-home-events,
.bb-home-donate,
.bb-about-hero,
.bb-about-story,
.bb-about-donors {
	overflow-x: clip;
}

.bb-botanical {
	position: absolute;
	max-width: 100%;
	pointer-events: none;
	user-select: none;
	z-index: 1;
	color: var(--wp--preset--color--gold);
	opacity: 0.5;
}

.bb-botanical--hero-grass {
	right: 2%;
	bottom: -14%;
	width: clamp( 6rem, 13vw, 12rem );
	opacity: 0.65;
}

.bb-botanical--quote-poppy {
	right: 0;
	bottom: 0;
	width: min( 31%, 26rem );
	opacity: 1;
	z-index: 1;
}

.bb-botanical--quote-poppy img {
	display: block;
	width: 100%;
	height: auto;
}

.bb-botanical--programs {
	right: 0;
	bottom: 6%;
	width: clamp( 5rem, 10vw, 9rem );
	opacity: 0.45;
}

.bb-botanical--events {
	right: 1%;
	top: 2%;
	width: clamp( 4rem, 8vw, 7rem );
	opacity: 0.4;
}

.bb-botanical--donate {
	left: 1%;
	bottom: 0;
	width: clamp( 4rem, 9vw, 8rem );
	color: var(--wp--preset--color--base);
	opacity: 0.35;
}

@media ( max-width: 781px ) {
	.bb-botanical {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Programs
   -------------------------------------------------------------------------- */

.bb-home-programs {
	position: relative;
	padding-block: clamp( 3rem, 7vw, 5rem ) clamp( 3rem, 8vw, 6rem );
	margin-top: clamp( -6rem, -7vw, -3rem );
}

.bb-home-programs__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	position: relative;
}

.bb-home-programs__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp( 2rem, 5vw, 3.5rem );
}

.bb-home-programs__intro {
	max-width: 26rem;
}

.bb-section-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.9rem, 4.2vw, 2.9rem );
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	margin: 0 0 0.75rem;
}

.bb-section-brush {
	display: block;
	width: 7.5rem;
	height: 0.55rem;
	color: var(--wp--preset--color--terracotta);
	margin-bottom: 1rem;
}

.bb-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--forest);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.25rem;
}

.bb-link-arrow:hover,
.bb-link-arrow:focus {
	color: var(--wp--preset--color--terracotta-text);
}

.bb-cards {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 1.25rem, 3vw, 2.75rem );
	align-items: start;
}

/* Staggered vertical rhythm — in the comp the middle card sits highest and the
   first sits lowest, which is what stops the row reading as a plain grid. */
.bb-card--a { margin-top: clamp( 1rem, 3vw, 2.75rem ); }
.bb-card--b { margin-top: 0; }
.bb-card--c { margin-top: clamp( 0.5rem, 1.5vw, 1.25rem ); }

.bb-card {
	position: relative;
}

/* Unmasked wrapper the badge anchors to; it matches the photo's box exactly. */
.bb-card__figure {
	position: relative;
}

/* Measured aspect ratios: authored at the comp's proportions, so the traced
   curve is never stretched into a different shape. */
.bb-card--a .bb-card__figure { aspect-ratio: var(--bb-ar-card-a); }
.bb-card--b .bb-card__figure { aspect-ratio: var(--bb-ar-card-b); }
.bb-card--c .bb-card__figure { aspect-ratio: var(--bb-ar-card-c); }

.bb-card__media {
	position: absolute;
	inset: 0;
}

.bb-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-card--a .bb-card__media {
	-webkit-mask-image: var(--bb-clip-card-a);
	mask-image: var(--bb-clip-card-a);
}

.bb-card--b .bb-card__media {
	-webkit-mask-image: var(--bb-clip-card-b);
	mask-image: var(--bb-clip-card-b);
}

.bb-card--c .bb-card__media {
	-webkit-mask-image: var(--bb-clip-card-c);
	mask-image: var(--bb-clip-card-c);
}

/* Badge straddles the lower-left edge of the photo, half on, half off. */
.bb-card__badge {
	position: absolute;
	left: 6%;
	bottom: -1.7rem;
	width: 3.4rem;
	height: 3.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 2;
}

.bb-card--a .bb-card__badge {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--terracotta-text);
}

.bb-card--b .bb-card__badge {
	background: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--base);
}

.bb-card--c .bb-card__badge {
	background: var(--wp--preset--color--sage);
	/* Sage is 2.23:1 on cream and must never carry meaning alone; the forest
	   stroke does that, and every card is also labelled in text. */
	color: var(--wp--preset--color--forest);
}

.bb-card__body {
	padding-top: 3.1rem;
}

.bb-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.2rem, 2.4vw, 1.6rem );
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	margin: 0 0 0.5rem;
}

.bb-card__text {
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 1rem;
	max-width: 20rem;
}

/* --------------------------------------------------------------------------
   Impact band
   -------------------------------------------------------------------------- */

.bb-home-impact {
	position: relative;
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
	padding-block: clamp( 3.5rem, 7vw, 5.5rem );
	margin-block: calc( var(--bb-amp-impact-top) * 1vw ) calc( var(--bb-amp-impact-bot) * 1vw );
}

.bb-home-impact::before,
.bb-home-impact::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	background-color: inherit;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

.bb-home-impact::before {
	bottom: 100%;
	height: calc( var(--bb-amp-impact-top) * 1vw );
	-webkit-mask-image: var(--bb-divider-impact-top);
	mask-image: var(--bb-divider-impact-top);
}

.bb-home-impact::after {
	top: 100%;
	height: calc( var(--bb-amp-impact-bot) * 1vw );
	-webkit-mask-image: var(--bb-divider-impact-bot);
	mask-image: var(--bb-divider-impact-bot);
}

.bb-home-impact__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp( 1.5rem, 4vw, 3.5rem );
}

.bb-home-impact__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.5rem, 3vw, 2.1rem );
	font-weight: 500;
	line-height: 1.08;
	margin: 0;
	flex: 0 0 auto;
}

.bb-home-impact__title span {
	display: block;
}

.bb-home-impact__stats {
	display: flex;
	flex: 1;
	margin: 0;
	min-width: 0;
}

.bb-home-impact__item {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	padding-inline: clamp( 0.4rem, 1.4vw, 1.1rem );
	border-inline-start: 1px solid rgba( 201, 162, 39, 0.45 );
}

.bb-home-impact__item:first-child {
	border-inline-start: 0;
}

.bb-home-impact__icon {
	display: block;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.5rem;
}

.bb-home-impact__icon svg {
	margin-inline: auto;
}

.bb-home-impact__figure {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.5rem, 3.4vw, 2.3rem );
	font-weight: 500;
	line-height: 1.05;
}

.bb-home-impact__label {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.35;
	opacity: 0.88;
}

/* --------------------------------------------------------------------------
   What's happening
   -------------------------------------------------------------------------- */

.bb-home-events {
	position: relative;
	padding-block: clamp( 3rem, 7vw, 5rem );
}

.bb-home-events__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	position: relative;
}

.bb-home-events__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp( 1.5rem, 4vw, 3.5rem );
	align-items: start;
	margin-top: clamp( 1.5rem, 4vw, 2.5rem );
}

.bb-feature {
	position: relative;
}

.bb-feature__media {
	aspect-ratio: var(--bb-ar-student);
	/* The event photo's own traced silhouette includes the cream card that
	   overlaps its lower-left, which masked as a notch. The card is a separate
	   element here, so the photo uses a clean traced blob. */
	-webkit-mask-image: var(--bb-clip-student);
	mask-image: var(--bb-clip-student);
}

.bb-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Cream card overlapping the lower-left of the photo, as in the comp. */
/* Overlaps the lower-left of the photo. Uniform soft corners rather than the
   alternating 8px/34px pair, which produced a lopsided tail against the blob. */
.bb-feature__card {
	position: relative;
	margin: -5rem 16% 0 0;
	padding: 1.4rem 1.6rem 1.5rem;
	background: var(--wp--preset--color--base);
	border-radius: 6px 26px 26px 26px;
	z-index: 2;
}

.bb-feature__date {
	color: var(--wp--preset--color--terracotta-text);
	margin: 0 0 0.4rem;
}

.bb-feature__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.2rem, 2.4vw, 1.6rem );
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	margin: 0 0 0.4rem;
}

.bb-feature__text {
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 0.9rem;
}

.bb-eventlist {
	list-style: none;
	margin: 0;
	padding: clamp( 1.25rem, 3vw, 2rem );
	background: var(--wp--preset--color--base-alt);
	border-radius: 8px 34px 8px 34px;
}

.bb-eventlist__item + .bb-eventlist__item {
	border-top: 1px solid rgba( 42, 42, 36, 0.16 );
}

.bb-eventlist__link {
	display: grid;
	grid-template-columns: 6.5rem 1fr auto;
	gap: 0.9rem;
	align-items: center;
	padding-block: 1rem;
	text-decoration: none;
	color: inherit;
}

.bb-eventlist__kind {
	display: block;
	color: var(--wp--preset--color--terracotta-text);
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

.bb-eventlist__date {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	color: var(--wp--preset--color--forest);
	line-height: 1.15;
}

.bb-eventlist__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	color: var(--wp--preset--color--forest);
	line-height: 1.25;
}

.bb-eventlist__link:hover .bb-eventlist__title,
.bb-eventlist__link:focus .bb-eventlist__title {
	text-decoration: underline;
}

.bb-eventlist__arrow {
	color: var(--wp--preset--color--terracotta-text);
}

.bb-home-events__all {
	margin-top: 1.1rem;
}

/* --------------------------------------------------------------------------
   Student story
   -------------------------------------------------------------------------- */

.bb-home-story {
	position: relative;
	padding-block: clamp( 2rem, 5vw, 3.5rem ) clamp( 4rem, 9vw, 7rem );
}

.bb-home-story__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp( 1.5rem, 4vw, 3.5rem );
	align-items: center;
}

.bb-home-story__media {
	aspect-ratio: var(--bb-ar-student);
	-webkit-mask-image: var(--bb-clip-student);
	mask-image: var(--bb-clip-student);
}

.bb-home-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-home-story__quote {
	margin: 1rem 0 0;
	border: 0;
	padding: 0;
}

.bb-home-story__quote p {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp( 1.25rem, 2.7vw, 1.8rem );
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--forest);
	margin: 0;
}

.bb-home-story__context {
	font-size: var(--wp--preset--font-size--small);
	margin: 1rem 0 0.4rem;
}

.bb-home-story__cite {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	margin: 0 0 1rem;
}

/* --------------------------------------------------------------------------
   Donation band
   -------------------------------------------------------------------------- */

.bb-home-donate {
	position: relative;
	background-color: var(--wp--preset--color--terracotta-text);
	color: var(--wp--preset--color--base);
	padding-block: clamp( 2.5rem, 5vw, 4rem ) clamp( 3rem, 7vw, 5rem );
	margin-top: calc( var(--bb-amp-donate) * 1vw );
}

.bb-home-donate::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: calc( var(--bb-amp-donate) * 1vw );
	background-color: inherit;
	-webkit-mask-image: var(--bb-divider-donate-top);
	mask-image: var(--bb-divider-donate-top);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

.bb-home-donate__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: grid;
	grid-template-columns: 1.15fr 0.85fr 0.6fr;
	gap: clamp( 1.25rem, 3vw, 2.5rem );
	align-items: center;
	position: relative;
}

.bb-home-donate__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.7rem, 3.8vw, 2.7rem );
	font-weight: 500;
	line-height: 1.08;
	margin: 0 0 1rem;
}

.bb-home-donate__title em {
	display: block;
	font-style: italic;
	font-weight: 400;
}

.bb-home-donate__text {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	max-width: 24rem;
}

.bb-home-donate__media {
	aspect-ratio: var(--bb-ar-card-b);
	-webkit-mask-image: var(--bb-clip-card-b);
	mask-image: var(--bb-clip-card-b);
}

.bb-home-donate__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-give {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	aspect-ratio: 1;
	max-width: 11rem;
	margin-inline: auto;
	padding: 1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--terracotta-text);
	text-decoration: none;
	text-align: center;
}

.bb-give:hover,
.bb-give:focus {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--terracotta-text);
}

.bb-give__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 500;
}

.bb-give__sub {
	font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media ( max-width: 899px ) {
	/* Back into normal flow. Below this width the hero photo stacks above the
	   text instead of bleeding behind the nav, so an out-of-flow header would
	   simply sit on top of the photo. */
	body.home .wp-site-blocks > header.wp-block-template-part {
		position: relative;
	}

	body.home .wp-site-blocks > main.wp-block-group {
		margin-block-start: revert;
	}

	body.home .wp-site-blocks > header.wp-block-template-part,
	body.home .wp-site-blocks > header.wp-block-template-part .wp-block-group.has-base-background-color {
		background: var(--wp--preset--color--base) !important;
	}

	/* Below this width the composition stops working as art direction: the copy
	   would be a few percent of a narrow viewport. The SVG is dropped and the
	   photograph and green form become ordinary stacked blocks. */
	.bb-hero__art {
		display: none;
	}

	.bb-hero {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		padding-block: 1.5rem 0;
	}

	.bb-hero::before {
		content: "";
		order: -1;
		display: block;
		width: 100%;
		aspect-ratio: 4 / 3;
		/*
		 * hero-robotics.jpg is NOT a photograph — it is a 607x500 crop of the
		 * whole design comp, so it has the comp's own navigation, headline and
		 * green quote band baked into its pixels. (Its Donate button no longer
		 * is: that one WAS rendering, so it has been painted out of the file —
		 * see patterns/hero-cradle-to-graduation.php.) Above 900px none of the
		 * rest matters: the SVG in the hero pattern carves the photographic
		 * region out of it with clip-path.
		 *
		 * Here there is no SVG and no clip path, so `center / cover` painted
		 * the entire comp screenshot — a second navigation bar and a duplicate
		 * "Empowered today." quote, stacked above the real ones.
		 *
		 * These numbers reproduce that clip in background coordinates. The
		 * clean photographic region of the file is x 188-607, y 60-350
		 * (419x290). Its aspect (1.445) is wider than this box (4/3), so
		 * height binds: scaling to 500/290 = 172.414% makes the crop's height
		 * exactly fill the box, and the two offsets place the crop's centre in
		 * view. The visible window is then 92.3% of the crop's width — always
		 * INSIDE it, so no comp chrome can re-enter at any viewport size.
		 *
		 * Derivation: pos = 100 * offset / overflow, per axis, in element-height
		 * units. Recompute both values if the file is ever re-cropped.
		 */
		background: url( "../images/hero-robotics.jpg" ) 92.66% 28.57% / auto 172.414% no-repeat;
		-webkit-mask-image: var(--bb-clip-card-b);
		mask-image: var(--bb-clip-card-b);
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}

	.bb-hero__copy,
	.bb-hero__quote {
		position: static;
		left: auto;
		top: auto;
		width: auto;
	}

	.bb-hero__copy {
		padding-inline: var(--wp--preset--spacing--40);
	}

	.bb-hero__title {
		font-size: clamp( 2rem, 8vw, 2.8rem );
	}

	.bb-hero__lead {
		font-size: 1rem;
	}

	.bb-hero__quote {
		background: var(--wp--preset--color--forest);
		border-radius: 10px 40px 10px 40px;
		padding: 2rem 1.5rem;
		margin-inline: var(--wp--preset--spacing--40);
	}

	.bb-hero__quote p {
		font-size: 1.5rem;
	}

	.bb-cards,
	.bb-home-events__grid,
	.bb-home-story__inner,
	.bb-home-donate__inner {
		grid-template-columns: 1fr;
	}

	.bb-card--a,
	.bb-card--b,
	.bb-card--c {
		margin-top: 0;
	}

	.bb-home-impact__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.bb-home-impact__stats {
		flex-wrap: wrap;
		width: 100%;
	}

	.bb-home-impact__item {
		flex: 1 1 45%;
		text-align: start;
		border-inline-start: 0;
		border-block-start: 1px solid rgba( 201, 162, 39, 0.45 );
		padding-block: 1rem;
	}

	.bb-home-impact__icon svg {
		margin-inline: 0;
	}

	.bb-feature__card {
		margin-inline-end: 0;
		margin-top: -3rem;
	}

	.bb-give {
		max-width: 9rem;
	}
}

/* ==========================================================================
   ABOUT PAGE
   ==========================================================================
   Same visual language as the home page — bleeding photography behind organic
   curves — but a quieter rhythm, since the page is a narrative rather than a
   set of calls to action. */

/* --------------------------------------------------------------------------
   About hero
   -------------------------------------------------------------------------- */

.bb-about-hero {
	position: relative;
	padding-block: 0;
}

.bb-about-hero__grid {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	min-height: calc( min( 56vw, 52rem ) / var(--bb-ar-about-hero) );
	display: grid;
	align-items: center;
}

.bb-about-hero__media {
	position: absolute;
	top: 0;
	inset-inline-end: calc( 50% - 50vw );
	width: min( 56vw, 52rem );
	aspect-ratio: var(--bb-ar-about-hero);
	z-index: 0;
	-webkit-mask-image: var(--bb-clip-about-hero);
	mask-image: var(--bb-clip-about-hero);
}

.bb-about-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-about-hero__text {
	position: relative;
	z-index: 2;
	max-width: 32rem;
}

.bb-about-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 2.4rem, 5.6vw, 4.2rem );
	font-weight: 500;
	line-height: 1.03;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--forest);
	margin: 0;
}

.bb-about-hero__lead {
	font-size: clamp( 1rem, 1.6vw, 1.1rem );
	line-height: 1.6;
	max-width: 27rem;
	margin: 0 0 2rem;
}

/* Olive branch drifting in from the left margin. */
.bb-botanical--about-olive {
	left: 0;
	top: 46%;
	width: clamp( 4rem, 9vw, 8rem );
	color: var(--wp--preset--color--sage);
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Our Story
   -------------------------------------------------------------------------- */

.bb-about-story {
	position: relative;
	background: var(--wp--preset--color--base-alt);
	padding-block: clamp( 3rem, 8vw, 6rem );

	/* `clip`, NOT `hidden`. Both clip identically, but `overflow: hidden` is
	   programmatically scrollable and therefore counts as a SCROLL CONTAINER.
	   `animation-timeline: view()` resolves against the nearest ancestor scroll
	   container, so with `hidden` every timeline entry, the archival photo and
	   the sprig inside this section would resolve their timeline against a box
	   that never scrolls — the timeline would be inactive and the reveals in
	   motion.css would never run. `clip` is not a scroll container, so view()
	   correctly walks up to the root. The sibling sections above already use
	   `overflow-x: clip` for related reasons. */
	overflow: clip;
}

.bb-about-story__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: grid;
	grid-template-columns: 1fr 0.85fr;
	gap: clamp( 1.5rem, 4vw, 3rem );
	align-items: start;
	position: relative;
	z-index: 2;
}

/* Reserve the panel's width so the archival print stops short of it. The photo
   column otherwise ran under the absolutely-positioned forest panel and hid the
   C2G pull quote behind it — the panel is above in paint order, so the overlap
   read as truncated text rather than as an overlap. */
@media ( min-width: 900px ) {
	.bb-about-story__inner {
		padding-inline-end: min( 48vw, 42rem );
	}
}

/* The forest panel bleeds off the right edge of the viewport, so it is
   positioned against the section rather than the content column. */
.bb-about-story__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: calc( 50% - 50vw );
	width: min( 46vw, 40rem );
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
	z-index: 1;
	-webkit-mask-image: var(--bb-clip-about-panel);
	mask-image: var(--bb-clip-about-panel);
	display: flex;
	align-items: center;
}

.bb-about-story__panel-inner {
	/*
	 * The LEFT inset is a percentage of the panel, not a rem/vw clamp.
	 *
	 * --bb-clip-about-panel is traced from the comp with
	 * preserveAspectRatio="none", so its left edge sits at a fixed PERCENTAGE
	 * of this panel's width — about 41.5-43.6% across the vertical band the
	 * centred content occupies. (It reaches x=0 only in the narrow "beak"
	 * around mid-height, which adds visible area rather than removing it.)
	 *
	 * A rem-based inset cannot track that. At 1440px the panel is 640px wide,
	 * so the green begins at ~266px, while clamp(3rem, 9vw, 7rem) resolved to
	 * 112px — the first 154px of every line was masked away and the pull quote
	 * read as "n Cradle to Graduation...". 46% clears the widest point of the
	 * curve with roughly 15px to spare at that width, and stays correct at any
	 * other width because both values scale with the same box.
	 *
	 * max-width must be none: with a percentage inset this large, a 30rem cap
	 * would leave only ~125px of content box.
	 */
	padding-block: clamp( 2rem, 5vw, 4rem );
	padding-inline-start: 46%;
	padding-inline-end: clamp( 1.5rem, 4vw, 3rem );
	max-width: none;
}

.bb-about-story__glyph {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 3rem;
	line-height: 0.6;
	color: var(--wp--preset--color--terracotta-on-dark);
	margin-bottom: 0.75rem;
}

.bb-about-story__c2g {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp( 1.4rem, 3.1vw, 2.3rem );
	line-height: 1.2;
	margin: 0 0 1.25rem;
}

.bb-about-story__sub {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.05rem, 2vw, 1.4rem );
	margin: 0;
	opacity: 0.95;
}

.bb-botanical--about-sprig {
	right: 16%;
	bottom: 6%;
	width: clamp( 4rem, 9vw, 8rem );
	color: var(--wp--preset--color--gold);
	opacity: 0.6;
}

/* Torn-edge archival print. */
.bb-archival-photo {
	margin: 0;
	position: relative;
	max-width: 20rem;
	padding: 0.85rem 0.85rem 2.2rem;
	background: #f6efe1;
	transform: rotate( -1.6deg );
	box-shadow: 0 4px 18px rgba( 42, 42, 36, 0.2 );
	/* Deckled border: a fine repeating notch around the print, so the paper
	   edge reads as torn rather than guillotined. */
	-webkit-mask-image: var(--bb-deckle);
	mask-image: var(--bb-deckle);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.bb-archival-photo img {
	display: block;
	width: 100%;
	height: auto;
	filter: sepia( 0.42 ) contrast( 1.04 ) brightness( 0.98 );
}

.bb-about-story__timeline {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	position: relative;
	max-width: 24rem;
}

.bb-about-story__timeline::before {
	content: "";
	position: absolute;
	inset-inline-start: 5px;
	inset-block: 0.7rem 1.2rem;
	width: 2px;
	background: rgba( 143, 69, 41, 0.3 );
}

.bb-about-story__entry {
	position: relative;
	display: grid;
	grid-template-columns: 3.4rem 1fr;
	gap: 0.85rem;
	padding-inline-start: 1.65rem;
	padding-block: 0.55rem;
}

.bb-about-story__entry::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 1.05rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--terracotta-text);
}

.bb-about-story__year {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	line-height: 1.3;
}

.bb-about-story__what {
	font-size: 0.82rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Mission
   -------------------------------------------------------------------------- */

.bb-about-mission {
	position: relative;
	padding-block: clamp( 3rem, 8vw, 6rem );
}

.bb-about-mission__grid {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	min-height: calc( min( 54vw, 48rem ) / var(--bb-ar-about-mission) );
	display: grid;
	align-items: center;
}

.bb-about-mission__media {
	position: absolute;
	top: 0;
	inset-inline-end: calc( 50% - 50vw );
	width: min( 54vw, 48rem );
	aspect-ratio: var(--bb-ar-about-mission);
	z-index: 0;
	-webkit-mask-image: var(--bb-clip-about-mission);
	mask-image: var(--bb-clip-about-mission);
}

.bb-about-mission__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-about-mission__text {
	position: relative;
	z-index: 2;
	max-width: 31rem;
}

.bb-about-mission__text p {
	font-size: var(--wp--preset--font-size--small);
	max-width: 27rem;
}

/* Secondary to the primary button above it, so it sits on its own line rather
   than competing for the same row. */
.bb-about-mission__board {
	display: inline-flex;
	margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Donor thanks
   -------------------------------------------------------------------------- */

.bb-about-donors {
	position: relative;
	padding-block: clamp( 2rem, 5vw, 3.5rem ) clamp( 3rem, 7vw, 5rem );
}

.bb-about-donors__grid {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp( 1.5rem, 4vw, 3.5rem );
	align-items: center;
	min-height: calc( min( 34vw, 28rem ) / var(--bb-ar-about-sunset) );
}

.bb-about-donors__media {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	inset-inline-start: calc( 50% - 50vw );
	width: min( 34vw, 28rem );
	aspect-ratio: var(--bb-ar-about-sunset);
	z-index: 0;
	-webkit-mask-image: var(--bb-clip-about-sunset);
	mask-image: var(--bb-clip-about-sunset);
}

.bb-about-donors__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-about-donors__text {
	grid-column: 2;
	position: relative;
	z-index: 2;
}

.bb-about-donors__text p {
	font-size: var(--wp--preset--font-size--small);
	max-width: 32rem;
}

.bb-botanical--about-donors {
	right: 2%;
	top: 8%;
	width: clamp( 3.5rem, 7vw, 6rem );
	opacity: 0.4;
}

/* --------------------------------------------------------------------------
   Carry the mission forward
   -------------------------------------------------------------------------- */

.bb-about-cta {
	position: relative;
	background-color: var(--wp--preset--color--terracotta-text);
	color: var(--wp--preset--color--base);
	padding-block: clamp( 2.5rem, 5vw, 4rem ) clamp( 2.5rem, 6vw, 4rem );
	margin-top: calc( var(--bb-amp-donate) * 1vw );
}

.bb-about-cta::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: calc( var(--bb-amp-donate) * 1vw );
	background-color: inherit;
	-webkit-mask-image: var(--bb-divider-donate-top);
	mask-image: var(--bb-divider-donate-top);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

.bb-about-cta__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: clamp( 1.25rem, 3.5vw, 3rem );
	align-items: center;
}

.bb-about-cta__mark {
	display: block;
	color: var(--wp--preset--color--base);
	opacity: 0.85;
}

.bb-about-cta__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.6rem, 3.6vw, 2.5rem );
	font-weight: 500;
	line-height: 1.1;
	margin: 0 0 0.6rem;
}

.bb-about-cta__text {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
	max-width: 30rem;
}

.bb-about-cta__action {
	text-align: center;
}

.bb-btn-invert {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9em 1.9em;
	border-radius: 5px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--terracotta-text);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.bb-btn-invert:hover,
.bb-btn-invert:focus {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--terracotta-text);
}

.bb-about-cta__note {
	display: block;
	font-size: 0.72rem;
	margin-top: 0.65rem;
	opacity: 0.9;
}

/* --------------------------------------------------------------------------
   About responsive
   -------------------------------------------------------------------------- */

@media ( max-width: 899px ) {
	.bb-about-hero__grid,
	.bb-about-mission__grid {
		min-height: 0;
	}

	.bb-about-hero__media,
	.bb-about-mission__media {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 4 / 3;
		margin-bottom: 1.5rem;
		-webkit-mask-image: var(--bb-clip-card-b);
		mask-image: var(--bb-clip-card-b);
	}

	.bb-about-story__inner,
	.bb-about-donors__grid,
	.bb-about-cta__inner {
		grid-template-columns: 1fr;
	}

	.bb-about-story__panel {
		position: relative;
		inset: auto;
		width: 100%;
		margin-top: 2rem;
		-webkit-mask-image: none;
		mask-image: none;
		border-radius: 10px 40px 10px 40px;
	}

	.bb-about-story__panel-inner {
		padding: 2rem 1.5rem;
		max-width: none;
	}

	.bb-about-donors__media {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 3 / 2;
		margin-bottom: 1.25rem;
	}

	.bb-about-donors__text {
		grid-column: 1;
	}

	.bb-archival-photo {
		margin-inline: auto;
	}

	.bb-about-cta__mark {
		display: none;
	}
}

/* ==========================================================================
   MOTION — view transition names and reveal stagger
   ==========================================================================
   Only the NAMES and the per-section RANGES live here, because the elements
   they address only exist on Home and About.

   All ::view-transition-* styling and every @keyframes lives in motion.css,
   which is global. That split is load-bearing: on About -> Donate the hero has
   an OLD snapshot and no new one, and that exit animation is styled by the
   DESTINATION document — which never loads this file. Keyframes here would
   silently fall back to the UA's default 250ms fade.

   Every selector below is ancestor-scoped. Two rendered elements sharing a
   view-transition-name makes ViewTransition.ready reject and the browser
   silently skips the transition on EVERY page of the site. .bb-section-brush
   renders four times per page, so an unscoped name would do exactly that.
   ========================================================================== */

/*
 * The hero artwork slot.
 *
 * On Home this is a single SVG carrying the photograph, the forest-green form
 * and a botanical; on About it is a masked photograph. Same slot in the
 * composition, different content — so this reads as a cross-fade plus a box
 * reshape rather than a true morph.
 *
 * The two never co-exist in one document, so one name across both selectors is
 * legal. Below 900px .bb-hero__art is display:none, so Home has no capture and
 * About -> Home degrades to a plain cross-fade. That is correct, not a bug.
 *
 * NOT split into a separate photograph layer, deliberately. The photograph's
 * bottom edge and the green form's top edge are the same line; as separately
 * positioned elements they drifted apart and opened a cream gap at some
 * widths, which is the entire reason they were unified into one SVG.
 */
.bb-hero__art,
.bb-about-hero__media {
	view-transition-name: bb-hero-art;
	view-transition-class: bb-media;
}

/*
 * The tapered brush stroke under the headline. Both pages emit it from
 * borrego_basic_brush(), so this is genuinely the same shape carrying over.
 * .bb-hero__brush is a dedicated class; the About hero uses the DEFAULT
 * .bb-section-brush, which appears four times on that page — hence the scope.
 */
.bb-hero__brush,
.bb-about-hero .bb-section-brush {
	view-transition-name: bb-hero-brush;
}

/*
 * Reveal stagger.
 *
 * animation-range is the ONLY stagger mechanism available: animation-delay is
 * ignored for progress-based timelines. The base rules and keyframes are in
 * motion.css; these override the range alone.
 *
 * Both gates are repeated here because @supports and @media do not inherit
 * across files — without them Firefox would parse rules it cannot drive, and
 * reduced-motion users would still get the stagger.
 */
@media ( prefers-reduced-motion: no-preference ) {
	@supports ( animation-timeline: view() ) {

		/* The three program cards already sit at different heights, so their
		   entry ranges are naturally offset and some stagger exists for free.
		   These values exaggerate it into a deliberate 1-2-3 cascade. */
		.bb-card--b { animation-range: entry 0%  entry 50%; }
		.bb-card--c { animation-range: entry 7%  entry 57%; }
		.bb-card--a { animation-range: entry 14% entry 64%; }

		/* Four figures in one horizontal row. Identical geometry means
		   identical entry ranges and a simultaneous reveal, so shifting each
		   range start is the only way to stagger a row. */
		.bb-home-impact__item:nth-child( 1 ) { animation-range: entry 0%  entry 45%; }
		.bb-home-impact__item:nth-child( 2 ) { animation-range: entry 8%  entry 53%; }
		.bb-home-impact__item:nth-child( 3 ) { animation-range: entry 16% entry 61%; }
		.bb-home-impact__item:nth-child( 4 ) { animation-range: entry 24% entry 69%; }

		.bb-eventlist__item:nth-child( 2 ) { animation-range: entry 8%  entry 58%; }
		.bb-eventlist__item:nth-child( 3 ) { animation-range: entry 16% entry 66%; }

		/* The best reveal on the site: five dated entries drawing themselves
		   down the terracotta rule. Sliding in from the leading edge makes the
		   motion follow the timeline's own axis. */
		.bb-about-story__entry {
			animation-name: bb-reveal-side;
		}

		.bb-about-story__entry:nth-child( 1 ) { animation-range: entry 0%  entry 40%; }
		.bb-about-story__entry:nth-child( 2 ) { animation-range: entry 6%  entry 46%; }
		.bb-about-story__entry:nth-child( 3 ) { animation-range: entry 12% entry 52%; }
		.bb-about-story__entry:nth-child( 4 ) { animation-range: entry 18% entry 58%; }
		.bb-about-story__entry:nth-child( 5 ) { animation-range: entry 24% entry 64%; }
	}
}

/* --------------------------------------------------------------------------
   Donate page — bands
   --------------------------------------------------------------------------
   Three bands, sand -> cream -> sand, with the same traced wave the home page's
   donation band uses. The wave tokens (--bb-divider-donate-top, --bb-amp-donate)
   are REUSED rather than re-traced, so the two donation moments on the site are
   visibly the same gesture: the home page's terracotta band and this page's
   giving band curve identically.

   The amplitude token is a fraction of WIDTH, so each band that carries a wave
   needs both the ::before strip and a matching margin-top to make room for it —
   see .bb-home-donate above for the original of this arrangement. */

.bb-donate-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--base-alt);
	padding-block: clamp( 2.5rem, 6vw, 4.5rem ) clamp( 3rem, 7vw, 5rem );
}

.bb-donate-hero__inner {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.bb-donate-hero .bb-eyebrow {
	color: var(--wp--preset--color--terracotta-text);
	margin: 0 0 0.5rem;
}

.bb-donate-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 2.5rem, 7vw, 4.5rem );
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--forest);
	margin: 0;
}

/* The campaign's own name, set as the emphasis rather than as jargon dropped
   into a sentence. Italic display, on its own line at every width. */
.bb-donate-hero__title em {
	display: block;
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--terracotta-text);
}

.bb-donate-hero__lead {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 1.2rem, 2.4vw, 1.6rem );
	line-height: 1.4;
	color: var(--wp--preset--color--forest);
	max-width: 40rem;
	margin: 1.25rem 0 0;
}

.bb-donate-hero__text {
	max-width: 44rem;
	margin: 1.25rem 0 0;
}

.bb-botanical--donate-hero {
	right: 1%;
	bottom: -8%;
	width: clamp( 5rem, 11vw, 10rem );
	opacity: 0.5;
}

/* The giving band. */
.bb-donate-give {
	position: relative;
	background-color: var(--wp--preset--color--base);
	padding-block: clamp( 2.5rem, 5vw, 4rem ) clamp( 3rem, 7vw, 5rem );
	margin-top: calc( var(--bb-amp-donate) * 1vw );
}

.bb-donate-give::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: calc( var(--bb-amp-donate) * 1vw );
	background-color: inherit;
	-webkit-mask-image: var(--bb-divider-donate-top);
	mask-image: var(--bb-divider-donate-top);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

.bb-donate-give__inner {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
	display: grid;
	gap: clamp( 2rem, 4vw, 3rem );
}

.bb-donate-give__lead {
	max-width: 34rem;
	margin: 0;
}

/*
 * THE COLUMN SPEC, and it is a spec rather than a guess.
 *
 * The band's inner box is 1200px minus 24px of padding each side, so at the
 * 900px breakpoint there are 852px to divide.
 *
 * THE COLUMN IS 30rem, NOT 27.5rem, AND THE EXTRA 2.5rem IS THE CARD'S OWN
 * PADDING. The embed wants 440px (27.5rem — the campaign's embed_max_width) and
 * it sits inside .bb-donate-form, which pads up to 1.5rem on each side. Sizing
 * the column to 27.5rem therefore delivers the embed ~390px and quietly renders
 * the form narrower than Givebutter designed it. Measured, not guessed: the
 * first build of this band did exactly that.
 *
 * The 20rem floor is the narrowest the embed stays usable. Between 900 and
 * ~1150px the tiles drop to a single column, which is the right thing to give
 * up — a cramped two-column tile grid beside a squeezed form is worse than one
 * clean column beside a correct one.
 */
@media ( min-width: 900px ) {
	.bb-donate-give__inner {
		grid-template-columns: 1fr minmax( 20rem, 30rem );
		align-items: start;
	}
}

/* Other ways to give. */
.bb-donate-other {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--base-alt);
	padding-block: clamp( 2.5rem, 5vw, 4rem ) clamp( 3rem, 7vw, 5rem );
	margin-top: calc( var(--bb-amp-donate) * 1vw );
}

.bb-donate-other::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: calc( var(--bb-amp-donate) * 1vw );
	background-color: inherit;
	-webkit-mask-image: var(--bb-divider-donate-top);
	mask-image: var(--bb-divider-donate-top);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

.bb-donate-other__inner {
	position: relative;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.bb-donate-other__grid {
	display: grid;
	gap: clamp( 1.25rem, 3vw, 2rem );
	margin-block-start: 1.75rem;
}

/*
 * Check-by-mail is NOT a sidebar. It takes the wider column of the two, and at
 * every width down to 782px it sits beside the donation boxes rather than under
 * them. A meaningful share of this organisation's donors write cheques, and
 * layout is the argument: put the address below the fold and the page has told
 * them, without saying it, that they are the second-class path.
 */
@media ( min-width: 782px ) {
	.bb-donate-other__grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

/* .bb-panel defaults to sand; on a sand band it needs to lift, not sink. */
.bb-donate-other .bb-panel {
	background-color: var(--wp--preset--color--base);
}

.bb-botanical--donate-other {
	right: 0;
	bottom: 0;
	width: clamp( 5rem, 12vw, 11rem );
	opacity: 0.4;
}