/* ==========================================================================
   PUENTE LATINO ASSOCIATION — home.css
   Homepage composition. Class names describe the structures they style:
   home-hero, home-areas, home-featured, home-people, home-impact,
   home-podcast, home-gallery, home-happening, home-events, home-story,
   home-volunteer, home-partners, home-donate.
   The header, footer, tokens and impact system come from the global files.
   ========================================================================== */

/* ---------- Sections, in page order ---------- */
.home-hero{position: relative; height: min(100cqw, 900px); min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; margin-top: calc(var(--header-h) * -1);}
.home-hero__media{position: absolute; inset: 0px;}
.home-media{width: 100%; height: 100%;}
.home-hero__scrim{position: absolute; inset: 0px; background: linear-gradient(rgba(0, 0, 0, 0.297) 0%, rgba(0, 0, 0, 0.128) 45%, rgba(0, 0, 0, 0.637) 100%); pointer-events: none;}
.home-hero__content{position: relative; padding: 0px clamp(20px, 4cqi, 40px) clamp(40px, 6cqi, 72px); color: #fff;}
.home-hero__eyebrow{font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; opacity: 0.85; margin-bottom: 16px;}
.home-hero__title{font-family: var(--font-sans); font-weight: 700; font-size: clamp(2.6rem, 8cqw, 6.25rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 20px; color: #fff;}
.home-hero__tagline{font-size: clamp(17px, 1.6cqw, 22px); font-weight: 400; color: #fff; opacity: 0.92; margin: 0 0 32px; max-width: 32em;}
.home-hero__actions{display: flex; flex-wrap: wrap; gap: 14px;}
.home-btn{background: var(--puente-orange); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 26px; display: inline-block; min-height: 44px;}
.home-btn--ghost{background: transparent; border: 1.5px solid #fff; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 26px; display: inline-block; min-height: 44px;}
.home-btn--light{background: #fff; color: var(--puente-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 26px; display: inline-block; min-height: 44px;}
.home-hero__scrollcue{position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: 1px; height: 36px; background: rgba(255,255,255,0.6);}
.home-section{padding: clamp(48px, 8cqi, 96px) clamp(20px, 4cqi, 40px); background: #fff;}
.home-section__head{margin-bottom: clamp(28px, 5cqi, 48px);}
.home-heading--intro{font-family: var(--font-sans); font-weight: 700; font-size: 37.5px; line-height: 1.1; letter-spacing: -0.01em; margin: 0; max-width: 16em;}
.home-rule{width: 48px; height: 2px; background: var(--puente-orange); margin-top: 14px;}
.home-areas{display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--puente-rule);}
.home-area{background: #fff; display: block; position: relative; aspect-ratio: 3 / 5; overflow: hidden;}
.home-area__scrim{position: absolute; inset: 0px; background: linear-gradient(rgba(0,0,0,0) 35%, rgba(0,0,0,0.85) 100%);}
.home-area__content{position: absolute; left: 0; right: 0; bottom: 0; padding: 24px;}
.home-area__rule{width: 28px; height: 3px; background: var(--puente-orange); margin-bottom: 12px;}
.home-area__title{font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 6px;}
.home-area__text{font-size: 14px; color: #fff; opacity: 0.85; margin-bottom: 14px; max-width: 22em;}
.home-area__list{display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px;}
.home-area__listitem{font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; opacity: 0.7;}
.home-area__more{font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;}
.home-featured{padding: clamp(48px, 8cqi, 96px) clamp(20px, 4cqi, 40px); background: #fff; border-top: 1px solid var(--puente-rule);}
.home-featured__head{display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: clamp(28px, 5cqi, 48px);}
.home-eyebrow{font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--puente-orange); margin-bottom: 14px;}
.home-heading--tight{font-family: var(--font-sans); font-weight: 700; font-size: 37.5px; line-height: 1.03; letter-spacing: -0.02em; margin: 0;}
.home-featured__intro{font-size: 15px; line-height: 1.6; color: var(--puente-ink-2); max-width: 26em; margin: 0;}
.home-featured__grid{display: grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-areas: "comida comida comida comida cra cra" "comida comida comida comida cra cra" "comida comida comida comida cra cra" "xochi xochi alley alley alley alley" "xochi xochi alley alley alley alley"; grid-auto-rows: clamp(210px, 21cqw, 340px); gap: 2px; background: var(--puente-rule);}
.home-project--comida{grid-area: comida; position: relative; overflow: hidden; background: var(--puente-black); display: block;}
.home-project__media{position: absolute; inset: 0px; width: 100%; height: 100%;}
.home-project__scrim{position: absolute; inset: 0px; background: linear-gradient(rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.88) 100%);}
.home-project__content{position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 3cqi, 40px);}
.home-project__tag{display: inline-block; background: var(--puente-orange); color: var(--puente-black); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; margin-bottom: 16px;}
.home-project__title{font-size: clamp(1.92rem, 4.32cqw, 2.88rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: #fff; margin: 0 0 12px;}
.home-project__text{font-size: 15px; line-height: 1.55; color: #fff; opacity: 0.9; max-width: 26em; margin: 0 0 20px;}
.home-project__cta{display: inline-block; background: var(--puente-orange); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 15px 24px; min-height: 44px;}
.home-project--cra{grid-area: cra; position: relative; overflow: hidden; background: var(--puente-black); display: block;}
.home-project__scrim--bright{position: absolute; inset: 0px; background: linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.9) 100%);}
.home-project__content--sm{position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 2.5cqi, 32px);}
.home-project__eyebrow{font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--puente-orange); margin-bottom: 12px;}
.home-project__title--sm{font-size: clamp(1.56rem, 3.12cqw, 2.16rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: #fff; margin: 0 0 10px;}
.home-project__lede{font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 8px;}
.home-project__text--sm{font-size: 13px; line-height: 1.55; color: #fff; opacity: 0.8; margin: 0 0 16px;}
.home-project__link{font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; border-bottom: 2px solid var(--puente-orange); padding-bottom: 4px;}
.home-project--xochicalli{grid-area: xochi; position: relative; overflow: hidden; background: var(--puente-black); display: block;}
.home-project__text--alt{font-size: 13px; line-height: 1.55; color: #fff; opacity: 0.85; margin: 0 0 16px; max-width: 22em;}
.home-project--alleybrije{grid-area: alley; position: relative; overflow: hidden; background: var(--puente-black); display: block;}
.home-project__scrim--alt{position: absolute; inset: 0px; background: linear-gradient(rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.88) 100%);}
.home-project__lede--alt{font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 16px; max-width: 20em;}
.home-section--tint{padding: clamp(48px, 8cqi, 96px) clamp(20px, 4cqi, 40px); background: var(--puente-surface-2);}
.home-people__grid{display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5cqi, 64px); align-items: start;}
.home-people__head{margin-bottom: 20px;}
.home-people__text{font-size: 16px; line-height: 1.6; color: var(--puente-ink-2); max-width: 34em; margin: 0 0 clamp(28px, 5cqi, 48px);}
.home-people__steps{display: flex; flex-wrap: wrap; gap: clamp(24px, 4cqi, 48px);}
.home-people__step{min-width: 96px;}
.home-people__step-label{font-size: 37.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--puente-ink);}
.home-people__images{display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.home-people__image--wide{grid-column: 1 / 3; aspect-ratio: 16 / 10;}
.home-people__image{aspect-ratio: 1 / 1;}
.home-impact{padding: clamp(48px, 8cqi, 96px) clamp(20px, 4cqi, 40px); background: var(--puente-black); color: #fff;}
.home-impact__head{margin-bottom: clamp(32px, 6cqi, 56px);}
.home-heading--invert{font-family: var(--font-sans); font-weight: 700; font-size: 37.5px; line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: #fff;}
.home-impact__grid{display: grid; grid-template-columns:repeat(3,minmax(0,1fr));}
.home-impact__stat{padding: 20px 24px 20px 0; border-top: 1px solid rgba(255,255,255,0.2);}
.home-impact__figure{font-size: clamp(2.88rem, 8.4cqw, 4.8rem); font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1; margin-bottom: 10px;}
.home-impact__label{font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 6px;}
.home-impact__note{font-size: 11px; color: rgba(255,255,255,0.4);}
.home-impact__figure--accent{font-size: clamp(2.88rem, 8.4cqw, 4.8rem); font-weight: 700; letter-spacing: -0.02em; color: var(--puente-orange); line-height: 1; margin-bottom: 10px;}
.home-podcast__grid{display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5cqi, 56px); align-items: center;}
.home-podcast__frame{position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--puente-black); overflow: hidden;}
.home-podcast__scrim{position: absolute; inset: 0px; background: rgba(0,0,0, 0.297);}
.home-podcast__play{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border: 1.5px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; line-height: 1;}
.home-podcast__caption{position: absolute; left: 0; bottom: 0; padding: 16px 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff;}
.home-rule--stacked{width: 48px; height: 2px; background: var(--puente-orange); margin: 14px 0 20px;}
.home-podcast__blurb{font-size: clamp(1.32rem, 2.88cqw, 1.68rem); font-weight: 700; color: var(--puente-ink); line-height: 1.25; margin-bottom: 20px;}
.home-podcast__eyebrow{font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--puente-ink-3); margin-bottom: 8px;}
.home-podcast__episode{font-size: 37.5px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px;}
.home-podcast__text{font-size: 15px; line-height: 1.6; color: var(--puente-ink-2); max-width: 32em; margin: 0 0 28px;}
.home-podcast__actions{display: flex; flex-wrap: wrap; gap: 16px; align-items: center;}
.home-btn--ink{background: var(--puente-ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 26px; display: inline-block; min-height: 44px;}
.home-link--quiet{font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--puente-ink-4); border-bottom: 2px solid var(--puente-rule-2); padding-bottom: 4px;}
.home-note{margin-top: clamp(24px, 4cqi, 40px); padding: 14px 0 0; border-top: 1px dashed var(--puente-orange); font-size: 12px; color: var(--puente-ink-3);}
.home-note__strong{color: var(--puente-ink);}
.home-gallery{padding: clamp(48px, 8cqi, 96px) 0; background: #fff;}
.home-gallery__head{padding: 0 clamp(20px, 4cqi, 40px);}
.home-heading{font-family: var(--font-sans); font-weight: 700; font-size: 37.5px; line-height: 1.1; letter-spacing: -0.01em; margin: 0;}
.home-gallery__grid{display: grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-areas: "a a a b b c" "a a a b b c" "d d e e e e" "f f f g g h" "f f f g g h"; grid-auto-rows: clamp(190px, 19cqw, 300px); gap: 2px; background: var(--puente-rule);}
.home-gallery__cell--1{position: relative; background: #fff; overflow: hidden; grid-area: a; height: 100%;}
.home-gallery__caption{position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 2;}

/* Caption scrim — bottom-anchored gradient on each cell, matching the weight
   used on the hero and featured tiles so white captions clear 4.5:1 over
   golden-hour photography. */
.home-gallery__cell--1::after,.home-gallery__cell--2::after,.home-gallery__cell--3::after,
.home-gallery__cell--4::after,.home-gallery__cell--5::after,.home-gallery__cell--6::after,
.home-gallery__cell--7::after,.home-gallery__cell--8::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;
  background:linear-gradient(to top,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.58) 34%,rgba(0,0,0,0.22) 68%,rgba(0,0,0,0) 100%);
  pointer-events:none;z-index:1;
}
.home-gallery__tick--1{width: 22px; height: 3px; background: var(--puente-804); margin-bottom: 8px;}
.home-gallery__caption-text{font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; text-shadow: rgba(0,0,0,0.6) 0 1px 4px;}
.home-gallery__cell--2{position: relative; background: #fff; overflow: hidden; grid-area: b; height: 100%;}
.home-gallery__tick--2{width: 22px; height: 3px; background: var(--puente-808); margin-bottom: 8px;}
.home-gallery__cell--3{position: relative; background: #fff; overflow: hidden; grid-area: c; height: 100%;}
.home-gallery__tick--3{width: 22px; height: 3px; background: var(--puente-805); margin-bottom: 8px;}
.home-gallery__cell--4{position: relative; background: #fff; overflow: hidden; grid-area: d; height: 100%;}
.home-gallery__tick--4{width: 22px; height: 3px; background: var(--puente-353); margin-bottom: 8px;}
.home-gallery__cell--5{position: relative; background: #fff; overflow: hidden; grid-area: e; height: 100%;}
.home-gallery__tick--5{width: 22px; height: 3px; background: var(--puente-801); margin-bottom: 8px;}
.home-gallery__cell--6{position: relative; background: #fff; overflow: hidden; grid-area: f; height: 100%;}
.home-gallery__tick--6{width: 22px; height: 3px; background: var(--puente-814); margin-bottom: 8px;}
.home-gallery__cell--7{position: relative; background: #fff; overflow: hidden; grid-area: g; height: 100%;}
.home-gallery__tick--7{width: 22px; height: 3px; background: var(--puente-810); margin-bottom: 8px;}
.home-gallery__cell--8{position: relative; background: #fff; overflow: hidden; grid-area: h; height: 100%;}
.home-gallery__tick--8{width: 22px; height: 3px; background: var(--puente-0631); margin-bottom: 8px;}
.home-happening{position: relative; background: var(--puente-surface-2);}
.home-happening__grid{display: grid; grid-template-columns: 1fr 1fr;}
.home-happening__media{width: 100%; aspect-ratio: 16 / 10;}
.home-happening__content{padding: clamp(32px, 6cqi, 64px) clamp(24px, 4cqi, 56px); display: flex; flex-direction: column; justify-content: center;}
.home-happening__title{font-family: var(--font-sans); font-weight: 700; font-size: clamp(2.16rem, 5.28cqw, 3.12rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 16px;}
.home-happening__text{font-size: 15px; line-height: 1.6; color: var(--puente-ink-2); max-width: 30em; margin: 0 0 28px;}
.home-happening__cta{align-self: flex-start; background: var(--puente-ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 15px 24px;}
.home-happening__note{padding: 14px clamp(20px, 4cqi, 40px); background: var(--puente-orange-tint); border-top: 1px dashed var(--puente-orange); font-size: 12px; color: var(--puente-ink-3);}
.home-events__head{display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(28px, 5cqi, 48px);}
.home-events__link{font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--puente-ink);}
.home-events__grid{display: grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top: 1px solid var(--puente-rule);}
.home-event{display: block; min-width:0; overflow-wrap:anywhere; padding: 28px 24px 28px 0; border-right: 1px solid var(--puente-rule); border-bottom: 1px solid var(--puente-rule);}
.home-event__kicker{font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--puente-orange); margin-bottom: 14px;}
.home-event__title{overflow-wrap:anywhere; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--puente-ink); margin-bottom: 10px; line-height: 1.15;}
.home-event__text{font-size: 14px; color: var(--puente-ink-2); margin-bottom: 16px;}
.home-event__meta{font-size: 13px; color: var(--puente-ink-3); margin-bottom: 4px;}
.home-event__meta--last{font-size: 13px; color: var(--puente-ink-3); margin-bottom: 18px;}
.home-event__link{font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--puente-ink);}
.home-story__grid{display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: clamp(24px, 5cqi, 64px);}
.home-story__portrait{width: 100%; aspect-ratio: 4 / 5;}
.home-story__content{display: flex; flex-direction: column; justify-content: center;}
.home-story__title{font-family: var(--font-sans); font-weight: 700; font-size: 37.5px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 24px;}
.home-story__text{font-size: 15px; line-height: 1.6; color: var(--puente-ink-2); margin: 0 0 24px;}
.home-story__quote{margin: 0 0 28px; padding-left: 20px; border-left: 2px solid var(--puente-orange); font-size: 19px; font-weight: 400; font-style: normal; color: var(--puente-ink); line-height: 1.4;}
.home-story__link{align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--puente-ink); border-bottom: 2px solid var(--puente-orange); padding-bottom: 4px;}
.home-story__banner{width: 100%; aspect-ratio: 21 / 9; margin-top: clamp(24px, 5cqi, 48px);}
.home-volunteer{padding: clamp(48px, 8cqi, 96px) clamp(20px, 4cqi, 40px); background: var(--puente-orange); color: #fff;}
.home-volunteer__grid{display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5cqi, 56px); align-items: center;}
.home-heading--onaccent{font-family: var(--font-sans); font-weight: 700; font-size: 37.5px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 20px; color: #fff;}
.home-volunteer__steps{display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px;}
.home-volunteer__step{font-size: clamp(1.32rem, 3.12cqw, 1.8rem); font-weight: 700; color: #fff;}
.home-volunteer__text{font-size: 15px; line-height: 1.6; color: #fff; opacity: 0.92; max-width: 32em; margin: 0 0 28px;}
.home-volunteer__cta{background: #fff; color: var(--puente-orange); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 26px; display: inline-block;}
.home-volunteer__image{aspect-ratio: 3 / 4;}
.home-volunteer__image--offset{aspect-ratio: 3 / 4; margin-top: 32px;}
.home-partners__grid{display: grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top: 1px solid var(--puente-rule); border-left: 1px solid var(--puente-rule); margin-bottom: 32px;}
.home-partners__cell{aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--puente-rule); border-bottom: 1px solid var(--puente-rule); padding: 16px;}
.home-donate{position: relative; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden;}
.home-donate__scrim{position: absolute; inset: 0px; background: linear-gradient(rgba(0,0,0, 0.085) 0%, rgba(0,0,0, 0.68) 100%); pointer-events: none;}
.home-donate__content{position: relative; padding: clamp(40px, 7cqi, 72px) clamp(20px, 4cqi, 40px); color: #fff; max-width: 36em;}
.home-donate__text{font-size: 15px; line-height: 1.6; color: #fff; opacity: 0.92; margin: 0 0 28px;}
.home-donate__cta{background: var(--puente-orange); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 17px 30px; display: inline-block;}

/* ---------- Responsive ---------- */
@media (max-width:1520px){
  .home-hero{margin-top:calc(var(--header-h) * -1);}
}
@media (max-width:1023px){
  .home-hero{margin-top:calc(var(--header-h-sm) * -1);}
}

@media (max-width:1024px){
  .home-featured__grid{grid-template-columns:1fr 1fr;grid-template-areas:"comida comida" "comida comida" "cra cra" "xochi alley" "xochi alley";}
  .home-gallery__grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"a a b b" "a a b b" "c c d d" "e e e e" "f f g h";}
  .home-impact__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-partners__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .home-events__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}
@media (max-width:767px){
  .home-hero{margin-top:calc(var(--header-h-sm) * -1);min-height:520px;}
  .home-areas,.home-people__grid,.home-people__images,.home-podcast__grid,.home-happening__grid,.home-events__grid,.home-story__grid,.home-volunteer__grid{grid-template-columns:minmax(0,1fr);}
  .home-featured__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"comida" "comida" "cra" "xochi" "alley";grid-auto-rows:minmax(220px,auto);}
  .home-gallery__grid{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b c" "d e" "f f" "g h";grid-auto-rows:minmax(140px,auto);}
  .home-impact__grid{grid-template-columns:1fr;}
  .home-partners__grid{grid-template-columns:1fr 1fr;}
  .home-people__image--wide{grid-column:auto;}
  .home-event{padding-right:0;border-right:none;}
  .home-volunteer__image--offset{margin-top:0;}
  .home-donate{min-height:420px;}
  .home-story__banner{aspect-ratio:16/9;}
}

/* Photo-tile overlays: copy sits over imagery, so the tiles keep a generous
   inset and grow to fit rather than holding a fixed ratio. */
.home-area__content,.home-project__content,.home-project__content--sm{padding: clamp(24px, 3cqi, 44px);}
.home-area{aspect-ratio:auto;min-height:clamp(420px,48cqw,660px);display:flex;flex-direction:column;justify-content:flex-end;}
.home-area > .media-placeholder{position:absolute;inset:0;}
.home-area__content{position:relative;z-index:2;}
.home-featured__grid{grid-auto-rows:auto;}
.home-project--comida,.home-project--cra,.home-project--xochicalli,.home-project--alleybrije{display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(340px,36cqw,560px);}
.home-project__content,.home-project__content--sm{position:relative;z-index:2;}
@media (max-width:1024px){
  .home-areas{grid-template-columns:minmax(0,1fr);}
  .home-featured__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"comida" "cra" "xochi" "alley";}
}

/* Small cropped tiles carry a smaller placeholder label so the subject
   note always fits inside the crop. */
.home-people__image,.home-partners__cell,.home-people__images .media-placeholder{font-size:16px;line-height:1.35;letter-spacing:0.04em;padding:12px;}
@media (max-width:767px){
  .home-people__image,.home-partners__cell,.home-people__images .media-placeholder{font-size:14px;}
}

/* Tile scrims only: the hero and donate bands keep their authored gradients. */
/* One smooth gradient per tile — no banded slab behind the copy. It stays open
   at the top of the photograph and eases to near-solid under the type. */
.home-area__scrim{background:linear-gradient(rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.102) 26%, rgba(0,0,0, 0.357) 46%, rgba(0,0,0, 0.612) 66%, rgba(0,0,0, 0.782) 100%);}
/* The featured tiles are shorter than the work tiles, so the same ramp read
   darker across the visible photo: the dark stops start later and land 15%
   lighter. */
.home-project__scrim{background:linear-gradient(rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.08) 34%, rgba(0,0,0, 0.28) 54%, rgba(0,0,0, 0.52) 74%, rgba(0,0,0, 0.665) 100%);}
/* The CRA, Xochicalli and Alleybrije photographs are bright exactly where the
   copy sits (a projector screen, a white wall), so those two scrims carry more
   weight than the food-distribution tile. */
.home-project__scrim--bright{background:linear-gradient(rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.14) 30%, rgba(0,0,0, 0.46) 54%, rgba(0,0,0, 0.72) 74%, rgba(0,0,0, 0.88) 100%);}
.home-project__scrim--alt{background:linear-gradient(rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.11) 32%, rgba(0,0,0, 0.38) 54%, rgba(0,0,0, 0.64) 74%, rgba(0,0,0, 0.82) 100%);}
/* Eyebrows set over photography take the hero's treatment — white, not orange.
   Orange at 26px cannot hold 3:1 against a sunlit wall at any scrim weight. */
.home-project__content--sm .home-project__eyebrow{color:#fff;}
/* Placeholder notes sit at the top of their box so they never collide with
   the copy that overlays the imagery. */
.home-media,.home-project__media{align-items:flex-start;justify-content:flex-start;text-align:left;font-size:16px;letter-spacing:0.04em;opacity:0.7;}

/* The poster photograph sits under the player so the hero is never an empty
   black box — on Firefox, where autoplay is blocked, this is what shows. */
.home-hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* Hero video: a 16:9 Vimeo player scaled to cover the hero box, center crop. */
.pk-hero-video{
  position:absolute;inset:0;overflow:hidden;background:transparent;
  opacity:0;transition:opacity 400ms ease;
}
.pk-hero-video.is-playing{opacity:1;}
.pk-hero-video iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;pointer-events:none;
}

@media (max-width:1100px){
  /* The hero photograph underlaps the masthead at every width now, so the
     overlay header stands; only the scroll cue is too tight to keep. */
  .home-hero__scrollcue{display:none;}
}

/* Hero sound toggle — quiet, bottom-right of the video frame. */
.pk-sound{
  position:absolute;right:clamp(16px,3cqi,32px);bottom:clamp(16px,3cqi,32px);z-index:3;
  display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:12px 18px;
  background:rgba(0,0,0,0.45);border:1px solid rgba(255,255,255,0.55);color:#fff;
  font-family:var(--font-sans);font-size:18px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;
  transition:background 180ms ease,border-color 180ms ease;
}
.pk-sound:hover{background:rgba(0,0,0,0.7);border-color:#fff;}
.pk-sound__bars{display:flex;align-items:flex-end;gap:3px;height:14px;}
.pk-sound__bars i{display:block;width:3px;height:5px;background:currentColor;}
.pk-sound__bars i:nth-child(2){height:10px;}
.pk-sound__bars i:nth-child(3){height:14px;}
.pk-sound:not(.is-on) .pk-sound__bars i{height:5px;opacity:0.6;}
.pk-sound.is-on{background:var(--puente-orange);border-color:var(--puente-orange);}

/* Inline video embed (podcast episode) — fills its 16:9 frame, player chrome
   intact so people can play, pause and control volume themselves. */
.pk-embed{background:var(--puente-black);}
.pk-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* Media + copy splits stack until the viewport is wide enough for the
   16:9 frame to stand within reach of the copy's height. */
@media (max-width:1400px){
  .home-podcast__grid{grid-template-columns:minmax(0,1fr);align-items:start;}
  .home-story__grid{grid-template-columns:minmax(0,1fr);}
  .home-happening__grid{grid-template-columns:1fr;}
}

/* Photographs in the tile grid crop to fill, focal point set per image. */
img.home-media,img.home-project__media{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}

/* Overlay copy sits above its scrim; a soft text shadow keeps headings
   legible where the photograph beneath is light. */
/* The scrim is localized to the copy block instead of dimming the whole
   photograph: the top of each image stays open, and the type sits on a
   ground dark enough to hold contrast over bright walls and ceilings. */
.home-area__content,.home-project__content,.home-project__content--sm{padding-top:clamp(48px,6cqi,88px);text-shadow:0 1px 10px rgba(0,0,0,0.45);}

/* Partner logos — art-directed as a single quiet band rather than a boxed
   grid. Seven marks of wildly different formats (a circle, a building
   illustration, three horizontal lockups, one very wide wordmark) can't share
   one cell size without one of them shouting, so each is set to a height that
   matches the others OPTICALLY, and the ruled cells give way to one hairline
   above and below the band. */
/* A 12-column track lets both rows span the full measure: four marks at three
   columns each, then three at four columns each. Every logo is optically
   centred in its own column, so the two rows align instead of ragging. */
.home-partners__grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(20px,2.5cqi,40px);row-gap:clamp(44px,5cqi,76px);
  border:0;border-top:1px solid var(--puente-rule);border-bottom:1px solid var(--puente-rule);
  padding:clamp(48px,6cqi,80px) 0;margin-bottom:clamp(32px,4cqi,48px);
}
.home-partners__cell{aspect-ratio:auto;border:0;padding:0;display:flex;align-items:center;justify-content:center;}
.home-partners__cell:nth-child(-n+4){grid-column:span 3;}
.home-partners__cell:nth-child(n+5){grid-column:span 4;}
@media (max-width:900px){
  .home-partners__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-partners__cell:nth-child(-n+4),.home-partners__cell:nth-child(n+5){grid-column:span 1;}
  /* The Hahn lockup is 5.5:1 — in a half-width cell it goes width-bound and its
     micro-caps line falls to a few pixels, so it takes the full measure. */
  .home-partners__cell:nth-child(7){grid-column:1 / -1;}
  .pk-plogo--wordmark{height:auto;width:min(100%,340px);}
}
.pk-plogo{display:block;width:auto;max-width:100%;object-fit:contain;}
/* Heights are set from a px scale, not container widths: #partners sits in the
   1200px content column, so cqw minimums collapsed every mark onto its floor.
   The drawn Wrigley storefront needs the most height of the seven — its sign
   text is a fraction of the artwork — and the Hahn wordmark needs more than a
   lockup because its micro-caps line is a ninth of the file. */
.pk-plogo--mark{height:clamp(88px,8cqw,104px);}
.pk-plogo--drawn{height:clamp(96px,9cqw,112px);}
.pk-plogo--upright{height:clamp(76px,7cqw,88px);}
.pk-plogo--lockup{height:clamp(54px,5cqw,62px);}
.pk-plogo--wordmark{height:clamp(44px,4cqw,50px);}
@media (max-width:767px){
  .home-partners__grid{column-gap:24px;row-gap:36px;padding:40px 0;}
  .pk-plogo--mark{height:84px;}
  .pk-plogo--drawn{height:96px;}
  .pk-plogo--upright{height:70px;}
  .pk-plogo--lockup{height:48px;}
  .pk-plogo--wordmark{height:auto;width:min(100%,340px);}
}

/* The 90px display size is a desktop setting: on a phone it puts one word per
   line. Section headings step down with the viewport; the ratio between them
   and the body copy stays intact. */
@media (max-width:1200px){
  .home-heading--intro,.home-heading--tight,.home-people__step-label,.home-heading--invert,.home-podcast__episode,.home-heading,.home-story__title,.home-heading--onaccent{font-size:28.5px;}
}
@media (max-width:900px){
  .home-heading--intro,.home-heading--tight,.home-people__step-label,.home-heading--invert,.home-podcast__episode,.home-heading,.home-story__title,.home-heading--onaccent{font-size:21.5px;}
}
@media (max-width:600px){
  .home-heading--intro,.home-heading--tight,.home-people__step-label,.home-heading--invert,.home-podcast__episode,.home-heading,.home-story__title,.home-heading--onaccent{font-size:16.5px;}
  .home-area__text,.home-featured__intro,.home-project__text,.home-project__text--sm,.home-project__text--alt,.home-people__text,.home-podcast__text,.home-happening__text,.home-event__text,.home-story__text,.home-volunteer__text,.home-donate__text{font-size:18px;}
  .home-project__title,.home-project__title--sm{font-size:11.5px;}
  .home-project__lede,.home-project__lede--alt,.home-podcast__blurb{font-size:20px;}
  .home-impact__figure{font-size:16.5px;}
}

/* Overflow safety: 40-90px display type must break rather than push the
   grid track past the viewport on narrow screens. */
.home-story__title,.home-heading,.home-heading--intro,.home-heading--tight,
.home-heading--invert,.home-heading--onaccent,.home-podcast__episode,
.home-project__title,.home-project__title--sm,.home-people__step-label,
.home-hero__title{overflow-wrap:anywhere;}
.home-story__content,.home-story__portrait,.home-project__content,
.home-podcast__text,.home-area__content{min-width:0;}

/* Narrow viewports: no single token may exceed its column. */
@media (max-width:600px){
  .home-area__title,.home-area__text,.home-area__listitem,.home-area__more,
  .home-project__title,.home-project__title--sm,.home-project__lede,
  .home-project__lede--alt,.home-project__text,.home-project__text--sm,
  .home-project__text--alt,.home-project__link,.home-event__title,
  .home-event__text,.home-gallery__caption-text,.home-podcast__episode,
  .home-podcast__blurb,.home-happening__text,.home-story__text,
  .home-story__quote,.home-volunteer__text,.home-donate__text{overflow-wrap:anywhere;}
}