/* Companionship: one visual system, using the established fonts and palette. */
:root{--picture-radius:12px;--ease-welcome:cubic-bezier(.2,.7,.25,1);--nav-offset:108px}
h1,h2{text-wrap:balance}p,li,dd{text-wrap:pretty}
.eyebrow,.story-label,.kicker{font-size:13px;letter-spacing:.025em;text-transform:none;line-height:1.5}
.small-note,.listing-note,figcaption,.testimony-credit{font-variant-numeric:lining-nums}
.button,.text-link,button,summary,a{transition:color 180ms var(--ease-welcome),background-color 180ms var(--ease-welcome),border-color 180ms var(--ease-welcome)}
.button .arrow,.text-link .arrow{transition:transform 180ms var(--ease-welcome)}
@media(hover:hover){.button:hover .arrow--right,.text-link:hover .arrow--right{transform:translateX(3px)}}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--signal);outline-offset:4px}
.donate-section :is(a,button):focus-visible{outline-color:var(--butter)}
.site-header .header-inner{padding-block:9px}
.companion-brand--header{width:210px;min-height:82px;grid-template-columns:80px minmax(0,1fr);gap:7px}
.companion-brand--header .companion-brand-intro{font-size:18px;line-height:1.14;letter-spacing:-.025em}
.companion-brand--header .companion-brand-name{font-size:32px;line-height:1.08;letter-spacing:-.035em}
.companion-brand--header .companion-brand-descriptor{font-size:10px;letter-spacing:.1em;margin-top:5px}
.companion-brand-type{font-variation-settings:'SOFT' 100,'WONK' 1}
.site-header nav>a{font-size:14px;white-space:nowrap}
.site-header nav>a:hover{color:var(--signal)}
.site-header #navigation{column-gap:24px}
.dog-photo-link,.profile-portrait img,.profile-secondary-photo img,.team-card>img,.team-documentary img,.team-interview-frame,.support-result-photo{border-radius:var(--picture-radius)}
.dog-photo-link img{transition:none}.dog-photo-link:hover img{transform:none}
.outline-art{display:block;flex-shrink:0;max-width:100%;background:var(--ink);mask-image:var(--art);mask-size:contain;mask-position:center;mask-repeat:no-repeat;aspect-ratio:var(--art-ratio,1.5)}
.outline-art>img{width:100%;height:100%;object-fit:contain;opacity:0}
@supports not (mask-image:url('')){.outline-art{background:none}.outline-art>img{opacity:1}}
.organization-hero .outline-art,.support-hero .outline-art{width:100%;max-width:440px;margin-inline:auto}
.organization-hero .outline-art img,.support-hero .outline-art img{aspect-ratio:auto;border-radius:0}
.footer-main{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);column-gap:7%;row-gap:28px;align-items:start}
.site-footer{padding-block:36px 30px}
.site-footer .footer-motto{padding-bottom:25px;font-size:clamp(30px,3.3vw,45px);gap:28px}
.footer-motto>span{max-width:none}
.footer-motto .footer-companion{width:100px;height:auto;aspect-ratio:670/518}
.footer-identity{display:block}.footer-identity>div:last-child{margin-top:14px}
.companion-brand--footer{width:320px;min-height:64px;grid-template-columns:58px minmax(0,1fr);gap:12px}
.companion-brand--footer .companion-brand-intro,.companion-brand--footer .companion-brand-name{display:inline;font-size:24px;line-height:1.15;letter-spacing:-.035em;font-weight:600}
.companion-brand--footer .companion-brand-intro::after{content:' '}
.companion-brand--footer .companion-brand-descriptor{font-size:11px;letter-spacing:.09em;margin-top:6px}
.footer-identity p,.footer-identity small{font-size:13px;line-height:1.6}
.site-footer .footer-links{grid-column:auto;gap:22px;align-self:center;font-size:14px}
.footer-link-group>p{font-size:13px;letter-spacing:0;text-transform:none;margin-bottom:6px;font-weight:550}
.footer-link-group>a{padding-block:8px;min-height:44px}
.site-footer .footer-profiles{margin:0;padding-top:20px;font-size:13px;gap:6px 26px}
.footer-profiles a{min-height:44px;display:inline-flex;align-items:center;gap:7px}
.footer-profiles .arrow{width:16px;height:16px}
/* One brief greeting on arrival at the footer; never an endless loop. */
@keyframes companion-hello{0%,100%{transform:rotate(0)}40%{transform:rotate(-3deg)}70%{transform:rotate(1.5deg)}}
.footer-companion.is-greeting{transform-origin:50% 95%;animation:companion-hello 850ms var(--ease-welcome) 1}
@media(min-width:701px) and (max-width:1000px){.site-footer .footer-main{grid-template-columns:1fr;gap:26px}.site-footer .footer-identity{display:flex;align-items:center;gap:30px}.footer-identity>div:last-child{margin:0}.site-header #navigation{column-gap:16px}}
@media(min-width:701px) and (max-width:900px){:root{--nav-offset:108px}.site-header #navigation.open{max-height:calc(100svh - 110px)}}
@media(max-width:700px){
 :root{--nav-offset:94px}
 .site-header .header-inner{padding-block:8px;gap:0 12px}
 .companion-brand--header{width:170px;min-height:76px;grid-template-columns:68px minmax(0,1fr);gap:7px}
 .companion-brand--header .companion-brand-intro{font-size:15px}
 .companion-brand--header .companion-brand-name{font-size:27px}
 .companion-brand--header .companion-brand-descriptor{font-size:10px;margin-top:5px}
 .site-header .mobile-adopt{display:inline-flex;font-size:14px;margin-right:0;min-height:44px}
 .menu-toggle{font-size:14px;min-height:44px;padding-inline:12px}
 .site-header #navigation.open{max-height:calc(100svh - 96px)}
 .site-footer{padding-block:28px}
 .site-footer .footer-main{display:grid;grid-template-columns:1fr;gap:22px}
 .site-footer .footer-motto{font-size:30px;gap:20px;padding-bottom:22px}
 .footer-motto>span{max-width:235px}
 .footer-motto .footer-companion{width:76px}
 .site-footer .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
 .footer-link-group:last-child{grid-column:1/-1}
 .footer-link-group>a{min-height:44px;padding-block:10px}
 .site-footer .footer-profiles{gap:0 23px;padding-top:16px}
 .footer-profiles a{min-height:44px}
 .organization-hero .outline-art,.support-hero .outline-art{max-width:300px}
}
@media(max-width:359px){.companion-brand--header{width:143px;grid-template-columns:54px minmax(0,1fr);gap:5px}.companion-brand--header .companion-brand-intro{font-size:13px}.companion-brand--header .companion-brand-name{font-size:23px}.site-header .header-inner{gap:0 8px}.menu-toggle{padding-inline:10px}.footer-motto>span{font-size:26px}.companion-brand--footer{width:100%}.companion-brand--footer .companion-brand-intro,.companion-brand--footer .companion-brand-name{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.footer-companion.is-greeting{animation:none}.button:hover .arrow,.text-link:hover .arrow{transform:none}}
@media print{.outline-art{background:none}.outline-art>img{opacity:1}.site-footer{display:none}}
