/* Mobile collaboration: the approved tree is one continuous background. */
@media(max-width:700px){
 .hp-card-carousel #hp-card-collaboration .hp-hero-wrap{position:relative;isolation:isolate;display:block;padding-bottom:174px;overflow:hidden}
 .hp-card-carousel #hp-card-collaboration .hp-hero-copy{position:relative;z-index:2;width:100%;max-width:none}
 .hp-card-carousel #hp-card-collaboration .hp-hero-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;margin:0;z-index:0}
 .hp-card-carousel #hp-card-collaboration .hp-hero-art img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;object-position:88% center;mask-image:none}
 .hp-card-carousel #hp-card-collaboration .hp-hero-art::after{display:block;position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(244,239,231,.95) 0%,rgba(244,239,231,.9) 26%,rgba(244,239,231,.84) 47%,rgba(244,239,231,.56) 62%,rgba(244,239,231,.2) 79%,rgba(244,239,231,.94) 100%);pointer-events:none}
 body.site-typography .hp-card-carousel #hp-card-collaboration h1{font-size:clamp(24px,6.6vw,28px)!important;line-height:1.42!important;word-break:keep-all;overflow-wrap:normal}
 .hp-card-carousel #hp-card-collaboration .hp-tree-annotations{z-index:1}
 .hp-card-carousel #hp-card-collaboration .hp-tree-label{color:#2F4A3F}
 .hp-card-carousel #hp-card-collaboration .hp-tree-label span{background:rgba(36,56,47,.9);color:#F4EFE7}
}

/* The same compact height applies to all six mobile stories. */
@media(max-width:700px){
 .hp-card-carousel{--hp-mobile-target:min(560px,calc(100dvh - 130px))}
 .hp-card-carousel .hp-card-slide>:is(.hp-hero-wrap,.hp-story-inner,.hp-exchange-map-inner,.hp-referral-inner){padding-top:20px;padding-bottom:68px;gap:12px}
 .hp-card-carousel #hp-card-collaboration .hp-hero-wrap{padding-top:20px;padding-bottom:174px}
 .hp-card-carousel #hp-card-years .hp-story-inner{padding-top:20px;padding-bottom:92px}
 .hp-card-carousel .hp-world-map{height:210px;margin-top:4px;margin-bottom:26px}
 .hp-card-carousel .hp-giving-visual img{max-height:180px}
 .hp-referral-card .rdn-visual{width:min(65vw,max(180px,26dvh));max-width:220px}
}

/* Compact mobile stories; navigation stays above the actual fixed quick menu. */
@media(max-width:700px){
 .hp-card-carousel{--hp-mobile-target:min(470px,calc(100dvh - 130px));overflow:visible!important}
 .hp-card-carousel #hp-card-collaboration .hp-tree-annotations{display:none!important}
 .hp-card-carousel .hp-card-slide>:is(.hp-hero-wrap,.hp-story-inner,.hp-exchange-map-inner,.hp-referral-inner),
 .hp-card-carousel #hp-card-collaboration .hp-hero-wrap,
 .hp-card-carousel #hp-card-years .hp-story-inner{padding-top:16px;padding-bottom:76px;gap:8px}
 body.site-typography .hp-card-carousel .hp-card-slide :is(h1,h2),
 body.site-typography .hp-card-carousel #hp-card-collaboration h1,
 body.site-typography #hp-card-years h2,body.site-typography #hp-card-giving h2,body.site-typography #hp-card-referral h2{font-size:clamp(23px,6.4vw,26px)!important;line-height:1.35!important;margin-bottom:12px}
 body.site-typography .hp-card-carousel .hp-card-slide :is(.hp-story-label,.hp-intro),
 body.site-typography .hp-card-carousel .hp-collaboration .hp-intro{margin-bottom:10px}
 body.site-typography .hp-card-carousel .hp-card-slide :is(.hp-hero-description,.hp-story-copy>p:not(.hp-story-label):not(.hp-exchange-map-stat)){font-size:16px!important;line-height:1.5!important;margin-bottom:14px}
 body.site-typography .hp-card-carousel .hp-exchange-map-stat{line-height:1.5!important;margin-bottom:12px}
 .hp-card-carousel .hp-world-map{height:180px;margin-top:0;margin-bottom:16px}
 .hp-card-carousel .hp-giving-visual img{max-height:136px}
 .hp-referral-card .rdn-visual{width:174px;max-width:60vw}
 .hp-referral-card .rdn-center-value{font-size:31px!important}
 .hp-referral-card .rdn-legend li{min-height:32px}
 .hp-card-carousel #hp-card-years .hp-story-visual figcaption{bottom:62px}
 body.hs-home.site-typography [data-home-carousel] .hp-card-controls{position:sticky!important;inset:auto!important;bottom:var(--hp-quick-height,61px)!important;z-index:12;min-height:56px;height:56px;box-sizing:border-box;margin:-56px 0 0;padding:6px 18px;background:#F4EFE7!important;color:#2F4A3F!important;border-top:1px solid #2F4A3F26;justify-content:center}
 body.hs-home.site-typography [data-home-carousel] .hp-card-controls :is(button,span,b){color:#2F4A3F!important}
 body.hs-home.site-typography [data-home-carousel] .hp-card-controls button{width:44px;height:44px;min-width:44px;border:0!important;border-radius:0;background:transparent!important}
 .hp-card-carousel .hp-card-controls::before{display:none}
 .hp-card-carousel .hp-card-controls .hp-card-caption{display:none}
}
@media(max-width:700px){
 /* clip does not create the invisible scroll container that defeats sticky. */
 body.hs-home .hs-main{overflow:clip}
}
@media(max-width:700px){
 body.hs-home.site-typography [data-home-carousel][data-active-slide] .hp-card-controls :is(button,span,b){color:#2F4A3F!important}
}
@media(max-width:700px){
 body.hs-home.site-typography [data-home-carousel][data-active-slide] .hp-card-controls{background:#F4EFE7!important}
}
/* When browser chrome leaves little height, put the controls above the story
   instead of covering its lower text or call to action. The story can scroll. */
@media(max-width:700px){
 .hp-card-carousel.hp-short-viewport.is-ready{display:flex;flex-direction:column}
 .hp-card-carousel.hp-short-viewport.is-ready .hp-card-viewport{order:1;width:100%}
 body.hs-home.site-typography [data-home-carousel].hp-short-viewport[data-active-slide] .hp-card-controls{order:0;position:sticky!important;top:var(--hp-header-height,69px)!important;bottom:auto!important;margin:0;width:100%;border-top:0;border-bottom:1px solid #2F4A3F26}
 .hp-card-carousel.hp-short-viewport .hp-card-slide>:is(.hp-hero-wrap,.hp-story-inner,.hp-exchange-map-inner,.hp-referral-inner),
 .hp-card-carousel.hp-short-viewport #hp-card-collaboration .hp-hero-wrap,
 .hp-card-carousel.hp-short-viewport #hp-card-years .hp-story-inner{padding-bottom:36px}
 .hp-card-carousel.hp-short-viewport #hp-card-years .hp-story-visual figcaption{bottom:10px}
 .hp-short-viewport .hp-faculty-card .hp-story-visual figcaption{bottom:10px}
}

/* Keep the treatment name as one word on narrow and enlarged-text screens. */
@media(max-width:700px){.hp-card-carousel #hp-main-title .hp-title-word{display:inline-block;white-space:nowrap;font:inherit;color:inherit;letter-spacing:inherit}}

/* Referral wording stays intact; a compact legend wraps by item, not syllable. */
@media(max-width:700px){
 .hp-card-carousel #referral-heading .hp-title-word{display:inline-block;white-space:nowrap;font:inherit;color:inherit;letter-spacing:inherit}
 .hp-card-carousel #hp-card-referral .rdn-legend{display:flex;flex-wrap:wrap;gap:0 12px}
 .hp-card-carousel #hp-card-referral .rdn-legend li{flex:1 1 calc(50% - 6px);min-width:max-content;max-width:100%;grid-template-columns:10px minmax(max-content,1fr) max-content;gap:6px;min-height:30px;font-size:13px;line-height:1.6}
 .hp-card-carousel #hp-card-referral .rdn-legend li>span:not(.rdn-swatch){white-space:nowrap;font-size:13px}
 .hp-card-carousel #hp-card-referral .rdn-swatch{width:10px;height:10px}
}

/* Referral chart: one shared design on desktop and mobile. */
.hp-card-carousel #hp-card-referral .rdn-visual{width:100%;max-width:460px}
.hp-card-carousel #hp-card-referral .rdn-figure{gap:14px}
@media(max-width:700px){
 .hp-card-carousel #hp-card-referral .rdn-visual{width:71.875vw;max-width:100%;align-self:center;margin-top:8px}
 .hp-card-carousel #hp-card-referral .rdn-figure{gap:8px;margin-top:2px}
}

/* Keep the existing shared mobile height; compact only this story's content. */
@media(max-width:700px){
 body.site-typography .hp-card-carousel #hp-card-referral .hp-story-label{margin-bottom:4px!important}
 body.site-typography .hp-card-carousel #hp-card-referral h2{font-size:26px!important;line-height:1.35!important;margin-bottom:8px}
 .hp-card-carousel #hp-card-referral .rdn-caption{width:100%;max-width:none}
 .hp-card-carousel #hp-card-referral .rdn-figure{gap:0;margin-top:0}
 .hp-card-carousel:not(.hp-short-viewport) #hp-card-referral .hp-referral-inner{padding-bottom:58px}
}